jekkinoopy/sechskies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 演唱會搜尋橫列

Browse Source
This commit is contained in:
jekkinoopy
2026-06-03 15:24:31 +08:00
parent 2f369221b2
commit 1d87ad6074
3 changed files with 112 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/map.js
+1 -1
View File
@@ -173,7 +173,7 @@
group.appendChild(toggle);
group.appendChild(body);
itineraryList.insertBefore(group, detailPanel);
itineraryList.appendChild(group);
dayGroups.set(dayLabel, { group, toggle, body });
return dayGroups.get(dayLabel);
}
concert/concert.html
+82 -6
View File
@@ -18,17 +18,17 @@
gap: 0 !important;
}
body.concert-page #stage-now > .con-1,
body.concert-page #stage-now > .con-2,
body.concert-page #stage-now > .con-3,
body.concert-page #stage-now > .con-4 {
body.concert-page #stage-now>.con-1,
body.concert-page #stage-now>.con-2,
body.concert-page #stage-now>.con-3,
body.concert-page #stage-now>.con-4 {
width: 100%;
max-width: 100%;
box-sizing: border-box;
flex: 0 0 auto;
}
body.concert-page #stage-now > .con-4:last-child {
body.concert-page #stage-now>.con-4:last-child {
margin-bottom: 0;
}
@@ -39,6 +39,73 @@
body.concert-page .con-4[data-tour="ACCESS"]::after {
z-index: 5;
}
/* 巡迴搜尋：樣式對齊 .search-input；第一列 input+btn，第二列白字結果 */
.concert-search-box {
width: 100%;
max-width: 920px;
padding: 0 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.concert-search-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
width: 100%;
}
.concert-search-row .search-input {
flex: 1 1 200px;
width: auto;
max-width: 320px;
margin: 0;
}
.concert-search-row .search-input:focus {
width: auto;
max-width: 340px;
transform: translateY(-2px);
}
.concert-search-btn {
flex: 0 0 auto;
padding: 12px 22px;
border: 2px solid #ffcc00;
border-radius: 30px;
font-size: 1rem;
font-weight: 700;
background-color: #ffcc00;
color: #2f2f2f;
cursor: pointer;
outline: none;
transition: all 0.3s ease;
white-space: nowrap;
}
.concert-search-btn:hover {
border-color: #e6b800;
box-shadow: 0 4px 15px rgba(255, 204, 0, 0.25);
}
.concert-search-btn:focus {
box-shadow: 0 0 10px rgba(255, 204, 0, 0.35);
}
#concert-search-result {
display: block;
width: 100%;
margin: 0;
text-align: center;
font-size: 0.95rem;
line-height: 1.6;
color: #fff;
}
</style>
</head>
@@ -55,7 +122,16 @@
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
<div class="search-section">
<input type="text" class="search-input" placeholder="搜尋曲目或場次...">
<div class="concert-search-box">
<div class="concert-search-row">
<input type="text" class="search-input" id="concert-query"
placeholder="搜尋曲目或場次…">
<input type="text" class="search-input" id="concert-member"
placeholder="成員或段落（可空白）…">
<button type="button" class="concert-search-btn" id="concert-search-btn">查這場巡迴</button>
</div>
<span id="concert-search-result">輸入後按「查這場巡迴」，會顯示比對結果。</span>
</div>
</div>
<div class="concert-container">
yellow-note/map.html
+29 -16
View File
@@ -8,6 +8,20 @@
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="../assets/css/tablet.css">
<style>
/* display:grid / flex 會蓋掉 HTML hidden，預設只顯示單張地圖 */
body.map-page .map-embed-all[hidden],
body.map-page .map-embed-single[hidden],
body.map-page .map-links-dual[hidden],
body.map-page #open-map-link[hidden] {
display: none !important;
}
body.map-page .detail-panel {
margin-top: 0;
margin-bottom: 8px;
}
</style>
</head>
<body class="map-page">
@@ -78,7 +92,21 @@
<section class="itinerary-list">
<!-- 備註：每張卡的 data-* 是「細節面板的資料來源」。
你只要改 data-date/title/desc/quote/tag/link 和圖片，就會同步更新下方介紹。 -->
你只要改 data-date/title/desc/quote/tag/link 和圖片，就會同步更新上方介紹。 -->
<article class="detail-panel" id="detail-panel" aria-live="polite">
<div class="detail-photo">
<img id="detail-image" src="https://picsum.photos/seed/day1-airport/900/520" alt="行程節目截圖">
</div>
<div class="detail-content">
<span id="detail-date" class="date">Day 1</span>
<h3 id="detail-title">臺灣桃園國際機場</h3>
<p id="detail-desc">高高父子遊台灣 Day 1 首站，從桃園機場正式開啟三天行程。</p>
<blockquote id="detail-quote">「旅程從落地那一刻就開始了。」</blockquote>
<div id="detail-tag" class="tag">#高高父子遊台灣 #Day1 #機場</div>
<a id="detail-link" class="detail-link" target="_blank"
href="https://maps.google.com/?q=臺灣桃園國際機場">查看此地點</a>
</div>
</article>
<article class="polaroid-card active" data-member="eun" data-date="殷志源 Day 1" data-title="仁川國際機場"
data-desc="殷空少搭飛機去台灣高雄 Day 1 起點，從仁川出發。"
data-quote="高雄，我們來了。" data-tag="#殷志源 #Day1 #出發"
@@ -482,21 +510,6 @@
<div class="tag">#高高父子遊台灣 #Day3</div>
</div>
</article>
<article class="detail-panel" id="detail-panel" aria-live="polite">
<div class="detail-photo">
<img id="detail-image" src="https://picsum.photos/seed/day1-airport/900/520" alt="行程節目截圖">
</div>
<div class="detail-content">
<span id="detail-date" class="date">Day 1</span>
<h3 id="detail-title">臺灣桃園國際機場</h3>
<p id="detail-desc">高高父子遊台灣 Day 1 首站，從桃園機場正式開啟三天行程。</p>
<blockquote id="detail-quote">「旅程從落地那一刻就開始了。」</blockquote>
<div id="detail-tag" class="tag">#高高父子遊台灣 #Day1 #機場</div>
<a id="detail-link" class="detail-link" target="_blank"
href="https://maps.google.com/?q=臺灣桃園國際機場">查看此地點</a>
</div>
</article>
</section>
</main>
<footer>