40c1ecc6fe
All pages now use native Vuetify components directly. Flash messages are handled by the ToastStack component via Pinia store. Notifications use NotificationPanel. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
144 lines
7.8 KiB
HTML
144 lines
7.8 KiB
HTML
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
* { font-family: 'Plus Jakarta Sans', sans-serif; box-sizing: border-box; }
|
|
.phone-frame {
|
|
width: 320px;
|
|
height: 580px;
|
|
border: 2px solid rgba(255,255,255,0.1);
|
|
border-radius: 28px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background: #0a0a0f;
|
|
}
|
|
.phone-notch {
|
|
width: 120px;
|
|
height: 24px;
|
|
background: #000;
|
|
border-radius: 0 0 16px 16px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
.phone-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
background: rgba(10,10,15,0.95);
|
|
backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|
}
|
|
.phone-logo { font-weight: 800; font-size: 15px; color: #60a5fa; }
|
|
.hamburger { width: 22px; height: 16px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; }
|
|
.hamburger span { display: block; height: 2px; background: rgba(255,255,255,0.7); border-radius: 2px; }
|
|
.phone-content { padding: 20px 16px; }
|
|
.phone-content h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 8px; }
|
|
.phone-content p { font-size: 13px; opacity: 0.5; line-height: 1.5; }
|
|
.nav-item { padding: 14px 16px; font-size: 16px; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,0.05); }
|
|
.nav-item-active { color: #60a5fa; }
|
|
.nav-cta { margin: 16px; padding: 12px; background: #1d4ed8; border-radius: 999px; text-align: center; font-weight: 600; font-size: 14px; color: white; }
|
|
</style>
|
|
|
|
<h2>Mobile Navigation Styles</h2>
|
|
<p class="subtitle">Each shown in a phone frame mockup. Click to select your preference.</p>
|
|
|
|
<div style="display:flex;gap:32px;justify-content:center;margin-top:32px;flex-wrap:wrap;">
|
|
|
|
<!-- A: Hamburger Slide-in -->
|
|
<div class="card" data-choice="slide-in" onclick="toggleSelect(this)" style="padding:24px;cursor:pointer;text-align:center;">
|
|
<div style="margin-bottom:12px;"><span class="label">A</span> <strong>Slide-in Panel</strong></div>
|
|
<div class="phone-frame" style="margin:0 auto;">
|
|
<div class="phone-notch"></div>
|
|
<div class="phone-header">
|
|
<span class="phone-logo">EZSCALE</span>
|
|
<div class="hamburger"><span></span><span></span><span></span></div>
|
|
</div>
|
|
<!-- Slide-in panel from right -->
|
|
<div style="position:absolute;top:0;right:0;width:75%;height:100%;background:rgba(12,14,20,0.98);backdrop-filter:blur(20px);border-left:1px solid rgba(255,255,255,0.08);z-index:5;padding-top:70px;">
|
|
<div class="nav-item nav-item-active">Home</div>
|
|
<div class="nav-item">VPS Hosting</div>
|
|
<div class="nav-item">Dedicated Servers</div>
|
|
<div class="nav-item">Web Hosting</div>
|
|
<div class="nav-item">Game Servers</div>
|
|
<div class="nav-item">Pricing</div>
|
|
<div class="nav-item">About</div>
|
|
<div class="nav-item">Contact</div>
|
|
<div class="nav-cta">Get Started</div>
|
|
<div style="padding:16px;text-align:center;font-size:13px;opacity:0.4;">Log In</div>
|
|
</div>
|
|
<!-- Overlay -->
|
|
<div style="position:absolute;top:0;left:0;width:25%;height:100%;background:rgba(0,0,0,0.5);z-index:4;"></div>
|
|
<div class="phone-content" style="opacity:0.3;">
|
|
<h3>Cloud Infrastructure</h3>
|
|
<p>Deploy high-performance virtual servers in seconds.</p>
|
|
</div>
|
|
</div>
|
|
<p style="font-size:12px;opacity:0.4;margin-top:12px;">Standard pattern — slides from right</p>
|
|
</div>
|
|
|
|
<!-- B: Bottom Sheet -->
|
|
<div class="card" data-choice="bottom-sheet" onclick="toggleSelect(this)" style="padding:24px;cursor:pointer;text-align:center;">
|
|
<div style="margin-bottom:12px;"><span class="label">B</span> <strong>Bottom Sheet</strong></div>
|
|
<div class="phone-frame" style="margin:0 auto;">
|
|
<div class="phone-notch"></div>
|
|
<div class="phone-header">
|
|
<span class="phone-logo">EZSCALE</span>
|
|
<div class="hamburger"><span></span><span></span><span></span></div>
|
|
</div>
|
|
<div class="phone-content" style="opacity:0.3;">
|
|
<h3>Cloud Infrastructure</h3>
|
|
<p>Deploy high-performance virtual servers in seconds.</p>
|
|
</div>
|
|
<!-- Overlay -->
|
|
<div style="position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);z-index:4;"></div>
|
|
<!-- Bottom sheet -->
|
|
<div style="position:absolute;bottom:0;left:0;right:0;background:rgba(15,17,25,0.98);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,0.08);border-radius:20px 20px 0 0;z-index:5;padding:8px 0 20px;">
|
|
<!-- Handle -->
|
|
<div style="width:40px;height:4px;background:rgba(255,255,255,0.2);border-radius:4px;margin:8px auto 16px;"></div>
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:0 12px;">
|
|
<div style="padding:12px;border-radius:10px;background:rgba(29,78,216,0.1);text-align:center;font-size:13px;font-weight:500;color:#60a5fa;">Home</div>
|
|
<div style="padding:12px;border-radius:10px;background:rgba(255,255,255,0.03);text-align:center;font-size:13px;opacity:0.7;">VPS</div>
|
|
<div style="padding:12px;border-radius:10px;background:rgba(255,255,255,0.03);text-align:center;font-size:13px;opacity:0.7;">Dedicated</div>
|
|
<div style="padding:12px;border-radius:10px;background:rgba(255,255,255,0.03);text-align:center;font-size:13px;opacity:0.7;">Web</div>
|
|
<div style="padding:12px;border-radius:10px;background:rgba(255,255,255,0.03);text-align:center;font-size:13px;opacity:0.7;">Gaming</div>
|
|
<div style="padding:12px;border-radius:10px;background:rgba(255,255,255,0.03);text-align:center;font-size:13px;opacity:0.7;">Pricing</div>
|
|
</div>
|
|
<div style="padding:8px 12px 0;">
|
|
<div class="nav-cta" style="margin:12px 0 0;">Get Started</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p style="font-size:12px;opacity:0.4;margin-top:12px;">App-like — slides up from bottom</p>
|
|
</div>
|
|
|
|
<!-- C: Full-screen Overlay -->
|
|
<div class="card" data-choice="fullscreen" onclick="toggleSelect(this)" style="padding:24px;cursor:pointer;text-align:center;">
|
|
<div style="margin-bottom:12px;"><span class="label">C</span> <strong>Full-screen Overlay</strong></div>
|
|
<div class="phone-frame" style="margin:0 auto;">
|
|
<div class="phone-notch"></div>
|
|
<!-- Full screen nav -->
|
|
<div style="position:absolute;inset:0;background:linear-gradient(180deg, #0c1929 0%, #0a0f1a 100%);z-index:5;display:flex;flex-direction:column;">
|
|
<div style="display:flex;align-items:center;justify-content:space-between;padding:36px 16px 12px;">
|
|
<span class="phone-logo">EZSCALE</span>
|
|
<div style="font-size:20px;opacity:0.6;cursor:pointer;">✕</div>
|
|
</div>
|
|
<div style="flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 24px;">
|
|
<div style="font-size:28px;font-weight:700;padding:12px 0;color:#60a5fa;">Home</div>
|
|
<div style="font-size:28px;font-weight:700;padding:12px 0;opacity:0.6;">VPS Hosting</div>
|
|
<div style="font-size:28px;font-weight:700;padding:12px 0;opacity:0.6;">Dedicated</div>
|
|
<div style="font-size:28px;font-weight:700;padding:12px 0;opacity:0.6;">Web Hosting</div>
|
|
<div style="font-size:28px;font-weight:700;padding:12px 0;opacity:0.6;">Game Servers</div>
|
|
<div style="font-size:28px;font-weight:700;padding:12px 0;opacity:0.6;">Pricing</div>
|
|
</div>
|
|
<div style="padding:20px 24px 32px;">
|
|
<div class="nav-cta" style="margin:0;">Get Started</div>
|
|
<div style="text-align:center;padding:12px;font-size:14px;opacity:0.4;">Log In</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p style="font-size:12px;opacity:0.4;margin-top:12px;">Bold — takes over entire screen</p>
|
|
</div>
|
|
|
|
</div>
|