Spaces:

skarvsladd
/

localportal-horizon

Running

App Files Files Community

skarvsladd commited on Oct 3

Commit

3fff55d

verified ·

1 Parent(s): 4e63034

proceed with other pager, create a dark mode version and add a toggle-button. Döp om sidan till "/local Portal". change font to geist font and geist font mono on bigg text. create att google maps embedding in the page where users submits the request to hire the local.

Browse files

Files changed (3) hide show

README.md +8 -4
boka.html +319 -0
index.html +375 -18

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Localportal Horizon
-emoji: 🐨
-colorFrom: indigo
 colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: LocalPortal Horizon ✨
+colorFrom: red
 colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

boka.html ADDED Viewed

	@@ -0,0 +1,319 @@

+<!DOCTYPE html>
+<html lang="sv">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Boka Lokal - LocalPortal Horizon</title>
+    <meta name="description" content="Boka vår lokal på Holbergsgatan i Blackeberg för ditt nästa event. Snabb och enkel bokning online.">
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#8B5CF6',
+                        secondary: '#FFFFFF'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap');
+        :root {
+            --bg-primary: #ffffff;
+            --bg-secondary: #f8fafc;
+            --text-primary: #1f2937;
+            --text-secondary: #6b7280;
+            --accent-primary: #8B5CF6;
+            --accent-secondary: #7C3AED;
+        }
+        .dark-mode {
+            --bg-primary: #111827;
+            --bg-secondary: #1f2937;
+            --text-primary: #f9fafb;
+            --text-secondary: #d1d5db;
+            --accent-primary: #a78bfa;
+            --accent-secondary: #8b5cf6;
+        }
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+            transition: all 0.3s ease;
+        }
+        .big-text {
+            font-family: 'Geist', sans-serif;
+        }
+        .mono-text {
+            font-family: 'Geist Mono', monospace;
+        }
+        .hero-gradient {
+            background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
+        }
+    </style>
+</head>
+<body class="bg-primary text-primary transition-colors duration-300">
+    <!-- Navigation -->
+    <nav class="bg-primary shadow-lg sticky top-0 z-50 transition-colors duration-300" style="background-color: var(--bg-primary);">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center h-16">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0 flex items-center">
+                        <i data-feather="home" class="h-8 w-8" style="color: var(--accent-primary);"></i>
+                        <span class="ml-2 text-xl font-bold big-text" style="color: var(--accent-primary);">LocalPortal Horizon</span>
+                    </div>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-10 flex items-baseline space-x-4">
+                        <a href="index.html" class="px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300" style="color: var(--text-secondary);">Hem</a>
+                        <a href="om.html" class="px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300" style="color: var(--text-secondary);">Om Lokalen</a>
+                        <a href="galleri.html" class="px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300" style="color: var(--text-secondary);">Galleri</a>
+                        <a href="priser.html" class="px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300" style="color: var(--text-secondary);">Priser</a>
+                        <a href="boka.html" class="px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300" style="color: var(--accent-primary);">Boka</a>
+                        <a href="event.html" class="px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300" style="color: var(--text-secondary);">Event</a>
+                    </div>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <button id="darkModeToggle" class="p-2 rounded-md transition-colors duration-300" style="color: var(--text-secondary);">
+                        <i data-feather="moon" class="h-5 w-5"></i>
+                    </button>
+                    <div class="md:hidden">
+                        <button class="mobile-menu-button p-2 rounded-md transition-colors duration-300" style="color: var(--text-secondary);">
+                            <i data-feather="menu"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="hero-gradient text-white py-20">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center">
+                <h1 class="text-4xl md:text-6xl font-bold mb-6 big-text">Boka Vår Lokal</h1>
+                <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
+                    Fyll i formuläret nedan för att begära en bokning av vår lokal. Vi återkommer inom 24 timmar.
+                </p>
+            </div>
+        </div>
+    </section>
+    <!-- Booking Form Section -->
+    <section class="py-16 transition-colors duration-300" style="background-color: var(--bg-primary);">
+        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid md:grid-cols-2 gap-12">
+                <!-- Booking Form -->
+                <div>
+                    <h2 class="text-3xl font-bold mb-8 big-text" style="color: var(--text-primary);">Bokningsförfrågan</h2>
+                    <form id="bookingForm" class="space-y-6">
+                        <div class="grid grid-cols-2 gap-4">
+                            <div>
+                                <label for="firstName" class="block text-sm font-medium mb-2" style="color: var(--text-primary);">Förnamn *</label>
+                                <input type="text" id="firstName" name="firstName" required
+                                       class="w-full px-4 py-3 rounded-lg border transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary"
+                                       style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--bg-secondary);">
+                            </div>
+                            <div>
+                                <label for="lastName" class="block text-sm font-medium mb-2" style="color: var(--text-primary);">Efternamn *</label>
+                                <input type="text" id="lastName" name="lastName" required
+                                       class="w-full px-4 py-3 rounded-lg border transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary"
+                                       style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--bg-secondary);">
+                            </div>
+                        </div>
+                        <div>
+                            <label for="email" class="block text-sm font-medium mb-2" style="color: var(--text-primary);">E-post *</label>
+                            <input type="email" id="email" name="email" required
+                                   class="w-full px-4 py-3 rounded-lg border transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary"
+                                   style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--bg-secondary);">
+                        </div>
+                        <div>
+                            <label for="phone" class="block text-sm font-medium mb-2" style="color: var(--text-primary);">Telefon *</label>
+                            <input type="tel" id="phone" name="phone" required
+                                   class="w-full px-4 py-3 rounded-lg border transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary"
+                                   style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--bg-secondary);">
+                        </div>
+                        <div>
+                            <label for="eventType" class="block text-sm font-medium mb-2" style="color: var(--text-primary);">Typ av Event *</label>
+                            <select id="eventType" name="eventType" required
+                                    class="w-full px-4 py-3 rounded-lg border transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary"
+                                    style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--bg-secondary);">
+                                <option value="">Välj typ av event</option>
+                                <option value="bröllop">Bröllop</option>
+                                <option value="företag">Företagsevent</option>
+                                <option value="fest">Privat fest</option>
+                                <option value="konferens">Konferens</option>
+                                <option value="annat">Annat</option>
+                            </select>
+                        </div>
+                        <div class="grid grid-cols-2 gap-4">
+                            <div>
+                                <label for="eventDate" class="block text-sm font-medium mb-2" style="color: var(--text-primary);">Datum *</label>
+                                <input type="date" id="eventDate" name="eventDate" required
+                                       class="w-full px-4 py-3 rounded-lg border transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary"
+                                       style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--bg-secondary);">
+                            </div>
+                            <div>
+                                <label for="guests" class="block text-sm font-medium mb-2" style="color: var(--text-primary);">Antal gäster *</label>
+                                <input type="number" id="guests" name="guests" min="1" max="150" required
+                                       class="w-full px-4 py-3 rounded-lg border transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary"
+                                       style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--bg-secondary);">
+                            </div>
+                        </div>
+                        <div>
+                            <label for="message" class="block text-sm font-medium mb-2" style="color: var(--text-primary);">Meddelande</label>
+                            <textarea id="message" name="message" rows="4"
+                                      class="w-full px-4 py-3 rounded-lg border transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary"
+                                      style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--bg-secondary);"
+                                      placeholder="Beskriv ditt event och eventuella speciella önskemål..."></textarea>
+                        </div>
+                        <button type="submit"
+                                class="w-full py-3 px-6 rounded-lg font-semibold transition duration-300 hover:opacity-90"
+                                style="background-color: var(--accent-primary); color: white;">
+                            Skicka Bokningsförfrågan
+                        </button>
+                    </form>
+                </div>
+                <!-- Map Section -->
+                <div>
+                    <h2 class="text-3xl font-bold mb-6 big-text" style="color: var(--text-primary);">Vår Plats</h2>
+                    <div class="rounded-xl overflow-hidden shadow-lg mb-6">
+                        <iframe
+                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2032.3456789012345!2d17.93456789012345!3d59.34567890123456!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x465f9d679d7c8c7f%3A0x1234567890abcdef!2sHolbergsgatan%2C%20Blackeberg%2C%20Stockholm!5e0!3m2!1ssv!2sse!4v1234567890123!5m2!1ssv!2sse"
+                            width="100%"
+                            height="400"
+                            style="border:0;"
+                            allowfullscreen=""
+                            loading="lazy"
+                            referrerpolicy="no-referrer-when-downgrade">
+                        </iframe>
+                    </div>
+                    <div class="space-y-4">
+                        <div class="flex items-start">
+                            <i data-feather="map-pin" class="h-5 w-5 mr-3 mt-1" style="color: var(--accent-primary);"></i>
+                            <div>
+                                <h3 class="font-semibold" style="color: var(--text-primary);">Adress</h3>
+                                <p style="color: var(--text-secondary);">Holbergsgatan, Blackeberg<br>Stockholm, Sverige</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <i data-feather="phone" class="h-5 w-5 mr-3 mt-1" style="color: var(--accent-primary);"></i>
+                            <div>
+                                <h3 class="font-semibold" style="color: var(--text-primary);">Telefon</h3>
+                                <p style="color: var(--text-secondary);">+46 70 123 45 67</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <i data-feather="mail" class="h-5 w-5 mr-3 mt-1" style="color: var(--accent-primary);"></i>
+                            <div>
+                                <h3 class="font-semibold" style="color: var(--text-primary);">E-post</h3>
+                                <p style="color: var(--text-secondary);">[email protected]</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="py-12 transition-colors duration-300" style="background-color: var(--bg-secondary); color: var(--text-primary);">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-lg font-semibold mb-4 big-text">LocalPortal Horizon</h3>
+                    <p style="color: var(--text-secondary);">Holbergsgatan, Blackeberg<br>Stockholm, Sverige</p>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Kontakt</h3>
+                    <p style="color: var(--text-secondary);">[email protected]<br>+46 70 123 45 67</p>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Länkar</h3>
+                    <ul class="space-y-2" style="color: var(--text-secondary);">
+                        <li><a href="om.html" class="hover:opacity-70 transition duration-300">Om Lokalen</a></li>
+                        <li><a href="priser.html" class="hover:opacity-70 transition duration-300">Priser</a></li>
+                        <li><a href="boka.html" class="hover:opacity-70 transition duration-300">Boka</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Följ Oss</h3>
+                    <div class="flex space-x-4">
+                        <a href="#" style="color: var(--text-secondary);" class="hover:opacity-70 transition duration-300"><i data-feather="facebook"></i></a>
+                        <a href="#" style="color: var(--text-secondary);" class="hover:opacity-70 transition duration-300"><i data-feather="instagram"></i></a>
+                        <a href="#" style="color: var(--text-secondary);" class="hover:opacity-70 transition duration-300"><i data-feather="linkedin"></i></a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t mt-8 pt-8 text-center" style="border-color: var(--bg-primary); color: var(--text-secondary);">
+                <p>&copy; 2024 LocalPortal Horizon. Alla rättigheter förbehållna.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Dark mode toggle
+        const darkModeToggle = document.getElementById('darkModeToggle');
+        const darkModeIcon = darkModeToggle.querySelector('i');
+        // Check for saved dark mode preference
+        if (localStorage.getItem('darkMode') === 'true') {
+            document.body.classList.add('dark-mode');
+            darkModeIcon.setAttribute('data-feather', 'sun');
+        }
+        darkModeToggle.addEventListener('click', () => {
+            document.body.classList.toggle('dark-mode');
+            if (document.body.classList.contains('dark-mode')) {
+                localStorage.setItem('darkMode', 'true');
+                darkModeIcon.setAttribute('data-feather', 'sun');
+            } else {
+                localStorage.setItem('darkMode', 'false');
+                darkModeIcon.setAttribute('data-feather', 'moon');
+            }
+            feather.replace();
+        });
+        // Form submission
+        document.getElementById('bookingForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            // Simple form validation
+            const formData = new FormData(this);
+            const data = Object.fromEntries(formData);
+            // Here you would typically send the data to a server
+            alert('Tack för din bokningsförfrågan! Vi återkommer inom 24 timmar.');
+            this.reset();
+        });
+        // Mobile menu toggle
+        document.querySelector('.mobile-menu-button').addEventListener('click', function() {
+            alert('Mobilmeny kommer snart!');
+        });
+        // Initialize feather icons
+        feather.replace();
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -1,19 +1,376 @@
-<!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>
 </html>

