mirror of
https://github.com/thecyberlearn/quantum-digital-branding.git
synced 2026-08-18 06:52:58 +00:00
9fc5ac0e02
🚀 Added comprehensive brand strategy generation tool with: - Modern dark theme with glassmorphism design - Multi-step form with progressive disclosure - AI autofill functionality with industry-specific templates - SOSTAC+RACE framework implementation - Responsive design with smooth animations - PDF export capability simulation 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
258 lines
15 KiB
HTML
258 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="AI-powered brand strategy generator for internal staff use. Create professional brand strategies in minutes using SOSTAC+RACE framework.">
|
|
<meta name="keywords" content="brand strategy, AI marketing, SOSTAC framework, digital marketing, business strategy">
|
|
<title>AI Brand Strategy Generator - Internal Tool</title>
|
|
|
|
<!-- External Stylesheets -->
|
|
<link rel="stylesheet" href="styles.css">
|
|
|
|
<!-- Favicon and PWA meta tags -->
|
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>">
|
|
<meta name="theme-color" content="#00d4aa">
|
|
|
|
<!-- Preload critical resources -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Application Header -->
|
|
<header class="app-header">
|
|
<div class="hero-content">
|
|
<h1 class="hero-title">
|
|
<span class="hero-word" data-delay="0">🚀</span>
|
|
<span class="hero-word" data-delay="100">AI</span>
|
|
<span class="hero-word" data-delay="200">Brand</span>
|
|
<span class="hero-word" data-delay="300">Strategy</span>
|
|
<span class="hero-word" data-delay="400">Generator</span>
|
|
</h1>
|
|
<p class="hero-subtitle">
|
|
<span class="hero-line" data-delay="600">Professional Brand Strategies</span>
|
|
<span class="hero-line" data-delay="800">in Minutes - Internal Staff Tool</span>
|
|
</p>
|
|
<div class="hero-decoration" data-delay="1000"></div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Application Content -->
|
|
<main class="main-content" role="main">
|
|
|
|
<!-- Login Screen -->
|
|
<section id="loginScreen" class="screen active" aria-label="Staff Login">
|
|
<div class="form-container text-center">
|
|
<div class="form-header">
|
|
<h2 class="form-title">Staff Login</h2>
|
|
<p class="form-subtitle">Access your brand strategy dashboard</p>
|
|
</div>
|
|
|
|
<!-- Demo Banner -->
|
|
<div class="demo-banner" role="banner">
|
|
<strong>🎯 Demo Mode:</strong> Click any demo scenario below or use the login form to explore
|
|
</div>
|
|
|
|
<!-- Login Form -->
|
|
<div style="max-width: 400px; margin: 0 auto;">
|
|
<form id="loginForm" onsubmit="event.preventDefault(); login();">
|
|
<div class="form-group">
|
|
<label class="form-label" for="username">Username</label>
|
|
<input class="form-input" type="text" id="username" placeholder="Enter your username" value="demo@company.com" autocomplete="username">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="password">Password</label>
|
|
<input class="form-input" type="password" id="password" placeholder="Enter your password" value="demo123" autocomplete="current-password">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-large">Login to Dashboard</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Demo Scenarios -->
|
|
<div style="margin: var(--space-10) 0;">
|
|
<h3 style="color: var(--color-primary); margin-bottom: var(--space-6); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold);">Quick Demo Scenarios</h3>
|
|
<div class="demo-scenarios">
|
|
<article class="demo-card" onclick="loadDemoScenario('tech')" tabindex="0" role="button" aria-label="Tech startup demo scenario">
|
|
<h4>🚀 Tech Startup</h4>
|
|
<p>AI-powered SaaS platform seeking Series A funding and market expansion</p>
|
|
</article>
|
|
<article class="demo-card" onclick="loadDemoScenario('healthcare')" tabindex="0" role="button" aria-label="Healthcare practice demo scenario">
|
|
<h4>🏥 Healthcare Practice</h4>
|
|
<p>Multi-location dental practice looking to modernize patient acquisition</p>
|
|
</article>
|
|
<article class="demo-card" onclick="loadDemoScenario('retail')" tabindex="0" role="button" aria-label="E-commerce retail demo scenario">
|
|
<h4>🛍️ E-commerce Retail</h4>
|
|
<p>Fashion brand transitioning from brick-and-mortar to online-first strategy</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Dashboard Screen -->
|
|
<section id="dashboardScreen" class="screen" aria-label="Staff Dashboard">
|
|
<div class="dashboard-container">
|
|
<div class="dashboard-header">
|
|
<h2 class="dashboard-title">Staff Dashboard</h2>
|
|
<button class="btn btn-secondary" onclick="logout()" aria-label="Logout from dashboard">Logout</button>
|
|
</div>
|
|
|
|
<div class="dashboard-grid">
|
|
<article class="dashboard-card">
|
|
<div class="card-header">
|
|
<span class="card-icon">📊</span>
|
|
<h3 class="card-title">Create New Strategy</h3>
|
|
</div>
|
|
<p class="card-description">Generate a comprehensive brand strategy using our AI-powered SOSTAC+RACE framework</p>
|
|
<button class="btn btn-primary" onclick="startNewStrategy()">Start New Project</button>
|
|
</article>
|
|
|
|
<article class="dashboard-card">
|
|
<div class="card-header">
|
|
<span class="card-icon">📁</span>
|
|
<h3 class="card-title">Recent Projects</h3>
|
|
</div>
|
|
<div style="margin-top: var(--space-4);">
|
|
<div style="padding: var(--space-3); background: var(--color-bg); border-radius: var(--radius-lg); margin-bottom: var(--space-3); border: 1px solid var(--color-border);">
|
|
<strong style="color: var(--color-primary);">QuantumFlow AI</strong>
|
|
<span style="color: var(--color-tertiary); font-size: var(--font-size-sm);">- Completed 2 days ago</span>
|
|
</div>
|
|
<div style="padding: var(--space-3); background: var(--color-bg); border-radius: var(--radius-lg); margin-bottom: var(--space-3); border: 1px solid var(--color-border);">
|
|
<strong style="color: var(--color-primary);">SmileCare Dental</strong>
|
|
<span style="color: var(--color-tertiary); font-size: var(--font-size-sm);">- Completed 1 week ago</span>
|
|
</div>
|
|
<div style="padding: var(--space-3); background: var(--color-bg); border-radius: var(--radius-lg); border: 1px solid var(--color-border);">
|
|
<strong style="color: var(--color-primary);">EcoStyle Fashion</strong>
|
|
<span style="color: var(--color-tertiary); font-size: var(--font-size-sm);">- Completed 2 weeks ago</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="dashboard-card">
|
|
<div class="card-header">
|
|
<span class="card-icon">📈</span>
|
|
<h3 class="card-title">Usage Analytics</h3>
|
|
</div>
|
|
<p class="card-description">This month:</p>
|
|
<ul style="color: var(--color-secondary); padding-left: var(--space-5); line-height: var(--line-height-relaxed);">
|
|
<li>12 strategies generated</li>
|
|
<li>8 client presentations delivered</li>
|
|
<li>95% client satisfaction score</li>
|
|
<li>Avg. creation time: 22 minutes</li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article class="dashboard-card">
|
|
<div class="card-header">
|
|
<span class="card-icon">📝</span>
|
|
<h3 class="card-title">Strategy Templates</h3>
|
|
</div>
|
|
<p class="card-description">Industry-specific templates for faster strategy generation</p>
|
|
<div style="margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2);">
|
|
<span class="tag">Tech</span>
|
|
<span class="tag">Healthcare</span>
|
|
<span class="tag">Retail</span>
|
|
<span class="tag">Finance</span>
|
|
<span class="tag">Manufacturing</span>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Form Screen -->
|
|
<section id="formScreen" class="screen" aria-label="Client Information Form">
|
|
<div class="form-container">
|
|
<div class="form-header">
|
|
<h2 class="form-title">Client Information Intake</h2>
|
|
<p class="form-subtitle">Let's gather the details needed to create your brand strategy</p>
|
|
</div>
|
|
|
|
<!-- Progress Container -->
|
|
<div class="progress-container">
|
|
<!-- Step Indicator -->
|
|
<nav class="step-indicator" role="navigation" aria-label="Form progress">
|
|
<div class="step-item active" id="step1Indicator">
|
|
<div class="step-circle">1</div>
|
|
<div class="step-label">Company Basics</div>
|
|
</div>
|
|
<div class="step-item" id="step2Indicator">
|
|
<div class="step-circle">2</div>
|
|
<div class="step-label">Current Situation</div>
|
|
</div>
|
|
<div class="step-item" id="step3Indicator">
|
|
<div class="step-circle">3</div>
|
|
<div class="step-label">Objectives</div>
|
|
</div>
|
|
<div class="step-item" id="step4Indicator">
|
|
<div class="step-circle">4</div>
|
|
<div class="step-label">Target Audience</div>
|
|
</div>
|
|
<div class="step-item" id="step5Indicator">
|
|
<div class="step-circle">5</div>
|
|
<div class="step-label">Competition</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Progress Bar -->
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-fill" id="progressFill" style="width: 20%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Container -->
|
|
<form id="clientForm" onsubmit="event.preventDefault(); nextStep();" novalidate>
|
|
<!-- Form steps will be dynamically generated by JavaScript -->
|
|
</form>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="form-navigation">
|
|
<button type="button" class="btn btn-secondary" id="prevBtn" onclick="previousStep()" style="display: none;">← Previous</button>
|
|
<button type="button" class="btn btn-primary" id="nextBtn" onclick="nextStep()">Next Step →</button>
|
|
</nav>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Processing Screen -->
|
|
<section id="processingScreen" class="screen" aria-label="AI Processing">
|
|
<div class="loading-container">
|
|
<div class="spinner" role="status" aria-label="Processing strategy"></div>
|
|
<div class="loading-message" id="loadingMessage">🚀 Initializing AI Strategy Engine...</div>
|
|
<div class="progress-bar" style="max-width: 400px; margin: var(--space-8) auto;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-fill" id="processingProgress" style="width: 0%;"></div>
|
|
</div>
|
|
<p class="loading-subtitle">This usually takes 30-60 seconds</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Strategy Output Screen -->
|
|
<section id="strategyScreen" class="screen" aria-label="Generated Strategy">
|
|
<div class="strategy-container">
|
|
<!-- Strategy Header -->
|
|
<header class="strategy-header">
|
|
<h2 class="strategy-title">Brand Strategy Report</h2>
|
|
<p class="strategy-subtitle">Generated for: <span id="clientCompanyName" style="font-weight: var(--font-weight-semibold); color: var(--color-accent);"></span></p>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="strategy-actions">
|
|
<button class="btn btn-primary" onclick="exportToPDF()" aria-label="Export strategy to PDF">📄 Export to PDF</button>
|
|
<button class="btn btn-secondary" onclick="editStrategy()" aria-label="Edit strategy content">✏️ Edit Strategy</button>
|
|
<button class="btn btn-secondary" onclick="backToDashboard()" aria-label="Return to dashboard">🏠 Back to Dashboard</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Strategy Content -->
|
|
<div id="strategyContent" role="main">
|
|
<!-- Strategy content will be dynamically generated -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- JavaScript -->
|
|
<script src="script.js"></script>
|
|
|
|
</body>
|
|
</html> |