MotorSignal-App/docs/stitch-designs/code/39_create_club_wizard.html

520 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Motorcycle Club — Wizard</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<!-- Bootstrap 5.3 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
telemetry: {
bg: '#070A0F',
card: '#0D1117',
surface: '#121720',
border: '#1C2331',
cyan: '#00e5ff',
cyanDim: 'rgba(0, 229, 255, 0.15)',
cyanGlow: 'rgba(0, 229, 255, 0.35)',
gold: '#ffd166',
danger: '#ff4d6d'
}
},
fontFamily: {
sans: ['"Space Grotesk"', 'sans-serif'],
mono: ['"JetBrains Mono"', 'monospace']
}
}
}
}
</script>
<style>
body {
background-color: #070A0F;
color: #E2E8F0;
font-family: 'Space Grotesk', sans-serif;
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
justify-content: center;
background-image:
radial-gradient(circle at 50% 0%, rgba(0, 229, 255, 0.08) 0%, transparent 60%),
linear-gradient(to bottom, #070A0F 0%, #05080C 100%);
}
/* Mobile Container Frame: 375px nominal */
.mobile-frame {
width: 100%;
max-width: 390px;
min-height: 100vh;
background-color: #070A0F;
position: relative;
border-left: 1px solid #141b27;
border-right: 1px solid #141b27;
display: flex;
flex-direction: column;
padding-bottom: 30px;
}
/* Tactical Custom Inputs */
.telemetry-input {
background-color: #0D131C !important;
border: 1px solid #1C2738 !important;
color: #F1F5F9 !important;
border-radius: 8px !important;
padding: 12px 14px !important;
font-size: 0.925rem !important;
font-family: 'Space Grotesk', sans-serif !important;
transition: all 0.2s ease-in-out !important;
}
.telemetry-input:focus {
background-color: #0F1722 !important;
border-color: #00e5ff !important;
box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.22), 0 0 16px rgba(0, 229, 255, 0.2) !important;
outline: none !important;
}
.telemetry-input::placeholder {
color: #475569 !important;
font-size: 0.85rem !important;
}
/* Step Indicators */
.step-pill {
position: relative;
transition: all 0.25s ease;
}
.step-pill.active {
border-color: #00e5ff;
background: linear-gradient(180deg, rgba(0, 229, 255, 0.15) 0%, rgba(0, 229, 255, 0.03) 100%);
box-shadow: 0 0 12px rgba(0, 229, 255, 0.25);
}
.step-pill.active .step-num {
background-color: #00e5ff;
color: #070A0F;
font-weight: 700;
}
.step-pill.active .step-label {
color: #00e5ff;
font-weight: 600;
}
.step-pill.done {
border-color: #10b981;
background: rgba(16, 185, 129, 0.05);
}
.step-pill.done .step-num {
background-color: #10b981;
color: #070A0F;
}
/* Custom Radio Pill Selection */
.privacy-card {
border: 1px solid #1C2738;
background-color: #0D131C;
border-radius: 10px;
padding: 12px;
cursor: pointer;
transition: all 0.2s ease;
min-height: 48px;
}
.privacy-card.selected {
border-color: #00e5ff;
background: rgba(0, 229, 255, 0.07);
box-shadow: 0 0 12px rgba(0, 229, 255, 0.15);
}
.privacy-card:active {
transform: scale(0.99);
}
/* Pace Selector Button Grids */
.pace-btn {
border: 1px solid #1C2738;
background-color: #0D131C;
border-radius: 8px;
padding: 10px 8px;
min-height: 52px;
cursor: pointer;
transition: all 0.2s ease;
}
.pace-btn.selected {
border-color: #00e5ff;
background: linear-gradient(180deg, rgba(0, 229, 255, 0.18) 0%, rgba(0, 229, 255, 0.05) 100%);
box-shadow: 0 0 10px rgba(0, 229, 255, 0.25);
}
/* Tactical HUD Glitch & Accent Lines */
.corner-bracket {
position: relative;
}
.corner-bracket::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
width: 8px;
height: 8px;
border-top: 2px solid #00e5ff;
border-left: 2px solid #00e5ff;
pointer-events: none;
}
.corner-bracket::after {
content: '';
position: absolute;
bottom: -1px;
right: -1px;
width: 8px;
height: 8px;
border-bottom: 2px solid #00e5ff;
border-right: 2px solid #00e5ff;
pointer-events: none;
}
/* Glow Button */
.btn-deploy-tactical {
background: #00e5ff;
color: #070A0F;
font-weight: 700;
letter-spacing: 0.04em;
border: none;
box-shadow: 0 0 20px rgba(0, 229, 255, 0.45);
transition: all 0.18s ease-in-out;
}
.btn-deploy-tactical:hover, .btn-deploy-tactical:focus {
background: #26ecff;
box-shadow: 0 0 28px rgba(0, 229, 255, 0.65);
color: #05080C;
}
.btn-deploy-tactical:active {
transform: scale(0.98);
box-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
}
</style>
</head>
<body class="bg-[#070A0F] text-slate-100 antialiased selection:bg-cyan-500 selection:text-black">
<div class="mobile-frame mx-auto flex flex-col justify-between">
<!-- TOP TELEMETRY STATUS BAR -->
<header class="border-b border-slate-800/80 bg-[#070A0F]/95 backdrop-blur sticky top-0 z-40 px-3 py-2.5">
<div class="flex items-center justify-between font-mono text-[10px] tracking-wider text-slate-400 mb-1.5">
<div class="flex items-center space-x-1.5">
<span class="inline-block w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse"></span>
<span class="text-cyan-400 font-semibold">MOTOR<span class="text-white">SIGNAL</span></span>
<span class="text-slate-600">//</span>
<span class="text-slate-400">CH-04 MESH</span>
</div>
<div class="flex items-center space-x-2">
<span class="bg-cyan-950/60 text-cyan-300 border border-cyan-500/30 px-1.5 py-0.5 rounded text-[9px] font-bold">20Hz GNSS</span>
<span class="text-slate-300 flex items-center gap-0.5">
<span class="material-symbols-outlined text-[13px] text-cyan-400">battery_charging_90</span> 98%
</span>
</div>
</div>
<!-- NAVIGATION ROW -->
<div class="flex items-center justify-between pt-1">
<button type="button" class="w-9 h-9 rounded-lg bg-slate-900 border border-slate-800 flex items-center justify-center text-slate-300 hover:text-white active:scale-95 transition-transform" aria-label="Go Back">
<span class="material-symbols-outlined text-[19px]">arrow_back</span>
</button>
<div class="text-center">
<span class="text-[10px] font-mono tracking-widest text-cyan-400 uppercase font-semibold block leading-none">COMMISSION PROTOCOL</span>
<h1 class="text-sm font-bold tracking-tight text-white m-0 uppercase font-sans mt-0.5">Create Motorcycle Club</h1>
</div>
<button type="button" class="w-9 h-9 rounded-lg bg-slate-900 border border-slate-800 flex items-center justify-center text-slate-400 hover:text-slate-200" title="Squad Protocol Info">
<span class="material-symbols-outlined text-[18px]">help_outline</span>
</button>
</div>
<!-- 3-STEP WIZARD PROGRESS BAR -->
<div class="grid grid-cols-3 gap-1.5 mt-3 pt-1">
<!-- Step 1: Active -->
<div class="step-pill active border rounded-md p-1.5 flex flex-col items-center justify-center text-center">
<div class="flex items-center gap-1">
<span class="step-num w-3.5 h-3.5 rounded-full text-[9px] flex items-center justify-center font-mono">1</span>
<span class="step-label text-[10px] tracking-tight">Identity</span>
</div>
<span class="w-full h-0.5 bg-cyan-400 rounded-full mt-1 shadow-[0_0_6px_#00e5ff]"></span>
</div>
<!-- Step 2: Next -->
<div class="step-pill border border-slate-800/80 rounded-md p-1.5 flex flex-col items-center justify-center text-center bg-slate-900/40">
<div class="flex items-center gap-1">
<span class="step-num w-3.5 h-3.5 rounded-full bg-slate-800 text-slate-400 text-[9px] flex items-center justify-center font-mono">2</span>
<span class="step-label text-[10px] text-slate-400">Rules & Privacy</span>
</div>
<span class="w-full h-0.5 bg-slate-800 rounded-full mt-1"></span>
</div>
<!-- Step 3: Pending -->
<div class="step-pill border border-slate-800/80 rounded-md p-1.5 flex flex-col items-center justify-center text-center bg-slate-900/40">
<div class="flex items-center gap-1">
<span class="step-num w-3.5 h-3.5 rounded-full bg-slate-800 text-slate-400 text-[9px] flex items-center justify-center font-mono">3</span>
<span class="step-label text-[10px] text-slate-400">Officer Ranks</span>
</div>
<span class="w-full h-0.5 bg-slate-800 rounded-full mt-1"></span>
</div>
</div>
</header>
<!-- MAIN FORM BODY -->
<main class="px-3.5 py-3 flex-1 flex flex-col space-y-4">
<!-- SECTION 1: IDENTITY DETAILS -->
<section class="space-y-3">
<div class="flex items-center justify-between border-b border-slate-800/70 pb-1.5">
<div class="flex items-center space-x-1.5">
<span class="material-symbols-outlined text-cyan-400 text-[18px]">badge</span>
<span class="font-mono text-xs font-bold text-white tracking-wider uppercase">1. Chapter Identity</span>
</div>
<span class="font-mono text-[9px] text-cyan-400/80 bg-cyan-950/40 px-1.5 py-0.5 rounded border border-cyan-800/40">STEP 1 OF 3</span>
</div>
<!-- Club Name Input -->
<div>
<label class="block font-mono text-[11px] text-slate-300 font-medium mb-1.5 flex justify-between items-center">
<span>CLUB NAME <span class="text-cyan-400">*</span></span>
<span class="text-slate-500 text-[9px] font-normal">MAX 32 CHARS</span>
</label>
<div class="relative">
<input type="text"
class="form-control telemetry-input w-full pr-10 text-white placeholder-slate-500 font-sans"
value="Skyline Apex Hunters"
placeholder="e.g. Skyline Apex Hunters">
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-cyan-400 text-[18px] pointer-events-none">verified</span>
</div>
<p class="font-mono text-[9px] text-slate-500 mt-1 flex items-center gap-1">
<span class="inline-block w-1 h-1 rounded-full bg-cyan-400"></span>
Appears on 20Hz Pack Radar and Leaderboards
</p>
</div>
<!-- Chapter Territory Input -->
<div>
<label class="block font-mono text-[11px] text-slate-300 font-medium mb-1.5 flex justify-between items-center">
<span>CHAPTER TERRITORY / SECTOR <span class="text-cyan-400">*</span></span>
<span class="text-cyan-400 text-[9px]">CA-SECTOR 04</span>
</label>
<div class="relative">
<input type="text"
class="form-control telemetry-input w-full pr-10 text-white placeholder-slate-500 font-sans"
value="Bay Area / NorCal"
placeholder="e.g. Bay Area / NorCal">
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 text-[18px] pointer-events-none">location_on</span>
</div>
</div>
<!-- Club Patch Crest Upload Box -->
<div>
<label class="block font-mono text-[11px] text-slate-300 font-medium mb-1.5 flex justify-between items-center">
<span>CLUB PATCH CREST / LOGO</span>
<span class="text-slate-500 text-[9px]">PNG / SVG / JPG (1:1)</span>
</label>
<div class="corner-bracket border border-dashed border-cyan-500/40 bg-slate-900/60 rounded-xl p-3 text-center relative overflow-hidden">
<div class="flex items-center space-x-3.5">
<!-- Crest Preview Placeholder -->
<div class="w-16 h-16 rounded-lg bg-gradient-to-br from-cyan-950/70 to-slate-900 border border-cyan-400/50 flex flex-col items-center justify-center shrink-0 shadow-[0_0_12px_rgba(0,229,255,0.15)] relative">
<span class="material-symbols-outlined text-cyan-400 text-[28px]">sports_motorsports</span>
<span class="font-mono text-[8px] text-cyan-300 font-bold tracking-tighter uppercase mt-0.5">MC CREST</span>
<div class="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-cyan-400 text-black flex items-center justify-center text-[9px] font-bold">✓</div>
</div>
<!-- Action Buttons -->
<div class="flex-1 text-left">
<div class="font-mono text-xs font-semibold text-slate-200">Patch Emblem Preview</div>
<div class="text-[10px] text-slate-400 mb-2 leading-tight">Will be rendered on member HUDs & pack jerseys</div>
<div class="flex gap-2">
<button type="button" class="btn btn-sm bg-slate-800 hover:bg-slate-700 text-cyan-300 border border-cyan-500/30 text-[11px] font-mono py-1.5 px-2.5 rounded-lg flex items-center gap-1 active:scale-95 transition-all min-h-[38px]">
<span class="material-symbols-outlined text-[15px]">photo_camera</span>
<span>Camera</span>
</button>
<button type="button" class="btn btn-sm bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 text-[11px] font-mono py-1.5 px-2.5 rounded-lg flex items-center gap-1 active:scale-95 transition-all min-h-[38px]">
<span class="material-symbols-outlined text-[15px]">add_photo_alternate</span>
<span>Gallery</span>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SECTION 2: RULES, PRIVACY & PACE -->
<section class="space-y-3 pt-1">
<div class="flex items-center justify-between border-b border-slate-800/70 pb-1.5">
<div class="flex items-center space-x-1.5">
<span class="material-symbols-outlined text-cyan-400 text-[18px]">lock_clock</span>
<span class="font-mono text-xs font-bold text-white tracking-wider uppercase">2. Rules & Governance</span>
</div>
<span class="font-mono text-[9px] text-slate-400">TELEMETRY ACCESS</span>
</div>
<!-- Privacy Radio Pills -->
<div>
<label class="block font-mono text-[11px] text-slate-300 font-medium mb-1.5">
PRIVACY & INDUCTION PROTOCOL <span class="text-cyan-400">*</span>
</label>
<div class="space-y-2">
<!-- Option 1: Open Membership -->
<label class="privacy-card flex items-start space-x-2.5 block m-0">
<input type="radio" name="privacy_tier" class="form-check-input mt-1 accent-cyan-400 shrink-0" style="accent-color: #00e5ff;">
<div class="flex-1">
<div class="flex items-center justify-between">
<span class="font-mono text-xs font-bold text-white">Open Membership</span>
<span class="font-mono text-[9px] text-slate-400 bg-slate-800/80 px-1.5 py-0.5 rounded">INSTANT MESH</span>
</div>
<div class="text-[10px] text-slate-400 mt-0.5">Any verified rider in sector can auto-pair telemetry and view rides.</div>
</div>
</label>
<!-- Option 2: Application Required (Selected) -->
<label class="privacy-card selected flex items-start space-x-2.5 block m-0">
<input type="radio" name="privacy_tier" checked class="form-check-input mt-1 accent-cyan-400 shrink-0" style="accent-color: #00e5ff;">
<div class="flex-1">
<div class="flex items-center justify-between">
<span class="font-mono text-xs font-bold text-cyan-300 flex items-center gap-1">
Application & Screening Required
<span class="material-symbols-outlined text-cyan-400 text-[14px]">shield</span>
</span>
<span class="font-mono text-[9px] text-cyan-300 bg-cyan-950 px-1.5 py-0.5 rounded border border-cyan-500/40">RECOMMENDED</span>
</div>
<div class="text-[10px] text-slate-300 mt-0.5">Officers review rider lean logs, safety index, and bike specs before induction.</div>
</div>
</label>
<!-- Option 3: Secret / Invite Only -->
<label class="privacy-card flex items-start space-x-2.5 block m-0">
<input type="radio" name="privacy_tier" class="form-check-input mt-1 accent-cyan-400 shrink-0" style="accent-color: #00e5ff;">
<div class="flex-1">
<div class="flex items-center justify-between">
<span class="font-mono text-xs font-bold text-white">Secret / Invitation Only</span>
<span class="font-mono text-[9px] text-rose-400 bg-rose-950/60 px-1.5 py-0.5 rounded border border-rose-900/40">HIDDEN MESH</span>
</div>
<div class="text-[10px] text-slate-400 mt-0.5">Hidden from public directory. Requires 6-digit cryptographic PIN or QR pass.</div>
</div>
</label>
</div>
</div>
<!-- Minimum Pace Classification Selector -->
<div>
<div class="flex items-center justify-between mb-1.5">
<label class="font-mono text-[11px] text-slate-300 font-medium m-0">
MINIMUM PACE CLASSIFICATION <span class="text-cyan-400">*</span>
</label>
<span class="font-mono text-[9px] text-amber-300">PACE 3 ACTIVE</span>
</div>
<!-- Pace 1 to 4 Grid -->
<div class="grid grid-cols-4 gap-1.5">
<!-- Pace 1 -->
<div class="pace-btn flex flex-col items-center justify-center text-center">
<span class="font-mono text-[10px] text-slate-400 font-bold">PACE 1</span>
<span class="text-[9px] text-slate-400 leading-tight">Cruiser</span>
<span class="font-mono text-[8px] text-slate-500">&lt;35° Lean</span>
</div>
<!-- Pace 2 -->
<div class="pace-btn flex flex-col items-center justify-center text-center">
<span class="font-mono text-[10px] text-slate-300 font-bold">PACE 2</span>
<span class="text-[9px] text-slate-300 leading-tight">Touring</span>
<span class="font-mono text-[8px] text-slate-500">35°–42°</span>
</div>
<!-- Pace 3 (Selected) -->
<div class="pace-btn selected flex flex-col items-center justify-center text-center">
<span class="font-mono text-[10px] text-cyan-300 font-bold">PACE 3</span>
<span class="text-[9px] text-white font-semibold leading-tight">Brisk</span>
<span class="font-mono text-[8px] text-cyan-400 font-bold">42°–49°</span>
</div>
<!-- Pace 4 -->
<div class="pace-btn flex flex-col items-center justify-center text-center">
<span class="font-mono text-[10px] text-slate-400 font-bold">PACE 4</span>
<span class="text-[9px] text-rose-300 leading-tight">Track Exp.</span>
<span class="font-mono text-[8px] text-rose-400 font-bold">&gt;50° Apex</span>
</div>
</div>
<div class="text-[9px] font-mono text-slate-400 mt-1 flex items-center justify-between">
<span>Riders below Pace 3 receive automated corner advisory alerts</span>
<span class="text-cyan-400 font-semibold">20Hz Verified</span>
</div>
</div>
</section>
<!-- SECTION 3: STEP 3 PREVIEW (OFFICER RANKS SUMMARY) -->
<section class="border border-slate-800 bg-slate-900/40 rounded-xl p-2.5">
<div class="flex items-center justify-between text-xs font-mono">
<div class="flex items-center space-x-1.5 text-slate-300">
<span class="material-symbols-outlined text-[16px] text-cyan-400">group_work</span>
<span>NEXT: 3. OFFICER RANKS LADDER</span>
</div>
<span class="text-[10px] text-slate-500 font-sans">President • VP • Tail Gunner</span>
</div>
</section>
<!-- GLOVE-FRIENDLY SUBMIT / DEPLOY ACTION -->
<div class="pt-2">
<button type="button"
class="btn btn-deploy-tactical w-full h-[52px] rounded-xl flex items-center justify-center space-x-2 text-sm uppercase cursor-pointer"
style="min-height: 48px;">
<span class="material-symbols-outlined text-[20px]">rocket_launch</span>
<span class="font-mono font-bold tracking-wider">DEPLOY CLUB CHAPTER</span>
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
</button>
<div class="flex items-center justify-between text-[9px] font-mono text-slate-500 mt-2 px-1">
<span class="flex items-center gap-1">
<span class="material-symbols-outlined text-[12px] text-cyan-400">security</span>
Auto-binds Founder Call-sign @ApexMarcus
</span>
<span class="text-slate-400">Glove Target: 52px</span>
</div>
</div>
</main>
<!-- FIXED MOBILE TACTICAL BOTTOM NAVIGATION -->
<nav class="border-t border-slate-800/90 bg-[#070A0F]/95 backdrop-blur px-2 py-1.5 grid grid-cols-5 text-center mt-auto">
<a href="#" class="flex flex-col items-center justify-center py-1 text-slate-400 hover:text-cyan-400 active:scale-95 transition-all text-decoration-none min-h-[48px]">
<span class="material-symbols-outlined text-[20px]">speed</span>
<span class="text-[9px] font-mono mt-0.5">Dash</span>
</a>
<a href="#" class="flex flex-col items-center justify-center py-1 text-slate-400 hover:text-cyan-400 active:scale-95 transition-all text-decoration-none min-h-[48px]">
<span class="material-symbols-outlined text-[20px]">navigation</span>
<span class="text-[9px] font-mono mt-0.5">Map</span>
</a>
<a href="#" class="flex flex-col items-center justify-center py-1 text-cyan-400 active:scale-95 transition-all text-decoration-none min-h-[48px] relative">
<div class="absolute -top-1 w-6 h-0.5 bg-cyan-400 shadow-[0_0_8px_#00e5ff]"></div>
<span class="material-symbols-outlined text-[20px]">groups</span>
<span class="text-[9px] font-mono font-bold mt-0.5">Clubs</span>
</a>
<a href="#" class="flex flex-col items-center justify-center py-1 text-slate-400 hover:text-cyan-400 active:scale-95 transition-all text-decoration-none min-h-[48px]">
<span class="material-symbols-outlined text-[20px]">two_wheeler</span>
<span class="text-[9px] font-mono mt-0.5">Garage</span>
</a>
<a href="#" class="flex flex-col items-center justify-center py-1 text-slate-400 hover:text-cyan-400 active:scale-95 transition-all text-decoration-none min-h-[48px]">
<span class="material-symbols-outlined text-[20px]">settings</span>
<span class="text-[9px] font-mono mt-0.5">Settings</span>
</a>
</nav>
</div>
<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>