File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090029/Portfolio/bottom-nav.html

Back
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Bottom Navigation Bar</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" /> <style> /* ─── Reset & Base ─── / , ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', sans-serif; background: #f0f0f0; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* ─── Demo Phone Frame ─── / .phone-frame { width: 375px; height: 680px; background: #fafafa; border-radius: 40px; box-shadow: 0 40px 80px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.08); overflow: hidden; position: relative; display: flex; flex-direction: column; } / ─── Fake page content ─── / .page-content { flex: 1; overflow-y: auto; padding: 24px 20px 100px; background: linear-gradient(160deg, #ede7f6 0%, #f8f5ff 100%); } .content-card { background: #fff; border-radius: 16px; padding: 20px; margin-bottom: 16px; box-shadow: 0 2px 12px rgba(98,0,238,.08); } .content-card h2 { font-size: 15px; font-weight: 600; color: #1a1a2e; margin-bottom: 6px; } .content-card p { font-size: 13px; color: #888; line-height: 1.5; } .content-card .thumb { width: 100%; height: 120px; border-radius: 10px; background: linear-gradient(135deg, #b39ddb, #7c4dff); margin-bottom: 12px; display: flex; align-items: center; justify-content: center; font-size: 36px; } / ─── Bottom Navigation Bar ─── / .bottom-nav { position: absolute; bottom: 0; left: 0; right: 0; height: 72px; background: #6200EE; display: flex; align-items: stretch; box-shadow: 0 -4px 20px rgba(98, 0, 238, 0.35); border-radius: 0 0 40px 40px; / Subtle top edge highlight / border-top: 1px solid rgba(255,255,255,.12); z-index: 100; } / ─── Individual Nav Item ─── / .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; position: relative; transition: opacity .2s ease; border: none; background: transparent; padding: 0; -webkit-tap-highlight-color: transparent; opacity: 0.55; / inactive = slightly faded / } .nav-item:hover { opacity: 0.8; } / ─── Active State ─── / .nav-item.active { opacity: 1; / full brightness / } / Active pill indicator / .nav-item.active::before { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 44px; height: 32px; background: rgba(255, 255, 255, 0.15); border-radius: 12px; transition: all .3s ease; } / ─── Icon Container ─── / .nav-icon { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: #fff; transition: transform .25s cubic-bezier(.34,1.56,.64,1); } .nav-item.active .nav-icon { transform: translateY(-2px) scale(1.12); filter: drop-shadow(0 0 6px rgba(255,255,255,.5)); } .nav-icon svg { width: 24px; height: 24px; fill: currentColor; } / ─── Label ─── / .nav-label { font-size: 10px; font-weight: 500; letter-spacing: .4px; color: #fff; text-align: center; position: relative; z-index: 1; transition: font-weight .2s; line-height: 1; } .nav-item.active .nav-label { font-weight: 700; font-size: 10.5px; } / ─── Ripple Effect ─── */ .nav-item::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0); border-radius: 12px; transition: background .15s; } .nav-item:active::after { background: rgba(255,255,255,0.1); } </style> </head> <body> <div class="phone-frame"> <!-- ── Page content (demo) ── --> <div class="page-content"> <div class="content-card"> <div class="thumb">🎵</div> <h2>Now Playing — Midnight Groove</h2> <p>Artist · Album · 3:42</p> </div> <div class="content-card"> <h2>Recommended for you</h2> <p>Based on your listening history and saved tracks this week.</p> </div> <div class="content-card"> <h2>Top Charts</h2> <p>Discover what's trending globally right now.</p> </div> </div> <!-- ── Bottom Navigation ── --> <nav class="bottom-nav" role="navigation" aria-label="Bottom Navigation"> <!-- Favorites --> <button class="nav-item" id="nav-favorites" aria-label="Favorites"> <span class="nav-icon"> <!-- Heart Icon --> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5 2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08 C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.41 22 8.5 c0 3.77-3.4 6.86-8.55 11.53L12 21.35z"/> </svg> </span> <span class="nav-label">Favorites</span> </button> <!-- Music (Active) --> <button class="nav-item active" id="nav-music" aria-label="Music" aria-current="page"> <span class="nav-icon"> <!-- Music Note Icon --> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6z"/> </svg> </span> <span class="nav-label">Music</span> </button> <!-- Places --> <button class="nav-item" id="nav-places" aria-label="Places"> <span class="nav-icon"> <!-- Location Pin Icon --> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13 c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5 a2.5 2.5 0 0 1 0 5z"/> </svg> </span> <span class="nav-label">Places</span> </button> <!-- News --> <button class="nav-item" id="nav-news" aria-label="News"> <span class="nav-icon"> <!-- Newspaper Icon --> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 3H4a1 1 0 0 0-1 1v14a2 2 0 0 0 2 2h14 a2 2 0 0 0 2-2V4a1 1 0 0 0-1-1zM9 17H7v-2h2v2zm0-4H7 v-2h2v2zm0-4H7V7h2v2zm8 8h-6v-2h6v2zm0-4h-6v-2h6v2zm0-4 h-6V7h6v2z"/> </svg> </span> <span class="nav-label">News</span> </button> </nav> </div> <script> // ── Interactive active-state toggle ── const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.addEventListener('click', () => { navItems.forEach(el => { el.classList.remove('active'); el.removeAttribute('aria-current'); }); item.classList.add('active'); item.setAttribute('aria-current', 'page'); }); }); </script> </body> </html>

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.36 | proxy | phpinfo | Settings