|
1 | 1 | <!DOCTYPE html> |
2 | 2 | <html lang="ko"> |
| 3 | +<head> |
| 4 | + <meta charset="UTF-8"> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=yes"> |
| 6 | + <meta name="theme-color" content="#000000"> |
| 7 | + <link rel="icon" href="/offrest.ico"> |
| 8 | + <title>OFFREST</title> |
| 9 | + <style> |
| 10 | + @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700;900&display=swap'); |
| 11 | + * { margin: 0; padding: 0; box-sizing: border-box; } |
| 12 | + body { font-family: 'Noto Sans KR', sans-serif; background: #0a0a0a; color: #fff; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } |
| 13 | + .logo { position: fixed; top: 30px; left: 35px; font-size: 18px; font-weight: 900; letter-spacing: 2px; line-height: 1.2; z-index: 100; } |
| 14 | + #start-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; animation: fadeIn 1s ease; } |
| 15 | + .tagline { font-size: 34px; font-weight: 700; margin-bottom: 50px; letter-spacing: 1px; line-height: 1.6; } |
| 16 | + .logo-btn { width: 150px; height: 150px; border-radius: 50%; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; position: relative; overflow: hidden; padding: 0; } |
| 17 | + .logo-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transition: all 0.3s ease; } |
| 18 | + .logo-btn:hover { transform: scale(1.08); } |
| 19 | + .logo-btn:hover img { box-shadow: 0 0 30px rgba(102,126,234,0.4); } |
| 20 | + .logo-btn:active { transform: scale(0.95); } |
| 21 | + .logo-btn.rolling { animation: shake 0.5s ease; } |
| 22 | + .start-hint { margin-top: 24px; font-size: 14px; color: #666; letter-spacing: 3px; text-transform: uppercase; } |
| 23 | + #result-screen { display: none; flex-direction: column; align-items: center; text-align: center; padding: 20px; max-width: 1000px; width: 100%; } |
| 24 | + .cards-row { display: flex; gap: 30px; width: 100%; justify-content: center; flex-wrap: wrap; } |
| 25 | + .result-card { background: linear-gradient(145deg, #1a1a2e, #0f0f1a); border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; padding: 45px 35px; flex: 1; min-width: 300px; max-width: 460px; opacity: 0; transform: translateY(30px); } |
| 26 | + .result-card.show { animation: slideUp 0.6s ease forwards; } |
| 27 | + .result-card.delay { animation-delay: 0.2s; } |
| 28 | + .card-emoji { font-size: 52px; margin-bottom: 18px; } |
| 29 | + .card-label { font-size: 15px; color: #667eea; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 14px; font-weight: 700; } |
| 30 | + .card-title { font-size: 28px; font-weight: 700; margin-bottom: 12px; line-height: 1.4; } |
| 31 | + .card-desc { font-size: 15px; color: #999; line-height: 1.7; } |
| 32 | + .music-artist { font-size: 15px; color: #999; margin-top: 6px; } |
| 33 | + .bottom-area { margin-top: 40px; opacity: 0; animation: fadeIn 0.5s ease 0.6s forwards; display: flex; flex-direction: column; align-items: center; gap: 24px; } |
| 34 | + .add-prompt { font-size: 14px; color: #777; letter-spacing: 0.3px; line-height: 1.6; padding: 16px 30px; border: 1px dashed rgba(255,255,255,0.12); border-radius: 16px; background: rgba(255,255,255,0.02); } |
| 35 | + .reroll-btn { padding: 20px 52px; border-radius: 50px; background: transparent; border: 1.5px solid rgba(255,255,255,0.2); color: #fff; font-family: 'Noto Sans KR', sans-serif; font-size: 17px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; letter-spacing: 1px; } |
| 36 | + .reroll-btn:hover { border-color: #667eea; color: #667eea; transform: scale(1.05); } |
| 37 | + .reroll-btn:active { transform: scale(0.95); } |
| 38 | + .bg-glow { position: fixed; width: 300px; height: 300px; border-radius: 50%; filter: blur(120px); opacity: 0.08; pointer-events: none; z-index: 0; } |
| 39 | + .glow-1 { top: -100px; right: -100px; background: #667eea; } |
| 40 | + .glow-2 { bottom: -100px; left: -100px; background: #764ba2; } |
| 41 | + @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } |
| 42 | + @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } |
| 43 | + @keyframes shake { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-15deg) scale(1.1)} 40%{transform:rotate(15deg) scale(1.1)} 60%{transform:rotate(-10deg) scale(1.05)} 80%{transform:rotate(10deg) scale(1.05)} } |
| 44 | + @media (min-width:768px) and (orientation:landscape) { body{overflow-y:auto} .tagline{font-size:42px;margin-bottom:40px} .logo-btn{width:180px;height:180px} #result-screen{padding:20px} .cards-row{flex-wrap:nowrap;gap:36px} .start-hint{font-size:16px;margin-top:30px} .card-title{font-size:30px} .card-label{font-size:16px} } |
| 45 | + @media (max-width:600px) { .tagline{font-size:28px;margin-bottom:35px} .logo-btn{width:120px;height:120px} .card-title{font-size:22px} .result-card{padding:30px 24px} .cards-row{flex-direction:column;align-items:center;gap:20px} .reroll-btn{padding:18px 44px;font-size:16px} } |
| 46 | + </style> |
| 47 | +</head> |
| 48 | +<body> |
| 49 | + <div class="logo">OFF '<br>REST</div> |
| 50 | + <div class="bg-glow glow-1"></div><div class="bg-glow glow-2"></div> |
| 51 | + <div id="start-screen"> |
| 52 | + <div class="tagline">Find your rest<br>Feel your rest</div> |
| 53 | + <button class="logo-btn" id="diceBtn" onclick="roll()"><img src="/icons/icon-512.png" alt="OFFREST"></button> |
| 54 | + <div class="start-hint">TAP TO OFFREST</div> |
| 55 | + </div> |
| 56 | + <div id="result-screen"> |
| 57 | + <div class="cards-row"> |
| 58 | + <div class="result-card" id="restCard"><div class="card-emoji" id="restEmoji"></div><div class="card-label">์ค๋์ ํด์</div><div class="card-title" id="restTitle"></div><div class="card-desc" id="restDesc"></div></div> |
| 59 | + <div class="result-card delay" id="musicCard"><div class="card-emoji">๐ต</div><div class="card-label">์ถ์ฒ ์์
</div><div class="card-title" id="musicTitle"></div><div class="music-artist" id="musicArtist"></div></div> |
| 60 | + </div> |
| 61 | + <div class="bottom-area"> |
| 62 | + <div class="add-prompt">๋๋ง์ ํด์์ ์นด๋์ ์ ์ด์ฃผ์๋ฉด, ์ด๊ณณ์ ๋ฑ๋ก๋ฉ๋๋ค</div> |
| 63 | + <button class="reroll-btn" onclick="reroll()">๐ฒ ํ๋ฒ ๋ ๋๋ฆฌ๊ธฐ</button> |
| 64 | + </div> |
| 65 | + </div> |
| 66 | + <script>const R=[{e:"๐ง",t:"5๋ถ ๋ช
์ํ๊ธฐ",d:"๋์ ๊ฐ๊ณ ํธํก์ ์ง์คํด๋ณด์ธ์. ๋ค์จ๊ณผ ๋ ์จ์ ์ฒ์ฒํ ๋๋ผ๋ฉฐ ๋ง์์ ๋น์๋ณด์ธ์."},{e:"๐ถ",t:"์ฐ์ฑ
๋๊ฐ๊ธฐ",d:"๊ฐ๊น์ด ๊ณต์์ด๋ ๊ณจ๋ชฉ๊ธธ์ ๊ฑธ์ด๋ณด์ธ์. ๋ฐ๋๊ณผ ํ์ด์ด ๊ธฐ๋ถ์ ์ ํ์์ผ ์ค ๊ฑฐ์์."},{e:"โ",t:"๋ฐ๋ปํ ์ฐจ ํ ์",d:"์ข์ํ๋ ์ฐจ๋ฅผ ์ฒ์ฒํ ์ฐ๋ ค๋ด๋ฉฐ ์ฌ์ ๋ฅผ ์ฆ๊ฒจ๋ณด์ธ์."},{e:"๐",t:"์ฑ
ํ ํ์ด์ง ์ฝ๊ธฐ",d:"์ด๋ ต์ง ์์ ์ฑ
์ ํด๊ณ ํ ํ์ด์ง๋ง ์ฝ์ด๋ณด์ธ์."},{e:"๐จ",t:"๋์ ๊ทธ๋ฆฌ๊ธฐ",d:"์ข
์ด ์์ ์์ ๋กญ๊ฒ ๊ทธ๋ฆผ์ ๊ทธ๋ ค๋ณด์ธ์."},{e:"๐ฟ",t:"์๋ฌผ ๋๋ณด๊ธฐ",d:"ํ๋ถ์ ๋ฌผ์ ์ฃผ๊ณ ์์ ๋ฆ์์ฃผ์ธ์."},{e:"๐",t:"๋ฐ๋ปํ ์ค์ํ๊ธฐ",d:"๋ฐ๋ปํ ๋ฌผ๋ก ๋ชธ์ ๊ฐ์ธ๋ฉฐ ํ๋ฃจ์ ํผ๋ก๋ฅผ ์ฌ์ด๋ด ๋ณด์ธ์."},{e:"๐
",t:"ํ๋ ๋ฐ๋ผ๋ณด๊ธฐ",d:"์ฐฝ๋ฌธ ๋ฐ ํ๋์ 5๋ถ๋ง ๋ฐ๋ผ๋ณด์ธ์."},{e:"๐ด",t:"10๋ถ ๋ฎ์ ์๊ธฐ",d:"์๋์ 10๋ถ ํ๋ก ๋ง์ถ๊ณ ํธํ๊ฒ ๋์ ๊ฐ์๋ณด์ธ์."},{e:"๐ง",t:"์ข์ํ๋ ๋
ธ๋ ๋ฐ๋ผ ๋ถ๋ฅด๊ธฐ",d:"์ด์ดํฐ์ ๋ผ๊ณ ์ข์ํ๋ ๋
ธ๋๋ฅผ ์๊ฒ ๋ฐ๋ผ ๋ถ๋ฌ๋ณด์ธ์."},{e:"โ๏ธ",t:"๊ฐ์ฌํ ๊ฒ 3๊ฐ์ง ์ ๊ธฐ",d:"์์ ๊ฒ์ด๋ผ๋ ๊ด์ฐฎ์์. ๊ฐ์ฌํ ๊ฒ์ ์ ๋ค ๋ณด๋ฉด ๋ง์์ด ๋ฐ๋ปํด์ง๋๋ค."},{e:"๐งธ",t:"์ข์ํ๋ ์์ ๋ณด๊ธฐ",d:"์งง์ ํ๋ง ์์์ ๋ณด๋ฉฐ ์ ์ ์์ด๋ณด์ธ์."},{e:"๐",t:"์
ํ ๋ง์ฌ์งํ๊ธฐ",d:"๊ด์๋์ด์ ๋ชฉ, ์ด๊นจ๋ฅผ ์ฒ์ฒํ ๋๋ฌ์ฃผ์ธ์."},{e:"๐",t:"์กฐ์ฉํ ์์
๋ฃ๊ธฐ",d:"์๋ฌด ์๊ฐ ์์ด ์กฐ์ฉํ ์์
์ ๊ท๋ฅผ ๊ธฐ์ธ์ฌ๋ณด์ธ์."}];const M=[{t:"Weightless",a:"Marconi Union"},{t:"Clair de Lune",a:"Debussy"},{t:"Sunset Lover",a:"Petit Biscuit"},{t:"River Flows in You",a:"Yiruma"},{t:"Experience",a:"Ludovico Einaudi"},{t:"Bloom",a:"The Paper Kites"},{t:"Gymnopรฉdie No.1",a:"Erik Satie"},{t:"Kiss the Rain",a:"Yiruma"},{t:"Nuvole Bianche",a:"Ludovico Einaudi"},{t:"Blue",a:"Keshi"},{t:"Snowfall",a:"รneheart"},{t:"Dandelions",a:"Ruth B."},{t:"๋ด๋ ",a:"BTS"},{t:"Through the Night",a:"IU"}];let lr=-1,lm=-1,iT=null;function rT(){if(iT)clearTimeout(iT);iT=setTimeout(()=>{const s=document.getElementById('start-screen'),r=document.getElementById('result-screen');if(r.style.display==='flex'){r.style.display='none';s.style.display='flex';s.style.animation='none';void s.offsetWidth;s.style.animation='fadeIn 1s ease'}},30000)}['click','touchstart','keydown','mousemove','scroll'].forEach(e=>document.addEventListener(e,rT,{passive:true}));function gi(a,l){let i;do{i=Math.floor(Math.random()*a.length)}while(i===l&&a.length>1);return i}function roll(){const b=document.getElementById('diceBtn');b.classList.add('rolling');setTimeout(()=>{b.classList.remove('rolling');show()},500)}function show(){const s=document.getElementById('start-screen'),r=document.getElementById('result-screen');const i=gi(R,lr),j=gi(M,lm);lr=i;lm=j;const re=R[i],mu=M[j];document.getElementById('restEmoji').textContent=re.e;document.getElementById('restTitle').textContent=re.t;document.getElementById('restDesc').textContent=re.d;document.getElementById('musicTitle').textContent=mu.t;document.getElementById('musicArtist').textContent=mu.a;s.style.display='none';r.style.display='flex';rT();r.querySelectorAll('.result-card').forEach(c=>{c.classList.remove('show');void c.offsetWidth;c.classList.add('show')});const ba=r.querySelector('.bottom-area');ba.style.animation='none';void ba.offsetWidth;ba.style.animation='fadeIn 0.5s ease 0.6s forwards';ba.style.opacity='0'}function reroll(){const r=document.getElementById('result-screen');const i=gi(R,lr),j=gi(M,lm);lr=i;lm=j;const re=R[i],mu=M[j];rT();const cards=r.querySelectorAll('.result-card');cards.forEach(c=>c.classList.remove('show'));setTimeout(()=>{document.getElementById('restEmoji').textContent=re.e;document.getElementById('restTitle').textContent=re.t;document.getElementById('restDesc').textContent=re.d;document.getElementById('musicTitle').textContent=mu.t;document.getElementById('musicArtist').textContent=mu.a;cards.forEach(c=>{void c.offsetWidth;c.classList.add('show')})},300)}</script> |
| 67 | +</body> |
| 68 | +</html><!DOCTYPE html> |
| 69 | +<html lang="ko"> |
3 | 70 | <head> |
4 | 71 | <meta charset="UTF-8"> |
5 | 72 | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=yes"> |
|
0 commit comments