Hugging Face's logo

Spaces:
shazzar00ni
/
simple-scribbles-new
Running

App Files Community
simple-scribbles-new / index.html
shazzar00ni's picture
shazzar00ni
# Simple Scribbles - Waitlist & Demo Application A comprehensive waitlist system and product demo for Simple Scribbles, an intuitive, simple and minimal note-taking application for busy professionals and students. ## Features ### Landing Page - **Modern, responsive design** with gradient backgrounds and smooth animations - **Hero section** with compelling headline and call-to-action buttons - **Feature showcase** highlighting key product benefits - **Social proof section** with testimonials and user statistics - **Waitlist signup modal** with form validation - **Professional navigation** and footer ### Product Demo - **Interactive writing canvas** with real-time saving and auto-updating. - **Multiple writing tools** (pen, typography, fonts) with customizable brush sizes - **Color palette** with 20+ preset colors plus custom color picker - **Canvas controls** (clear, download/save functionality) - **Responsive toolbar** with intuitive tool selection - **Touch-friendly interface** for mobile and tablet use ### Waitlist System - **Email capture form** with validation and error handling - **Data persistence** using localStorage (easily replaceable with database) - **Duplicate email prevention** - **Thank you page** with confirmation and bonus offer - **Confetti animation** for successful signups ### Admin Dashboard - **Comprehensive analytics** showing total signups, daily/weekly metrics - **Searchable user list** with filtering and sorting options - **CSV export functionality** for data backup and email marketing - **Responsive data table** with user details and timestamps - **Real-time statistics** and visual indicators ## Technology Stack - **Frontend**: React 18 with TypeScript - **Routing**: React Router DOM - **Styling**: Tailwind CSS with custom gradients and animations - **Icons**: Lucide React - **Canvas Drawing**: Native HTML5 Canvas API - **Data Storage**: localStorage (production-ready for database integration) - **Build Tool**: Vite - **Animations**: Canvas Confetti for celebration effects ## Getting Started ### Prerequisites - Node.js 16+ and npm ### Installation 1. **Clone and install dependencies**: ```bash npm install ``` 2. **Start development server**: ```bash npm run dev ``` 3. **Build for production**: ```bash npm run build ``` ### Project Structure ``` src/ ├── components/          # Reusable UI components │   ├── Header.tsx      # Navigation header │   ├── Footer.tsx      # Site footer │   └── WaitlistForm.tsx # Modal signup form ├── pages/              # Main application pages │   ├── LandingPage.tsx # Marketing landing page │   ├── DemoPage.tsx    # Interactive drawing demo │   ├── AdminPage.tsx   # Waitlist management │   └── ThankYouPage.tsx # Post-signup confirmation ├── types/              # TypeScript type definitions ├── utils/              # Utility functions and storage └── App.tsx            # Main application router ``` ## Key Features Implementation ### Waitlist Form Validation - Real-time email format validation - Required field checking - Duplicate email prevention - User-friendly error messages - Loading states and success feedback ### Drawing and writing Canvas Features - Pressure-sensitive drawing (simulated) - Smooth line rendering with rounded caps - Multiple brush sizes (1-50px) - Color selection with both presets and custom picker - Eraser tool with destination-out blending - Canvas export as PNG images and download documents as PDF/DOCX - Responsive canvas sizing ### Admin Analytics - Real-time signup tracking - Filterable and sortable user data - Search functionality across names and emails - CSV export with formatted timestamps - Mobile-responsive data tables ### Data Management - localStorage-based persistence (easily replaceable) - JSON data structure for easy database migration - Error handling and data validation - Export functionality for marketing tools ## Database Integration Guide To integrate with a real database (recommended for production): 1. **Replace storage utilities** in `src/utils/storage.ts`:    - Replace localStorage calls with API endpoints    - Add authentication for admin functions    - Implement proper error handling 2. **Add environment variables**: ```env VITE_API_BASE_URL=your-backend-url VITE_SUPABASE_URL=your-supabase-url VITE_SUPABASE_ANON_KEY=your-key ``` 3. **Recommended database schema**: ```sql CREATE TABLE waitlist_entries (   id UUID PRIMARY KEY DEFAULT gen_random_uuid(),   name VARCHAR(255) NOT NULL,   email VARCHAR(255) UNIQUE NOT NULL,   interest VARCHAR(100) NOT NULL,   created_at TIMESTAMP DEFAULT NOW(),   updated_at TIMESTAMP DEFAULT NOW() ); ``` ## Deployment ### Netlify (Recommended) 1. Connect your GitHub repository 2. Set build command: `npm run build` 3. Set publish directory: `dist` 4. Deploy with automatic deployments on push ### Vercel ```bash npm install -g vercel vercel --prod ``` ### Traditional Hosting ```bash npm run build # Upload dist/ contents to your web server ``` ## Analytics Integration Add tracking to key user interactions: ```javascript // Example: Google Analytics 4 gtag('event', 'waitlist_signup', {   event_category: 'engagement',   event_label: formData.interest }); gtag('event', 'demo_interaction', {   event_category: 'product_demo',   event_label: 'canvas_draw' }); ``` ## Email Marketing Integration The admin panel exports CSV data compatible with: - Mailchimp - ConvertKit - SendGrid - Custom email services Export includes all necessary fields for segmentation and personalization. ## Security Considerations For production deployment: 1. **Add rate limiting** to prevent spam signups 2. **Implement CAPTCHA** for form submission 3. **Use HTTPS** for all communications 4. **Sanitize user inputs** before database storage 5. **Add admin authentication** for dashboard access 6. **Enable CORS protection** for API endpoints ## Performance Optimizations - **Code splitting** with React.lazy for pages - **Image optimization** with modern formats - **CDN integration** for static assets - **Service worker** for offline functionality - **Database indexing** on email and timestamp fields ## Customization Options ### Branding - Update colors in `tailwind.config.js` - Replace logo and icons in components - Modify gradients and animations - Update copy and messaging ### Features - Add more drawing tools (shapes, text, layers) - Implement user accounts and saved documents/notes - Add collaboration features - Include advanced brush settings This application provides a solid foundation for launching a digital product with proper user acquisition, engagement tracking, and management tools. - Initial Deployment
db6fc9e verified
raw
history blame contribute delete
55 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Simple Scribbles - Minimal Note Taking</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
 font-family: 'Inter', sans-serif;
 overflow-x: hidden;
 }
