import requests

import json
import time
from typing import Dict, Any, Optional, Iterator, List, Union
from dataclasses import dataclass, field
from urllib.parse import urlencode, quote

@dataclass
class Message:
"""Represents a chat message"""
role: str
content: Union[str, List[Dict[str, Any]]]

@dataclass
class ChatCompletionChunk:
"""Represents a streaming chunk from the API"""
id: str
object: str
created: int
model: str
choices: List[Dict[str, Any]]
system_fingerprint: Optional[str] = None
prompt_filter_results: Optional[List[Dict[str, Any]]] = None

def get_content(self) -> str:
"""Extract content from the first choice delta"""
if self.choices and len(self.choices) > 0:
delta = self.choices[0].get('delta', {})
return delta.get('content', '')
return ''

def is_finished(self) -> bool:
"""Check if this chunk indicates completion"""
if self.choices and len(self.choices) > 0:
return self.choices[0].get('finish_reason') is not None
return False

class PollinationClient:
"""Enhanced client for interacting with pollinations.ai API, with improved features and support for more endpoints."""

def __init__(
self,
base_url: str = "https://text.pollinations.ai/openai/v1/chat/completions",
token: Optional[str] = None,
referrer: Optional[str] = None
):
self.base_url = base_url.rstrip('/')
self.token = token
self.referrer = referrer
self.session = requests.Session()
if self.token:
self.session.headers.update({"Authorization": f"Bearer {self.token}"})

def _parse_sse_line(self, line: str) -> Optional[Dict[str, Any]]:
"""Parse a single SSE line"""
line = line.strip()
if not line or line.startswith(':'):
return None

if line.startswith('data: '):
data_str = line[6:] # Remove 'data: ' prefix
if data_str.strip() == '[DONE]':
return {'done': True}
try:
return json.loads(data_str)
except json.JSONDecodeError:
return None

return None

def chat_completion(
self,
messages: List[Message],
model: str = "gpt-4o",
stream: bool = True,
temperature: float = 0.7,
max_tokens: Optional[int] = 12000,
top_p: Optional[float] = None,
frequency_penalty: Optional[float] = None,
presence_penalty: Optional[float] = None,
stop: Optional[List[str]] = None,
seed: Optional[int] = None,
response_format: Optional[Dict[str, str]] = None,
tools: Optional[List[Dict[str, Any]]] = None,
tool_choice: Optional[Union[str, Dict[str, Any]]] = None,
private: bool = False,
**kwargs
) -> Iterator[ChatCompletionChunk]:
"""
Create a chat completion with streaming support. Enhanced with support for multimodal inputs (vision, audio),
tools, JSON mode, seed, private mode, and more.

Args:
messages: List of Message objects (content can be str or list for multimodal)
model: Model to use (default: gpt-4o, other options like mistral, claude-hybridspace)
stream: Whether to stream responses (default: True)
temperature: Sampling temperature (default: 0.7)
max_tokens: Maximum tokens to generate
top_p: Top-p sampling parameter
frequency_penalty: Frequency penalty
presence_penalty: Presence penalty
stop: Stop sequences
seed: Seed for reproducible results
response_format: Response format, e.g., {"type": "json_object"} for JSON mode
tools: List of tools for function calling
tool_choice: Tool choice configuration
private: If True, prevent response from appearing in public feed
**kwargs: Additional parameters

Yields:
ChatCompletionChunk objects
"""
# Convert messages to the format expected by the API
formatted_messages = []
for msg in messages:
formatted_messages.append({
"role": msg.role,
"content": msg.content
})

# Build query parameters
params = {
"model": model,
"stream": str(stream).lower(),
"temperature": temperature,
"private": str(private).lower(),
}

if self.token:
params["token"] = self.token
if self.referrer:
params["referrer"] = self.referrer

# Add optional parameters
if max_tokens is not None:
params["max_tokens"] = max_tokens
if top_p is not None:
params["top_p"] = top_p
if frequency_penalty is not None:
params["frequency_penalty"] = frequency_penalty
if presence_penalty is not None:
params["presence_penalty"] = presence_penalty
if stop is not None:
params["stop"] = stop
if seed is not None:
params["seed"] = seed

