Upload 11 files

app.py

@@ -0,0 +1,453 @@
+import os
+import logging
+from flask import Flask, render_template, request, jsonify, session, redirect, url_for, flash
+from flask_sqlalchemy import SQLAlchemy
+from flask_login import LoginManager, login_user, logout_user, login_required, current_user
+import cohere
+import requests
+import uuid
+from datetime import datetime
+from sqlalchemy.orm import DeclarativeBase
+
+# Set up logging for debugging
+logging.basicConfig(level=logging.DEBUG)
+
+class Base(DeclarativeBase):
+    pass
+
+# Initialize Flask app
+app = Flask(__name__)
+app.secret_key = os.environ.get("SESSION_SECRET", "default_secret_key_for_dev")
+
+# Database configuration
+database_url = os.environ.get("DATABASE_URL")
+if not database_url:
+    # Fallback for development
+    database_url = "sqlite:///inkboard.db"
+
+app.config["SQLALCHEMY_DATABASE_URI"] = database_url
+app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+app.config["SQLALCHEMY_ENGINE_OPTIONS"] = {
+    'pool_pre_ping': True,
+    "pool_recycle": 300,
+}
+
+# Initialize database
+db = SQLAlchemy(app, model_class=Base)
+
+# Initialize Flask-Login
+login_manager = LoginManager()
+login_manager.init_app(app)
+login_manager.login_view = 'login'
+login_manager.login_message = 'Please log in to access InkBoard'
+
+# Initialize Cohere client for text generation
+COHERE_API_KEY = os.environ.get("COHERE_API_KEY")
+if not COHERE_API_KEY:
+    logging.error("COHERE_API_KEY environment variable not set")
+    cohere_client = None
+else:
+    cohere_client = cohere.Client(COHERE_API_KEY)
+
+# Initialize Hugging Face for image generation
+HUGGINGFACE_API_KEY = os.environ.get("HUGGINGFACE_API_KEY")
+HF_IMAGE_MODEL = "stabilityai/stable-diffusion-2-1"  # Popular image generation model
+
+@login_manager.user_loader
+def load_user(user_id):
+    """Load user for Flask-Login"""
+    return User.query.get(int(user_id))
+
+@app.route('/')
+def index():
+    """Main page - redirect to login if not authenticated"""
+    if current_user.is_authenticated:
+        return render_template('dashboard.html', user=current_user)
+    return render_template('index.html')
+
+@app.route('/register', methods=['GET', 'POST'])
+def register():
+    """User registration"""
+    if request.method == 'POST':
+        try:
+            data = request.get_json() if request.is_json else request.form
+            username = data.get('username', '').strip()
+            email = data.get('email', '').strip()
+            password = data.get('password', '').strip()
+            
+            if not username or not email or not password:
+                return jsonify({'error': 'All fields are required'}), 400
+            
+            # Check if user already exists
+            if User.query.filter_by(username=username).first():
+                return jsonify({'error': 'Username already exists'}), 400
+            
+            if User.query.filter_by(email=email).first():
+                return jsonify({'error': 'Email already exists'}), 400
+            
+            # Create new user
+            user = User(username=username, email=email)
+            user.set_password(password)
+            
+            db.session.add(user)
+            db.session.commit()
+            
+            # Log in the user
+            login_user(user)
+            
+            if request.is_json:
+                return jsonify({'success': True, 'redirect': url_for('index')})
+            else:
+                flash('Registration successful! Welcome to InkBoard!', 'success')
+                return redirect(url_for('index'))
+                
+        except Exception as e:
+            logging.error(f"Registration error: {str(e)}")
+            if request.is_json:
+                return jsonify({'error': 'Registration failed'}), 500
+            else:
+                flash('Registration failed. Please try again.', 'error')
+                return render_template('register.html')
+    
+    return render_template('register.html')
+
+@app.route('/login', methods=['GET', 'POST'])
+def login():
+    """User login"""
+    if request.method == 'POST':
+        try:
+            data = request.get_json() if request.is_json else request.form
+            username = data.get('username', '').strip()
+            password = data.get('password', '').strip()
+            
+            if not username or not password:
+                return jsonify({'error': 'Username and password are required'}), 400
+            
+            # Find user by username or email
+            user = User.query.filter(
+                (User.username == username) | (User.email == username)
+            ).first()
+            
+            if user and user.check_password(password):
+                login_user(user)
+                if request.is_json:
+                    return jsonify({'success': True, 'redirect': url_for('index')})
+                else:
+                    flash('Welcome back to InkBoard!', 'success')
+                    return redirect(url_for('index'))
+            else:
+                if request.is_json:
+                    return jsonify({'error': 'Invalid username or password'}), 401
+                else:
+                    flash('Invalid username or password', 'error')
+                    return render_template('login.html')
+                    
+        except Exception as e:
+            logging.error(f"Login error: {str(e)}")
+            if request.is_json:
+                return jsonify({'error': 'Login failed'}), 500
+            else:
+                flash('Login failed. Please try again.', 'error')
+                return render_template('login.html')
+    
+    return render_template('login.html')
+
+@app.route('/logout')
+@login_required
+def logout():
+    """User logout"""
+    logout_user()
+    flash('You have been logged out', 'info')
+    return redirect(url_for('index'))
+
+@app.route('/generate', methods=['POST'])
+@login_required
+def generate_content():
+    """Generate story and image from scene description using Cohere and Hugging Face"""
+    try:
+        data = request.get_json()
+        scene_idea = data.get('scene_idea', '').strip()
+        
+        if not scene_idea:
+            return jsonify({'error': 'Please provide a scene idea'}), 400
+        
+        if not cohere_client:
+            return jsonify({'error': 'Cohere API key not configured'}), 500
+        
+        # Generate expanded story using Cohere
+        story_prompt = f"""Transform this scene idea into a vivid, descriptive paragraph that paints a beautiful picture with words. Keep it between 80-150 words, rich in sensory details and atmosphere:
+
+Scene idea: {scene_idea}
+
+Write a single, flowing paragraph that brings this scene to life with beautiful imagery and emotions."""
+        
+        logging.debug(f"Generating story for scene: {scene_idea}")
+        
+        # Use Cohere's generate endpoint for text generation
+        story_response = cohere_client.generate(
+            model='command',  # Cohere's flagship model
+            prompt=story_prompt,
+            max_tokens=200,  # Limit to keep response concise (80-150 words)
+            temperature=0.7,
+            k=0,
+            stop_sequences=[],
+            return_likelihoods='NONE'
+        )
+        
+        expanded_story = story_response.generations[0].text.strip()
+        logging.debug(f"Generated story: {expanded_story[:100]}...")
+        
+        # Generate image using Hugging Face API
+        image_url = None
+        if HUGGINGFACE_API_KEY:
+            try:
+                image_url = generate_image_hf(scene_idea, expanded_story)
+                logging.debug(f"Generated image URL: {image_url}")
+            except Exception as img_error:
+                logging.warning(f"Image generation failed: {str(img_error)}")
+                # Continue without image - story generation is primary feature
+        
+        # Save to database instead of session
+        creation_id = str(uuid.uuid4())
+        creation = Creation(
+            id=creation_id,
+            user_id=current_user.id,
+            scene_idea=scene_idea,
+            story=expanded_story,
+            image_url=image_url
+        )
+        
+        db.session.add(creation)
+        db.session.commit()
+        
+        return jsonify({
+            'success': True,
+            'story': expanded_story,
+            'image_url': image_url,
+            'creation_id': creation_id
+        })
+        
+    except Exception as e:
+        logging.error(f"Error generating content: {str(e)}")
+        return jsonify({'error': f'An error occurred: {str(e)}'}), 500
+
+def generate_image_hf(scene_idea, story):
+    """Generate image using Hugging Face API or create a beautiful SVG placeholder"""
+    try:
+        # First try Hugging Face API
+        if HUGGINGFACE_API_KEY:
+            image_prompt = f"A beautiful artistic illustration of: {scene_idea}. Style: dreamy, soft colors, high quality digital art, atmospheric"
+            
+            # Try multiple models in case one fails
+            models_to_try = [
+                "runwayml/stable-diffusion-v1-5",
+                "stabilityai/stable-diffusion-2-1",
+                "CompVis/stable-diffusion-v1-4"
+            ]
+            
+            for model in models_to_try:
+                try:
+                    api_url = f"https://api-inference.huggingface.co/models/{model}"
+                    headers = {"Authorization": f"Bearer {HUGGINGFACE_API_KEY}"}
+                    
+                    # Send request to Hugging Face
+                    response = requests.post(
+                        api_url,
+                        headers=headers,
+                        json={"inputs": image_prompt},
+                        timeout=60
+                    )
+                    
+                    if response.status_code == 200:
+                        # Save the image temporarily and return a placeholder URL
+                        # In a real app, you'd upload to cloud storage
+                        import base64
+                        image_data = response.content
+                        image_base64 = base64.b64encode(image_data).decode('utf-8')
+                        logging.debug(f"Successfully generated image with model: {model}")
+                        return f"data:image/png;base64,{image_base64}"
+                    else:
+                        logging.warning(f"Model {model} failed: {response.status_code} - {response.text}")
+                        continue
+                        
+                except Exception as model_error:
+                    logging.warning(f"Model {model} error: {str(model_error)}")
+                    continue
+            
+            logging.warning("All Hugging Face models failed, falling back to SVG placeholder")
+        
+        # Create a beautiful SVG placeholder based on scene description
+        return generate_svg_placeholder(scene_idea, story)
+            
+    except Exception as e:
+        logging.error(f"Error generating image: {str(e)}")
+        return generate_svg_placeholder(scene_idea, story)
+
+def generate_svg_placeholder(scene_idea, story):
+    """Generate a beautiful SVG placeholder image based on the scene"""
+    try:
+        # Create a color palette based on keywords in the scene
+        colors = get_scene_colors(scene_idea.lower())
+        
+        # Create SVG with gradient background and artistic elements
+        svg_content = f"""
+        <svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+                <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+                    <stop offset="0%" style="stop-color:{colors['primary']};stop-opacity:1" />
+                    <stop offset="100%" style="stop-color:{colors['secondary']};stop-opacity:1" />
+                </linearGradient>
+                <radialGradient id="glow" cx="50%" cy="50%" r="50%">
+                    <stop offset="0%" style="stop-color:white;stop-opacity:0.3" />
+                    <stop offset="100%" style="stop-color:white;stop-opacity:0" />
+                </radialGradient>
+            </defs>
+            
+            <!-- Background -->
+            <rect width="400" height="400" fill="url(#bg)" />
+            
+            <!-- Artistic elements based on scene -->
+            {get_scene_elements(scene_idea.lower(), colors)}
+            
+            <!-- Glow effect -->
+            <rect width="400" height="400" fill="url(#glow)" />
+            
+            <!-- Scene text -->
+            <text x="200" y="350" font-family="Arial, sans-serif" font-size="14" fill="white" text-anchor="middle" opacity="0.8">
+                {scene_idea[:40]}{"..." if len(scene_idea) > 40 else ""}
+            </text>
+        </svg>
+        """
+        
+        # Convert SVG to base64 data URL
+        import base64
+        svg_base64 = base64.b64encode(svg_content.encode('utf-8')).decode('utf-8')
+        return f"data:image/svg+xml;base64,{svg_base64}"
+        
+    except Exception as e:
+        logging.error(f"Error generating SVG placeholder: {str(e)}")
+        return None
+
+def get_scene_colors(scene_text):
+    """Get color palette based on scene description"""
+    # Default colors
+    colors = {
+        'primary': '#4fd1c7',
+        'secondary': '#88d8f7',
+        'accent': '#a8e6cf'
+    }
+    
+    # Adjust colors based on keywords
+    if any(word in scene_text for word in ['sunset', 'dawn', 'orange', 'red']):
+        colors = {'primary': '#ff6b6b', 'secondary': '#ffa726', 'accent': '#ffcc80'}
+    elif any(word in scene_text for word in ['night', 'dark', 'moon', 'stars']):
+        colors = {'primary': '#3f51b5', 'secondary': '#1a237e', 'accent': '#7986cb'}
+    elif any(word in scene_text for word in ['forest', 'green', 'nature', 'tree']):
+        colors = {'primary': '#4caf50', 'secondary': '#2e7d32', 'accent': '#a5d6a7'}
+    elif any(word in scene_text for word in ['ocean', 'sea', 'water', 'blue']):
+        colors = {'primary': '#2196f3', 'secondary': '#0d47a1', 'accent': '#90caf9'}
+    elif any(word in scene_text for word in ['fire', 'flame', 'hot', 'warm']):
+        colors = {'primary': '#f44336', 'secondary': '#d32f2f', 'accent': '#ffab91'}
+    
+    return colors
+
+def get_scene_elements(scene_text, colors):
+    """Generate SVG elements based on scene description"""
+    elements = []
+    
+    # Add different shapes and elements based on keywords
+    if any(word in scene_text for word in ['mountain', 'cliff', 'hill']):
+        elements.append(f'<polygon points="0,400 150,200 300,250 400,400" fill="{colors["accent"]}" opacity="0.7" />')
+        elements.append(f'<polygon points="100,400 250,150 400,200 400,400" fill="{colors["primary"]}" opacity="0.6" />')
+    
+    if any(word in scene_text for word in ['sun', 'sunset', 'sunrise']):
+        elements.append(f'<circle cx="300" cy="100" r="40" fill="#ffeb3b" opacity="0.8" />')
+        elements.append(f'<circle cx="300" cy="100" r="60" fill="#fff59d" opacity="0.3" />')
+    
+    if any(word in scene_text for word in ['moon', 'night']):
+        elements.append(f'<circle cx="320" cy="80" r="30" fill="#f5f5f5" opacity="0.9" />')
+        elements.append(f'<circle cx="100" cy="150" r="2" fill="white" opacity="0.8" />')
+        elements.append(f'<circle cx="150" cy="120" r="1.5" fill="white" opacity="0.7" />')
+        elements.append(f'<circle cx="200" cy="100" r="1" fill="white" opacity="0.6" />')
+    
+    if any(word in scene_text for word in ['tree', 'forest']):
+        elements.append(f'<ellipse cx="80" cy="300" rx="15" ry="60" fill="{colors["accent"]}" opacity="0.8" />')
+        elements.append(f'<ellipse cx="120" cy="280" rx="20" ry="70" fill="{colors["primary"]}" opacity="0.7" />')
+    
+    if any(word in scene_text for word in ['water', 'ocean', 'lake']):
+        elements.append(f'<ellipse cx="200" cy="350" rx="150" ry="30" fill="{colors["secondary"]}" opacity="0.6" />')
+        elements.append(f'<ellipse cx="200" cy="360" rx="180" ry="25" fill="{colors["primary"]}" opacity="0.4" />')
+    
+    # Add some abstract artistic elements
+    elements.append(f'<circle cx="50" cy="80" r="8" fill="white" opacity="0.3" />')
+    elements.append(f'<circle cx="350" cy="300" r="12" fill="white" opacity="0.2" />')
+    elements.append(f'<circle cx="300" cy="250" r="6" fill="white" opacity="0.4" />')
+    
+    return '\n'.join(elements)
+
+@app.route('/save_journal', methods=['POST'])
+@login_required
+def save_journal():
+    """Save journal entry for a creation"""
+    try:
+        data = request.get_json()
+        creation_id = data.get('creation_id')
+        journal_entry = data.get('journal_entry', '').strip()
+        
+        if not creation_id:
+            return jsonify({'error': 'Creation ID required'}), 400
+        
+        # Find the creation in database
+        creation = Creation.query.filter_by(
+            id=creation_id, 
+            user_id=current_user.id
+        ).first()
+        
+        if not creation:
+            return jsonify({'error': 'Creation not found'}), 404
+        
+        creation.journal_entry = journal_entry
+        creation.updated_at = datetime.utcnow()
+        
+        db.session.commit()
+        
+        return jsonify({'success': True})
+        
+    except Exception as e:
+        logging.error(f"Error saving journal: {str(e)}")
+        return jsonify({'error': 'Failed to save journal entry'}), 500
+
+@app.route('/get_creations')
+@login_required
+def get_creations():
+    """Get all user creations"""
+    try:
+        creations = Creation.query.filter_by(user_id=current_user.id).order_by(Creation.created_at.desc()).all()
+        
+        creations_data = []
+        for creation in creations:
+            creations_data.append({
+                'id': creation.id,
+                'scene_idea': creation.scene_idea,
+                'story': creation.story,
+                'image_url': creation.image_url,
+                'journal_entry': creation.journal_entry,
+                'created_at': creation.created_at.isoformat()
+            })
+        
+        return jsonify({'creations': creations_data})
+        
+    except Exception as e:
+        logging.error(f"Error getting creations: {str(e)}")
+        return jsonify({'error': 'Failed to get creations'}), 500
+
+# Import models after app and db are defined
+from models import User, Creation
+
+# Create database tables
+with app.app_context():
+    db.create_all()
+    logging.info("Database tables created")
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5000, debug=True)

