# 個人Project-潘兆新 [image的檔案資料夾](https://drive.google.com/drive/folders/1HQJIjc6_fUjUPvbTXicSSpBo8xdWU2Hc?usp=sharing) ### 部落格 :::info CSS的部份超醜 * 有些不確定有沒有功能 * 有些應該可以用class直接控制 * 有些設定重複了 ::: ```xml! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <title>Document</title> <style> .col-lg-8:has(.name){ flex-direction: column; display: flex; justify-content: center; align-items: center; } .test{ width: 100%; height: 100%; /* object-fit: cover; */ } .sociallink .card-body{ display: flex; /* justify-content: center; */ align-items: center; } .testlink{ display: inline-block; margin-left: auto; margin-right: auto; } .testlink img{ display: block; } @media screen and (max-width:768px){ .sociallink .card-body{ justify-content: center; } .card-title{ text-align: center; } } </style> </head> <body> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-5"> <div class="container-fluid"> <a class="navbar-brand" href="#">NKFW</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mx-auto"> <li class="nav-item"> <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Archives</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Project</a> </li> <li class="nav-item"> <a class="nav-link" href="#" tabindex="-1" aria-disabled="true">About</a> </li> </ul> </div> </div> </nav> <div class="container content"> <div class="row g-5 align-items-start"> <div class="col-4 p-4 bg-light personalinfo rounded-5"> <div class="row g-3 mb-4"> <div class="col-lg-4"> <img src="/img/head.png" class="img-fluid"> </div> <div class="col-lg-8"> <h1 class="name text-center">Chris Pan</h1> <p><small>NCU, IPEECS</small></p> </div> </div> <div class="row row-cols-lg-3"> <div class="card bg-light mb-2 p-2 border-0 sociallink"> <div class="row g-0"> <div class="col-md-4"> <a href="https://www.instagram.com/chris.pan.42453/" class="testlink"> <img src="/img/ig.png" alt="" class="w-75 d-block mx-auto"> </a> </div> <div class="col-md-8"> <div class="card-body h-100 p-0"> <h4 class="card-title">IG</h4> </div> </div> </div> </div> <div class="card bg-light p-2 border-0 sociallink"> <div class="row g-0"> <div class="col-md-4"> <a href="https://www.facebook.com/profile.php?id=100015205991886" class="testlink"> <img src="/img/fb.png" alt="" class="w-75 d-block mx-auto"> </a> </div> <div class="col-md-8"> <div class="card-body h-100 p-0"> <h4 class="card-title text-center">FB</h4> </div> </div> </div> </div> <div class="card bg-light p-2 border-0 sociallink"> <div class="row g-0"> <div class="col-md-4"> <a href="https://github.com/chris-pan-0220" class="testlink"> <img src="/img/github.png" alt="" class="w-75 d-block mx-auto"> </a> </div> <div class="col-md-8"> <div class="card-body h-100 p-0"> <h4 class="card-title text-center">Github</h4> </div> </div> </div> </div> </div> </div> <div class="col-8 p-4"> <div class="card mb-3"> <div class="row g-0"> <div class="col-lg-4"> <img src="/img/education.jpg" class="w-100 h-100 rounded-start" alt="..."> </div> <div class="col-lg-8"> <div class="card-body"> <h5 class="card-title">Education</h5> <ul class="list-group list-group-flush"> <li class="list-group-item">National Central University</li> <li class="list-group-item">Wen-Hua Senior High School, Taichung</li> <li class="list-group-item">Lizen Junior High School, Taichung</li> </ul> </div> </div> </div> </div> <div class="card mb-3"> <div class="row g-0"> <div class="col-lg-4"> <img src="/img/CS.png" class="w-100 h-100 rounded-start" alt="..."> </div> <div class="col-lg-8"> <div class="card-body"> <h5 class="card-title">Major</h5> <ul class="list-group list-group-flush"> <li class="list-group-item">Computer science</li> <li class="list-group-item">Electrical engineering</li> </ul> </div> </div> </div> </div> <div class="card mb-3"> <div class="row g-0"> <div class="col-lg-4"> <img src="/img/skill.webp" class="w-100 h-100 rounded-start" alt="..."> </div> <div class="col-lg-8"> <div class="card-body"> <h5 class="card-title">Skill</h5> <ul class="list-group list-group-flush"> <li class="list-group-item">Competitive Programming</li> <li class="list-group-item">Python Programming</li> <li class="list-group-item">Web Design</li> </ul> </div> </div> </div> </div> </div> </div> </div> </body> </html> ``` ### (偽)點餐系統 ```xml! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>點餐平台</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <title>Document</title> <style> .test-img{ max-height: 200px; object-fit: cover; } </style> </head> <body> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> <nav class="navbar navbar-expand-xxl bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">NKFW</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"> <a class="nav-link active" aria-current="page" href="#">首頁</a> <a class="nav-link" href="#">訂餐紀錄</a> <a class="nav-link">使用說明</a> <a class="nav-link" href="#">登入</a> </div> </div> </div> </nav> <div class="container"> <div class="row m-3"> <nav aria-label="Page navigation example"> <ul class="pagination d-flex justify-content-center"> <li class="page-item"><a class="page-link" href="#">上一頁</a></li> <li class="page-item"><a class="page-link active" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">下一頁</a></li> </ul> </nav> </div> <h1 class="text text-center m-3">御饌坊</h1> <div class="row row-cols-1 row-cols-md-2 g-3 m-3 align-items-start"> <div class="col"> <div class="card h-100"> <img src="/img/無骨雞排.jpg"..." class="test-img"> <div class="card-body"> <h3>御饌坊 | A 廣東皮蛋瘦肉粥 VS無骨香雞排</h3> <h6 class="fw-light">資訊未提供</h6> <div class="info d-flex justify-content-between"> <div class="left"> <div class="border border-danger-subtle rounded-3 p-2 d-inline-block">780 (大卡)</div> <div class="border border-warning-subtle rounded-3 mx-2 p-2 d-inline-block">60</div> </div> <div class="right"> <button type="button" class="btn d-inline-block" data-bs-toggle="modal" data-bs-target="#exampleModal"> > </button> </div> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body p-0"> <div class="card rounded-0"> <img src="/img/無骨雞排.jpg" alt="..." class="test-img"> <div class="card-body"> <table class="table"> <thead> <tr> <th scope="col">營養成分</th> <th scope="col">總量</th> </tr> </thead> <tbody> <tr> <td>卡路里</td> <td>780 (大卡)</td> </tr> <tr> <td>脂肪</td> <td>16 (公克)</td> </tr> <tr> <td>醣類</td> <td>118 (公克)</td> </tr> <tr> <td>蛋白質</td> <td>38 (公克)</td> </tr> </tbody> </table> </div> </div> </div> <div class="modal-footer"> <div class="border border-warning-subtle rounded-3 mx-2 p-2 d-inline-block">60</div> <button type="button" class="btn btn-dark-subtle" data-bs-dismiss="modal">關閉</button> <button type="button" class="btn btn-light">點餐</button> </div> </div> </div> </div> </div> </div> </div> </div> <div class="col"> <div class="card h-100"> <img src="/img/還沒有東西.png" alt="..." class="test-img"> <div class="card-body"> <h3>御饌坊 | B 正宗日式大阪黃金豬排丼飯</h3> <h6 class="fw-light">時蔬、黃金豬排、花枝丸</h6> <div class="info d-flex justify-content-between"> <div class="left"> <div class="border border-danger-subtle rounded-3 p-2 d-inline-block">802 (大卡)</div> <div class="border border-warning-subtle rounded-3 mx-2 p-2 d-inline-block">60</div> </div> <div class="right"> <button type="button" class="btn d-inline-block" data-bs-toggle="modal" data-bs-target="#exampleModal"> > </button> </div> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body p-0"> <div class="card rounded-0"> <img src="/img/還沒有東西.png" alt="..." > <div class="card-body"> <table class="table"> <thead> <tr> <th scope="col">營養成分</th> <th scope="col">總量</th> </tr> </thead> <tbody> <tr> <td>卡路里</td> <td>802 (大卡)</td> </tr> <tr> <td>脂肪</td> <td>18 (公克)</td> </tr> <tr> <td>醣類</td> <td>116 (公克)</td> </tr> <tr> <td>蛋白質</td> <td>46 (公克)</td> </tr> </tbody> </table> </div> </div> </div> <div class="modal-footer"> <div class="border border-warning-subtle rounded-3 mx-2 p-2 d-inline-block">60</div> <button type="button" class="btn btn-dark-subtle" data-bs-dismiss="modal">關閉</button> <button type="button" class="btn btn-light">點餐</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> <h1 class="text text-center m-3">素食業者</h1> <div class="row row-cols-1 row-cols-md-2"> </div> <h1 class="text text-center m-3">快樂餐飲</h1> <div class="row row-cols-1 row-cols-md-2 m-3"> </div> </div> </body> </html> ``` # To-do list * [localStorage的使用](https://medium.com/%E9%BA%A5%E5%85%8B%E7%9A%84%E5%8D%8A%E8%B7%AF%E5%87%BA%E5%AE%B6%E7%AD%86%E8%A8%98/javascript-localstorage-%E7%9A%84%E4%BD%BF%E7%94%A8-e0da6f402453) * JSON格式轉換 * [CSS手刻內容卷軸](https://hsuchihting.github.io/css/20200410/3203726250/) * [日期與時間](https://pjchender.dev/javascript/js-date-time/) * [背景模糊參考作法](https://www.w3schools.com/howto/howto_css_blurred_background.asp) * [fontawesome](https://fontawesome.com/) * onclick function * [create/append childnode](https://ithelp.ithome.com.tw/articles/10236891?sc=iThomeR) * [onclick帶參數](https://www.cnblogs.com/chunyansong/p/12551688.html) * [背景圖片可以用的API](https://ithelp.ithome.com.tw/articles/10247379?fbclid=IwAR0YVW9F9poXQYdcmhkqPt5t11Q_IvA0auFRf8E6S-ilLIDz45ZrcCUmXu4)