# Add any additional kwargs
params.update(kwargs)

# Build URL with query parameters
query_string = urlencode(params, doseq=True)
url = f"{self.base_url}?{query_string}"

# Prepare request body
payload = {
"messages": formatted_messages
}
if response_format:
payload["response_format"] = response_format
if tools:
payload["tools"] = tools
if tool_choice:
payload["tool_choice"] = tool_choice

# Make streaming request
headers = {
"Content-Type": "application/json",
"Accept": "text/event-stream"
}

try:
response = self.session.post(
url,
json=payload,
headers=headers,
stream=True,
timeout=30
)
response.raise_for_status()

# Process streaming response
for line in response.iter_lines(decode_unicode=True):
if not line:
continue

parsed = self._parse_sse_line(line)
if parsed is None:
continue

if parsed.get('done'):
break

# Convert to ChatCompletionChunk
chunk = ChatCompletionChunk(
id=parsed.get('id', ''),
object=parsed.get('object', ''),
created=parsed.get('created', 0),
model=parsed.get('model', ''),
choices=parsed.get('choices', []),
system_fingerprint=parsed.get('system_fingerprint'),
prompt_filter_results=parsed.get('prompt_filter_results')
)

yield chunk

# Check if completion is finished
if chunk.is_finished():
break

except requests.RequestException as e:
raise ConnectionError(f"Failed to connect to Pollination API: {e}")
except Exception as e:
raise RuntimeError(f"Error processing response: {e}")

def chat_completion_simple(
self,
prompt: str,
model: str = "gpt-4o",
temperature: float = 0.7,
**kwargs
) -> str:
"""
Simple chat completion that returns the full response as a string

Args:
prompt: The prompt to send
model: Model to use
temperature: Sampling temperature
**kwargs: Additional parameters

Returns:
Complete response as a string
"""
messages = [Message(role="user", content=prompt)]

response_content = ""
for chunk in self.chat_completion(
messages=messages,
model=model,
temperature=temperature,
**kwargs
):
response_content += chunk.get_content()

return response_content.strip()

def list_models(self) -> List[Dict[str, Any]]:
"""List available text models"""
url = "https://text.pollinations.ai/models"
response = self.session.get(url)
response.raise_for_status()
return response.json()

def generate_image(
self,
prompt: str,
model: str = "flux",
width: int = 1024,
height: int = 1024,
seed: Optional[int] = None,
nologo: bool = False,
private: bool = False,
enhance: bool = False,
safe: bool = False
) -> bytes:
"""Generate an image and return the image bytes"""
params = {
"model": model,
"width": width,
"height": height,
"seed": seed if seed is not None else "random",
"nologo": str(nologo).lower(),
"private": str(private).lower(),
"enhance": str(enhance).lower(),
"safe": str(safe).lower(),
}
encoded_prompt = quote(prompt)
query_string = urlencode(params)
url = f"https://pollinations.ai/p/{encoded_prompt}?{query_string}"
response = self.session.get(url)
response.raise_for_status()
return response.content

def text_to_speech(
self,
prompt: str,
model: str = "openai-audio",
voice: str = "nova"
) -> bytes:
"""Generate speech audio from text and return audio bytes"""
encoded_prompt = quote(prompt)
params = {
"model": model,
"voice": voice,
}
query_string = urlencode(params)
url = f"https://text.pollinations.ai/{encoded_prompt}?{query_string}"
response = self.session.get(url)
response.raise_for_status()
return response.content

