383 lines
12 KiB
HTML
383 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-Hant">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>社區通 - 手機版</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<style>
|
||
body {
|
||
background-color: #f8f9fa;
|
||
padding-bottom: 80px; /* 防止被固定底部導航擋住 */
|
||
}
|
||
.card {
|
||
margin-bottom: 15px;
|
||
}
|
||
.nav-link {
|
||
font-size: 14px;
|
||
}
|
||
.footer-nav {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: #fff;
|
||
border-top: 1px solid #ddd;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.footer-nav a {
|
||
text-decoration: none;
|
||
font-size: 12px;
|
||
color: #666;
|
||
text-align: center;
|
||
}
|
||
|
||
.footer-nav img {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-bottom: 4px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 頂部標題 -->
|
||
<!-- 頂部標題 + 通知鈴鐺 -->
|
||
<nav class="navbar navbar-light bg-white shadow-sm">
|
||
<div class="container-fluid d-flex justify-content-between align-items-center">
|
||
<span class="navbar-brand mb-0 h1">社區通</span>
|
||
|
||
<!-- 右側區塊：名字 + 通知鈴鐺 -->
|
||
<div class="d-flex align-items-center">
|
||
<span class="me-3 fw-bold">林小安 您好</span> <!-- 名字靠右並貼近鈴鐺 -->
|
||
|
||
<div class="dropdown">
|
||
<button class="btn btn-light position-relative" type="button" id="notifDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||
🔔
|
||
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
|
||
3
|
||
<span class="visually-hidden">未讀通知</span>
|
||
</span>
|
||
</button>
|
||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="notifDropdown">
|
||
<li><a class="dropdown-item" href="#">4/15 管理費已出帳</a></li>
|
||
<li><a class="dropdown-item" href="#">4/14 社區電梯保養通知</a></li>
|
||
<li><a class="dropdown-item" href="#">4/13 新活動報名開始</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="container mt-3">
|
||
<!-- 公告區塊 -->
|
||
<h5>📢 重要公告</h5>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h6 class="card-title">4/20 水塔清洗通知</h6>
|
||
<p class="card-text">本週六早上9:00至下午3:00進行清洗，請提前儲水。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 功能快捷 -->
|
||
|
||
<style>
|
||
.btn-outline-primary-green {
|
||
border-color: #555555;
|
||
}
|
||
|
||
|
||
|
||
.btn-outline-primary-green img {
|
||
filter: hue-rotate(90deg) brightness(0.8);
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
|
||
.btn-horizontal {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.btn-outline-primary-green img {
|
||
filter: hue-rotate(90deg) brightness(0.8);
|
||
width: 32px;
|
||
height: 32px;
|
||
opacity: 0.6; /* 半透明 */
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
|
||
|
||
</style>
|
||
|
||
<h5 class="mt-4">🔧 功能選單</h5>
|
||
|
||
<div class="row text-center">
|
||
|
||
<!-- 報修 -->
|
||
<div class="col-4 mb-4 d-flex">
|
||
<a href="repair.html" class="btn btn-outline-primary-green w-100 py-3 h-100 d-flex flex-column align-items-center justify-content-center">
|
||
<img src="https://img.icons8.com/ios-filled/48/cottage.png" alt="報修">
|
||
<div>報修</div>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 郵件 -->
|
||
<div class="col-4 mb-4 d-flex">
|
||
<a href="parcel.html" class="btn btn-outline-primary-green w-100 py-3 h-100 d-flex flex-column align-items-center justify-content-center">
|
||
<img src="https://img.icons8.com/ios-filled/48/cottage.png" alt="郵件">
|
||
<div>郵件</div>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 訪客 -->
|
||
<div class="col-4 mb-4 d-flex">
|
||
<a href="visitor.html" class="btn btn-outline-primary-green w-100 py-3 h-100 d-flex flex-column align-items-center justify-content-center">
|
||
<img src="https://img.icons8.com/ios-filled/48/handshake.png" alt="訪客">
|
||
<div>訪客</div>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 繳費 -->
|
||
<div class="col-4 mb-4 d-flex">
|
||
<a href="bill.html" class="btn btn-outline-primary-green w-100 py-3 h-100 d-flex flex-column align-items-center justify-content-center">
|
||
<img src="https://img.icons8.com/ios-filled/48/money.png" alt="繳費">
|
||
<div>繳費</div>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 社區功能 -->
|
||
<div class="col-4 mb-4 d-flex">
|
||
<a href="activities.html" class="btn btn-outline-primary-green w-100 py-3 h-100 d-flex flex-column align-items-center justify-content-center">
|
||
<img src="https://img.icons8.com/ios-filled/48/city-buildings.png" alt="社區互動">
|
||
<div>社區互動</div>
|
||
</a>
|
||
</div>
|
||
|
||
|
||
<!-- sos -->
|
||
<div class="col-4 mb-4 d-flex">
|
||
<a href="emergency-alert.html" class="btn btn-outline-primary-green w-100 py-3 h-100 d-flex flex-column align-items-center justify-content-center">
|
||
<img src="https://img.icons8.com/ios-filled/48/door-opened.png" alt="sos">
|
||
<div>緊急通報</div>
|
||
</a>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<!-- 廣告or-->
|
||
<!-- 廣告輪播區 -->
|
||
<div id="adCarousel" class="carousel slide my-4" data-bs-ride="carousel">
|
||
<div class="carousel-inner rounded shadow-sm">
|
||
<div class="carousel-item active">
|
||
<img src="https://placehold.co/1200x600/5856D6/ffffff?text=限時折扣" class="d-block w-100" alt="限時折扣">
|
||
</div>
|
||
<div class="carousel-item">
|
||
<img src="https://placehold.co/1200x600/FF6F61/ffffff?text=社區清潔日+報名中" class="d-block w-100" alt="社區清潔日">
|
||
</div>
|
||
<div class="carousel-item">
|
||
<img src="https://placehold.co/1200x600/28B463/ffffff?text=停車位+申請倒數" class="d-block w-100" alt="停車位公告">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 左右箭頭 -->
|
||
<button class="carousel-control-prev" type="button" data-bs-target="#adCarousel" data-bs-slide="prev">
|
||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||
<span class="visually-hidden">上一張</span>
|
||
</button>
|
||
<button class="carousel-control-next" type="button" data-bs-target="#adCarousel" data-bs-slide="next">
|
||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||
<span class="visually-hidden">下一張</span>
|
||
</button>
|
||
|
||
<!-- 下方指示點 -->
|
||
<div class="carousel-indicators">
|
||
<button type="button" data-bs-target="#adCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="第1張"></button>
|
||
<button type="button" data-bs-target="#adCarousel" data-bs-slide-to="1" aria-label="第2張"></button>
|
||
<button type="button" data-bs-target="#adCarousel" data-bs-slide-to="2" aria-label="第3張"></button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<style>
|
||
/* 文字跑馬燈的容器 */
|
||
.marquee-container {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
color: black;
|
||
padding: 10px 0;
|
||
font-size: 20px;
|
||
}
|
||
|
||
/* 設定跑馬燈的動畫 */
|
||
.marquee-text {
|
||
display: inline-block;
|
||
animation: marquee 10s linear infinite;
|
||
}
|
||
|
||
/* 動畫效果: 讓文字從右邊跑到左邊 */
|
||
@keyframes marquee {
|
||
0% {
|
||
transform: translateX(100%);
|
||
}
|
||
100% {
|
||
transform: translateX(-100%);
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<div class="marquee-container" style="background-color: #f0f0f0; padding: 10px;">
|
||
<div class="marquee-text">公告:歡迎使用我們的社區通，請多加利用。謝謝您~ 如有問題可洽談管理室</div>
|
||
</div>
|
||
|
||
|
||
|
||
<style>
|
||
.scroll-container {
|
||
overflow-x: auto;
|
||
display: flex;
|
||
gap: 1rem;
|
||
padding-bottom: 1rem;
|
||
-webkit-overflow-scrolling: touch;
|
||
scroll-snap-type: x mandatory;
|
||
scroll-padding: 1rem;
|
||
}
|
||
|
||
.scroll-container::-webkit-scrollbar {
|
||
display: none; /* 手機上隱藏捲軸 */
|
||
}
|
||
|
||
.activity-card {
|
||
flex: 0 0 calc(28% + 8vw); /* 顯示約 3.5 張 */
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
||
scroll-snap-align: start;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.activity-card img {
|
||
width: 100%;
|
||
height: 120px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.activity-card .card-body {
|
||
padding: 0.75rem;
|
||
}
|
||
|
||
.activity-card h6 {
|
||
font-size: 1rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.activity-card p {
|
||
font-size: 0.85rem;
|
||
color: #555;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.activity-card .btn-show-more {
|
||
font-size: 0.8rem;
|
||
padding: 0.25rem 0.5rem;
|
||
display: inline-block;
|
||
margin-top: 0.5rem;
|
||
color: #5856D6;
|
||
text-decoration: none;
|
||
border: 1px solid #5856D6;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.activity-card .btn-show-more:hover {
|
||
background-color: #5856D6;
|
||
color: #fff;
|
||
}
|
||
</style>
|
||
|
||
<!-- 活動區塊 -->
|
||
<h5 id="events" class="mt-5 mb-3" style="text-align: left;">🎉 最新活動</h5>
|
||
|
||
<div class="scroll-container" style="text-align: left;">
|
||
<!-- 卡片 1 -->
|
||
<div class="activity-card">
|
||
<img src="https://placehold.co/600x300/FF6F61/ffffff?text=中秋烤肉趴" alt="活動1">
|
||
<div class="card-body">
|
||
<h6>中秋烤肉趴</h6>
|
||
<p>9/9 晚上 6 點開烤</p>
|
||
<a href="#" class="btn btn-sm btn-primary">查看</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 卡片 2 -->
|
||
<div class="activity-card">
|
||
<img src="https://placehold.co/600x300/28B463/ffffff?text=親子日遊園" alt="活動2">
|
||
<div class="card-body">
|
||
<h6>親子日遊園</h6>
|
||
<p>玩具福袋等你拿！</p>
|
||
<a href="#" class="btn btn-sm btn-success">報名</a>
|
||
<a href="#" class="btn btn-sm btn-primary">查看</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 卡片 3 -->
|
||
<div class="activity-card">
|
||
<img src="https://placehold.co/600x300/5856D6/ffffff?text=健康講堂" alt="活動3">
|
||
<div class="card-body">
|
||
<h6>健康講堂</h6>
|
||
<p>醫師到場解說</p>
|
||
<a href="#" class="btn btn-sm btn-success">報名</a>
|
||
<a href="#" class="btn btn-sm btn-primary">查看</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 卡片 4 -->
|
||
<div class="activity-card">
|
||
<img src="https://placehold.co/600x300/F39C12/ffffff?text=防災演習" alt="活動4">
|
||
<div class="card-body">
|
||
<h6>防災演習</h6>
|
||
<p>模擬火災逃生</p>
|
||
<a href="#" class="btn btn-sm btn-warning">詳情</a>
|
||
<a href="#" class="btn-show-more">顯示更多</a> <!-- 顯示更多按鈕 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 卡片 5 -->
|
||
<div class="activity-card">
|
||
<img src="https://placehold.co/600x300/2E86C1/ffffff?text=園遊會" alt="活動5">
|
||
<div class="card-body">
|
||
<h6>社區園遊會</h6>
|
||
<p>免費攤位吃到飽</p>
|
||
<a href="#" class="btn btn-sm btn-secondary">去逛逛</a>
|
||
<a href="#" class="btn-show-more">顯示更多</a> <!-- 顯示更多按鈕 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<!-- 底部選單 -->
|
||
<nav class="navbar fixed-bottom navbar-light bg-light border-top">
|
||
<div class="container justify-content-around">
|
||
<a class="nav-link text-center" href="main.html"><div>🏠<br>首頁</div></a>
|
||
<a class="nav-link text-center" href="entry-verification.html"><div>🚪<br>出入</div></a>
|
||
<a class="nav-link text-center" href="message.html"><div>💬<br>訊息</div></a>
|
||
<a class="nav-link text-center" href="personal.html"><div>👤<br>住戶</div></a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Bootstrap JS -->
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
</body>
|
||
</html> |