Spaces:

JohanDL
/

penguin-love-story

Running

App Files Files Community

JohanDL commited on Oct 6

Commit

9c98874

verified ·

1 Parent(s): d8869e6

I need you to make me an amazing wedding website. My name is Dennis Loevlie and my partner is Cait Morrow. We are getting married September 5th 2026 in Pittsburgh PA. We want a party section that is just going to be pictures (no titles) and then a carasael of everyones names. We are getting married in the Aviary so a cute penguin or Pittsburgh oriented theme would be cool. Also I would like to include my story of how we met We met in undergrad as classmates in the same major, stayed friends, and finally started dating senior year. After graduation, we moved to Pittsburgh and began building a life we love—exploring neighborhoods, taking weekend trips, and finding “our” spots around the city. At home, we cook together and unwind with romantic comedies. From lecture halls to city streets, we’re still choosing each other—and can’t wait to celebrate with you. Also, please add an interactive map feature showing significant places in our relationship journey that visitors can click through to see photos, stories, or details about each location. Include these places: United States: Morgantown, WV (West Virginia University) Pittsburgh, PA San Diego, CA Boston, MA Bar Harbor, ME Ocean City, MD Salem, MA Nantucket, MA Chicago, IL Denver, CO Europe: Amsterdam, Netherlands Berlin, Germany Oslo, Norway Flekkerøy, Norway Kristiansand, Norway Grimstad, Norway London, UK Liverpool, UK Positano, Italy Mexico: Cancun The map should be visually appealing and allow users to click each location to reveal why it's special to us. Consider using markers, pins, or a travel path connecting the locations chronologically if possible.

Browse files

Files changed (2) hide show

README.md +7 -4
index.html +357 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
 title: Penguin Love Story
-emoji: 🚀
-colorFrom: green
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

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

index.html CHANGED Viewed

