Spaces:

becktech
/

socialsync-showcase-spectacle

Running

App Files Files Community

becktech commited on Oct 3, 2025

Commit

24d8a68

verified ·

1 Parent(s): f556088

customize to look like a modern iphone app

Browse files

Files changed (1) hide show

index.html +107 -57

index.html CHANGED Viewed

@@ -23,30 +23,86 @@
             }
         }
     </script>
-    <style>
-        .gallery-item {
-            transition: all 0.3s ease;
-        }
-        .gallery-item:hover {
-            transform: scale(1.03);
-            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
         }
         #vanta-bg {
-            position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             z-index: 0;
         }
     </style>
 </head>
-<body class="bg-gray-50 min-h-screen font-sans">
     <div id="vanta-bg"></div>
     <!-- Navigation -->
-    <nav class="relative z-10 bg-white/80 backdrop-blur-md shadow-sm">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex justify-between h-16">
                 <div class="flex items-center">
                     <span class="text-xl font-bold text-primary">Fine Design Custom Frames</span>
@@ -63,31 +119,28 @@
             </div>
         </div>
     </nav>
     <!-- Hero Section -->
-    <section class="relative z-10 py-20">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-            <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">Custom Framing <span class="text-primary">Perfection</span></h1>
-            <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-10">Preserving your memories with exquisite custom framing solutions.</p>
-<div class="flex justify-center space-x-4">
-                <a href="#gallery" class="px-6 py-3 bg-primary text-white rounded-md hover:bg-primary/90 transition font-medium">View Gallery</a>
-                <a href="https://www.facebook.com/profile.php?id=61576143178039" target="_blank" class="px-6 py-3 border border-primary text-primary rounded-md hover:bg-primary/10 transition font-medium flex items-center">
-                    <i data-feather="facebook" class="mr-2 w-4 h-4"></i> Visit Facebook
                 </a>
             </div>
         </div>
     </section>
     <!-- Gallery Section -->
-    <section id="gallery" class="relative z-10 py-16 bg-white">
-        <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 text-gray-900">Our <span class="text-primary">Framing Gallery</span></h2>
-                <p class="mt-4 text-lg text-gray-600">Showcasing our latest custom framing projects</p>
-</div>
-            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="facebook-gallery">
-                <!-- This will be populated by JavaScript -->
                 <div class="animate-pulse rounded-lg bg-gray-200 h-64 flex items-center justify-center">
                     <span class="text-gray-500">Loading Facebook content...</span>
                 </div>
@@ -100,19 +153,18 @@
             </div>
         </div>
     </section>
     <!-- About Section -->
-    <section class="relative z-10 py-16 bg-gray-50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
-                <div class="mb-8 lg:mb-0">
-                    <h2 class="text-3xl font-bold text-gray-900 mb-6">About <span class="text-primary">Our Craft</span></h2>
-                    <p class="text-lg text-gray-600 mb-4">We're passionate about preserving your precious memories with the finest custom framing solutions.</p>
-                    <p class="text-lg text-gray-600 mb-6">With decades of experience, we combine traditional craftsmanship with modern techniques to create frames that last generations.</p>
-<div class="flex space-x-4">
-                        <a href="#" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition">Learn More</a>
-                        <a href="#" class="px-4 py-2 border border-primary text-primary rounded-md hover:bg-primary/10 transition">Contact Us</a>
-                    </div>
                 </div>
                 <div class="relative h-64 lg:h-96 rounded-xl overflow-hidden shadow-lg">
                     <img src="http://static.photos/office/640x360/1" alt="Our Office" class="w-full h-full object-cover">
@@ -123,12 +175,11 @@
             </div>
         </div>
     </section>
     <!-- Footer -->
-    <footer class="relative z-10 bg-gray-900 text-gray-300 py-12">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
-                <div>
                     <h3 class="text-white text-lg font-medium mb-4">Fine Design Custom Frames</h3>
                     <p class="mb-4">Preserving your memories with expert craftsmanship.</p>
 <div class="flex space-x-4">
@@ -187,10 +238,10 @@
     </footer>
     <script>
-        // Initialize Vanta.js background
         VANTA.NET({
             el: "#vanta-bg",
-            mouseControls: true,
             touchControls: true,
             gyroControls: false,
             minHeight: 200.00,
@@ -198,13 +249,12 @@
             scale: 1.00,
             scaleMobile: 1.00,
             color: 0x3b82f6,
-            backgroundColor: 0xf8fafc,
-            points: 12.00,
-            maxDistance: 22.00,
-            spacing: 18.00
         });
-        // Facebook Graph API integration (simplified - in production you'd need proper authentication)
         // Note: This is a simplified version. In a real implementation, you'd need to:
         // 1. Create a Facebook App
         // 2. Get an access token