+<!DOCTYPE html>
+<html lang="sv">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LocalPortal Horizon - Lokal på Holbergsgatan, Blackeberg</title>
+    <meta name="description" content="Elegant lokal i Blackeberg för bröllop, event och företagssamlingar. Boka vårt vackra utrymme idag!">
+<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#8B5CF6',
+                        secondary: '#FFFFFF'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap');
+        :root {
+            --bg-primary: #ffffff;
+            --bg-secondary: #f8fafc;
+            --text-primary: #1f2937;
+            --text-secondary: #6b7280;
+            --accent-primary: #8B5CF6;
+            --accent-secondary: #7C3AED;
+        }
+        .dark-mode {
+            --bg-primary: #111827;
+            --bg-secondary: #1f2937;
+            --text-primary: #f9fafb;
+            --text-secondary: #d1d5db;
+            --accent-primary: #a78bfa;
+            --accent-secondary: #8b5cf6;
+        }
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+            transition: all 0.3s ease;
+        }
+        .big-text {
+            font-family: 'Geist', sans-serif;
+        }
+        .mono-text {
+            font-family: 'Geist Mono', monospace;
+        }
+        .hero-gradient {
+            background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
+        }
+.chat-bubble {
+            animation: float 3s ease-in-out infinite;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+        }
+    </style>
+</head>
+<body class="bg-primary text-primary transition-colors duration-300">
+    <!-- Navigation -->
+    <nav class="bg-primary shadow-lg sticky top-0 z-50 transition-colors duration-300" style="background-color: var(--bg-primary);">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center h-16">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0 flex items-center">
+                        <i data-feather="home" class="h-8 w-8" style="color: var(--accent-primary);"></i>
+                        <span class="ml-2 text-xl font-bold big-text" style="color: var(--accent-primary);">LocalPortal Horizon</span>
+                    </div>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-10 flex items-baseline space-x-4">
+                        <a href="index.html" class="px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300" style="color: var(--accent-primary);">Hem</a>
+                        <a href="om.html" class="px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300" style="color: var(--text-secondary);">Om Lokalen</a>
+                        <a href="galleri.html" class="px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300" style="color: var(--text-secondary);">Galleri</a>
+                        <a href="priser.html" class="px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300" style="color: var(--text-secondary);">Priser</a>
+                        <a href="boka.html" class="px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300" style="color: var(--text-secondary);">Boka</a>
+                        <a href="event.html" class="px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300" style="color: var(--text-secondary);">Event</a>
+                    </div>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <button id="darkModeToggle" class="p-2 rounded-md transition-colors duration-300" style="color: var(--text-secondary);">
+                        <i data-feather="moon" class="h-5 w-5"></i>
+                    </button>
+                    <div class="md:hidden">
+                        <button class="mobile-menu-button p-2 rounded-md transition-colors duration-300" style="color: var(--text-secondary);">
+                            <i data-feather="menu"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+<!-- Hero Section -->
+    <section class="hero-gradient text-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+            <div class="text-center">
+                <h1 class="text-4xl md:text-6xl font-bold mb-6 big-text">Välkommen till LocalPortal Horizon</h1>
+<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
+                    Din drömlokal i hjärtat av Blackeberg. Perfekt för bröllop, event och företagssamlingar.
+                </p>
+                <div class="flex flex-col sm:flex-row justify-center gap-4">
+                    <a href="boka.html" class="bg-white text-primary px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-300">
+                        Boka Lokal
+                    </a>
+                    <a href="galleri.html" class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-primary transition duration-300">
+                        Se Galleri
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Info från Styrelsen Section -->
+    <section class="py-16 transition-colors duration-300" style="background-color: var(--bg-secondary);">
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold mb-4 big-text" style="color: var(--text-primary);">Info från Styrelsen</h2>
+                <div class="w-24 h-1 mx-auto" style="background-color: var(--accent-primary);"></div>
+            </div>
+            <div class="rounded-xl shadow-lg p-8 max-w-4xl mx-auto transition-colors duration-300" style="background-color: var(--bg-primary);">
+                <div class="flex items-start mb-6">
+                    <i data-feather="users" class="h-6 w-6 mr-4 mt-1" style="color: var(--accent-primary);"></i>
+                    <div>
+                        <h3 class="text-xl font-semibold mb-2" style="color: var(--text-primary);">Viktigt Meddelande</h3>
+                        <p style="color: var(--text-secondary);">
+Välkomna till en spännande vår i vår underbara lokal! Vi har nyligen renoverat köksavdelningen
+                            och installerade nya ljussystem för att göra ert event ännu mer minnesvärt. Kom ihåg att boka i god
+                            tid för högsäsong – vi ser fram emot att välkomna er!
+                        </p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <i data-feather="calendar" class="h-6 w-6 mr-4 mt-1" style="color: var(--accent-primary);"></i>
+                    <div>
+                        <h3 class="text-xl font-semibold mb-2" style="color: var(--text-primary);">Kommande Underhåll</h3>
+                        <p style="color: var(--text-secondary);">
+15-20 maj: Stängd för årlig underhållsperiod. Bokningar för efter denna period är nu öppna.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Quick Info Sections -->
+    <section class="py-16">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="text-center">
+                    <div class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4" style="background-color: var(--accent-primary); opacity: 0.1;">
+                        <i data-feather="map-pin" class="h-8 w-8" style="color: var(--accent-primary);"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2" style="color: var(--text-primary);">Perfekt Läge</h3>
+                    <p style="color: var(--text-secondary);">Holbergsgatan, Blackeberg. Lätt att nå med kollektivtrafik och bil.</p>
+                </div>
+                <div class="text-center">
+                    <div class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4" style="background-color: var(--accent-primary); opacity: 0.1;">
+                        <i data-feather="users" class="h-8 w-8" style="color: var(--accent-primary);"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2" style="color: var(--text-primary);">Upp till 150 gäster</h3>
+                    <p style="color: var(--text-secondary);">Rymligt utrymme som passar både stora och små sammankomster.</p>
+                </div>
+                <div class="text-center">
+                    <div class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4" style="background-color: var(--accent-primary); opacity: 0.1;">
+                        <i data-feather="award" class="h-8 w-8" style="color: var(--accent-primary);"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2" style="color: var(--text-primary);">Professionell Service</h3>
+                    <p style="color: var(--text-secondary);">Erfaret team som ser till att ert event blir perfekt.</p>
+                </div>
+</div>
+        </div>
+    </section>
+    <!-- Chat Bot Section -->
+    <div class="fixed bottom-6 right-6 z-50">
+        <button id="chatToggle" class="p-4 rounded-full shadow-lg transition duration-300 chat-bubble" style="background-color: var(--accent-primary); color: white;">
+            <i data-feather="message-circle" class="h-6 w-6"></i>
+        </button>
+        <div id="chatWindow" class="hidden absolute bottom-16 right-0 w-80 rounded-lg shadow-xl transition-colors duration-300" style="background-color: var(--bg-primary);">
+            <div class="p-4 rounded-t-lg" style="background-color: var(--accent-primary); color: white;">
+<div class="flex justify-between items-center">
+                    <h3 class="font-semibold">Violet Venue Assistant</h3>
+                    <button id="closeChat" class="text-white hover:text-gray-200">
+                        <i data-feather="x" class="h-4 w-4"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="p-4 h-64 overflow-y-auto" id="chatMessages">
+                <div class="rounded-lg p-3 mb-3 max-w-[80%] transition-colors duration-300" style="background-color: var(--bg-secondary);">
+                    <p class="text-sm" style="color: var(--text-primary);">Hej! Jag är LocalPortal Assistant. Hur kan jag hjälpa dig idag? Du kan fråga om bokning, priser eller vår lokal.</p>
+</div>
+            </div>
+            <div class="p-4 border-t" style="border-color: var(--bg-secondary);">
+                <div class="flex gap-2">
+                    <input type="text" id="chatInput" placeholder="Skriv ditt meddelande..." class="flex-1 rounded-lg px-3 py-2 text-sm focus:outline-none transition-colors duration-300" style="background-color: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--bg-secondary);">
+                    <button id="sendMessage" class="px-4 py-2 rounded-lg transition duration-300" style="background-color: var(--accent-primary); color: white;">
+<i data-feather="send" class="h-4 w-4"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Footer -->
+    <footer class="py-12 transition-colors duration-300" style="background-color: var(--bg-secondary); color: var(--text-primary);">
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-lg font-semibold mb-4 big-text">LocalPortal Horizon</h3>
+                    <p style="color: var(--text-secondary);">Holbergsgatan, Blackeberg<br>Stockholm, Sverige</p>
+</div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Kontakt</h3>
+                    <p style="color: var(--text-secondary);">[email protected]<br>+46 70 123 45 67</p>
+</div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Länkar</h3>
+                    <ul class="space-y-2" style="color: var(--text-secondary);">
+<li><a href="om.html" class="hover:text-white">Om Lokalen</a></li>
+                        <li><a href="priser.html" class="hover:text-white">Priser</a></li>
+                        <li><a href="boka.html" class="hover:text-white">Boka</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Följ Oss</h3>
+                    <div class="flex space-x-4">
+                        <a href="#" style="color: var(--text-secondary);"><i data-feather="facebook"></i></a>
+                        <a href="#" style="color: var(--text-secondary);"><i data-feather="instagram"></i></a>
+                        <a href="#" style="color: var(--text-secondary);"><i data-feather="linkedin"></i></a>
+</div>
+                </div>
+            </div>
+            <div class="border-t mt-8 pt-8 text-center" style="border-color: var(--bg-primary); color: var(--text-secondary);">
+                <p>&copy; 2024 LocalPortal Horizon. Alla rättigheter förbehållna.</p>
+</div>
+        </div>
+    </footer>
+    <script>
+        // Mobile menu toggle
+        document.querySelector('.mobile-menu-button').addEventListener('click', function() {
+            // Mobile menu functionality would go here
+            alert('Mobilmeny kommer snart!');
+        });
+        // Dark mode toggle
+        const darkModeToggle = document.getElementById('darkModeToggle');
+        const darkModeIcon = darkModeToggle.querySelector('i');
+        // Check for saved dark mode preference
+        if (localStorage.getItem('darkMode') === 'true') {
+            document.body.classList.add('dark-mode');
+            darkModeIcon.setAttribute('data-feather', 'sun');
+        }
+        darkModeToggle.addEventListener('click', () => {
+            document.body.classList.toggle('dark-mode');
+            if (document.body.classList.contains('dark-mode')) {
+                localStorage.setItem('darkMode', 'true');
+                darkModeIcon.setAttribute('data-feather', 'sun');
+            } else {
+                localStorage.setItem('darkMode', 'false');
+                darkModeIcon.setAttribute('data-feather', 'moon');
+            }
+            feather.replace();
+        });
+        // Chat functionality
+        const chatToggle = document.getElementById('chatToggle');
+        const chatWindow = document.getElementById('chatWindow');
+        const closeChat = document.getElementById('closeChat');
+        const sendMessage = document.getElementById('sendMessage');
+        const chatInput = document.getElementById('chatInput');
+        const chatMessages = document.getElementById('chatMessages');
+        chatToggle.addEventListener('click', () => {
+            chatWindow.classList.toggle('hidden');
+        });
+        closeChat.addEventListener('click', () => {
+            chatWindow.classList.add('hidden');
+        });
+        sendMessage.addEventListener('click', sendChatMessage);
+        chatInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                sendChatMessage();
+            }
+        });
+        function sendChatMessage() {
+            const message = chatInput.value.trim();
+            if (message) {
+                // Add user message
+                const userMessage = document.createElement('div');
+                userMessage.className = 'rounded-lg p-3 mb-3 max-w-[80%] ml-auto';
+                userMessage.style.backgroundColor = 'var(--accent-primary)';
+                userMessage.style.color = 'white';
+                userMessage.innerHTML = `<p class="text-sm">${message}</p>`;
+                chatMessages.appendChild(userMessage);
+                // Clear input
+                chatInput.value = '';
+                // Simulate bot response
+                setTimeout(() => {
+                    const botResponse = document.createElement('div');
+                    botResponse.className = 'rounded-lg p-3 mb-3 max-w-[80%] transition-colors duration-300';
+                    botResponse.style.backgroundColor = 'var(--bg-secondary)';
+                    botResponse.style.color = 'var(--text-primary)';
+                    botResponse.innerHTML = `<p class="text-sm">${getBotResponse(message)}</p>`;
+                    chatMessages.appendChild(botResponse);
+                    chatMessages.scrollTop = chatMessages.scrollHeight;
+                }, 1000);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+            }
+        }
+        function getBotResponse(message) {
+            const lowerMessage = message.toLowerCase();
+            if (lowerMessage.includes('hej') || lowerMessage.includes('hello')) {
+                return 'Hej! Kul att höra från dig. Hur kan jag hjälpa dig med LocalPortal Horizon idag?';
+            } else if (lowerMessage.includes('pris') || lowerMessage.includes('kostnad')) {
+                return 'Våra priser varierar beroende på säsong och typ av event. Kolla vår prissida för detaljerad information eller kontakta oss för en personlig offert!';
+            } else if (lowerMessage.includes('boka') || lowerMessage.includes('tillgäng')) {
+                return 'För att kolla tillgänglighet och boka, gå till vår bokningssida eller ring oss direkt på +46 70 123 45 67.';
+            } else if (lowerMessage.includes('stor') || lowerMessage.includes('kapacitet')) {
+                return 'Vår lokal rymmer upp till 150 personer och har 120 kvm yta. Perfekt för de flesta evenemang!';
+            } else if (lowerMessage.includes('adress') || lowerMessage.includes('hitta')) {
+                return 'Vi ligger på Holbergsgatan i Blackeberg, Stockholm. Lätt att nå med tunnelbana och buss!';
+            } else {
+                return 'Tack för ditt meddelande! För mer specifika frågor, var vänlig kontakta oss via telefon eller e-post så hjälper vi dig gärna.';
+            }
+        }
+        // Initialize feather icons
+        feather.replace();
+</script>
+</body>
 </html>
+Here's the complete homepage for your venue website "Violet Venue" with:
+✅ Modern, clean design using violet primary color and white secondary
+✅ Fully responsive layout
+✅ "Info från Styrelsen" section as requested
+✅ Interactive chat bot functionality
+✅ Professional navigation and footer
+✅ SEO-optimized meta tags
+✅ Mobile-friendly design
+✅ Feather icons integration
+The homepage includes:
+- Hero section with call-to-action buttons
+- Board information section
+- Quick info cards about the venue
+- Floating chat bot with intelligent responses
+- Professional footer with contact information
+The chat bot can answer questions about pricing, booking, capacity, and location. Would you like me to proceed with creating the other pages (About, Gallery, Pricing, Booking, Events) or would you like any modifications to the homepage first?