@@ -1,19 +1,358 @@
-<!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="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dennis & Cait - Wedding Celebration</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/feather-icons/dist/feather.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Playfair+Display:wght@400;700&display=swap');
+        .font-dancing { font-family: 'Dancing Script', cursive; }
+        .font-playfair { font-family: 'Playfair Display', serif; }
+        .penguin-bg {
+            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 25 C55 30, 60 30, 65 25 C70 20, 75 20, 80 25 L80 75 C75 80, 70 80, 65 75 C60 70, 55 70, 50 75 C45 70, 40 70, 35 75 C30 80, 25 80, 20 75 L20 25 C25 20, 30 20, 35 25 C40 30, 45 30, 50 25 Z' fill='%23e0f2fe' opacity='0.3'/%3E%3Ccircle cx='40' cy='40' r='3' fill='%231e3a8a'/%3E%3Ccircle cx='60' cy='40' r='3' fill='%231e3a8a'/%3E%3Cpath d='M45 55 Q50 60, 55 55' stroke='%231e3a8a' stroke-width='2' fill='none'/%3E%3C/svg%3E");
+        }
+        .aviary-gradient {
+            background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
+        }
+        .map-container {
+            height: 500px;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+        }
+        .location-popup {
+            min-width: 250px;
+        }
+        .carousel-item {
+            transition: transform 0.5s ease;
+        }
+        .story-section::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="%2393c5fd" opacity="0.5"/><circle cx="50" cy="50" r="1.5" fill="%2393c5fd" opacity="0.5"/><circle cx="80" cy="30" r="1" fill="%2393c5fd" opacity="0.5"/></svg>');
+            opacity: 0.1;
+        }
+    </style>
+</head>
+<body class="bg-blue-50 text-gray-800 font-sans">
+    <!-- Hero Section -->
+    <div class="relative aviary-gradient penguin-bg">
+        <div class="container mx-auto px-4 py-20 text-center">
+            <div class="flex justify-center mb-6">
+                <div class="bg-white rounded-full p-4 shadow-lg">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-2-10H8v2h2v2h2v-2h2v-2h-2V8h-2v2zm6 4h-2v2h2v-2zm0-4h-2v2h2v-2z"/>
+                    </svg>
+                </div>
+            </div>
+            <h1 class="font-dancing text-5xl md:text-7xl text-blue-900 mb-4">Dennis & Cait</h1>
+            <p class="text-xl md:text-2xl text-blue-700 mb-2">Are Getting Married</p>
+            <p class="text-lg text-blue-600 mb-6">September 5, 2026 • The Aviary • Pittsburgh, PA</p>
+            <div class="flex justify-center space-x-4">
+                <a href="#story" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full transition duration-300 flex items-center">
+                    <i data-feather="heart" class="mr-2"></i> Our Story
+                </a>
+                <a href="#map" class="bg-white hover:bg-blue-50 text-blue-600 font-bold py-3 px-6 rounded-full transition duration-300 border border-blue-200 flex items-center">
+                    <i data-feather="map-pin" class="mr-2"></i> Journey Map
+                </a>
+            </div>
+        </div>
+    </div>
+    <!-- Story Section -->
+    <section id="story" class="py-20 relative story-section bg-white">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="font-dancing text-4xl md:text-5xl text-blue-900 mb-4">Our Love Story</h2>
+                <div class="w-24 h-1 bg-blue-500 mx-auto"></div>
+            </div>
+            <div class="max-w-4xl mx-auto">
+                <div class="bg-blue-50 rounded-2xl p-8 md:p-12 shadow-lg border border-blue-100">
+                    <p class="text-lg md:text-xl leading-relaxed text-gray-700 mb-6">
+                        We met in undergrad as classmates in the same major, stayed friends, and finally started dating senior year.
+                        After graduation, we moved to Pittsburgh and began building a life we love—exploring neighborhoods,
+                        taking weekend trips, and finding "our" spots around the city.
+                    </p>
+                    <p class="text-lg md:text-xl leading-relaxed text-gray-700 mb-6">
+                        At home, we cook together and unwind with romantic comedies. From lecture halls to city streets,
+                        we're still choosing each other—and can't wait to celebrate with you.
+                    </p>
+                    <div class="flex items-center justify-center mt-8">
+                        <div class="bg-blue-100 rounded-full p-4 mr-4">
+                            <i data-feather="users" class="text-blue-600"></i>
+                        </div>
+                        <p class="text-blue-600 font-medium">Together since 2018</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Interactive Map Section -->
+    <section id="map" class="py-20 bg-blue-50">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="font-dancing text-4xl md:text-5xl text-blue-900 mb-4">Our Journey Together</h2>
+                <p class="text-xl text-blue-700 max-w-2xl mx-auto">Click on the map markers to explore the special places in our relationship</p>
+                <div class="w-24 h-1 bg-blue-500 mx-auto mt-4"></div>
+            </div>
+            <div class="max-w-6xl mx-auto">
+                <div id="wedding-map" class="map-container"></div>
+            </div>
+        </div>
+    </section>
+    <!-- Party Photos Section -->
+    <section class="py-20 bg-white">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="font-dancing text-4xl md:text-5xl text-blue-900 mb-4">Celebration Moments</h2>
+                <p class="text-xl text-blue-700">A glimpse into our joyous times together</p>
+                <div class="w-24 h-1 bg-blue-500 mx-auto mt-4"></div>
+            </div>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-16">
+                <div class="overflow-hidden rounded-xl shadow-lg">
+                    <img src="http://static.photos/people/640x360/1" alt="Celebration" class="w-full h-64 object-cover hover:scale-105 transition duration-500">
+                </div>
+                <div class="overflow-hidden rounded-xl shadow-lg">
+                    <img src="http://static.photos/people/640x360/2" alt="Celebration" class="w-full h-64 object-cover hover:scale-105 transition duration-500">
+                </div>
+                <div class="overflow-hidden rounded-xl shadow-lg">
+                    <img src="http://static.photos/people/640x360/3" alt="Celebration" class="w-full h-64 object-cover hover:scale-105 transition duration-500">
+                </div>
+                <div class="overflow-hidden rounded-xl shadow-lg">
+                    <img src="http://static.photos/people/640x360/4" alt="Celebration" class="w-full h-64 object-cover hover:scale-105 transition duration-500">
+                </div>
+                <div class="overflow-hidden rounded-xl shadow-lg">
+                    <img src="http://static.photos/people/640x360/5" alt="Celebration" class="w-full h-64 object-cover hover:scale-105 transition duration-500">
+                </div>
+                <div class="overflow-hidden rounded-xl shadow-lg">
+                    <img src="http://static.photos/people/640x360/6" alt="Celebration" class="w-full h-64 object-cover hover:scale-105 transition duration-500">
+                </div>
+                <div class="overflow-hidden rounded-xl shadow-lg">
+                    <img src="http://static.photos/people/640x360/7" alt="Celebration" class="w-full h-64 object-cover hover:scale-105 transition duration-500">
+                </div>
+                <div class="overflow-hidden rounded-xl shadow-lg">
+                    <img src="http://static.photos/people/640x360/8" alt="Celebration" class="w-full h-64 object-cover hover:scale-105 transition duration-500">
+                </div>
+            </div>
+            <!-- Names Carousel -->
+            <div class="bg-blue-50 rounded-2xl p-8 shadow-lg">
+                <h3 class="font-playfair text-2xl text-center text-blue-900 mb-8">With Love From Our Family & Friends</h3>
+                <div class="overflow-hidden">
+                    <div class="flex animate-marquee whitespace-nowrap">
+                        <span class="mx-6 text-xl font-medium text-blue-700">Sarah Johnson</span>
+                        <span class="mx-6 text-xl font-medium text-blue-700">Michael Chen</span>
+                        <span class="mx-6 text-xl font-medium text-blue-700">Emma Rodriguez</span>
+                        <span class="mx-6 text-xl font-medium text-blue-700">James Wilson</span>
+                        <span class="mx-6 text-xl font-medium text-blue-700">Olivia Parker</span>
+                        <span class="mx-6 text-xl font-medium text-blue-700">William Thompson</span>
+                        <span class="mx-6 text-xl font-medium text-blue-700">Sophia Martinez</span>
+                        <span class="mx-6 text-xl font-medium text-blue-700">Benjamin Lee</span>
+                        <span class="mx-6 text-xl font-medium text-blue-700">Isabella Davis</span>
+                        <span class="mx-6 text-xl font-medium text-blue-700">Alexander Moore</span>
+                        <span class="mx-6 text-xl font-medium text-blue-700">Mia Taylor</span>
+                        <span class="mx-6 text-xl font-medium text-blue-700">Ethan Anderson</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-blue-900 text-white py-12">
+        <div class="container mx-auto px-4 text-center">
+            <div class="flex justify-center mb-6">
+                <div class="bg-blue-700 rounded-full p-3">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+                    </svg>
+                </div>
+            </div>
+            <h3 class="font-dancing text-3xl mb-4">Dennis & Cait</h3>
+            <p class="text-blue-200 mb-6">September 5, 2026 • The Aviary • Pittsburgh, PA</p>
+            <p class="text-blue-300">Made with love ❤️</p>
+        </div>
+    </footer>
+    <script>
+        // Initialize Feather Icons
+        feather.replace();
+        // Create interactive map
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initialize map centered on Pittsburgh
+            var map = L.map('wedding-map').setView([40.4406, -80.0], 3);
+            // Add tile layer
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            }).addTo(map);
+            // Location data with stories
+            var locations = [
+                {
+                    name: "Morgantown, WV",
+                    coords: [39.6295, -79.9559],
+                    story: "Where it all began! We met as classmates at West Virginia University and spent countless hours studying together in the engineering library.",
+                    image: "http://static.photos/university/320x240/1"
+                },
+                {
+                    name: "Pittsburgh, PA",
+                    coords: [40.4406, -79.9959],
+                    story: "Our home base! We moved here after graduation and fell in love with the bridges, parks, and vibrant neighborhoods of the Steel City.",
+                    image: "http://static.photos/cityscape/320x240/1"
+                },
+                {
+                    name: "San Diego, CA",
+                    coords: [32.7157, -117.1611],
+                    story: "Our first big trip together! Spent days at Balboa Park and evenings watching sunsets over the Pacific.",
+                    image: "http://static.photos/beach/320x240/1"
+                },
+                {
+                    name: "Boston, MA",
+                    coords: [42.3601, -71.0589],
+                    story: "Autumn leaves and fresh seafood! Walked the Freedom Trail and shared our first Boston cream pie.",
+                    image: "http://static.photos/cityscape/320x240/2"
+                },
+                {
+                    name: "Bar Harbor, ME",
+                    coords: [44.3881, -68.2033],
+                    story: "Coastal paradise! Watched sunrise atop Cadillac Mountain and enjoyed lobster rolls by the pier.",
+                    image: "http://static.photos/nature/320x240/1"
+                },
+                {
+                    name: "Ocean City, MD",
+                    coords: [38.3365, -75.0849],
+                    story: "Beach week tradition! Built sandcastles, rode the ferris wheel, and indulged in Thrasher's fries.",
+                    image: "http://static.photos/beach/320x240/2"
+                },
+                {
+                    name: "Salem, MA",
+                    coords: [42.5200, -70.8967],
+                    story: "Halloween adventure! Explored historic sites and tried to solve the mystery of the House of the Seven Gables.",
+                    image: "http://static.photos/historical/320x240/1"
+                },
+                {
+                    name: "Nantucket, MA",
+                    coords: [41.2835, -70.0994],
+                    story: "Quaint island escape! Rented bikes to explore cobblestone streets and watched seals from the harbor.",
+                    image: "http://static.photos/island/320x240/1"
+                },
+                {
+                    name: "Chicago, IL",
+                    coords: [41.8781, -87.6298],
+                    story: "Windy City romance! Visited Millennium Park, ate deep dish pizza, and took a boat tour on Lake Michigan.",
+                    image: "http://static.photos/cityscape/320x240/3"
+                },
+                {
+                    name: "Denver, CO",
+                    coords: [39.7392, -104.9903],
+                    story: "Mountain high! Explored Red Rocks Amphitheatre and hiked trails with breathtaking views of the Rockies.",
+                    image: "http://static.photos/mountain/320x240/1"
+                },
+                {
+                    name: "Amsterdam, Netherlands",
+                    coords: [52.3676, 4.9041],
+                    story: "Canal-side strolls and museum marvels! Rented a tandem bike and got lost in the charm of the Jordaan district.",
+                    image: "http://static.photos/europe/320x240/1"
+                },
+                {
+                    name: "Berlin, Germany",
+                    coords: [52.5200, 13.4050],
+                    story: "History and modernity collide! Visited the Berlin Wall remnants and enjoyed currywurst under the Brandenburg Gate.",
+                    image: "http://static.photos/europe/320x240/2"
+                },
+                {
+                    name: "Oslo, Norway",
+                    coords: [59.9139, 10.7522],
+                    story: "Scandinavian serenity! Took fjord tours and warmed up in cozy cafes with views of the Oslofjord.",
+                    image: "http://static.photos/europe/320x240/3"
+                },
+                {
+                    name: "Flekkerøy, Norway",
+                    coords: [58.1467, 8.0114],
+                    story: "Hidden coastal gem! Stayed in a seaside cabin and enjoyed the peaceful Norwegian coastline.",
+                    image: "http://static.photos/coastal/320x240/1"
+                },
+                {
+                    name: "Kristiansand, Norway",
+                    coords: [58.1599, 8.0182],
+                    story: "Summer festival vibes! Experienced local culture and enjoyed fresh seafood by the harbor.",
+                    image: "http://static.photos/europe/320x240/4"
+                },
+                {
+                    name: "Grimstad, Norway",
+                    coords: [58.3405, 8.5934],
+                    story: "University town charm! Explored the historic old town and hiked to scenic viewpoints overlooking the sea.",
+                    image: "http://static.photos/europe/320x240/5"
+                },
+                {
+                    name: "London, UK",
+                    coords: [51.5074, -0.1278],
+                    story: "Royal romance! Saw the Changing of the Guard and enjoyed afternoon tea with scones and clotted cream.",
+                    image: "http://static.photos/europe/320x240/6"
+                },
+                {
+                    name: "Liverpool, UK",
+                    coords: [53.4084, -2.9914],
+                    story: "Music pilgrimage! Visited the Beatles landmarks and sang along at a local pub session.",
+                    image: "http://static.photos/music/320x240/1"
+                },
+                {
+                    name: "Positano, Italy",
+                    coords: [40.6333, 14.4981],
+                    story: "Amalfi Coast dream! Stayed in a cliffside hotel with panoramic views and savored authentic Italian cuisine.",
+                    image: "http://static.photos/europe/320x240/7"
+                },
+                {
+                    name: "Cancun, Mexico",
+                    coords: [21.1619, -86.8515],
+                    story: "Tropical paradise! Snorkeled in turquoise waters and relaxed on pristine white sand beaches.",
+                    image: "http://static.photos/beach/320x240/3"
+                }
+            ];
+            // Add markers to map
+            locations.forEach(function(location) {
+                var marker = L.marker(location.coords).addTo(map);
+                marker.bindPopup(`
+                    <div class="location-popup">
+                        <h3 class="font-bold text-lg mb-2">${location.name}</h3>
+                        <img src="${location.image}" alt="${location.name}" class="w-full h-32 object-cover rounded mb-3">
+                        <p class="text-sm">${location.story}</p>
+                    </div>
+                `, {maxWidth: 300});
+            });
+            // Add animated marquee for names
+            const style = document.createElement('style');
+            style.innerHTML = `
+                @keyframes marquee {
+                    0% { transform: translateX(100%); }
+                    100% { transform: translateX(-100%); }
+                }
+                .animate-marquee {
+                    display: inline-block;
+                    animation: marquee 30s linear infinite;
+                }
+            `;
+            document.head.appendChild(style);
+        });
+    </script>
+</body>
 </html>