---
# System prepended metadata

title: 個人Project-潘兆新

---

# 個人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)