main.py

@@ -0,0 +1,4 @@
+from app import app
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5000, debug=True)

models.py

@@ -0,0 +1,45 @@
+from datetime import datetime
+from flask_sqlalchemy import SQLAlchemy
+from flask_login import UserMixin
+from werkzeug.security import generate_password_hash, check_password_hash
+from app import db
+
+class User(UserMixin, db.Model):
+    """User model for authentication"""
+    __tablename__ = 'users'
+    
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(80), unique=True, nullable=False)
+    email = db.Column(db.String(120), unique=True, nullable=False)
+    password_hash = db.Column(db.String(255), nullable=False)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    
+    # Relationship to creations
+    creations = db.relationship('Creation', backref='user', lazy=True, cascade='all, delete-orphan')
+    
+    def set_password(self, password):
+        """Hash and set password"""
+        self.password_hash = generate_password_hash(password)
+    
+    def check_password(self, password):
+        """Check if provided password matches hash"""
+        return check_password_hash(self.password_hash, password)
+    
+    def __repr__(self):
+        return f'<User {self.username}>'
+
+class Creation(db.Model):
+    """Model for user creations (stories and images)"""
+    __tablename__ = 'creations'
+    
+    id = db.Column(db.String(36), primary_key=True)  # UUID
+    user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
+    scene_idea = db.Column(db.Text, nullable=False)
+    story = db.Column(db.Text, nullable=False)
+    image_url = db.Column(db.Text, nullable=True)
+    journal_entry = db.Column(db.Text, nullable=True)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+    
+    def __repr__(self):
+        return f'<Creation {self.id[:8]}>'

