# Hw1 校園接駁車管理系統（單機版本）

### I. Introduction

請在 RPi 上撰寫一支校園接駁車系統。讓使用者可以選擇要去哪個站點、選擇票種與張數，並在送出訂單後看到車輛接近進度與應付金額，最後順利上車。

### II. Specification
系統一次只需服務一名使用者，待此使用者完成搭乘（模擬到站）後才進行下一次服務。

系統內有三個接駁站點（距離代表車子到你的距離）

* Library Stop（距離 3km）

* Gym Stop（距離 5km）

* Dorm Stop（距離 8km）

每個站點提供兩種票種

1)Library Stop

* student ticket: $30

* regular ticket: $50

2)Gym Stop

* student ticket: $40

* regular ticket: $60

3)Dorm Stop

* student ticket: $55

* regular ticket: $80

選單動作主要分為:
主選單：

1. stop list：顯示站點與距離

2. order：開始訂位（選站點 → 選票種與張數 → confirm/cancel）

order 流程：

* 先選擇站點（Library / Gym / Dorm）
* 進入該站點的票種選單後，有以下指令可用：

1. 票種1：選票種1，輸入張數
2. 票種2：選票種2，輸入張數
3. confirm：送出訂單，開始模擬接駁車接近
4. cancel：取消訂單，回主畫面

I/O 與顯示（完全沿用原作業規格）
Terminal

用數字鍵選單、輸入張數

顯示選單或系統狀態

7-Segment（顯示應付金額）

在 confirm 後顯示使用者應付金額

先顯示最高位，之後每 0.5 秒顯示下一位

最後停在個位數不再變動

例如金額 1140：顯示 1 -> 1 -> 4 -> 0，最後停在 0

LED（顯示接駁車接近進度）

confirm 後用 LED 顯示「車子距離正在縮短」

若距離 8km：一開始亮 led1~8

若距離 5km：一開始亮 led1~5

若距離 3km：一開始亮 led1~3

每 1 秒減少一個燈

燈全滅代表「車已到站」

範例（距離 3km）：

led1~3 → led1~2 → led1 → 全滅
### **font-weight**

可以改變文字的粗細。
使用英文（normal、bold、bolder、lighter）或數字設定。
預設值為 **normal**，也就是 400。

設計稿若是呈現 **Bold**，可以直接設定 `font-weight: bold;` 或是 `font-weight: 700;`
若是 **Medium**，需設定為 `font-weight: 500;`（font-weight 沒有 medium 的值）

其餘常用說法對應的數字可以參考此[對照表](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping)

> 只要有運用到文字的部分，都要記得依照設計稿（下圖）設定文字大小 font-size、行高 line-height、文字粗細 font-weight

### **font-style**

預設值為 normal。
`font-style: italic;` 將文字變為斜體。

## 題目