@@ -255,8 +305,8 @@ const galleryItem = document.createElement('div');
                     galleryItem.className = 'gallery-item rounded-lg overflow-hidden shadow-md bg-white';
                     galleryItem.innerHTML = `
                         <a href="${post.link}" target="_blank" class="block">
-                            <img src="${post.images[0].source}" alt="Facebook Post" class="w-full h-48 object-cover">
-                            <div class="p-4">
                                 <div class="flex justify-between items-center">
                                     <span class="text-sm text-gray-500">Posted on Facebook</span>
                                     <i data-feather="external-link" class="w-4 h-4 text-gray-500"></i>

             }
         }
     </script>
+<style>
+        body {
+            max-width: 500px;
+            margin: 0 auto;
+            background: #f2f2f7;
+            border-radius: 40px;
+            overflow: hidden;
+            box-shadow: 0 0 20px rgba(0,0,0,0.2);
+            position: relative;
+            min-height: 100vh;
         }
         #vanta-bg {
+            position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             z-index: 0;
         }
+        nav {
+            position: sticky;
+            top: 0;
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            padding-top: 40px;
+            padding-bottom: 10px;
+        }
+        .gallery-item {
+            transition: all 0.3s ease;
+            border-radius: 12px;
+            overflow: hidden;
+        }
+        .gallery-item:hover {
+            transform: scale(1.02);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        }
+        section {
+            padding: 20px;
+        }
+        h1, h2, h3 {
+            font-weight: 600;
+        }
+        .ios-btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 12px 20px;
+            border-radius: 50px;
+            font-weight: 500;
+            transition: all 0.3s ease;
+        }
+        .ios-header {
+            position: relative;
+            padding-top: 20px;
+            padding-bottom: 20px;
+            text-align: center;
+        }
+        .notch {
+            width: 120px;
+            height: 30px;
+            background: #000;
+            border-bottom-left-radius: 15px;
+            border-bottom-right-radius: 15px;
+            position: absolute;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 10;
+        }
     </style>
 </head>
+<body class="min-h-screen font-sans">
     <div id="vanta-bg"></div>
+    <!-- iOS Notch -->
+    <div class="notch"></div>
     <!-- Navigation -->
+    <nav class="relative z-10 bg-white/80">
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex justify-between h-16">
                 <div class="flex items-center">
                     <span class="text-xl font-bold text-primary">Fine Design Custom Frames</span>
             </div>
         </div>
     </nav>
     <!-- Hero Section -->
+    <section class="relative z-10 ios-header">
+        <div class="text-center">
+            <h1 class="text-3xl font-bold text-gray-900 mb-4">Custom Framing <span class="text-primary">Perfection</span></h1>
+            <p class="text-base text-gray-600 mb-6">Preserving memories with exquisite framing.</p>
+            <div class="flex justify-center space-x-3">
+                <a href="#gallery" class="ios-btn bg-primary text-white">View Gallery</a>
+                <a href="https://www.facebook.com/profile.php?id=61576143178039" target="_blank" class="ios-btn bg-white text-primary border border-gray-200 flex items-center">
+<i data-feather="facebook" class="mr-2 w-4 h-4"></i> Visit Facebook
                 </a>
             </div>
         </div>
     </section>
     <!-- Gallery Section -->
+    <section id="gallery" class="relative z-10 bg-white">
+        <div class="text-center mb-8">
+            <h2 class="text-2xl font-bold text-gray-900">Our <span class="text-primary">Framing Gallery</span></h2>
+            <p class="mt-2 text-sm text-gray-600">Showcasing our latest work</p>
+        </div>
+        <div class="grid grid-cols-1 gap-4" id="facebook-gallery">
+<!-- This will be populated by JavaScript -->
                 <div class="animate-pulse rounded-lg bg-gray-200 h-64 flex items-center justify-center">
                     <span class="text-gray-500">Loading Facebook content...</span>
                 </div>
             </div>
         </div>
     </section>
     <!-- About Section -->
+    <section class="relative z-10 bg-gray-50">
+        <div>
+            <div class="flex flex-col items-center">
+                <div class="mb-6">
+                    <h2 class="text-2xl font-bold text-gray-900 mb-4">About <span class="text-primary">Our Craft</span></h2>
+                    <p class="text-sm text-gray-600 mb-3">Preserving memories with the finest custom framing.</p>
+                    <p class="text-sm text-gray-600 mb-4">Decades of experience creating frames that last generations.</p>
+                    <div class="flex space-x-3">
+                        <a href="#" class="ios-btn bg-primary text-white text-sm">Learn More</a>
+                        <a href="#" class="ios-btn bg-white text-primary border border-gray-200 text-sm">Contact Us</a>
+</div>
                 </div>
                 <div class="relative h-64 lg:h-96 rounded-xl overflow-hidden shadow-lg">
                     <img src="http://static.photos/office/640x360/1" alt="Our Office" class="w-full h-full object-cover">
             </div>
         </div>
     </section>
     <!-- Footer -->
+    <footer class="relative z-10 bg-gray-900 text-gray-300 py-8">
+        <div class="px-4">
+            <div class="grid grid-cols-2 gap-6">
+<div>
                     <h3 class="text-white text-lg font-medium mb-4">Fine Design Custom Frames</h3>
                     <p class="mb-4">Preserving your memories with expert craftsmanship.</p>
 <div class="flex space-x-4">
     </footer>
     <script>
+        // Initialize Vanta.js with iOS-like background
         VANTA.NET({
             el: "#vanta-bg",
+            mouseControls: false,
             touchControls: true,
             gyroControls: false,
             minHeight: 200.00,
             scale: 1.00,
             scaleMobile: 1.00,
             color: 0x3b82f6,
+            backgroundColor: 0xf2f2f7,
+            points: 10.00,
+            maxDistance: 15.00,
+            spacing: 15.00
         });
+// Facebook Graph API integration (simplified - in production you'd need proper authentication)
         // Note: This is a simplified version. In a real implementation, you'd need to:
         // 1. Create a Facebook App
         // 2. Get an access token
                     galleryItem.className = 'gallery-item rounded-lg overflow-hidden shadow-md bg-white';
                     galleryItem.innerHTML = `
                         <a href="${post.link}" target="_blank" class="block">
+                            <img src="${post.images[0].source}" alt="Facebook Post" class="w-full h-64 object-cover">
+<div class="p-4">
                                 <div class="flex justify-between items-center">
                                     <span class="text-sm text-gray-500">Posted on Facebook</span>
                                     <i data-feather="external-link" class="w-4 h-4 text-gray-500"></i>