Skip to content

Commit

Permalink
page html css Writing...
Browse files Browse the repository at this point in the history
  • Loading branch information
蔡銘凱 committed Jul 8, 2022
1 parent eb0b2b9 commit 58ba9a9
Show file tree
Hide file tree
Showing 24 changed files with 548 additions and 90 deletions.
4 changes: 4 additions & 0 deletions app/Config/Routes.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,12 @@
//view

$routes->get('/','Home::index');
$routes->get('register', 'Home::register');


//測試
$routes->get('lobby', 'Home::lobby');
$routes->get('personal', 'Home::personal');
// $routes->get('/', 'Home::index');
$routes->get('pwa','Home::pwa');
$routes->get('qrcode', 'QrcodeRender::index');
Expand Down
25 changes: 24 additions & 1 deletion app/Controllers/Home.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,36 @@

class Home extends BaseController
{
public $title = '營建剩餘土石方憑證系統';
public function index()
{
$data = [
"title"=> '營建剩餘土石方憑證系統'
"title"=> $this->title
];
return view('home',$data);
}
public function register()
{
$data = [
"title" => $this->title.' - 司機註冊'
];
return view('register', $data);
}

public function lobby()
{
$data = [
"title" => $this->title . ' - 大廳'
];
return view('lobby', $data);
}
public function personal()
{
$data = [
"title" => $this->title . ' - 個人資訊'
];
return view('personal', $data);
}
public function pwa()
{
return view('pwa');
Expand Down
3 changes: 2 additions & 1 deletion app/Views/base_component/css.php
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/style.css'); ?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/style.css'); ?>">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
1 change: 1 addition & 0 deletions app/Views/base_component/footer.php
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

</body>

</html>
3 changes: 2 additions & 1 deletion app/Views/base_component/js.php
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script type="text/javascript" src="<?php echo base_url('assets/js/bootstrap.bundle.min.js'); ?>"></script>
<script>

<script>
// PWA Service-work
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('<?php echo base_url('/service-worker.js') ?>')
Expand Down
22 changes: 22 additions & 0 deletions app/Views/base_component/nav.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<a class="navbar-brand" href="#">營建剩餘土石方憑證系統</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
登入
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="<?php echo base_url('/') ?>">一般登入</a></li>
<li><a class="dropdown-item" href="<?php echo base_url('register') ?>">清運司機註冊</a></li>
</ul>
</li>

</div>
</div>
</div>
</nav>
117 changes: 60 additions & 57 deletions app/Views/home.php
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,71 @@
<!-- 網頁主要進入點(/) -->
<?= $this->extend('layout_blade/home_layout') ?>

<?= $this->section('customCss') ?>
<style>
.factor {
background-image: url(<?php echo base_url('assets/images/pic1.jpg') ?>);
background-repeat: no-repeat;
/* background-size: 100% 100%; */
/* background-size: cover; */
max-width: 100%;
object-fit: cover;
background-position: center center;
/* -webkit-clip-path: polygon(0% 100%, 0% 0%, 100% 0%); */
}
</style>
<?= $this->endSection() ?>
<?= $this->section('main') ?>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<a class="navbar-brand" href="#">營建剩餘土石方憑證系統</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
登入
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">承造廠商</a></li>
<li><a class="dropdown-item" href="#">清運公司</a></li>
<li><a class="dropdown-item" href="#">司機</a></li>
<li><a class="dropdown-item" href="#">收容場所</a></li>
<li><a class="dropdown-item" href="#">政府單位</a></li>
</ul>
</li>

<div class="jumbotron jumbotron-fluid" style="background-image:url('<?php echo base_url('assets/images/personalbanner.jpg') ?>') ;background-repeat: no-repeat;
background-size: cover;">
<div class="container">
<div class="row">
<div class="col-12 mx-auto p-4">
<h1 class="display-4 fw-bold text-white text-shadow">營建剩餘土石方憑證系統</h1>
<p class="lead fw-bold text-white text-shadow p-0 m-0">Construction of remaining earthwork voucher system</p>
</div>
</div>
</div>
</nav>
<div style="margin-top: 60px;">
<h1 class="text-center mt-3 text-white fw-bolder" style="font-size:45px">營建剩餘土石方</h1>
<h1 class="text-center text-white fs-2 fw-bolder">憑證系統</h1>


</div>
</div>


<div class="row mt-4 p-0">
<div class="col-xl-4 col-12 bg-light shadow p-4 mb-3 factor">
承造廠商
</div>
<div class="col-xl-4 col-12 bg-light shadow p-4 mb-3">
清運公司
</div>
<div class="col-xl-4 col-12 bg-light shadow p-4 mb-3">
司機
</div>
<div class="col-xl-4 col-12 bg-light shadow p-4 mb-3">
收容場所
</div>
<div class="col-xl-4 col-12 bg-light shadow p-4 mb-3">
政府單位
</div>
<div class="container">
<div class="row mt-4 p-0 ">
<div class=" col-11 bg-light shadow p-4 m-1 mx-auto shadow">
<h2 class="text-center mb-2">使用者登入</h2>
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">電子郵件</label>
<input type="email" class="form-control" id="account" name="account" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text"></div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">密碼</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="remrberMeCheckBox" name="remrberMeCheckBox">
<label class="form-check-label" for="exampleCheck1">記住我</label>
</div>
<div class="d-grid gap-2">
<button type="button" class="btn btn-primary btn-lg" id="login">登入</button>
<a type="button" class="btn btn-secondary btn-lg" href="<?php echo base_url('register') ?>">清運司機註冊</a>
</div>

</form>
</div>


</div>
</div>

<?= $this->endSection() ?>
<?= $this->section('customJs') ?>
<script>
function $(e) {
return document.querySelector(e);
}
if (localStorage.getItem('account')) {
$('#account').value = localStorage.getItem('account');
}
if (localStorage.getItem('password')) {
$('#password').value = localStorage.getItem('password');
$('#remrberMeCheckBox').checked = true;
}
$('#login').onclick = function() {
localStorage.setItem('account', $('#account').value);
if ($('#remrberMeCheckBox').checked) {
localStorage.setItem('password', $('#password').value);
} else {
localStorage.removeItem('password');
}
}
</script>
<?= $this->endSection() ?>
3 changes: 2 additions & 1 deletion app/Views/layout_blade/home_layout.php
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<?= $this->include('base_component/header') ?>
<?= $this->include('base_component/css') ?>
<?= $this->renderSection('customCss') ?>
<?= $this->include('base_component/nav') ?>
<?= $this->renderSection('main') ?>
<?= $this->renderSection('customJs') ?>
<?= $this->include('base_component/js') ?>
<?= $this->renderSection('customJs') ?>
<?= $this->include('base_component/footer') ?>
8 changes: 8 additions & 0 deletions app/Views/layout_blade/lobby_layout.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<?= $this->include('base_component/header') ?>
<?= $this->include('base_component/css') ?>
<?= $this->renderSection('customCss') ?>
<?= $this->include('base_component/nav') ?>
<?= $this->renderSection('main') ?>
<?= $this->include('base_component/js') ?>
<?= $this->renderSection('customJs') ?>
<?= $this->include('base_component/footer') ?>
8 changes: 8 additions & 0 deletions app/Views/layout_blade/personal_layout.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<?= $this->include('base_component/header') ?>
<?= $this->include('base_component/css') ?>
<?= $this->renderSection('customCss') ?>
<?= $this->include('base_component/nav') ?>
<?= $this->renderSection('main') ?>
<?= $this->include('base_component/js') ?>
<?= $this->renderSection('customJs') ?>
<?= $this->include('base_component/footer') ?>
8 changes: 8 additions & 0 deletions app/Views/layout_blade/register_layout.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<?= $this->include('base_component/header') ?>
<?= $this->include('base_component/css') ?>
<?= $this->renderSection('customCss') ?>
<?= $this->include('base_component/nav') ?>
<?= $this->renderSection('main') ?>
<?= $this->include('base_component/js') ?>
<?= $this->renderSection('customJs') ?>
<?= $this->include('base_component/footer') ?>
85 changes: 85 additions & 0 deletions app/Views/lobby.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!-- 各身分登入後大廳 -->

<?= $this->extend('layout_blade/lobby_layout') ?>
<?= $this->section('customCss') ?>
<?= $this->endSection() ?>
<?= $this->section('main') ?>
<div class="jumbotron jumbotron-fluid" style="background-image:url('<?php echo base_url('assets/images/personalbanner.jpg') ?>') ;background-repeat: no-repeat;
background-size: cover;">
<div class="container">
<div class="row">
<div class="col-12 mx-auto p-4">
<h1 class="display-4 fw-bold text-white text-shadow">營建剩餘土石方憑證系統</h1>
<p class="lead fw-bold text-white text-shadow p-0 m-0">Construction of remaining earthwork voucher system</p>
</div>
</div>


</div>
</div>
<div class="container">
<div class="row mt-4">
<div class="col-11 bg-light shadow p-4 m-1 mx-auto shadow">
<p class="p-0 m-0 h4">目前登入身分 : <span>xxx</span></p>
</div>
</div>
</div>

<div class="container">
<div class="row mt-4 p-0 ">
<h2 class="text-center">功能列表</h2>
<!-- include lobby main page start-->
<div class=" col-11 bg-light shadow p-4 m-1 mx-auto shadow rounded">
<div class="row">
<div class="col-4 border-end d-flex align-items-center justify-content-center">
<i class="bi bi-building " style="font-size: 2rem;"></i>
</div>
<div class="col-8">
<p class="h4 p-0 m-0 text-center">公司資訊</p>
<p class="h5 p-0 m-0 text-center">Company Information</p>
</div>
</div>

</div>
<div class=" col-11 bg-light shadow p-4 m-1 mx-auto shadow rounded">
<div class="row">
<div class="col-4 border-end d-flex align-items-center justify-content-center">
<i class="bi bi-file-earmark" style="font-size: 2rem;"></i>
</div>
<div class="col-8">
<p class="h4 text-center">聯單使用</p>
<p class="h5 p-0 m-0 text-center">The Single Use</p>
</div>
</div>

</div>
<div class=" col-11 bg-light shadow p-4 m-1 mx-auto shadow rounded">
<div class="row">
<div class="col-4 border-end d-flex align-items-center justify-content-center">
<i class="bi bi-person" style="font-size: 2rem;"></i>
</div>
<div class="col-8">
<p class="h4 text-center">個人資訊</p>
<p class="h5 p-0 m-0 text-center">Personal Information</p>
</div>
</div>

</div>
<div class=" col-11 bg-light shadow p-4 m-1 mx-auto shadow rounded">

<div class="row">
<div class="col-4 border-end d-flex align-items-center justify-content-center">
<i class="bi bi-folder-check" style="font-size: 2rem;"></i>
</div>
<div class="col-8">
<p class="h4 text-center">工程結案區</p>
<p class="h5 p-0 m-0 text-center">Project Closed Area</p>
</div>
</div>
</div>
<!-- end -->

</div>
</div>

<?= $this->endSection() ?>
Loading

0 comments on commit 58ba9a9

Please sign in to comment.