請依照課程最終作業一設計稿，使用該 [CodePen](https://codepen.io/fhljksmg-the-styleful/pen/RNNOWEN?editors=1100) 將下方程式碼「...」部分加入文字樣式設定

### 標題樣式

### 內文樣式

<div class="container">
  <h4 class="title">
    品牌簡介
  </h4>
  <h5 class="subtitle">
    URBNSTEP 是來自台灣的街頭機能鞋品牌，致力於打造「風格與功能並存」的鞋履體驗。
  </h5>
  <p class="content">
    在城市與日常的交錯中，我們看見了步伐的力量。URBNSTEP 誕生於一群設計師與文化觀察者的交會點——一個相信風格應該來自「真實場景」而非伸展台的團隊。從都市的清晨街角，到午後光影灑落的人行道，我們捕捉的是那些不被刻意編排的時刻，那些用一雙鞋踏出的態度與節奏。每一款鞋的誕生，不只是設計與工藝的結晶，更是一段來自城市靈感的延伸，我們相信：鞋，是穿在腳上的語言。
  </p>
  <p class="content">
    URBNSTEP 的名字來自 Urban + Step，代表著我們對每一個走進城市生活的人致敬。我們不追逐潮流，我們關注輪廓、材質、穿著者的心境與身型，創造能陪伴你走進自我節奏的經典之作。選用高品質麂皮、織物與天然橡膠大底，並與獨立插畫家、攝影師合作，打造具有街頭詩意的形象風格。URBNSTEP 相信，美不是炫耀，而是由內而外的呼吸——一雙鞋，剛好說出你心中的樣子。
  </p>
</div>

> ==CSS 的部分要記得載入字體==，若還不熟悉可以回顧 [Day9 任務](https://hackmd.io/iYPoGB0ISsq2ez-4DU9ccw)，或是參考課程影片「字體設定全攻略」。

body{
  font-family: 'Noto Sans TC', serif;
  color: #212529;
}

.container {
  max-width: 856px;
  margin: 0 auto;
}

.title {
  ...
  ...
  ...
  margin-bottom: 24px;
}

.subtitle {
  ...
  ...
  ...
  margin-bottom: 16px;
  color: #57A203;
}

.content {
  ...
}

### 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
https://codepen.io/fhljksmg-the-styleful/pen/Wbvezpa?editors=1100
-->

### 回報區

| # | Discord | CodePen / 答案 |
|:---:|:-------:|:--------------:|
| 01 | Jenna | [Codepen](https://codepen.io/abiscc14/pen/MYwLxoM)|
| 02 | 孟 | [Codepen](https://codepen.io/Mengru0503/pen/ogXmVeB)|
| 03 | Katie | [Codepen](https://codepen.io/Katiekatiehsu/pen/ZYGwPXg?editors=1100)|
| 04 | Nooooora |[Codepen](https://codepen.io/Nora-Ch/pen/KwpJEZY?editors=1100) |
| 05 | Esther |[Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/gbpqEBK?editors=1100) |
| 06 | 立花 |[Codepen](https://codepen.io/kj25940858/pen/yyNZwwL?editors=1100) |
| 07 | Calvin |[Codepen](https://codepen.io/CalvinChang/pen/GgJzeYd?editors=1100)|
| 08 | Satar |[Codepen](https://codepen.io/SatarKuo/pen/ZYGwPNb?editors=1100)|
| 09 | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/gbpqEJd)|
| 10 | Tetsu |[Codepen](https://codepen.io/ttgchang/pen/JodxVPJ) |
| 11 | 登登登 |[Codepen](https://codepen.io/Duncanin/pen/GgJzLow) |
| 12 | Jerome |[Codepen](https://codepen.io/qsc002163/pen/raVPbLW?editors=1100) |
| 13 | 那個貓貓 |[Codepen](https://codepen.io/zorakao/pen/PwqVgGL?editors=1100) |
| 14 | 牛奶嘎 |[Codepen](https://codepen.io/Joyce-Niu/pen/dPoaLRK) |
| 15 | Joseph_Kyuu |[Codepen](https://codepen.io/zrzfastd-the-reactor/pen/wBaNZZK) |
|16|Saika|[Codepen](https://codepen.io/saika4501/pen/RNPvOdm?editors=1100)|
| 17 | kashiwatei |[Codepen](https://codepen.io/kashiwatei/pen/azOXxrK) |
| 18 | pastor |[Codepen](https://codepen.io/peter_hung/pen/xbGMeNJ) |
| 18 | Klaus Chen |[Codepen](https://codepen.io/Klaus-Chen/pen/NPqoVgj) |
| 20 | Sylvie |[Codepen](https://codepen.io/shuping-xiao/pen/RNPvmbX?editors=1100) |
| 21 | suemma |[Codepen](https://codepen.io/suemma/pen/EajrBoV)|
| 22 | 力文 |[Codepen](https://codepen.io/liwenchiou/pen/gbpqNEj?editors=1100)|
| 23 | Sam.S.T.Y | [CodePen](https://codepen.io/Sam-Yang-the-animator/pen/QwbYeEW?editors=1100)
| 24 | RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/WbvPVxe?editors=1100) |
| 25 | 柔術小子 |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/KwpJjJO) |
| 26 | Sid |[Codepen](https://codepen.io/monkeybear721/pen/yyNZmxg?editors=1100) |
| 27 | 社子畢卡索 |[Codepen](https://codepen.io/pen?template=jEPdgKq) |
| 28 | 7Lun |[Codepen](https://codepen.io/mfyvqhsn-the-/pen/emNxqbE?editors=1100)|
| 29 | JiaMori |[Codepen](https://codepen.io/jiamori/pen/qEdvWag) |
| 30 | 西娜 |[Codepen](https://codepen.io/Sheena-the-encoder/pen/yyNwBXv) |
| 31 | 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/ogXVvOX) |
| 32 | Fan |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/YPXgzRE?editors=1100) |
| 33 | cks40660 |[Codepen](https://codepen.io/CKS40660/pen/jEPJEwP) |
| 34 | 燕 |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/azOMzwL) |
| 35 | Geno Chen |[Codepen](https://codepen.io/kai-chen-the-sans/pen/QwbowJN?editors=1100) |
| 36 | PK |[Codepen](https://codepen.io/Percy-Ku/pen/WbvmbBx) |
| 37 | CBK |[Codepen](https://codepen.io/BK-C-the-styleful/pen/LEVaEog) |
| 38 | Elvina |[Codepen](https://codepen.io/Elvina-the-selector/pen/RNPdPrb?editors=1100) |
| 39 | Kiku |[Codepen](https://codepen.io/Kiku0110/pen/jEPJEer?editors=1100) |
| 40 | 禹成林 |[Codepen](https://codepen.io/useirin/pen/qEdvdJe) |
| 41 | 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/pvJYjyQ) |
| 42 | 老屠 |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/JodzYWG?editors=1100) |
| 43 | Yan* |[Codepen](https://codepen.io/Yan-L/pen/vEOPNXx?editors=1100) |
| 44 | ahga |[Codepen](https://codepen.io/zmapzfdv-the-vuer/pen/JodzRYJ)
| 45 | Fang |[Codepen](https://codepen.io/Fang-the-encoder/pen/gbpEmey)
| 46 | Chris Wang |[Codepen](https://codepen.io/Wang-Chris/pen/qEdvrzM)
| 47 | Gloria |[Codepen](https://codepen.io/ilztzykz-the-decoder/pen/raVRwOb?editors=1100) |
| 48 | An |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/VYLRWMP?editors=1100) |
| 49 | Min |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/zxGbzVq?editors=1100) |
| 50 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/emNXEeB) |
| 51 | LouisaFish |[Codepen](https://codepen.io/Louisa-Fish/pen/YPXgrXM?editors=1100) |
| 52 | 随縁 |[Codepen](https://codepen.io/anki0072011/pen/ByNbGMP) |
| 53 | Celia |[Codepen](https://codepen.io/Cindy-Ho/pen/VYLRgqw) |
| 54 | Evelyn |[Codepen](https://codepen.io/ewdyvnmp-the-typescripter/pen/gbpENag) |
| 55 | Huang Eagle |[Codepen](https://codepen.io/YuCi/pen/dPoLYpY) |
| 56 | Hao |[Codepen](https://codepen.io/Howell/pen/LEVvZJZ) |
| 57 | Scrooge |[Codepen](https://codepen.io/yrkmdwch-the-encoder/pen/QwbPgZV?editors=1100) |
| 58 | Alyssa |[Codepen](https://codepen.io/AlyssaYen/pen/myJgMOx?editors=1100) |
| 59 | TY |[Codepen](https://codepen.io/Ted-Y/pen/gbpyqPJ?editors=1100) |
| 60 | ying |[Codepen](https://codepen.io/Lara-Lin/pen/emNowJj?editors=1100) |
| 61 | Peggy |[Codepen](https://codepen.io/Peggy_C/pen/wBabwwL?editors=1100) |
| 61 | kate_bearchou |[Codepen](https://codepen.io/ydzfqmuh-the-selector/pen/KwpLMMZ?editors=1100) |
| 62 | ja4071 |[Codepen](https://codepen.io/SHAO-L/pen/jEPoVOE) |
| 63 | Michelle |[Codepen](https://codepen.io/bastar_dize/pen/JodqgmE?editors=1100) |
| 64 | tanuki_狸貓 |[Codepen](https://codepen.io/tanuki320/pen/ByNgdGP?editors=1100) |
| 65 | Doreen翠翠翠 |[Codepen](https://codepen.io/cuei-sian-Wang/pen/vEOPNqd) |
| 66 | NGNLzenos |[Codepen](https://codepen.io/xmijbzdb-the-https://hackmd.io/@hex-courseanimator/pen/NPqZeBL) |
| 67 | 平平 |[Codepen](https://codepen.io/ypinpin/pen/WbvVQGx) |
| 68 | YUCCC |[Codepen](https://codepen.io/taroooo/pen/ogXKLRK?editors=1100) |
| 69 | Atian |[Codepen](https://codepen.io/A-Tian-Chen/pen/emNqgaj) |
| 70 | Antonio |[Codepen](https://codepen.io/gwhvusel-the-builder/pen/dPoxabN) |
| 71 | 雅潔 |[Codepen](https://codepen.io/MOMOYA/pen/JoYdGoM) |
| 72 | B |[Codepen](https://codepen.io/Babel777/pen/OPyJeZG) |
| 73 | Lika |[Codepen](https://codepen.io/wlyvctff-the-solid/pen/yyYNWxq) |
| 74 | Fancy |[Codepen](https://codepen.io/Fancy-the-lessful/pen/YPyXmRB?editors=1100) |
| 75 | water | [Codepen](https://codepen.io/wateruby/pen/wBKKqgb)|
| 76 | 主委加碼啦幹 |[Codepen](https://codepen.io/popbob-the-bashful/pen/YPywZOj) |
| 77 | Lucy |[Codepen](https://codepen.io/abiscc14/pen/MYwLxoM) |
| 78 | 小趴 | [Codepen](https://codepen.io/papa2415/pen/dPYMWvq)|
| 79 | 伊迪 | [Codepen](https://codepen.io/eku10rei/pen/QwjNQxE?editors=1100)|
| 80 | cindy |[Codepen](https://codepen.io/a50134/pen/MYajXvw?editors=1100)|
| 81 | KOMATSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/yyYadjX?editors=1100)|
| 82 | 大頭祐祐 | [Codepen](https://codepen.io/Big_Head_YK/pen/GgpNEQb) |
| 83 | Tou | [Codepen](https://codepen.io/Datou-Huang/pen/QwjdXBb?editors=1100)|
| 84 | Midy Wu |[Codepen](https://codepen.io/work-wu/pen/WbQZxyz) |
| 84 | Mini |[Codepen](https://codepen.io/miiinii32-Cheng/pen/jEbZjmb) |
| 85 | 4ping | [Codepen](https://codepen.io/928Libra/pen/LEpmdmO)
| 86 | maerc |[Codepen](https://codepen.io/Lu-Liangyu/pen/ByoqeQg?editors=1100) |
| 87 | Wafa |[Codepen](https://codepen.io/dqricwgo-the-reactor/pen/gbaZybM)|
| 88 | PAgaNiNi |[Codepen](https://codepen.io/PA-OTTER/pen/empooMy?editors=1100)|
| 89 | 星雪糖 |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/ZYQzWyy?editors=1100)|

<!-- 快速複製 -->
<!-- | 排序 | 姓名 |[Codepen](連結) | -->