diff --git a/concert copy.html b/concert copy.html deleted file mode 100644 index fa5c19e..0000000 --- a/concert copy.html +++ /dev/null @@ -1,273 +0,0 @@ - - - - - - - SECHSKIES Concert Archive - - - - - -
- -
-
- - -
- 2016 SECHSKIES [YELLOW NOTE] - -
- 首爾 | 首爾奧林匹克體操競技場 -
COM' BACK
-
THREE WORDS
-
- -
- 大邱 | 大邱會展中心 -
Something Special
-
- -
- 釜山 | 釜山會展中心 -
Three Words
-
-
- 首爾 | 蠶室室內體育館 -
Something Special
-
Three Words
-
-
- - -
- 20TH ANNIVERSARY CONCERT -
- 首爾：高尺天空巨蛋 -
Something Special
-
-
- -
- - - \ No newline at end of file diff --git a/concert.css b/concert.css new file mode 100644 index 0000000..06d5c66 --- /dev/null +++ b/concert.css @@ -0,0 +1,299 @@ +body { + background-color: #fcfaf2; + /* 溫潤米白背景 */ + margin: 0; + padding: 50px 0; + font-family: "PingFang TC", "Microsoft JhengHei", sans-serif; +} + +/* CSS 效果 */ + +/* 1. 搜尋區塊容器：負責置中 */ +.search-section { + width: 100%; + /* 撐滿寬度 */ + display: flex; + /* 使用 Flexbox 佈局 */ + justify-content: center; + /* 水平置中 */ + margin: 40px 0; + /* 上下留白，讓視覺不擁擠 */ +} + +/* 2. 搜尋輸入框本體 */ +.search-input { + width: 80%; + /* 行動裝置下佔 80% */ + max-width: 400px; + /* 電腦版最大寬度 */ + padding: 12px 25px; + /* 內縮，讓文字不貼邊 */ + border: 2px solid #ddd; + /* 預設淺灰邊框 */ + border-radius: 30px; + /* 膠囊造型圓角 */ + font-size: 1rem; + outline: none; + /* 重要！移除瀏覽器預設的藍色外框 */ + transition: all 0.3s ease; + /* 讓接下來的 focus 變化變平滑 */ + background-color: #fff; + color: #333; +} + +/* 3. 練習重點：:focus (當滑鼠點擊準備打字時) */ +.search-input:focus { + border-color: #ffcc00; + /* 變成代表色：水晶黃 */ + box-shadow: 0 4px 15px rgba(255, 204, 0, 0.25); + /* 增加黃色柔和發光 */ + width: 85%; + /* 點擊時微幅變長，增加回饋感 */ + transform: translateY(-2px); + /* 輕微往上浮動 */ +} + +/* 4. 練習重點：:hover (滑鼠只是滑過去，還沒點擊) */ +.search-input:hover { + border-color: #bbb; + /* 邊框顏色稍微加深 */ +} + +.search-input { + width: 200px; + margin: 0 auto; + padding: 8px 15px; + border: 2px solid #eee; + border-radius: 20px; + transition: all 0.4s ease; + /* 平滑過渡 */ + outline: none; +} + +/* 當滑鼠點擊輸入框時 */ +.search-input:focus { + width: 300px; + /* 輸入框變長 */ + border-color: #ffcc00; + /* 變成水晶黃 */ + box-shadow: 0 0 10px rgba(255, 204, 0, 0.2); + /* 淡淡的發光感 */ + background-color: #fff; +} + +.concert-container { + max-width: 800px; + margin: 0 auto; +} + +/* 第一層：演唱會卡片外殼 */ +.con-1, +.con-2, +.con-3 { + background-color: #fff; + border-radius: 16px; + padding: 50px 100px; + margin-bottom: 50px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); + border: 1px solid rgba(0, 0, 0, 0.02); + position: relative; + /* 關鍵：拿掉 overflow: hidden，改用子元素控制裁切 */ + overflow: hidden; +} + +/* 右上角緞帶：改用獨立 div 或確保不被裁切 */ +[data-tour]::after { + content: attr(data-tour); + position: absolute; + width: 200px; + text-align: center; + top: 30px; + right: -40px; + background: #eee; + color: #999; + font-size: 0.8rem; + padding: 10px 0; + transform: rotate(45deg); + z-index: 1; + /* 如果擔心緞帶超出卡片太醜，可將此設為透明或微調位置 */ +} + +.title { + display: block; + font-size: 1.5rem; + font-weight: 900; + margin: 50px; + text-align: center; + color: #333; +} + +/* 第二層：地點區塊 (通用選擇器) */ +/* 只要是 con-X-X 的格式都套用 */ +[class*="con-"][class*="-"] { + padding: 10px 0 30px 20px; + margin: 15px 0 15px 10px; + border-left: 4px solid #eee; + /* 預設灰線 */ + position: relative; + background: linear-gradient(to right, #fffdf5, #fff); + border-radius: 4px; + counter-reset: track-counter; +} + +/* 參加過的場次：變黃線 */ +.attended { + border-left: 4px solid #ffcc00 !important; +} + +/* 第三層：曲目 */ +[class*="con-"]>div div { + padding-left: 35px; + font-size: 0.9rem; + color: #777; + margin: 5px 0; + /* 關鍵：拿掉因為 class 包含 "con-" 而被誤加的左邊線 */ + border-left: none !important; + position: relative; +} + +[class*="con-"]>div div::before { + content: "🎵 "; + margin-left: 30px; +} + +/* 修改：確保計數器能抓到這些 div */ +[class*="con-"]>div div::after { + counter-increment: track-counter; + content: " #" counter(track-counter); + font-size: 0.7rem; + color: #ccc; + margin-left: 5px; + vertical-align: super; +} + +[class*="con-"]>div div::before { + content: "🎵 "; +} + +/* 1. 針對 track-list 容器本身：關閉符號與計數 */ +.track-list::before, +.track-list::after { + display: none !important; + content: none !important; + counter-increment: none !important; +} + +/* 2. 針對 track-list 容器本身：拿掉縮排與邊框 */ +.track-list { + padding: 0 !important; + margin: 0 !important; + border: none !important; +} + +/* 3. 確保真正的曲目 (track-item) 正常顯示 */ +.track-item { + display: block; + position: relative; + padding-left: 35px; + /* 這裡留給 🎵 圖標 */ +} + +/* 📍 地點圖示 */ +.location::before { + content: "📍"; + margin-left: 30px; +} + +/* --- 日期蓋章：全自動定位 --- */ +/* 使用屬性選擇器，確保 con-1-1, 1-3, 2-1 都能顯示 */ +.attended::before, +.attended::after { + position: absolute; + left: -20px; + /* 壓在黃線上 */ + width: 45px; + text-align: center; + background-color: #ffcc00; + color: #333; + font-size: 9px; + font-weight: bold; + padding: 2px 4px; + border-radius: 4px; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); + z-index: 100; + border: 2px solid #fff; + /* 增加白邊避免被背景吃掉 */ +} + +/* 第一個日期 */ +.attended::before { + content: attr(data-date1); + top: 5px; + transform: rotate(-12deg); +} + +/* 第二個日期 (如果有) */ +.attended::after { + content: attr(data-date2); + top: 28px; + transform: rotate(8deg); + background-color: #fceea7; +} + +/* 如果沒有第二個日期，就隱藏框框 */ +.attended:not([data-date2])::after { + display: none; +} + +/* 針對單日參加 (只有 data-date 沒有序號) 的特殊處理 */ +.attended[data-date]::before { + content: attr(data-date); +} + +/* 1. 隱藏 checkbox 本身 */ +.expand-trigger { + display: none; +} + +/* 2. 預設隱藏第 5 個之後的 track-item */ +.track-list .track-item:nth-child(n+6) { + display: none; + opacity: 0; + transition: opacity 0.5s ease; + +} + +/* 3. 當 Checkbox 被選中時，顯示所有曲目 */ +.expand-trigger:checked+.track-list .track-item:nth-child(n+6) { + display: block; + opacity: 1; +} + +/* 4. 設計「展開/收合」按鈕樣式 */ +.expand-btn { + display: inline-block; + margin-top: 10px; + margin-left: 35px; + padding: 5px 15px; + background-color: #f5f5f5; + color: #999; + font-size: 0.8rem; + border-radius: 20px; + cursor: pointer; + transition: all 0.3s ease; +} + +/* 5. 利用偽元素設定按鈕文字內容 */ +.expand-btn::before { + content: "↓ 展開完整曲目"; +} + +.expand-trigger:checked~.expand-btn::before { + content: "↑ 收合曲目"; +} + +/* 懸停效果 */ +.expand-btn:hover { + background-color: #ffcc00; + color: #333; +} \ No newline at end of file diff --git a/concert.html b/concert.html index df08e76..608d70f 100644 --- a/concert.html +++ b/concert.html @@ -2,224 +2,7 @@ SECHSKIES Concert Archive - + @@ -229,57 +12,249 @@
- -
+ +
2016 SECHSKIES [YELLOW NOTE] - -
+ +
首爾 | 首爾奧林匹克體操競技場 - -
COM' BACK
-
THREE WORDS
+ + +
+
COM' BACK
+
ROAD FIGHTER
+
폼생폼사 / 品生品死
+
COME TO ME BABY
+
배신감（BAD GIRL）/ 背叛感
+
사랑하는 너에게（DEAR LOVE）/ 給親愛的你
+
예감（GOT A FEELING）/ 預感
+
너를 보내며（LET U GO）/ 送你離開
+
8t. TRUCK － 殷志源
+
DOUBLE J － 李宰鎮
+
A+ － 金在德
+
그대로 멈춰 / 就那樣停止－ BLACKKIES（殷志源、李宰鎮、金在德）
+
SAY － WHITEKIES（姜成勳、張水院）
+
SUDDENLY － 張水院
+
MY GIRL － 姜成勳
+
무모한 사랑（RECKLESS LOVE）/ 不可能的愛
+
연정（HEARTBREAK）/ 戀情
+
커플（COUPLE）/ 戀人
+
기억해줄래 / 請記得好嗎
+
ENCORE：학원별곡（RISE UP）/ 學園別曲
+
기사도 / 騎士道
+
그날까지（TOGETHER FOREVER）/ 直到那一天
+
DOUBLE ENCORE：（2016年9月11日）
+
사랑하는 너에게（DEAR LOVE）/ 給親愛的你
+
커플（COUPLE）/ 戀人
+
+
- -
+
大邱 | 大邱會展中心 -
Something Special
+ +
+
COM' BACK
+
학원별곡（RISE UP）/ 學園別曲
+
COME TO ME BABY
+
배신감（BAD GIRL）/ 背叛感
+
사랑하는 너에게（DEAR LOVE）/ 給親愛的你
+
너를 보내며（LET U GO）/ 送你離開
+
연정（HEARTBREAK）/ 戀情
+
예감（GOT A FEELING）/ 預感
+
어기야 디야（한배를 타고）+ 8t. TRUCK － 殷志源
+
RIGOLETTO － 李宰鎮
+
A+ － 金在德
+
그대로 멈춰 / 就那樣停止－ BLACKKIES（殷志源、李宰鎮、
+
金在德）
+
프라프치노（FRAPPUCCINO）－ 張水院
+
어떻게 사랑이 그래요 / 愛情怎麼可以這樣 + 샤방샤방 / 閃亮閃亮 － 姜成勳
+
하얀 밤에（CLOSE YOUR EYES）/ 白色夜裏
+
커플（COUPLE）/ 戀人
+
ROAD FIGHTER
+
폼생폼사 / 品生品死
+
세 단어（THREE WORDS）/ 三個詞
+
기사도 / 騎士道
+
기억해줄래 / 請記得好嗎
+
그날까지（TOGETHER FOREVER）/ 直到那一天
+
+
- -
+
釜山 | 釜山會展中心 -
Three Words
+ +
+
COM' BACK
+
학원별곡（RISE UP）/ 學園別曲
+
COME TO ME BABY
+
배신감（BAD GIRL）/ 背叛感
+
사랑하는 너에게（DEAR LOVE）/ 給親愛的你
+
너를 보내며（LET U GO）/ 送你離開
+
연정（HEARTBREAK）/ 戀情
+
예감（GOT A FEELING）/ 預感
+
어기야 디야（한배를 타고）+ 8t. TRUCK － 殷志源
+
RIGOLETTO － 李宰鎮
+
A+ － 金在德
+
그대로 멈춰 / 就那樣停止－ BLACKKIES（殷志源、李宰鎮、
+
金在德）
+
프라프치노（FRAPPUCCINO）－ 張水院
+
어떻게 사랑이 그래요 / 愛情怎麼可以這樣 + 샤방샤방 / 閃亮閃亮 － 姜成勳
+
하얀 밤에（CLOSE YOUR EYES）/ 白色夜裏
+
커플（COUPLE）/ 戀人
+
ROAD FIGHTER
+
폼생폼사 / 品生品死
+
세 단어（THREE WORDS）/ 三個詞
+
기사도 / 騎士道
+
기억해줄래 / 請記得好嗎
+
그날까지（TOGETHER FOREVER）/ 直到那一天
+
+
-
+
首爾 | 蠶室室內體育館 -
Something Special
-
Three Words
+ + +
+
학원별곡（RISE UP）/ 學園別曲
+
COM' BACK
+
배신감（BAD GIRL）/ 背叛感
+
COME TO ME BABY
+
사랑하는 너에게（DEAR LOVE）/ 給親愛的你
+
너를 보내며（LET U GO）/ 送你離開
+
연정（HEARTBREAK）/ 戀情
+
예감（GOT A FEELING）/ 預感
+
문득（MEMORY）+ 트라우마（TRAUMA）－ 殷志源
+
RIGOLETTO － 李宰鎮
+
SAY + MY LOVE － 姜成勳
+
프라프치노（FRAPPUCCINO）+ 여우비（UNFORGETTABLE）－ + J-Walk
+
하얀 밤에（CLOSE YOUR EYES）/ 白色夜裏
+
커플（COUPLE）/ 戀人
+
ROAD FIGHTER
+
세 단어（THREE WORDS）/ 三個詞
+
ENCORE：그날까지（TOGETHER FOREVER）/ 直到那一天
+
DOUBLE ENCORE：
+
ROAD FIGHTER
+
커플（COUPLE）/ 戀人
+
+
- -
+
20TH ANNIVERSARY CONCERT -
+
首爾：高尺天空巨蛋 -
Something Special
+ + +
+
약속된 운명（아마게돈） / 約定的命運
+
학원별곡（RISE UP）/ 學園別曲
+
폼생폼사 / 品生品死
+
연정（HEARTBREAK）/ 戀情
+
기억해줄래 / 請記得好嗎
+
탈출 / 逃離
+
기사도 / 騎士道
+
ROAD FIGHTER
+
SAY
+
너를 보내며（LET U GO）/ 送你離開
+
COME TO ME BABY
+
커플（COUPLE）/ 戀人
+
공허해 / 空虛 + REALLY REALLY － WINNER
+
COM' BACK
+
뫼비우스의 띠 / 麥比烏斯帶
+
예감（GOT A FEELING）/ 預感
+
특별해（SOMETHING SPECIAL）
+
느낌이 와（FEELING）
+
현기증（VERTIGO）
+
웃어줘（SMILE）
+
오랜만이에요（IT'S BEEN A WHILE）
+
아프지마요（BE WELL）
+
세 단어（THREE WORDS）/ 三個詞
+
그날까지（TOGETHER FOREVER）/ 直到那一天
+
슬픈 노래（SAD SONG）/ 悲歌
+
ENCORE：
+
特別해（SOMETHING SPECIAL）
+
백허그（BACK HUG）
+
술끊자（DRINKING PROBLEM）
+
+
-
+
光州 | 光州女大世大運體育 -
Something Special
-
Three Words
+ +
+
오랜만이에요（IT'S BEEN A WHILE）
+
세 단어（THREE WORDS）/ 三個詞
+
연정（HEARTBREAK）/ 戀情
+
웃어줘（SMILE）
+
기억해줄래 / 請記得好嗎
+
SAY
+
네가 필요해（NEED U）
+
백허그（BACK HUG）
+
술끊자（DRINKING PROBLEM）
+
예감（GOT A FEELING）/ 預感
+
고백（Go Back）－ 李宰鎮
+
특별해（SOMETHING SPECIAL）
+
느낌이 와（FEELING）
+
현기증（VERTIGO）
+
DANCE MEDLEY：
+
COM' BACK + 폼생폼사 / 品生品死 + ROAD FIGHTER +
+
기사도 / 騎士道 + 학원별곡（RISE UP）/ 學園別曲
+
아프지마요（BE WELL）
+
슬픈 노래（SAD SONG）/ 悲歌
+
커플（COUPLE）/ 戀人
+
ENCORE：그날까지（TOGETHER FOREVER）/ 直到那一天
+
특별해（SOMETHING SPECIAL）
+
+ +
+
+ 光州 | 光州女大世大運體育 + +
+
오랜만이에요（IT'S BEEN A WHILE）
+
세 단어（THREE WORDS）/ 三個詞
+
연정（HEARTBREAK）/ 戀情
+
웃어줘（SMILE）
+
기억해줄래 / 請記得好嗎
+
SAY
+
네가 필요해（NEED U）
+
백허그（BACK HUG）
+
술끊자（DRINKING PROBLEM）
+
예감（GOT A FEELING）/ 預感
+
고백（Go Back）－ 李宰鎮
+
특별해（SOMETHING SPECIAL）
+
느낌이 와（FEELING）
+
현기증（VERTIGO）
+
DANCE MEDLEY：
+
COM' BACK + 폼생폼사 / 品生品死 + ROAD FIGHTER +
+
기사도 / 騎士道 + 학원별곡（RISE UP）/ 學園別曲
+
아프지마요（BE WELL）
+
슬픈 노래（SAD SONG）/ 悲歌
+
커플（COUPLE）/ 戀人
+
ENCORE：그날까지（TOGETHER FOREVER）/ 直到那一天
+
특별해（SOMETHING SPECIAL）
+
+
-
+
2018 CONCERT [NOW・HERE・AGAIN] -
+
首爾：首爾奧林匹克體操競技場 -
Something Special
-
+ +
+
+ +
+
+
+ \ No newline at end of file