requirements.txt

@@ -0,0 +1,5 @@
+gradio
+flask
+cohere
+transformers
+requests

runtime.txt

@@ -0,0 +1 @@
+python-3.11.10

static/css/style.css

@@ -0,0 +1,766 @@
+/* Root Variables - Purple Neon Pixelated Theme */
+:root {
+    --neon-purple: #8B00FF;
+    --electric-pink: #FF00FF;
+    --cyber-blue: #00FFFF;
+    --dark-purple: #2E003E;
+    --pixel-black: #0a0a0a;
+    --pixel-gray: #1a1a1a;
+    --neon-green: #39FF14;
+    --shadow-neon: rgba(139, 0, 255, 0.5);
+    --shadow-glow: rgba(255, 0, 255, 0.3);
+    --gradient-cyber: linear-gradient(135deg, var(--neon-purple), var(--electric-pink));
+    --gradient-dark: linear-gradient(135deg, var(--dark-purple), var(--pixel-black));
+    --pixelated-border: 2px solid var(--neon-purple);
+}
+
+/* Global Styles */
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Courier New', 'Monaco', monospace;
+    background: var(--pixel-black);
+    background-image: 
+        radial-gradient(circle at 25% 25%, var(--neon-purple) 1px, transparent 1px),
+        radial-gradient(circle at 75% 75%, var(--electric-pink) 1px, transparent 1px);
+    background-size: 20px 20px;
+    min-height: 100vh;
+    color: var(--cyber-blue);
+    line-height: 1.6;
+    image-rendering: pixelated;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: crisp-edges;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Courier New', monospace;
+    font-weight: bold;
+    text-shadow: 0 0 10px currentColor;
+    letter-spacing: 2px;
+}
+
+.display-4 {
+    color: var(--neon-purple);
+    font-weight: bold;
+    text-transform: uppercase;
+    font-size: 3rem;
+    text-shadow: 
+        0 0 5px var(--neon-purple),
+        0 0 10px var(--neon-purple),
+        0 0 15px var(--neon-purple);
+}
+
+/* Header Styles */
+header {
+    background: var(--gradient-dark);
+    background-attachment: fixed;
+    color: var(--cyber-blue);
+    border: var(--pixelated-border);
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    margin-bottom: 2rem;
+    position: relative;
+    overflow: hidden;
+}
+
+header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.2), transparent);
+    animation: scan 3s infinite;
+}
+
+@keyframes scan {
+    0% { left: -100%; }
+    100% { left: 100%; }
+}
+
+header h1 {
+    text-shadow: 
+        0 0 5px var(--neon-purple),
+        0 0 10px var(--neon-purple),
+        0 0 15px var(--neon-purple);
+    animation: glow 2s ease-in-out infinite alternate;
+}
+
+@keyframes glow {
+    from { text-shadow: 0 0 5px var(--neon-purple), 0 0 10px var(--neon-purple), 0 0 15px var(--neon-purple); }
+    to { text-shadow: 0 0 10px var(--electric-pink), 0 0 20px var(--electric-pink), 0 0 30px var(--electric-pink); }
+}
+
+/* Dashboard Navigation */
+.dashboard-nav {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.btn-nav {
+    border-radius: 25px;
+    padding: 0.6rem 1.5rem;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+    border: 2px solid rgba(255, 255, 255, 0.3);
+}
+
+.btn-nav:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.5);
+    transform: translateY(-2px);
+}
+
+.btn-nav.active {
+    background: rgba(255, 255, 255, 0.3);
+    border-color: rgba(255, 255, 255, 0.6);
+}
+
+/* Dashboard Sections */
+.dashboard-section {
+    min-height: 400px;
+    animation: fadeIn 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* Landing Page Styles */
+.landing-body {
+    background: var(--pixel-black);
+    background-image: 
+        radial-gradient(circle at 20% 20%, var(--neon-purple) 2px, transparent 2px),
+        radial-gradient(circle at 80% 80%, var(--electric-pink) 2px, transparent 2px),
+        radial-gradient(circle at 40% 60%, var(--cyber-blue) 1px, transparent 1px);
+    background-size: 30px 30px, 50px 50px, 20px 20px;
+    animation: pixelMove 10s linear infinite;
+}
+
+@keyframes pixelMove {
+    0% { background-position: 0 0, 0 0, 0 0; }
+    100% { background-position: 30px 30px, -50px 50px, -20px 20px; }
+}
+
+.cyber-title {
+    font-size: 4rem;
+    color: var(--neon-purple);
+    text-shadow: 
+        0 0 10px var(--neon-purple),
+        0 0 20px var(--neon-purple),
+        0 0 30px var(--neon-purple);
+    animation: titleGlow 3s ease-in-out infinite alternate;
+}
+
+@keyframes titleGlow {
+    from { 
+        text-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple), 0 0 30px var(--neon-purple);
+        transform: scale(1);
+    }
+    to { 
+        text-shadow: 0 0 20px var(--electric-pink), 0 0 30px var(--electric-pink), 0 0 40px var(--electric-pink);
+        transform: scale(1.05);
+    }
+}
+
+.cyber-subtitle {
+    color: var(--cyber-blue);
+    font-family: 'Courier New', monospace;
+    font-size: 1.2rem;
+    letter-spacing: 1px;
+    text-shadow: 0 0 5px var(--cyber-blue);
+}
+
+.btn-outline-neon {
+    background: transparent;
+    border: 2px solid var(--cyber-blue);
+    color: var(--cyber-blue);
+    font-family: 'Courier New', monospace;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    padding: 0.8rem 2rem;
+    transition: all 0.3s ease;
+}
+
+.btn-outline-neon:hover {
+    background: var(--cyber-blue);
+    color: var(--pixel-black);
+    box-shadow: 0 0 20px var(--cyber-blue);
+    transform: translateY(-2px);
+}
+
+.feature-box {
+    background: var(--pixel-gray);
+    border: 1px solid var(--neon-purple);
+    padding: 2rem;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.feature-box::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(139, 0, 255, 0.1), transparent);
+    transition: left 0.5s;
+}
+
+.feature-box:hover::before {
+    left: 100%;
+}
+
+.feature-box:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 0 20px var(--shadow-neon);
+}
+
+.feature-box i {
+    color: var(--neon-purple);
+    text-shadow: 0 0 10px var(--neon-purple);
+}
+
+/* Authentication Styles */
+.auth-body {
+    background: var(--pixel-black);
+    background-image: 
+        linear-gradient(45deg, var(--pixel-gray) 25%, transparent 25%),
+        linear-gradient(-45deg, var(--pixel-gray) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, var(--pixel-gray) 75%),
+        linear-gradient(-45deg, transparent 75%, var(--pixel-gray) 75%);
+    background-size: 20px 20px;
+    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+    min-height: 100vh;
+}
+
+.auth-card {
+    background: var(--pixel-gray);
+    border: 3px solid var(--neon-purple);
+    border-radius: 0;
+    box-shadow: 
+        0 0 30px var(--shadow-neon),
+        inset 0 0 30px rgba(139, 0, 255, 0.1);
+    position: relative;
+    overflow: hidden;
+}
+
+.auth-card::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: conic-gradient(from 0deg, var(--neon-purple), var(--electric-pink), var(--cyber-blue), var(--neon-purple));
+    animation: borderRotate 4s linear infinite;
+    z-index: -1;
+}
+
+@keyframes borderRotate {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.auth-title {
+    font-size: 2.5rem;
+    color: var(--neon-purple);
+    font-family: 'Courier New', monospace;
+    font-weight: bold;
+    text-shadow: 
+        0 0 10px var(--neon-purple),
+        0 0 20px var(--neon-purple);
+    margin-bottom: 0.5rem;
+}
+
+.auth-subtitle {
+    color: var(--cyber-blue);
+    font-family: 'Courier New', monospace;
+    font-size: 0.9rem;
+    letter-spacing: 1px;
+    text-shadow: 0 0 5px var(--cyber-blue);
+    margin-bottom: 2rem;
+}
+
+.pixel-label {
+    color: var(--cyber-blue);
+    font-family: 'Courier New', monospace;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-size: 0.9rem;
+    text-shadow: 0 0 5px var(--cyber-blue);
+}
+
+.pixel-input {
+    background: var(--pixel-black);
+    border: 2px solid var(--neon-purple);
+    border-radius: 0;
+    color: var(--cyber-blue);
+    font-family: 'Courier New', monospace;
+    padding: 0.8rem;
+    transition: all 0.3s ease;
+}
+
+.pixel-input:focus {
+    background: var(--pixel-black);
+    border-color: var(--electric-pink);
+    box-shadow: 0 0 20px var(--shadow-glow);
+    color: var(--cyber-blue);
+}
+
+.pixel-input::placeholder {
+    color: var(--cyber-blue);
+    opacity: 0.7;
+}
+
+.auth-link {
+    color: var(--cyber-blue);
+    font-family: 'Courier New', monospace;
+    font-size: 0.9rem;
+    letter-spacing: 1px;
+}
+
+.neon-link {
+    color: var(--neon-purple);
+    text-decoration: none;
+    font-weight: bold;
+    text-shadow: 0 0 5px var(--neon-purple);
+    transition: all 0.3s ease;
+}
+
+.neon-link:hover {
+    color: var(--electric-pink);
+    text-shadow: 0 0 10px var(--electric-pink);
+    text-decoration: none;
+}
+
+/* Card Styles */
+.card {
+    border: var(--pixelated-border);
+    border-radius: 0;
+    transition: all 0.3s ease;
+    background: var(--pixel-gray);
+    backdrop-filter: blur(10px);
+    box-shadow: 
+        0 0 20px var(--shadow-neon),
+        inset 0 0 20px rgba(139, 0, 255, 0.1);
+    position: relative;
+}
+
+.card::before {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    background: var(--gradient-cyber);
+    z-index: -1;
+    border-radius: 0;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 
+        0 0 30px var(--shadow-glow),
+        0 15px 35px var(--shadow-neon);
+    animation: pixelGlow 0.5s ease;
+}
+
+@keyframes pixelGlow {
+    0%, 100% { box-shadow: 0 0 30px var(--shadow-glow); }
+    50% { box-shadow: 0 0 50px var(--electric-pink); }
+}
+
+.input-card {
+    border: 3px solid var(--neon-purple);
+    background: var(--pixel-gray);
+}
+
+/* Form Styles */
+.scene-input {
+    border-radius: 15px;
+    border: 2px solid var(--pastel-green);
+    padding: 1rem;
+    font-size: 1.1rem;
+    transition: all 0.3s ease;
+    background: var(--soft-white);
+}
+
+.scene-input:focus {
+    border-color: var(--primary-teal);
+    box-shadow: 0 0 0 0.2rem var(--shadow-light);
+    background: white;
+}
+
+/* Button Styles */
+.animate-btn {
+    background: var(--gradient-cyber);
+    border: 2px solid var(--neon-purple);
+    border-radius: 0;
+    padding: 0.8rem 2rem;
+    font-weight: bold;
+    font-size: 1.1rem;
+    font-family: 'Courier New', monospace;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+    min-width: 250px;
+    color: var(--pixel-black);
+    text-shadow: none;
+}
+
+.animate-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+    transition: left 0.5s;
+}
+
+.animate-btn:hover::before {
+    left: 100%;
+}
+
+.animate-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 
+        0 0 20px var(--neon-purple),
+        0 10px 25px var(--shadow-neon);
+    background: var(--electric-pink);
+    border-color: var(--electric-pink);
+}
+
+.animate-btn:active {
+    transform: translateY(0);
+    animation: pixelPress 0.1s;
+}
+
+@keyframes pixelPress {
+    0% { transform: scale(1); }
+    50% { transform: scale(0.95); }
+    100% { transform: scale(1); }
+}
+
+.animate-btn.loading {
+    pointer-events: none;
+}
+
+.animate-btn .btn-text {
+    transition: opacity 0.3s ease;
+}
+
+.animate-btn.loading .btn-text {
+    opacity: 0;
+}
+
+.animate-btn.loading .spinner-border {
+    display: inline-block !important;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+/* Loading Animation */
+.loading-animation {
+    display: flex;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.spinner-grow {
+    animation-delay: 0s, 0.3s, 0.6s;
+}
+
+.spinner-grow:nth-child(1) { animation-delay: 0s; }
+.spinner-grow:nth-child(2) { animation-delay: 0.3s; }
+.spinner-grow:nth-child(3) { animation-delay: 0.6s; }
+
+/* Pinterest-style Masonry Grid */
+.masonry-grid {
+    columns: 1;
+    column-gap: 1.5rem;
+    margin-top: 2rem;
+}
+
+@media (min-width: 576px) {
+    .masonry-grid {
+        columns: 2;
+    }
+}
+
+@media (min-width: 768px) {
+    .masonry-grid {
+        columns: 2;
+    }
+}
+
+@media (min-width: 992px) {
+    .masonry-grid {
+        columns: 3;
+    }
+}
+
+@media (min-width: 1200px) {
+    .masonry-grid {
+        columns: 4;
+    }
+}
+
+/* Gallery Item Styles */
+.gallery-item {
+    break-inside: avoid;
+    margin-bottom: 1.5rem;
+    background: white;
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+}
+
+.gallery-item:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 35px var(--shadow-medium);
+}
+
+.gallery-item img {
+    width: 100%;
+    height: auto;
+    display: block;
+    border-radius: 15px 15px 0 0;
+}
+
+.gallery-item-content {
+    padding: 1.5rem;
+}
+
+.gallery-item-scene {
+    font-size: 0.9rem;
+    color: var(--medium-gray);
+    font-style: italic;
+    margin-bottom: 1rem;
+    padding: 0.5rem;
+    background: var(--light-gray);
+    border-radius: 10px;
+    border-left: 4px solid var(--primary-teal);
+}
+
+.gallery-item-story {
+    font-size: 0.95rem;
+    line-height: 1.6;
+    color: var(--dark-gray);
+    margin-bottom: 1rem;
+}
+
+.gallery-item-actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 1rem;
+}
+
+.btn-sm {
+    border-radius: 20px;
+    padding: 0.4rem 1rem;
+    font-size: 0.85rem;
+}
+
+.btn-outline-primary {
+    border-color: var(--primary-teal);
+    color: var(--primary-teal);
+}
+
+.btn-outline-primary:hover {
+    background: var(--primary-teal);
+    border-color: var(--primary-teal);
+}
+
+.btn-outline-success {
+    border-color: var(--pastel-green);
+    color: var(--pastel-green);
+}
+
+.btn-outline-success:hover {
+    background: var(--pastel-green);
+    border-color: var(--pastel-green);
+}
+
+/* Journal Styles */
+.journal-entry {
+    background: var(--light-gray);
+    border-left: 4px solid var(--pastel-green);
+    padding: 1rem;
+    margin-top: 1rem;
+    border-radius: 0 10px 10px 0;
+    font-style: italic;
+}
+
+/* Modal Styles */
+.modal-content {
+    border-radius: 20px;
+    border: none;
+}
+
+.modal-header {
+    background: var(--gradient-soft);
+    color: white;
+    border-radius: 20px 20px 0 0;
+}
+
+.modal-header .btn-close {
+    filter: brightness(0) invert(1);
+}
+
+/* Journal Entry Styles */
+.journal-card {
+    border-radius: 15px;
+    margin-bottom: 1.5rem;
+    background: linear-gradient(135deg, var(--soft-white), var(--light-gray));
+    border-left: 4px solid var(--primary-teal);
+}
+
+.journal-entry-preview {
+    max-height: 150px;
+    overflow: hidden;
+    position: relative;
+}
+
+.journal-entry-preview::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 30px;
+    background: linear-gradient(transparent, white);
+}
+
+.journal-meta {
+    font-size: 0.85rem;
+    color: var(--medium-gray);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .container {
+        padding: 0 1rem;
+    }
+    
+    .scene-input {
+        font-size: 1rem;
+    }
+    
+    .animate-btn {
+        min-width: 200px;
+        font-size: 1rem;
+    }
+    
+    header {
+        padding: 2rem 0;
+    }
+    
+    .display-4 {
+        font-size: 2rem;
+    }
+    
+    .dashboard-nav {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .btn-nav {
+        width: 200px;
+        margin-bottom: 0.5rem;
+    }
+}
+
+/* Utility Classes */
+.text-primary {
+    color: var(--primary-teal) !important;
+}
+
+.bg-primary {
+    background: var(--gradient-primary) !important;
+}
+
+.border-primary {
+    border-color: var(--primary-teal) !important;
+}
+
+/* Smooth Animations */
+* {
+    transition: all 0.3s ease;
+}
+
+/* Focus Styles for Accessibility */
+.btn:focus,
+.form-control:focus {
+    outline: 2px solid var(--primary-teal);
+    outline-offset: 2px;
+}
+
+/* Loading States */
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.9);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--light-gray);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--primary-teal);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--light-blue);
+}
+
+/* Error Messages */
+.alert {
+    border-radius: 15px;
+    border: none;
+}
+
+.alert-danger {
+    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
+    color: white;
+}
+
+.alert-success {
+    background: linear-gradient(135deg, var(--pastel-green), var(--primary-teal));
+    color: white;
+}