# Helper functions
def create_message(role: str, content: Union[str, List[Dict[str, Any]]]) -> Message:
"""Helper function to create a Message object"""
return Message(role=rol

README.md

@@ -1,10 +1,13 @@
 ---
 title: Vibecode Studio
-emoji: 📊
-colorFrom: red
-colorTo: purple
+colorFrom: pink
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html

@@ -1,19 +1,365 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vibecode Studio</title>
+    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎨</text></svg>">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#6366f1',
+                        secondary: '#8b5cf6',
+                        accent: '#ec4899',
+                        dark: '#0f172a',
+                        light: '#f8fafc'
+                    }
+                }
+            }
+        }
+    </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;
+            background-color: #0f172a;
+        }
+        .glow {
+            box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
+        }
+        .feature-card:hover {
+            transform: translateY(-5px);
+            transition: all 0.3s ease;
+        }
+        .typing-cursor::after {
+            content: '|';
+            animation: blink 1s infinite;
+        }
+        @keyframes blink {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0; }
+        }
+        .code-block {
+            background: #1e293b;
+            border-radius: 0.5rem;
+            padding: 1rem;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 0.875rem;
+            line-height: 1.5;
+            overflow-x: auto;
+        }
+        .glow-text {
+            text-shadow: 0 0 10px rgba(99, 102, 241, 0.7);
+        }
+    </style>
+</head>
+<body class="text-light">
+    <!-- Navigation -->
+    <nav class="fixed w-full z-50 bg-dark/90 backdrop-blur-sm py-4 px-6 flex justify-between items-center">
+        <div class="flex items-center space-x-2">
+            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-accent flex items-center justify-center">
+                <i data-feather="code" class="text-white"></i>
+            </div>
+            <span class="text-xl font-bold">Vibecode<span class="text-accent">Studio</span></span>
+        </div>
+        <div class="hidden md:flex space-x-8">
+            <a href="#" class="hover:text-primary transition">Home</a>
+            <a href="#" class="hover:text-primary transition">Features</a>
+            <a href="#" class="hover:text-primary transition">API</a>
+            <a href="#" class="hover:text-primary transition">Pricing</a>
+        </div>
+        <div class="flex items-center space-x-4">
+            <button class="px-4 py-2 rounded-lg bg-primary hover:bg-primary/80 transition">Get Started</button>
+            <button id="menu-toggle" class="md:hidden text-light">
+                <i data-feather="menu"></i>
+            </button>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section id="hero" class="min-h-screen flex items-center pt-16">
+        <div class="container mx-auto px-6 py-20 flex flex-col md:flex-row items-center">
+            <div class="md:w-1/2 mb-12 md:mb-0">
+                <h1 class="text-4xl md:text-6xl font-bold mb-6">
+                    Code with <span class="text-primary">Vibe</span>, Create with <span class="text-accent">Flow</span>
+                </h1>
+                <p class="text-xl text-gray-300 mb-8">
+                    Vibecode Studio is your creative coding companion. Generate, transform, and visualize code with AI-powered tools.
+                </p>
+                <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+                    <button class="px-8 py-3 rounded-lg bg-primary hover:bg-primary/80 transition font-medium glow">
+                        Start Coding
+                    </button>
+                    <button class="px-8 py-3 rounded-lg bg-dark border border-primary hover:bg-primary/10 transition font-medium">
+                        View Demo
+                    </button>
+                </div>
+            </div>
+            <div class="md:w-1/2 flex justify-center">
+                <div class="relative">
+                    <div class="w-80 h-80 rounded-full bg-gradient-to-r from-primary/20 to-accent/20 absolute -top-10 -left-10 blur-3xl"></div>
+                    <div class="relative bg-dark border border-gray-800 rounded-2xl p-6 w-full max-w-md">
+                        <div class="flex justify-between items-center mb-4">
+                            <div class="flex space-x-2">
+                                <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                                <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                            </div>
+                            <div class="text-sm text-gray-400">app.js</div>
+                        </div>
+                        <div class="code-block">
+                            <pre class="text-green-400">// Generate creative code with AI</pre>
+                            <pre class="text-blue-400">const vibe = <span class="text-yellow-300">new</span> <span class="text-purple-400">Vibecode</span>();</pre>
+                            <pre class="text-blue-400">vibe.<span class="text-yellow-300">generate</span>(<span class="text-green-400">"creative UI"</span>);</pre>
+                            <pre class="text-gray-400">  .<span class="text-yellow-300">then</span>(<span class="text-blue-400">result</span> => {</pre>
+                            <pre class="text-gray-400">    <span class="text-yellow-300">console</span>.<span class="text-yellow-300">log</span>(result);</pre>
+                            <pre class="text-gray-400">  });</pre>
+                            <pre class="typing-cursor"></pre>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Features Section -->
+    <section class="py-20 bg-dark/50">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Powerful <span class="text-primary">Features</span></h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">
+                    Everything you need to create amazing digital experiences with code
+                </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Feature 1 -->
+                <div class="feature-card bg-dark border border-gray-800 rounded-2xl p-6 transition-all duration-300">
+                    <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
+                        <i data-feather="cpu" class="text-primary"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">AI Code Generation</h3>
+                    <p class="text-gray-400 mb-4">
+                        Generate clean, functional code from natural language descriptions
+                    </p>
+                    <div class="flex items-center text-primary">
+                        <span>Learn more</span>
+                        <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                    </div>
+                </div>
+                
+                <!-- Feature 2 -->
+                <div class="feature-card bg-dark border border-gray-800 rounded-2xl p-6 transition-all duration-300">
+                    <div class="w-12 h-12 rounded-lg bg-secondary/10 flex items-center justify-center mb-4">
+                        <i data-feather="zap" class="text-secondary"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Real-time Collaboration</h3>
+                    <p class="text-gray-400 mb-4">
+                        Work together with your team in real-time with live code sharing
+                    </p>
+                    <div class="flex items-center text-secondary">
+                        <span>Learn more</span>
+                        <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                    </div>
+                </div>
+                
+                <!-- Feature 3 -->
+                <div class="feature-card bg-dark border border-gray-800 rounded-2xl p-6 transition-all duration-300">
+                    <div class="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center mb-4">
+                        <i data-feather="eye" class="text-accent"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Visual Preview</h3>
+                    <p class="text-gray-400 mb-4">
+                        See your code come to life with instant visual previews
+                    </p>
+                    <div class="flex items-center text-accent">
+                        <span>Learn more</span>
+                        <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- API Section -->
+    <section class="py-20">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row items-center">
+                <div class="md:w-1/2 mb-12 md:mb-0">
+                    <div class="bg-dark border border-gray-800 rounded-2xl p-6">
+                        <div class="flex justify-between items-center mb-4">
+                            <div class="text-sm text-gray-400">API Example</div>
+                            <div class="flex space-x-2">
+                                <button class="px-3 py-1 text-xs rounded bg-primary/10 text-primary">Python</button>
+                                <button class="px-3 py-1 text-xs rounded bg-gray-800 text-gray-400">JavaScript</button>
+                            </div>
+                        </div>
+                        <div class="code-block">
+                            <pre class="text-purple-400"><span class="text-blue-400">from</span> vibecode <span class="text-blue-400">import</span> PollinationClient</pre>
+                            <pre class="text-gray-400"></pre>
+                            <pre class="text-blue-400">client =</span> PollinationClient()</pre>
+                            <pre class="text-gray-400"></pre>
+                            <pre class="text-blue-400">response =</span> client.chat_completion_simple(</pre>
+                            <pre class="text-green-400">  <span class="text-green-400">"Create a responsive navbar with Tailwind"</span></pre>
+                            <pre class="text-blue-400">)</pre>
+                            <pre class="text-gray-400"></pre>
+                            <pre class="text-blue-400">print</span>(response)</pre>
+                        </div>
+                    </div>
+                </div>
+                <div class="md:w-1/2 md:pl-12">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-6">
+                        Powerful <span class="text-primary">API</span> Integration
+                    </h2>
+                    <p class="text-gray-400 mb-6">
+                        Integrate Vibecode Studio into your workflow with our comprehensive API. 
+                        Generate code, transform content, and create visualizations programmatically.
+                    </p>
+                    <ul class="space-y-4 mb-8">
+                        <li class="flex items-start">
+                            <i data-feather="check-circle" class="text-green-500 mt-1 mr-3"></i>
+                            <span>Code generation from natural language</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check-circle" class="text-green-500 mt-1 mr-3"></i>
+                            <span>Image generation with text prompts</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check-circle" class="text-green-500 mt-1 mr-3"></i>
+                            <span>Text-to-speech conversion</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check-circle" class="text-green-500 mt-1 mr-3"></i>
+                            <span>Model selection and customization</span>
+                        </li>
+                    </ul>
+                    <button class="px-6 py-3 rounded-lg bg-primary hover:bg-primary/80 transition font-medium">
+                        View Documentation
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="py-20 bg-gradient-to-r from-primary/10 to-accent/10">
+        <div class="container mx-auto px-6 text-center">
+            <h2 class="text-3xl md:text-4xl font-bold mb-6">
+                Ready to <span class="glow-text">Vibe</span> with Code?
+            </h2>
+            <p class="text-gray-400 max-w-2xl mx-auto mb-8">
+                Join thousands of developers creating amazing experiences with Vibecode Studio
+            </p>
+            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
+                <button class="px-8 py-3 rounded-lg bg-primary hover:bg-primary/80 transition font-medium glow">
+                    Get Started Free
+                </button>
+                <button class="px-8 py-3 rounded-lg bg-dark border border-gray-700 hover:bg-gray-800 transition font-medium">
+                    Schedule a Demo
+                </button>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="py-12 bg-dark border-t border-gray-800">
+        <div class="container mx-auto px-6">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center space-x-2 mb-4">
+                        <div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-accent flex items-center justify-center">
+                            <i data-feather="code" class="text-white w-4 h-4"></i>
+                        </div>
+                        <span class="text-xl font-bold">Vibecode<span class="text-accent">Studio</span></span>
+                    </div>
+                    <p class="text-gray-400">
+                        Creative coding platform for developers and designers.
+                    </p>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Product</h4>
+                    <ul class="space-y-2 text-gray-400">
+                        <li><a href="#" class="hover:text-primary transition">Features</a></li>
+                        <li><a href="#" class="hover:text-primary transition">API</a></li>
+                        <li><a href="#" class="hover:text-primary transition">Pricing</a></li>
+                        <li><a href="#" class="hover:text-primary transition">Documentation</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Company</h4>
+                    <ul class="space-y-2 text-gray-400">
+                        <li><a href="#" class="hover:text-primary transition">About</a></li>
+                        <li><a href="#" class="hover:text-primary transition">Blog</a></li>
+                        <li><a href="#" class="hover:text-primary transition">Careers</a></li>
+                        <li><a href="#" class="hover:text-primary transition">Contact</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Connect</h4>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-primary transition">
+                            <i data-feather="github"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-primary transition">
+                            <i data-feather="twitter"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-primary transition">
+                            <i data-feather="linkedin"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-primary transition">
+                            <i data-feather="discord"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
+                <p>&copy; 2023 Vibecode Studio. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // Initialize Feather Icons
+        feather.replace();
+        
+        // Initialize Vanta.js background
+        document.addEventListener('DOMContentLoaded', function() {
+            VANTA.GLOBE({
+                el: "#hero",
+                mouseControls: true,
+                touchControls: true,
+                gyroControls: false,
+                minHeight: 200.00,
+                minWidth: 200.00,
+                scale: 1.00,
+                scaleMobile: 1.00,
+                color: 0x6366f1,
+                color2: 0x8b5cf6,
+                backgroundColor: 0x0f172a,
+                size: 1.00,
+                lineColor: 0x6366f1
+            });
+        });
+        
+        // Typing animation
+        document.addEventListener('DOMContentLoaded', function() {
+            const cursor = document.querySelector('.typing-cursor');
+            if (cursor) {
+                setInterval(() => {
+                    cursor.style.opacity = cursor.style.opacity === '0' ? '1' : '0';
+                }, 500);
+            }
+        });
+        
+        // Mobile menu toggle
+        document.getElementById('menu-toggle').addEventListener('click', function() {
+            const menu = document.querySelector('.mobile-menu');
+            menu.classList.toggle('hidden');
+        });
+    </script>
+</body>
 </html>