EZSCALE/website
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove old Vuexy wrapper components (AppTextField, AppSelect, AppTextarea, FlashMessages, NotificationBell)

Browse Source 
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>
This commit is contained in:
Claude Dev
2026-03-14 17:10:23 -04:00
parent dd1a5d7ffc
commit 40c1ecc6fe
90 changed files with 20113 additions and 457 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
.superpowers/brainstorm/755514-1773519658/mobile-nav.html Normal file
View File

@@ -0,0 +1,143 @@
<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>