static/js/script.js

@@ -0,0 +1,471 @@
+// InkBoard JavaScript - Main Application Logic
+
+class InkBoard {
+    constructor() {
+        this.currentCreationId = null;
+        this.currentSection = 'create';
+        this.init();
+    }
+
+    init() {
+        this.setupEventListeners();
+        this.loadGallery();
+        this.showSection('create'); // Default to create section
+    }
+
+    setupEventListeners() {
+        // Scene form submission
+        document.getElementById('scene-form').addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.generateContent();
+        });
+
+        // Journal modal save button
+        document.getElementById('save-journal').addEventListener('click', () => {
+            this.saveJournal();
+        });
+
+        // Handle modal close
+        document.getElementById('journalModal').addEventListener('hidden.bs.modal', () => {
+            this.currentCreationId = null;
+            document.getElementById('journal-text').value = '';
+        });
+    }
+
+    async generateContent() {
+        const sceneIdea = document.getElementById('scene-idea').value.trim();
+        
+        if (!sceneIdea) {
+            this.showAlert('Please enter a scene idea', 'danger');
+            return;
+        }
+
+        try {
+            this.showLoading(true);
+            this.setButtonLoading(true);
+
+            const response = await fetch('/generate', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    scene_idea: sceneIdea
+                })
+            });
+
+            const data = await response.json();
+
+            if (data.success) {
+                this.displayResult(data);
+                this.loadGallery(); // Refresh gallery
+                document.getElementById('scene-idea').value = ''; // Clear input
+                this.showAlert('Story and image generated successfully!', 'success');
+            } else {
+                this.showAlert(data.error || 'Failed to generate content', 'danger');
+            }
+
+        } catch (error) {
+            console.error('Error generating content:', error);
+            this.showAlert('Network error. Please try again.', 'danger');
+        } finally {
+            this.showLoading(false);
+            this.setButtonLoading(false);
+        }
+    }
+
+    displayResult(data) {
+        const resultsSection = document.getElementById('results-section');
+        
+        // Build image section only if image was generated
+        const imageSection = data.image_url ? `
+            <div class="col-lg-6 mb-4">
+                <div class="image-container">
+                    <img src="${data.image_url}" alt="Generated Scene" class="img-fluid rounded shadow">
+                </div>
+            </div>
+        ` : '';
+        
+        // Adjust story column width based on whether image exists
+        const storyColClass = data.image_url ? 'col-lg-6' : 'col-12';
+        
+        // Build download button only if image exists
+        const downloadButton = data.image_url ? `
+            <button class="btn btn-outline-success btn-sm" onclick="inkBoard.downloadImage('${data.image_url}')">
+                <i class="fas fa-download me-1"></i>
+                Download Image
+            </button>
+        ` : '';
+        
+        const resultHTML = `
+            <div class="col-12 mb-5">
+                <div class="card shadow-lg border-0">
+                    <div class="card-body p-4">
+                        <h4 class="card-title text-center mb-4">
+                            <i class="fas fa-sparkles me-2"></i>
+                            Your Creation
+                        </h4>
+                        <div class="row">
+                            ${imageSection}
+                            <div class="${storyColClass}">
+                                <div class="story-container">
+                                    <h5 class="mb-3">
+                                        <i class="fas fa-book-open me-2"></i>
+                                        Your Story
+                                    </h5>
+                                    <p class="story-text">${data.story}</p>
+                                    <div class="mt-3">
+                                        <button class="btn btn-outline-primary btn-sm me-2" onclick="inkBoard.openJournal('${data.creation_id}')">
+                                            <i class="fas fa-journal-whills me-1"></i>
+                                            Add Journal Entry
+                                        </button>
+                                        ${downloadButton}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        resultsSection.innerHTML = resultHTML;
+        
+        // Smooth scroll to results
+        resultsSection.scrollIntoView({ behavior: 'smooth' });
+    }
+
+    async loadGallery() {
+        try {
+            const response = await fetch('/get_creations');
+            const data = await response.json();
+            
+            const galleryGrid = document.getElementById('gallery-grid');
+            
+            if (data.creations && data.creations.length > 0) {
+                const galleryHTML = data.creations.map(creation => this.createGalleryItem(creation)).join('');
+                galleryGrid.innerHTML = galleryHTML;
+            } else {
+                galleryGrid.innerHTML = `
+                    <div class="col-12 text-center py-5">
+                        <i class="fas fa-palette fa-3x text-muted mb-3"></i>
+                        <h5 class="text-muted">No creations yet</h5>
+                        <p class="text-muted">Start by describing a scene above!</p>
+                    </div>
+                `;
+            }
+        } catch (error) {
+            console.error('Error loading gallery:', error);
+        }
+    }
+
+    createGalleryItem(creation) {
+        const journalEntry = creation.journal_entry ? 
+            `<div class="journal-entry">
+                <small class="text-muted">
+                    <i class="fas fa-journal-whills me-1"></i>
+                    Journal Entry:
+                </small>
+                <p class="mb-0 mt-1">${creation.journal_entry}</p>
+            </div>` : '';
+
+        // Only include image section if image exists
+        const imageSection = creation.image_url ? 
+            `<img src="${creation.image_url}" alt="Scene: ${creation.scene_idea}" loading="lazy">` : '';
+        
+        // Only include download button if image exists
+        const downloadButton = creation.image_url ? 
+            `<button class="btn btn-outline-success btn-sm" onclick="inkBoard.downloadImage('${creation.image_url}')">
+                <i class="fas fa-download me-1"></i>
+                Download
+            </button>` : '';
+
+        return `
+            <div class="gallery-item">
+                ${imageSection}
+                <div class="gallery-item-content">
+                    <div class="gallery-item-scene">
+                        <i class="fas fa-quote-left me-1"></i>
+                        ${creation.scene_idea}
+                    </div>
+                    <div class="gallery-item-story">
+                        ${creation.story}
+                    </div>
+                    ${journalEntry}
+                    <div class="gallery-item-actions">
+                        <button class="btn btn-outline-primary btn-sm" onclick="inkBoard.openJournal('${creation.id}', '${creation.journal_entry || ''}')">
+                            <i class="fas fa-journal-whills me-1"></i>
+                            ${creation.journal_entry ? 'Edit' : 'Add'} Journal
+                        </button>
+                        ${downloadButton}
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
+    openJournal(creationId, existingText = '') {
+        this.currentCreationId = creationId;
+        document.getElementById('journal-text').value = existingText;
+        
+        const modal = new bootstrap.Modal(document.getElementById('journalModal'));
+        modal.show();
+    }
+
+    async saveJournal() {
+        if (!this.currentCreationId) {
+            this.showAlert('No creation selected', 'danger');
+            return;
+        }
+
+        const journalText = document.getElementById('journal-text').value.trim();
+
+        try {
+            const response = await fetch('/save_journal', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    creation_id: this.currentCreationId,
+                    journal_entry: journalText
+                })
+            });
+
+            const data = await response.json();
+
+            if (data.success) {
+                this.showAlert('Journal entry saved!', 'success');
+                this.loadGallery(); // Refresh gallery
+                
+                // Close modal
+                const modal = bootstrap.Modal.getInstance(document.getElementById('journalModal'));
+                modal.hide();
+            } else {
+                this.showAlert(data.error || 'Failed to save journal', 'danger');
+            }
+
+        } catch (error) {
+            console.error('Error saving journal:', error);
+            this.showAlert('Network error. Please try again.', 'danger');
+        }
+    }
+
+    downloadImage(imageUrl) {
+        // Create a temporary link element to trigger download
+        const link = document.createElement('a');
+        link.href = imageUrl;
+        link.download = `inkboard-creation-${Date.now()}.png`;
+        link.target = '_blank';
+        
+        // Trigger download
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        
+        this.showAlert('Image download started!', 'success');
+    }
+
+    showLoading(show) {
+        const loadingSection = document.getElementById('loading-section');
+        const resultsSection = document.getElementById('results-section');
+        
+        if (show) {
+            loadingSection.classList.remove('d-none');
+            resultsSection.innerHTML = ''; // Clear previous results
+        } else {
+            loadingSection.classList.add('d-none');
+        }
+    }
+
+    setButtonLoading(loading) {
+        const btn = document.getElementById('generate-btn');
+        const btnText = btn.querySelector('.btn-text');
+        const spinner = btn.querySelector('.spinner-border');
+        
+        if (loading) {
+            btn.classList.add('loading');
+            btn.disabled = true;
+            btnText.classList.add('d-none');
+            spinner.classList.remove('d-none');
+        } else {
+            btn.classList.remove('loading');
+            btn.disabled = false;
+            btnText.classList.remove('d-none');
+            spinner.classList.add('d-none');
+        }
+    }
+
+    showAlert(message, type) {
+        // Remove existing alerts
+        const existingAlert = document.querySelector('.alert');
+        if (existingAlert) {
+            existingAlert.remove();
+        }
+
+        // Create new alert
+        const alert = document.createElement('div');
+        alert.className = `alert alert-${type} alert-dismissible fade show`;
+        alert.innerHTML = `
+            ${message}
+            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+        `;
+
+        // Insert at the top of the main container
+        const main = document.querySelector('main');
+        main.insertBefore(alert, main.firstChild);
+
+        // Auto-dismiss after 5 seconds
+        setTimeout(() => {
+            if (alert.parentNode) {
+                alert.remove();
+            }
+        }, 5000);
+    }
+
+    showSection(sectionName) {
+        // Hide all sections
+        document.querySelectorAll('.dashboard-section').forEach(section => {
+            section.classList.add('d-none');
+        });
+
+        // Remove active class from all nav buttons
+        document.querySelectorAll('.btn-nav').forEach(btn => {
+            btn.classList.remove('active');
+        });
+
+        // Show selected section
+        const targetSection = document.getElementById(`${sectionName}-section`);
+        if (targetSection) {
+            targetSection.classList.remove('d-none');
+        }
+
+        // Add active class to the correct button
+        const buttonSelectors = {
+            'create': 'Create Story',
+            'gallery': 'Gallery', 
+            'journal': 'Journal'
+        };
+        
+        document.querySelectorAll('.btn-nav').forEach(btn => {
+            if (btn.textContent.trim().includes(buttonSelectors[sectionName])) {
+                btn.classList.add('active');
+            }
+        });
+
+        // Update current section
+        this.currentSection = sectionName;
+
+        // Load content based on section
+        if (sectionName === 'gallery') {
+            this.loadGallery();
+        } else if (sectionName === 'journal') {
+            this.loadJournalEntries();
+        }
+    }
+
+    async loadJournalEntries() {
+        try {
+            const response = await fetch('/get_creations');
+            const data = await response.json();
+            
+            const journalContainer = document.getElementById('journal-entries');
+            
+            // Filter creations that have journal entries
+            const entriesWithJournal = data.creations?.filter(creation => creation.journal_entry) || [];
+            
+            if (entriesWithJournal.length > 0) {
+                const journalHTML = entriesWithJournal.map(creation => this.createJournalEntry(creation)).join('');
+                journalContainer.innerHTML = journalHTML;
+            } else {
+                journalContainer.innerHTML = `
+                    <div class="col-12 text-center py-5">
+                        <i class="fas fa-journal-whills fa-3x text-muted mb-3"></i>
+                        <h5 class="text-muted">No journal entries yet</h5>
+                        <p class="text-muted">Create a story and add journal entries to see them here!</p>
+                    </div>
+                `;
+            }
+        } catch (error) {
+            console.error('Error loading journal entries:', error);
+        }
+    }
+
+    createJournalEntry(creation) {
+        const date = new Date().toLocaleDateString();
+        return `
+            <div class="col-lg-6 col-xl-4 mb-4">
+                <div class="card journal-card">
+                    <div class="card-body">
+                        <div class="journal-meta mb-2">
+                            <small class="text-muted">
+                                <i class="fas fa-calendar me-1"></i>
+                                ${date}
+                            </small>
+                        </div>
+                        <h6 class="card-title">
+                            <i class="fas fa-quote-left me-1"></i>
+                            ${creation.scene_idea}
+                        </h6>
+                        <div class="journal-entry-preview mb-3">
+                            <p class="card-text">${creation.journal_entry}</p>
+                        </div>
+                        <div class="d-flex justify-content-between align-items-center">
+                            <button class="btn btn-sm btn-outline-primary" onclick="inkBoard.openJournal('${creation.id}', '${creation.journal_entry}')">
+                                <i class="fas fa-edit me-1"></i>
+                                Edit
+                            </button>
+                            <button class="btn btn-sm btn-outline-secondary" onclick="inkBoard.viewFullStory('${creation.id}')">
+                                <i class="fas fa-eye me-1"></i>
+                                View Story
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
+    viewFullStory(creationId) {
+        // Switch to gallery and highlight the specific creation
+        this.showSection('gallery');
+        // You could add highlighting logic here
+    }
+}
+
+// Initialize the application
+const inkBoard = new InkBoard();
+
+// Additional utility functions
+document.addEventListener('DOMContentLoaded', function() {
+    // Add smooth scrolling for all anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            document.querySelector(this.getAttribute('href')).scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+    });
+
+    // Add loading animation to images
+    document.addEventListener('load', function(e) {
+        if (e.target.tagName === 'IMG') {
+            e.target.style.opacity = '0';
+            e.target.style.transition = 'opacity 0.3s ease';
+            setTimeout(() => {
+                e.target.style.opacity = '1';
+            }, 100);
+        }
+    }, true);
+});
+
+// Handle window resize for masonry grid
+window.addEventListener('resize', function() {
+    // Trigger reflow for masonry grid
+    const grid = document.getElementById('gallery-grid');
+    if (grid) {
+        grid.style.columnCount = '';
+        grid.offsetHeight; // Force reflow
+    }
+});

templates/dashboard.html

@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dashboard - InkBoard</title>
+    
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap" rel="stylesheet">
+    
+    <!-- Font Awesome Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+    <div class="container-fluid">
+        <!-- Header -->
+        <header class="text-center py-4">
+            <div class="d-flex justify-content-between align-items-center">
+                <h1 class="display-4 fw-bold mb-0">
+                    <i class="fas fa-terminal me-2"></i>
+                    INKBOARD
+                </h1>
+                <div class="user-info">
+                    <span class="me-3">Welcome, {{ user.username }}!</span>
+                    <a href="{{ url_for('logout') }}" class="btn btn-outline-neon btn-sm">
+                        <i class="fas fa-sign-out-alt me-2"></i>
+                        LOGOUT
+                    </a>
+                </div>
+            </div>
+            <p class="lead cyber-subtitle">// NEURAL STORY GENERATOR //</p>
+            
+            <!-- Dashboard Navigation -->
+            <div class="dashboard-nav mt-4">
+                <button class="btn btn-outline-light btn-nav me-2 active" onclick="inkBoard.showSection('create')">
+                    <i class="fas fa-plus-circle me-2"></i>
+                    CREATE STORY
+                </button>
+                <button class="btn btn-outline-light btn-nav me-2" onclick="inkBoard.showSection('gallery')">
+                    <i class="fas fa-palette me-2"></i>
+                    GALLERY
+                </button>
+                <button class="btn btn-outline-light btn-nav" onclick="inkBoard.showSection('journal')">
+                    <i class="fas fa-journal-whills me-2"></i>
+                    JOURNAL
+                </button>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="container">
+            <!-- Create Story Section -->
+            <div id="create-section" class="dashboard-section">
+                <div class="row justify-content-center">
+                    <div class="col-lg-8">
+                        <div class="card input-card">
+                            <div class="card-body p-4">
+                                <h2 class="card-title text-center mb-4">
+                                    <i class="fas fa-magic me-2"></i>
+                                    CREATE YOUR STORY
+                                </h2>
+                                
+                                <form id="scene-form" class="needs-validation" novalidate>
+                                    <div class="mb-4">
+                                        <label for="scene-input" class="form-label pixel-label">
+                                            <i class="fas fa-lightbulb me-2"></i>
+                                            SCENE DESCRIPTION
+                                        </label>
+                                        <textarea 
+                                            class="form-control pixel-input scene-input" 
+                                            id="scene-input" 
+                                            rows="3" 
+                                            placeholder="Describe your scene... (e.g., a lonely lighthouse on a stormy night)"
+                                            required>
+                                        </textarea>
+                                        <div class="invalid-feedback">
+                                            Please describe your scene idea.
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="text-center">
+                                        <button type="submit" class="animate-btn" id="generate-btn">
+                                            <span class="btn-text">
+                                                <i class="fas fa-wand-magic-sparkles me-2"></i>
+                                                GENERATE STORY
+                                            </span>
+                                            <div class="spinner-border spinner-border-sm d-none ms-2" role="status"></div>
+                                        </button>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Result Display -->
+                <div id="result-container" class="mt-4 d-none">
+                    <div class="row">
+                        <div class="col-lg-8 mx-auto">
+                            <div class="card result-card">
+                                <div class="card-body">
+                                    <h3 class="card-title">
+                                        <i class="fas fa-scroll me-2"></i>
+                                        YOUR STORY
+                                    </h3>
+                                    <div id="story-content" class="story-text mb-4"></div>
+                                    
+                                    <div class="row">
+                                        <div class="col-md-6">
+                                            <div id="image-container" class="image-container mb-3">
+                                                <!-- Generated image will appear here -->
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="story-actions">
+                                                <button class="btn btn-outline-neon btn-sm mb-2" onclick="inkBoard.openJournal()">
+                                                    <i class="fas fa-journal-whills me-2"></i>
+                                                    ADD TO JOURNAL
+                                                </button>
+                                                <button class="btn btn-outline-neon btn-sm" onclick="inkBoard.downloadImage()">
+                                                    <i class="fas fa-download me-2"></i>
+                                                    DOWNLOAD IMAGE
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Gallery Section -->
+            <div id="gallery-section" class="dashboard-section d-none">
+                <div class="row">
+                    <div class="col-12">
+                        <h2 class="text-center mb-4">
+                            <i class="fas fa-palette me-2"></i>
+                            YOUR GALLERY
+                        </h2>
+                        <div id="gallery-grid" class="row">
+                            <!-- Gallery items will be loaded here -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Journal Section -->
+            <div id="journal-section" class="dashboard-section d-none">
+                <div class="row">
+                    <div class="col-12">
+                        <h2 class="text-center mb-4">
+                            <i class="fas fa-journal-whills me-2"></i>
+                            YOUR JOURNAL
+                        </h2>
+                        <div id="journal-entries" class="row">
+                            <!-- Journal entries will be loaded here -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <!-- Journal Modal -->
+    <div class="modal fade" id="journalModal" tabindex="-1">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">
+                        <i class="fas fa-journal-whills me-2"></i>
+                        ADD JOURNAL ENTRY
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <form id="journal-form">
+                        <div class="mb-3">
+                            <label for="journal-text" class="form-label pixel-label">YOUR THOUGHTS</label>
+                            <textarea 
+                                class="form-control pixel-input" 
+                                id="journal-text" 
+                                rows="5" 
+                                placeholder="Write your thoughts about this story...">
+                            </textarea>
+                        </div>
+                        <div class="text-end">
+                            <button type="button" class="btn btn-outline-neon me-2" data-bs-dismiss="modal">
+                                CANCEL
+                            </button>
+                            <button type="submit" class="btn animate-btn">
+                                <i class="fas fa-save me-2"></i>
+                                SAVE ENTRY
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- Custom JS -->
+    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
+    
+    <script>
+        // Initialize InkBoard when document is ready
+        document.addEventListener('DOMContentLoaded', function() {
+            window.inkBoard = new InkBoard();
+        });
+    </script>
+</body>
+</html>

templates/index.html

@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>InkBoard - Neural Story Generator</title>
+    
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap" rel="stylesheet">
+    
+    <!-- Font Awesome Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body class="landing-body">
+    <div class="container-fluid h-100">
+        <div class="row h-100 justify-content-center align-items-center">
+            <div class="col-lg-8 text-center">
+                <!-- Main Landing Content -->
+                <div class="landing-content">
+                    <h1 class="display-1 mb-4 cyber-title">
+                        <i class="fas fa-terminal me-3"></i>
+                        INKBOARD
+                    </h1>
+                    <p class="lead cyber-subtitle mb-5">
+                        // NEURAL STORY GENERATOR //
+                        <br>
+                        Transform ideas into pixelated dreams
+                    </p>
+                    
+                    <!-- CTA Buttons -->
+                    <div class="landing-actions">
+                        <a href="{{ url_for('login') }}" class="btn animate-btn btn-lg me-3 mb-3">
+                            <i class="fas fa-sign-in-alt me-2"></i>
+                            LOGIN
+                        </a>
+                        <a href="{{ url_for('register') }}" class="btn btn-outline-neon btn-lg mb-3">
+                            <i class="fas fa-user-plus me-2"></i>
+                            CREATE ACCOUNT
+                        </a>
+                    </div>
+                    
+                    <!-- Features -->
+                    <div class="row mt-5">
+                        <div class="col-md-4 mb-4">
+                            <div class="feature-box">
+                                <i class="fas fa-brain fa-3x mb-3"></i>
+                                <h4>AI POWERED</h4>
+                                <p>Advanced neural networks generate unique stories from your ideas</p>
+                            </div>
+                        </div>
+                        <div class="col-md-4 mb-4">
+                            <div class="feature-box">
+                                <i class="fas fa-image fa-3x mb-3"></i>
+                                <h4>VISUAL ART</h4>
+                                <p>Each story comes with a custom generated pixelated illustration</p>
+                            </div>
+                        </div>
+                        <div class="col-md-4 mb-4">
+                            <div class="feature-box">
+                                <i class="fas fa-journal-whills fa-3x mb-3"></i>
+                                <h4>DIGITAL JOURNAL</h4>
+                                <p>Save and organize your creative journey in your personal gallery</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
+        <main class="container">
+            <!-- Create Story Section -->
+            <div id="create-section" class="dashboard-section">
+                <!-- Scene Input Section -->
+                <div class="row justify-content-center mb-5">
+                    <div class="col-lg-8">
+                        <div class="card shadow-sm border-0 input-card">
+                            <div class="card-body p-4">
+                                <h3 class="card-title text-center mb-4">
+                                    <i class="fas fa-lightbulb me-2"></i>
+                                    Describe Your Scene
+                                </h3>
+                                <form id="scene-form">
+                                    <div class="mb-3">
+                                        <textarea 
+                                            class="form-control scene-input" 
+                                            id="scene-idea" 
+                                            rows="4" 
+                                            placeholder="A girl standing alone on a cliff at sunset..." 
+                                            required></textarea>
+                                    </div>
+                                    <div class="text-center">
+                                        <button type="submit" class="btn btn-primary btn-lg animate-btn" id="generate-btn">
+                                            <span class="btn-text">
+                                                <i class="fas fa-magic me-2"></i>
+                                                Create Story & Image
+                                            </span>
+                                            <div class="spinner-border spinner-border-sm d-none" role="status">
+                                                <span class="visually-hidden">Loading...</span>
+                                            </div>
+                                        </button>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Loading Animation -->
+                <div class="row justify-content-center d-none" id="loading-section">
+                    <div class="col-lg-8">
+                        <div class="text-center py-5">
+                            <div class="loading-animation mb-4">
+                                <div class="spinner-grow text-primary" role="status"></div>
+                                <div class="spinner-grow text-info" role="status"></div>
+                                <div class="spinner-grow text-success" role="status"></div>
+                            </div>
+                            <h4 class="text-muted">Creating your story and image...</h4>
+                            <p class="text-muted">This may take a moment</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Results Section -->
+                <div class="row" id="results-section">
+                    <!-- Generated content will be inserted here -->
+                </div>
+            </div>
+
+            <!-- Gallery Section -->
+            <div id="gallery-section" class="dashboard-section d-none">
+                <div class="row">
+                    <div class="col-12">
+                        <h3 class="text-center mb-4">
+                            <i class="fas fa-palette me-2"></i>
+                            Your Creative Gallery
+                        </h3>
+                        <div class="masonry-grid" id="gallery-grid">
+                            <!-- Gallery items will be inserted here -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Journal Section -->
+            <div id="journal-section" class="dashboard-section d-none">
+                <div class="row">
+                    <div class="col-12">
+                        <h3 class="text-center mb-4">
+                            <i class="fas fa-journal-whills me-2"></i>
+                            Your Journal Entries
+                        </h3>
+                        <div class="row" id="journal-entries">
+                            <!-- Journal entries will be inserted here -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <!-- Journal Modal -->
+    <div class="modal fade" id="journalModal" tabindex="-1" aria-labelledby="journalModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="journalModalLabel">
+                        <i class="fas fa-journal-whills me-2"></i>
+                        Journal Entry
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <textarea class="form-control" id="journal-text" rows="6" placeholder="Write your thoughts, inspiration, or notes about this creation..."></textarea>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                    <button type="button" class="btn btn-primary" id="save-journal">
+                        <i class="fas fa-save me-2"></i>
+                        Save Journal
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- Custom JS -->
+    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
+</body>
+</html>

templates/login.html

@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - InkBoard</title>
+    
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap" rel="stylesheet">
+    
+    <!-- Font Awesome Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body class="auth-body">
+    <div class="container-fluid h-100">
+        <div class="row h-100 justify-content-center align-items-center">
+            <div class="col-md-6 col-lg-4">
+                <div class="auth-card card">
+                    <div class="card-body p-5">
+                        <!-- Logo/Title -->
+                        <div class="text-center mb-4">
+                            <h1 class="auth-title">
+                                <i class="fas fa-terminal me-2"></i>
+                                INKBOARD
+                            </h1>
+                            <p class="auth-subtitle">// NEURAL STORY GENERATOR //</p>
+                        </div>
+
+                        <!-- Login Form -->
+                        <form id="login-form">
+                            <div class="mb-3">
+                                <label for="username" class="form-label pixel-label">
+                                    <i class="fas fa-user me-2"></i>USERNAME
+                                </label>
+                                <input type="text" class="form-control pixel-input" id="username" name="username" required>
+                            </div>
+                            
+                            <div class="mb-4">
+                                <label for="password" class="form-label pixel-label">
+                                    <i class="fas fa-lock me-2"></i>PASSWORD
+                                </label>
+                                <input type="password" class="form-control pixel-input" id="password" name="password" required>
+                            </div>
+                            
+                            <button type="submit" class="btn animate-btn w-100 mb-3" id="login-btn">
+                                <span class="btn-text">
+                                    <i class="fas fa-sign-in-alt me-2"></i>
+                                    LOGIN
+                                </span>
+                                <div class="spinner-border spinner-border-sm d-none" role="status"></div>
+                            </button>
+                        </form>
+
+                        <!-- Register Link -->
+                        <div class="text-center">
+                            <p class="auth-link">
+                                NEW USER? 
+                                <a href="{{ url_for('register') }}" class="neon-link">CREATE ACCOUNT</a>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- Auth JS -->
+    <script>
+        document.getElementById('login-form').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            const btn = document.getElementById('login-btn');
+            const btnText = btn.querySelector('.btn-text');
+            const spinner = btn.querySelector('.spinner-border');
+            
+            // Show loading
+            btn.disabled = true;
+            btnText.classList.add('d-none');
+            spinner.classList.remove('d-none');
+            
+            try {
+                const formData = new FormData(e.target);
+                const response = await fetch('/login', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        username: formData.get('username'),
+                        password: formData.get('password')
+                    })
+                });
+                
+                const data = await response.json();
+                
+                if (data.success) {
+                    window.location.href = data.redirect;
+                } else {
+                    showAlert(data.error || 'Login failed', 'danger');
+                }
+            } catch (error) {
+                showAlert('Network error. Please try again.', 'danger');
+            } finally {
+                // Hide loading
+                btn.disabled = false;
+                btnText.classList.remove('d-none');
+                spinner.classList.add('d-none');
+            }
+        });
+        
+        function showAlert(message, type) {
+            const existingAlert = document.querySelector('.alert');
+            if (existingAlert) existingAlert.remove();
+            
+            const alert = document.createElement('div');
+            alert.className = `alert alert-${type} alert-dismissible fade show`;
+            alert.innerHTML = `
+                ${message}
+                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+            `;
+            
+            document.querySelector('.card-body').insertBefore(alert, document.querySelector('form'));
+            
+            setTimeout(() => {
+                if (alert.parentNode) alert.remove();
+            }, 5000);
+        }
+    </script>
+</body>
+</html>

templates/register.html

@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Register - InkBoard</title>
+    
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap" rel="stylesheet">
+    
+    <!-- Font Awesome Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body class="auth-body">
+    <div class="container-fluid h-100">
+        <div class="row h-100 justify-content-center align-items-center">
+            <div class="col-md-6 col-lg-4">
+                <div class="auth-card card">
+                    <div class="card-body p-5">
+                        <!-- Logo/Title -->
+                        <div class="text-center mb-4">
+                            <h1 class="auth-title">
+                                <i class="fas fa-terminal me-2"></i>
+                                INKBOARD
+                            </h1>
+                            <p class="auth-subtitle">// CREATE ACCOUNT //</p>
+                        </div>
+
+                        <!-- Register Form -->
+                        <form id="register-form">
+                            <div class="mb-3">
+                                <label for="username" class="form-label pixel-label">
+                                    <i class="fas fa-user me-2"></i>USERNAME
+                                </label>
+                                <input type="text" class="form-control pixel-input" id="username" name="username" required>
+                            </div>
+                            
+                            <div class="mb-3">
+                                <label for="email" class="form-label pixel-label">
+                                    <i class="fas fa-envelope me-2"></i>EMAIL
+                                </label>
+                                <input type="email" class="form-control pixel-input" id="email" name="email" required>
+                            </div>
+                            
+                            <div class="mb-4">
+                                <label for="password" class="form-label pixel-label">
+                                    <i class="fas fa-lock me-2"></i>PASSWORD
+                                </label>
+                                <input type="password" class="form-control pixel-input" id="password" name="password" required>
+                            </div>
+                            
+                            <button type="submit" class="btn animate-btn w-100 mb-3" id="register-btn">
+                                <span class="btn-text">
+                                    <i class="fas fa-user-plus me-2"></i>
+                                    CREATE ACCOUNT
+                                </span>
+                                <div class="spinner-border spinner-border-sm d-none" role="status"></div>
+                            </button>
+                        </form>
+
+                        <!-- Login Link -->
+                        <div class="text-center">
+                            <p class="auth-link">
+                                ALREADY HAVE AN ACCOUNT? 
+                                <a href="{{ url_for('login') }}" class="neon-link">LOGIN</a>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- Auth JS -->
+    <script>
+        document.getElementById('register-form').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            const btn = document.getElementById('register-btn');
+            const btnText = btn.querySelector('.btn-text');
+            const spinner = btn.querySelector('.spinner-border');
+            
+            // Show loading
+            btn.disabled = true;
+            btnText.classList.add('d-none');
+            spinner.classList.remove('d-none');
+            
+            try {
+                const formData = new FormData(e.target);
+                const response = await fetch('/register', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        username: formData.get('username'),
+                        email: formData.get('email'),
+                        password: formData.get('password')
+                    })
+                });
+                
+                const data = await response.json();
+                
+                if (data.success) {
+                    window.location.href = data.redirect;
+                } else {
+                    showAlert(data.error || 'Registration failed', 'danger');
+                }
+            } catch (error) {
+                showAlert('Network error. Please try again.', 'danger');
+            } finally {
+                // Hide loading
+                btn.disabled = false;
+                btnText.classList.remove('d-none');
+                spinner.classList.add('d-none');
+            }
+        });
+        
+        function showAlert(message, type) {
+            const existingAlert = document.querySelector('.alert');
+            if (existingAlert) existingAlert.remove();
+            
+            const alert = document.createElement('div');
+            alert.className = `alert alert-${type} alert-dismissible fade show`;
+            alert.innerHTML = `
+                ${message}
+                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+            `;
+            
+            document.querySelector('.card-body').insertBefore(alert, document.querySelector('form'));
+            
+            setTimeout(() => {
+                if (alert.parentNode) alert.remove();
+            }, 5000);
+        }
+    </script>
+</body>
+</html>