Leecheng/CommunityAPP_UI
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
CommunityAPP_UI/main.html

383 lines
12 KiB
HTML
Raw Normal View History

第一版2025_04_25
2025-04-25 15:59:56 +08:00
<!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 align-items-center justify-content-center btn-horizontal">
<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>
Reference in New Issue Copy Permalink