.gradient-bg {
 background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
 }
.hero-gradient {
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
.feature-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
.tool-btn.active {
 background-color: #4f46e5;
 color: white;
 }
.drawing-canvas {
 touch-action: none;
 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
.modal {
 transition: opacity 0.3s ease, visibility 0.3s ease;
 }
.modal.show {
 opacity: 1;
 visibility: visible;
 }
.color-option {
 width: 28px;
 height: 28px;
 cursor: pointer;
 transition: transform 0.2s;
 }
.color-option:hover {
 transform: scale(1.1);
 }
.color-option.selected {
 outline: 2px solid #4f46e5;
 outline-offset: 2px;
 }
.confetti {
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 pointer-events: none;
 z-index: 1000;
 }
.fade-in {
 animation: fadeIn 0.5s ease-in;
 }
@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
 }
 </style>
</head>
<body class="gradient-bg min-h-screen">
 <!-- Navigation -->
 <nav class="bg-white shadow-sm">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex justify-between h-16">
 <div class="flex items-center">
 <div class="flex-shrink-0 flex items-center">
 <svg class="h-8 w-8 text-indigo-600" fill="currentColor" viewBox="0 0 20 20">
 <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
 </svg>
 <span class="ml-2 text-xl font-bold text-gray-900">Simple Scribbles</span>
 </div>
 </div>
 <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
 <a href="#features" class="text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Features</a>
 <a href="#testimonials" class="text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Testimonials</a>
 <a href="#demo" class="text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Demo</a>
 <button onclick="openWaitlistModal()" class="ml-8 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
 Join Waitlist
 </button>
 </div>
 <div class="-mr-2 flex items-center md:hidden">
 <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">
 <span class="sr-only">Open main menu</span>
 <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
 </svg>
 <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
 </svg>
 </button>
 </div>
 </div>
 </div>
<!-- Mobile menu -->
 <div class="hidden md:hidden" id="mobile-menu">
 <div class="pt-2 pb-3 space-y-1">
 <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Features</a>
 <a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Testimonials</a>
 <a href="#demo" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Demo</a>
 <button onclick="openWaitlistModal()" class="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-indigo-600 hover:text-indigo-800 hover:bg-gray-50">
 Join Waitlist
 </button>
 </div>
 </div>
 </nav>
<!-- Hero Section -->
 <div class="hero-gradient text-white">
 <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
 <div class="text-center">
 <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
 Focus on your thoughts, not the formatting
 </h1>
 <p class="mt-6 max-w-lg mx-auto text-xl text-indigo-100">
 Simple Scribbles is the minimalist note-taking app that helps busy professionals and students capture ideas without distraction.
 </p>
 <div class="mt-10 flex justify-center space-x-4">
 <button onclick="openWaitlistModal()" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-indigo-700 bg-white hover:bg-indigo-50">
 Join Waitlist
 </button>
 <a href="#demo" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70">
 Try Demo
 </a>
 </div>
 </div>
 </div>
 </div>
<!-- Features Section -->
 <div id="features" class="py-12 bg-white">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="lg:text-center">
 <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2>
 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
 Designed for clarity and simplicity
 </p>
 <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
 Everything you need to capture ideas quickly, without unnecessary complexity.
 </p>
 </div>
<div class="mt-10">
 <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
 <!-- Feature 1 -->
 <div class="feature-card transition-all duration-300 ease-in-out bg-white rounded-lg shadow-md overflow-hidden p-6">
 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
 <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
 </svg>
 </div>
 <h3 class="mt-4 text-lg font-medium text-gray-900">Minimalist Interface</h3>
 <p class="mt-2 text-base text-gray-500">
 A clean, distraction-free workspace that keeps your focus on what matters - your thoughts.
 </p>
 </div>
<!-- Feature 2 -->
 <div class="feature-card transition-all duration-300 ease-in-out bg-white rounded-lg shadow-md overflow-hidden p-6">
 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
 <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
 </svg>
 </div>
 <h3 class="mt-4 text-lg font-medium text-gray-900">Cloud Sync</h3>
 <p class="mt-2 text-base text-gray-500">
 Your notes are automatically saved and synced across all your devices, available wherever you are.
 </p>
 </div>
<!-- Feature 3 -->
 <div class="feature-card transition-all duration-300 ease-in-out bg-white rounded-lg shadow-md overflow-hidden p-6">
 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
 <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
 </svg>
 </div>
 <h3 class="mt-4 text-lg font-medium text-gray-900">Smart Organization</h3>
 <p class="mt-2 text-base text-gray-500">
 Automatic tagging and smart search help you find notes instantly, without manual filing.
 </p>
 </div>
<!-- Feature 4 -->
 <div class="feature-card transition-all duration-300 ease-in-out bg-white rounded-lg shadow-md overflow-hidden p-6">
 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
 <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
 </svg>
 </div>
 <h3 class="mt-4 text-lg font-medium text-gray-900">End-to-End Encryption</h3>
 <p class="mt-2 text-base text-gray-500">
 Your notes are private by default, with military-grade encryption protecting your thoughts.
 </p>
 </div>
<!-- Feature 5 -->
 <div class="feature-card transition-all duration-300 ease-in-out bg-white rounded-lg shadow-md overflow-hidden p-6">
 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
 <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
 </svg>
 </div>
 <h3 class="mt-4 text-lg font-medium text-gray-900">Flexible Formatting</h3>
 <p class="mt-2 text-base text-gray-500">
 Handwriting, typing, or sketching - choose the method that matches your thinking style.
 </p>
 </div>
<!-- Feature 6 -->
 <div class="feature-card transition-all duration-300 ease-in-out bg-white rounded-lg shadow-md overflow-hidden p-6">
 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
 <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
 </svg>
 </div>
 <h3 class="mt-4 text-lg font-medium text-gray-900">Export Options</h3>
 <p class="mt-2 text-base text-gray-500">
 Share your notes as PDFs, images, or text files with a single click.
 </p>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Testimonials Section -->
 <div id="testimonials" class="py-12 bg-gray-50">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="lg:text-center mb-12">
 <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Testimonials</h2>
 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
 Loved by professionals and students
 </p>
 </div>
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
 <!-- Testimonial 1 -->
 <div class="bg-white p-6 rounded-lg shadow-md">
 <div class="flex items-center mb-4">
 <div class="h-12 w-12 rounded-full bg-indigo-100 flex items-center justify-center">
 <span class="text-indigo-600 font-bold">JD</span>
 </div>
 <div class="ml-4">
 <h4 class="text-lg font-medium text-gray-900">Jane Doe</h4>
 <p class="text-gray-500">Product Manager</p>
 </div>
 </div>
 <p class="text-gray-600 italic">
 "Simple Scribbles has completely changed how I take meeting notes. The minimalist interface helps me focus on what's important without getting distracted by formatting options."
 </p>
 <div class="mt-4 flex text-yellow-400">
 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
 </svg>
 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
 </svg>
 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
 </svg>
 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
 </svg>
 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
 </svg>
 </div>
 </div>
<!-- Testimonial 2 -->
 <div class="bg-white p-6 rounded-lg shadow-md">
 <div class="flex items-center mb-4">
 <div class="h-12 w-12 rounded-full bg-indigo-100 flex items-center justify-center">
 <span class="text-indigo-600 font-bold">JS</span>
 </div>
 <div class="ml-4">
 <h4 class="text-lg font-medium text-gray-900">John Smith</h4>
 <p class="text-gray-500">Medical Student</p>
 </div>
 </div>
 <p class="text-gray-600 italic">
 "As a student, I need to take notes quickly during lectures. Simple Scribbles is perfect - I can switch between typing and handwriting seamlessly, and everything is organized automatically."
 </p>
 <div class="mt-4 flex text-yellow-400">
 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
 </svg>
 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
 </svg>
 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
 </svg>
 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
 </svg>
 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
 </svg>
 </div>
 </div>
<!-- Testimonial 3 -->
 <div class="bg-white p-6 rounded-lg shadow-md">
 <div class="flex items-center mb-4">
 <div class="h-12 w-12 rounded-full bg-indigo-100 flex items-center justify-center">
 <span class="text-indigo-600 font-bold">AD</span>
 </div>
 <div class="ml-4">
 <h4 class="text-lg font-medium text-gray-900">Alex Doe</h4>
 <p class="text-gray-500">UX Designer</p>
 </div>
 </div>
 <p class="text-gray-600 italic">
 "I've tried every note-taking app out there, but Simple Scribbles is the only one that gets out of my way and lets me think. The design is so intuitive that I never have to think about how to use it."
 </p>
 <div class="mt-4 flex text-yellow-400">
 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
 </svg>
 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
 </svg>
 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
 </svg>
 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
 </svg>
 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
 </svg>
 </div>
 </div>
 </div>
<div class="mt-12 text-center">
 <div class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
 <svg class="-ml-1 mr-3 h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
 </svg>
 <span>Join 5,000+ happy users</span>
 </div>
 </div>
 </div>
 </div>
<!-- Demo Section -->
 <div id="demo" class="py-12 bg-white">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="lg:text-center mb-12">
 <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Interactive Demo</h2>
 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
 Try Simple Scribbles right now
 </p>
 <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
 Experience the simplicity of our note-taking canvas.
 </p>
 </div>
<div class="mt-8 bg-gray-50 rounded-lg p-6 shadow-inner">
 <div class="flex flex-col md:flex-row gap-6">
 <!-- Tools Panel -->
 <div class="w-full md:w-48 flex-shrink-0 bg-white rounded-lg shadow p-4">
 <h3 class="text-lg font-medium text-gray-900 mb-4">Tools</h3>
<div class="space-y-3">
 <button id="pen-tool" class="tool-btn active w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
 <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
 </svg>
 Pen
 </button>
<button id="text-tool" class="tool-btn w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
 <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
 </svg>
 Text
 </button>
<button id="eraser-tool" class="tool-btn w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
 <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
 </svg>
 Eraser
 </button>
<div class="pt-2">
 <label for="brush-size" class="block text-sm font-medium text-gray-700">Brush Size</label>
 <input type="range" id="brush-size" min="1" max="50" value="5" class="mt-1 w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
 <div class="text-xs text-gray-500 text-center" id="brush-size-value">5px</div>
 </div>
<div class="pt-2">
 <label class="block text-sm font-medium text-gray-700">Colors</label>
 <div class="grid grid-cols-5 gap-2 mt-2">
 <div class="color-option selected rounded-full bg-black" data-color="#000000"></div>
 <div class="color-option rounded-full bg-red-500" data-color="#ef4444"></div>
 <div class="color-option rounded-full bg-blue-500" data-color="#3b82f6"></div>
 <div class="color-option rounded-full bg-green-500" data-color="#10b981"></div>
 <div class="color-option rounded-full bg-yellow-500" data-color="#f59e0b"></div>
 <div class="color-option rounded-full bg-purple-500" data-color="#8b5cf6"></div>
 <div class="color-option rounded-full bg-pink-500" data-color="#ec4899"></div>
 <div class="color-option rounded-full bg-indigo-500" data-color="#6366f1"></div>
 <div class="color-option rounded-full bg-gray-500" data-color="#6b7280"></div>
 <div class="color-option rounded-full bg-white border border-gray-300" data-color="#ffffff"></div>
 </div>
 <div class="mt-2">
 <input type="color" id="custom-color" value="#000000" class="w-full h-8 cursor-pointer">
 </div>
 </div>
 </div>
<div class="mt-6 space-y-2">
 <button id="clear-canvas" class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
 <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
 </svg>
 Clear Canvas
 </button>
<button id="download-canvas" class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
 <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
 </svg>
 Download
 </button>
 </div>
 </div>
<!-- Canvas Area -->
 <div class="flex-1">
 <div class="bg-white rounded-lg shadow p-4">
 <canvas id="drawing-canvas" class="drawing-canvas w-full h-96 bg-white border border-gray-200 rounded-md"></canvas>
 </div>
 <div class="mt-4 text-sm text-gray-500">
 <p>Tip: Draw, write, or sketch on the canvas above. Try different tools and colors!</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Waitlist CTA Section -->
 <div class="bg-indigo-700">
 <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
 <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
 <span class="block">Ready to simplify your note-taking?</span>
 <span class="block">Join our waitlist today.</span>
 </h2>
 <p class="mt-4 text-lg leading-6 text-indigo-200">
 Be the first to know when we launch and get exclusive early access offers.
 </p>
 <button onclick="openWaitlistModal()" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto">
 Join Waitlist
 </button>
 </div>
 </div>
<!-- Footer -->
 <footer class="bg-white">
 <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
 <nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
 <div class="px-5 py-2">
 <a href="#features" class="text-base text-gray-500 hover:text-gray-900">Features</a>
 </div>
 <div class="px-5 py-2">
 <a href="#testimonials" class="text-base text-gray-500 hover:text-gray-900">Testimonials</a>
 </div>
 <div class="px-5 py-2">
 <a href="#demo" class="text-base text-gray-500 hover:text-gray-900">Demo</a>
 </div>
 <div class="px-5 py-2">
 <a href="#" class="text-base text-gray-500 hover:text-gray-900">Privacy</a>
 </div>
 <div class="px-5 py-2">
 <a href="#" class="text-base text-gray-500 hover:text-gray-900">Terms</a>
 </div>
 </nav>
 <div class="mt-8 flex justify-center space-x-6">
 <a href="#" class="text-gray-400 hover:text-gray-500">
 <span class="sr-only">Facebook</span>
 <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
 <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
 </svg>
 </a>
 <a href="#" class="text-gray-400 hover:text-gray-500">
 <span class="sr-only">Twitter</span>
 <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
 <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
 </svg>
 </a>
 <a href="#" class="text-gray-400 hover:text-gray-500">
 <span class="sr-only">GitHub</span>
 <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
 <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
 </svg>
 </a>
 </div>
 <p class="mt-8 text-center text-base text-gray-400">
 &copy; 2023 Simple Scribbles. All rights reserved.
 </p>
 </div>
 </footer>
<!-- Waitlist Modal -->
 <div id="waitlist-modal" class="modal fixed z-50 inset-0 overflow-y-auto opacity-0 invisible transition-all duration-300 ease-in-out">
 <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
 <div class="fixed inset-0 transition-opacity" aria-hidden="true">
 <div class="absolute inset-0 bg-gray-500 opacity-75" onclick="closeWaitlistModal()"></div>
 </div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
 <div>
 <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100">
 <svg class="h-6 w-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
 </svg>
 </div>
 <div class="mt-3 text-center sm:mt-5">
 <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
 Join the Simple Scribbles Waitlist
 </h3>
 <div class="mt-2">
 <p class="text-sm text-gray-500">
 Be the first to know when we launch and get exclusive early access offers.
 </p>
 </div>
 </div>
 </div>
<form id="waitlist-form" class="mt-5 sm:mt-6">
 <div class="space-y-4">
 <div>
 <label for="name" class="block text-sm font-medium text-gray-700">Full Name</label>
 <input type="text" name="name" id="name" required class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
 <p id="name-error" class="mt-1 text-sm text-red-600 hidden">Please enter your name</p>
 </div>
<div>
 <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
 <input type="email" name="email" id="email" required class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
 <p id="email-error" class="mt-1 text-sm text-red-600 hidden">Please enter a valid email address</p>
 </div>
<div>
 <label for="interest" class="block text-sm font-medium text-gray-700">How do you plan to use Simple Scribbles?</label>
 <select id="interest" name="interest" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
 <option>For work</option>
 <option>For school</option>
 <option>Personal notes</option>
 <option>Creative projects</option>
 <option>Other</option>
 </select>
 </div>
 </div>
<div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
 <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm">
 Join Waitlist
 </button>
 <button type="button" onclick="closeWaitlistModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm">
 Cancel
 </button>
 </div>
 </form>
 </div>
 </div>
 </div>
<!-- Thank You Modal -->
 <div id="thankyou-modal" class="modal fixed z-50 inset-0 overflow-y-auto opacity-0 invisible transition-all duration-300 ease-in-out">
 <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
 <div class="fixed inset-0 transition-opacity" aria-hidden="true">
 <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
 </div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
 <div>
 <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
 <svg class="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
 </svg>
 </div>
 <div class="mt-3 text-center sm:mt-5">
 <h3 class="text-lg leading-6 font-medium text-gray-900">
 You're on the list!
 </h3>
 <div class="mt-2">
 <p class="text-sm text-gray-500">
 Thanks for joining the Simple Scribbles waitlist. We'll be in touch soon with early access details.
 </p>
 <p class="mt-2 text-sm text-gray-500">
 As a thank you, we'll give you 3 months free when we launch.
 </p>
 </div>
 </div>
 </div>
 <div class="mt-5 sm:mt-6">
 <button type="button" onclick="closeThankYouModal()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm">
 Got it, thanks!
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Confetti Canvas -->
 <canvas id="confetti-canvas" class="confetti"></canvas>
<script>
 // Mobile menu toggle
 document.getElementById('mobile-menu-button').addEventListener('click', function() {
 const menu = document.getElementById('mobile-menu');
 const isOpen = menu.classList.contains('hidden');
// Toggle menu icon
 const svgOpen = this.querySelector('svg.block');
 const svgClose = this.querySelector('svg.hidden');
if (isOpen) {
 menu.classList.remove('hidden');
 svgOpen.classList.add('hidden');
 svgClose.classList.remove('hidden');
 } else {
 menu.classList.add('hidden');
 svgOpen.classList.remove('hidden');
 svgClose.classList.add('hidden');
 }
 });
// Waitlist modal functions
 function openWaitlistModal() {
 document.getElementById('waitlist-modal').classList.remove('opacity-0', 'invisible');
 document.getElementById('waitlist-modal').classList.add('opacity-100', 'visible');
 document.body.classList.add('overflow-hidden');
 }
function closeWaitlistModal() {
 document.getElementById('waitlist-modal').classList.remove('opacity-100', 'visible');
 document.getElementById('waitlist-modal').classList.add('opacity-0', 'invisible');
 document.body.classList.remove('overflow-hidden');
 }
function openThankYouModal() {
 document.getElementById('thankyou-modal').classList.remove('opacity-0', 'invisible');
 document.getElementById('thankyou-modal').classList.add('opacity-100', 'visible');
 document.body.classList.add('overflow-hidden');
// Trigger confetti
 triggerConfetti();
 }
function closeThankYouModal() {
 document.getElementById('thankyou-modal').classList.remove('opacity-100', 'visible');
 document.getElementById('thankyou-modal').classList.add('opacity-0', 'invisible');
 document.body.classList.remove('overflow-hidden');
 }
// Waitlist form validation and submission
 document.getElementById('waitlist-form').addEventListener('submit', function(e) {
 e.preventDefault();
const nameInput = document.getElementById('name');
 const emailInput = document.getElementById('email');
 const nameError = document.getElementById('name-error');
 const emailError = document.getElementById('email-error');
let isValid = true;
// Validate name
 if (!nameInput.value.trim()) {
 nameError.classList.remove('hidden');
 isValid = false;
 } else {
 nameError.classList.add('hidden');
 }
// Validate email
 const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 if (!emailRegex.test(emailInput.value)) {
 emailError.classList.remove('hidden');
 isValid = false;
 } else {
 emailError.classList.add('hidden');
 }
if (isValid) {
 // Save to localStorage (simulating database)
 const waitlistEntry = {
 name: nameInput.value.trim(),
 email: emailInput.value.trim(),
 interest: document.getElementById('interest').value,
 timestamp: new Date().toISOString()
 };
// Get existing entries or create new array
 const existingEntries = JSON.parse(localStorage.getItem('waitlistEntries') || '[]');
// Check for duplicate email
 const isDuplicate = existingEntries.some(entry => entry.email === waitlistEntry.email);
if (!isDuplicate) {
 existingEntries.push(waitlistEntry);
 localStorage.setItem('waitlistEntries', JSON.stringify(existingEntries));
// Close waitlist modal and show thank you
 closeWaitlistModal();
 openThankYouModal();
// Reset form
 this.reset();
 } else {
 emailError.textContent = 'This email is already on the waitlist';
 emailError.classList.remove('hidden');
 }
 }
 });
// Confetti animation
 function triggerConfetti() {
 const canvas = document.getElementById('confetti-canvas');
 const myConfetti = confetti.create(canvas, {
 resize: true,
 useWorker: true
 });
myConfetti({
 particleCount: 150,
 spread: 70,
 origin: { y: 0.6 }
 });
 }
// Drawing Canvas Implementation
 document.addEventListener('DOMContentLoaded', function() {
 const canvas = document.getElementById('drawing-canvas');
 const ctx = canvas.getContext('2d');
// Set canvas size
 function resizeCanvas() {
 const container = canvas.parentElement;
 canvas.width = container.clientWidth;
 canvas.height = container.clientHeight;
// Redraw existing content if needed
 // (In a real app, you'd save and restore the drawing)
 }
// Initial resize
 resizeCanvas();
 window.addEventListener('resize', resizeCanvas);
// Drawing state
 let isDrawing = false;
 let lastX = 0;
 let lastY = 0;
 let currentTool = 'pen';
 let currentColor = '#000000';
 let brushSize = 5;
// Set up drawing tools
 document.getElementById('pen-tool').addEventListener('click', function() {
 currentTool = 'pen';
 updateToolButtons();
 });
document.getElementById('text-tool').addEventListener('click', function() {
 currentTool = 'text';
 updateToolButtons();
 });
document.getElementById('eraser-tool').addEventListener('click', function() {
 currentTool = 'eraser';
 updateToolButtons();
 });
function updateToolButtons() {
 document.querySelectorAll('.tool-btn').forEach(btn => {
 btn.classList.remove('active');
 });
document.getElementById(`${currentTool}-tool`).classList.add('active');
 }
// Color selection
 document.querySelectorAll('.color-option').forEach(option => {
 option.addEventListener('click', function() {
 document.querySelectorAll('.color-option').forEach(opt => {
 opt.classList.remove('selected');
 });
this.classList.add('selected');
 currentColor = this.dataset.color;
 document.getElementById('custom-color').value = currentColor;
 });
 });
document.getElementById('custom-color').addEventListener('input', function() {
 currentColor = this.value;
// Update selected color option if it matches a preset
 document.querySelectorAll('.color-option').forEach(opt => {
 opt.classList.remove('selected');
 if (opt.dat
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=shazzar00ni/simple-scribbles-new" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>