昨天介紹了bootstrap的元件，今天要進入AAPD切版的最後一天了
這次的切版倒是也不難，難的是要開始學著用JS去補足切版，因為有些畫面是使用者操作後會產生的結果，而且通常都有很多種狀態，單純切出設計稿的其中一種狀態其實沒有多大的意義。直接上程式碼
<section class="homepage bg-primary-light position-relative">
<div class="container pt-8 pb-16">
<h3 class="fs-7 fw-bold text-center mb-3">嗨， Monica！</h3>
<div class="d-flex align-items-center justify-content-center mb-6">
<i class="bi bi-clock-fill fz-4 me-1"></i>
<h4 class="fs-3">您今日已冥想 0 分鐘。</h4>
</div>
<div
class="swiper-calendar bg-white rounded-4 overflow-hidden py-3 mx-auto"
style="width: 308px"
>
<ul class="swiper-wrapper px-5 m-0">
<li class="swiper-slide">
<div class="day-item d-flex flex-column align-items-center">
<span class="day">SA</span>
<p class="date mb-1">20</p>
<img
src="/assets/images/calendar-doll/mood-icon-3.svg"
width="24"
alt=""
/>
</div>
</li>
<li class="swiper-slide">
<div class="day-item d-flex flex-column align-items-center">
<span class="day">SU</span>
<p class="date mb-1">21</p>
<img
src="/assets/images/calendar-doll/mood-icon-5.svg"
width="24"
alt=""
/>
</div>
</li>
<li class="swiper-slide">
<div class="day-item d-flex flex-column align-items-center">
<span class="day">MO</span>
<p class="date mb-1">22</p>
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" fill="#E4E2DD" />
</svg>
</div>
</li>
<li class="swiper-slide">
<div class="day-item d-flex flex-column align-items-center">
<span class="day">TU</span>
<p class="date mb-1">23</p>
<img
src="/assets/images/calendar-doll/mood-icon-1.svg"
width="24"
alt=""
/>
</div>
</li>
<li class="swiper-slide">
<div class="day-item d-flex flex-column align-items-center">
<span class="day">WE</span>
<p class="date mb-1">24</p>
<img
src="/assets/images/calendar-doll/mood-icon-2.svg"
width="24"
alt=""
/>
</div>
</li>
<li class="swiper-slide">
<div class="day-item d-flex flex-column align-items-center">
<span class="day">TH</span>
<p class="date mb-1">25</p>
<img
src="/assets/images/calendar-doll/mood-icon-4.svg"
width="24"
alt=""
/>
</div>
</li>
<li class="swiper-slide">
<div class="day-item d-flex flex-column align-items-center">
<span class="day">FR</span>
<p class="date mb-1">26</p>
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" fill="#E4E2DD" />
</svg>
</div>
</li>
<li class="swiper-slide">
<div class="day-item d-flex flex-column align-items-center">
<span class="day">SA</span>
<p class="date mb-1">27</p>
<img
src="/assets/images/calendar-doll/mood-icon-5.svg"
width="24"
alt=""
/>
</div>
</li>
<li class="swiper-slide">
<div class="day-item d-flex flex-column align-items-center">
<span class="day">SU</span>
<p class="date mb-1">28</p>
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" fill="#E4E2DD" />
</svg>
</div>
</li>
</ul>
</div>
<h4 class="fs-4 fw-bold text-center mt-8 mb-3">正念冥想</h4>
<div
class="meditate-progress d-flex justify-content-center py-8 position-relative"
>
<div id="dynamic-progress-circle" style="width: 288px"></div>
<div id="progress-handle" class="handle"></div>
<div
class="swiper-doll w-100 h-100 position-absolute overflow-hidden z-1 top-0"
>
<div class="swiper-wrapper">
<div class="swiper-slide">
<img
src="/assets/images/meditateCount/dolls-meditiating_O.png"
class="object-fit-none"
alt="dolls_meditiating_O"
/>
</div>
<div class="swiper-slide">
<img
src="/assets/images/meditateCount/dolls-meditiating_Y.png"
class="object-fit-none"
alt="dolls_meditiating_Y"
/>
</div>
<div class="swiper-slide">
<img
src="/assets/images/meditateCount/dolls-meditiating_G.png"
class="object-fit-none"
alt="dolls_meditiating_G"
/>
</div>
<div class="swiper-slide">
<img
src="/assets/images/meditateCount/dolls-meditiating_P.png"
class="object-fit-none"
alt="dolls_meditiating_P"
/>
</div>
<div class="swiper-slide">
<img
src="/assets/images/meditateCount/dolls-meditiating_B.png"
class="object-fit-none"
alt="dolls_meditiating_B"
/>
</div>
</div>
</div>
</div>
<div class="text-center">
<time
datetime="05:00"
class="d-block fs-10 fw-bold mx-6 mb-3"
id="countdown"
style="letter-spacing: 4.8px"
>05:00</time
>
<button
type="submit"
class="btn btn-primary-dark rounded-pill fs-5 py-2 px-22"
style="box-shadow: 0px 2px 0px 0px #d9c5a5"
>
開始冥想
</button>
</div>
</div>
</section>
<%- include('./layout/footer'); -%>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script type="module" src="../main.js"></script>
<script type="module">
import ProgressBar from "progressbar.js/dist/progressbar.min.js";
var bar = new ProgressBar.Circle("#dynamic-progress-circle", {
strokeWidth: 4,
color: "#F0743E",
trailColor: "#fde7d7",
trailWidth: 4,
svgStyle: null,
duration: 0, // 設置動畫持續時間為 0
});
var swiper = new Swiper(".swiper-calendar", {
slidesPerView: 7,
spaceBetween: 24,
initialSlide: 8,
});
var swiper2 = new Swiper(".swiper-doll", {
slidesPerView: 1,
spaceBetween: -140,
loop: true,
});
</script>
// CSS
.homepage {
.handle {
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #fde7d7;
border: 6px #F0743E solid;
cursor: pointer;
}
}
iThome鐵人賽
看影片追技術