Apache
tcp/443
Open service 3.34.104.242:443 · 2900.org
2026-01-08 22:21
HTTP/1.1 200 OK
Date: Thu, 08 Jan 2026 22:21:25 GMT
Server: Apache
Last-Modified: Fri, 24 Oct 2025 07:31:35 GMT
Accept-Ranges: bytes
Content-Length: 20733
Connection: close
Content-Type: text/html
Page title: 세계시간 시계 · 반응형 v3
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>세계시간 시계 · 반응형 v3</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Orbitron:wght@500&display=swap" rel="stylesheet">
<style>
:root{
--bg: linear-gradient(120deg,#141E30,#243B55);
--card-bg: rgba(255,255,255,0.12);
--card-border: rgba(255,255,255,0.35);
--text: #fff;
--muted: rgba(255,255,255,.9);
--chip-bg: rgba(255,255,255,.06);
}
:root.light{
--bg: linear-gradient(120deg,#f5f7fa,#c3cfe2);
--card-bg: rgba(0,0,0,0.03);
--card-border: rgba(0,0,0,0.15);
--text: #101418;
--muted: rgba(0,0,0,.75);
--chip-bg: rgba(0,0,0,.05);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; min-height:100vh; display:flex; flex-direction:column; align-items:center;
justify-content:flex-start; gap:10px; padding:min(4vh,32px) min(3vw,18px) 92px;
text-align:center; transition:background 0.6s ease, color 0.3s ease; font-family:'Noto Sans KR',sans-serif;
background:var(--bg);
color:var(--text);
}
/* Controls (top-right) */
.controls{
position:fixed; top:12px; right:12px; display:flex; gap:8px; z-index:100;
}
.icon-btn{
width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
border:none; border-radius:50%; cursor:pointer;
background:rgba(255,255,255,.9); color:#333; font-size:20px; font-weight:700;
box-shadow:0 4px 10px rgba(0,0,0,.2);
}
.icon-btn:active{ transform: scale(.98) }
/* Top (main clock) */
#top{ width:100%; max-width:1100px; display:flex; flex-direction:column; align-items:center; gap:8px;}
#greeting{font-size:clamp(1.2rem,3.8vw,2.1rem); font-weight:800; text-shadow:1px 1px 6px rgba(0,0,0,.2);}
#date{font-size:clamp(1rem,2.6vw,1.3rem); opacity:.95}
#clock{
font-family:'Orbitron',sans-serif; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
font-size:clamp(2.2rem,10vw,5rem); letter-spacing:2px; text-shadow:0 0 15px rgba(0,0,0,0.25);
}
.section{width:100%; max-width:1100px; margin-top:18px;}
.section h2{font-size:clamp(1.05rem,2.4vw,1.3rem); text-align:left; margin:8px 6px 10px;}
/* Featured cities - fixed 3x2 grid. Prevent layout shift with fixed card height and tabular numbers */
.featured{display:grid; gap:12px; grid-template-columns:repeat(3, 1fr);}
.city-card{
background:linear-gradient(180deg,var(--card-bg),rgba(255,255,255,.04));
border:1px solid var(--card-border); border-radius:16px; padding:14px 16px;
backdrop-filter: blur(6px);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 8px 18px rgba(0,0,0,.12);
text-align:left; min-height:110px; display:flex; flex-direction:column; justify-content:center;
}
.city-name{font-weight:900; margin-bottom:6px; letter-spacing:.2px}
.city-time{font-family:'Orbitron',sans-serif; font-variant-numeric: tabular-nums; font-feature-settings:'tnum' 1; font-size:1.45rem; margin-bottom:4px}
.city-utc{opacity:.9; font-size:.95rem}
/* City list as responsive grid */
.list-wrap{display:flex; flex-direction:column; gap:10px}
.search-row{display:flex; gap:8px; flex-wrap:wrap}
.search-row input{
flex:1 1 260px; padding:12px 14px; border-radius:12px; border:1px solid var(--card-border);
background:var(--chip-bg); color:inherit; outline:none; max-width:640px; margin-left:4px;
}
.city-list{ display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
.city-btn{
padding:10px 12px; border-radius:12px; border:1px solid var(--card-border);
background:var(--chip-bg); color:inherit; cursor:pointer;
transition: transform .05s ease, background .2s ease; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.city-btn:active{ transform:scale(.98) }
/* Selected city panel */
#selectedPanel{
position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
min-wi