Spaces:

Samsaro8
/

instagrid-delight

Running

App Files Files Community

Samsaro8 commited on Oct 10

Commit

c00096e

verified ·

1 Parent(s): 7308157

I want a instagram grid, for my wix.com website, i want you to do it for me, my instagram is: https://www.instagram.com/yakpo_/

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Instagrid Delight
-emoji: 🏆
-colorFrom: pink
 colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: InstaGrid Delight ✨
+colorFrom: blue
 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).

index.html CHANGED Viewed

@@ -1,19 +1,188 @@
-<!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>Yakpo's Instagram Grid</title>
+    <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>
+    <style>
+        .instagram-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 1rem;
+        }
+        .instagram-item {
+            position: relative;
+            overflow: hidden;
+            border-radius: 0.5rem;
+            aspect-ratio: 1;
+            transition: all 0.3s ease;
+        }
+        .instagram-item:hover {
+            transform: scale(1.03);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+        .instagram-item img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: transform 0.5s ease;
+        }
+        .instagram-item:hover img {
+            transform: scale(1.1);
+        }
+        .instagram-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.4);
+            opacity: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: opacity 0.3s ease;
+        }
+        .instagram-item:hover .instagram-overlay {
+            opacity: 1;
+        }
+        .instagram-stats {
+            color: white;
+            display: flex;
+            gap: 1rem;
+        }
+        .instagram-stat {
+            display: flex;
+            align-items: center;
+            gap: 0.3rem;
+        }
+        .load-more {
+            transition: all 0.3s ease;
+        }
+        .load-more:hover {
+            background-color: #E1306C !important;
+            transform: translateY(-2px);
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <div class="max-w-6xl mx-auto px-4 py-12">
+        <div class="text-center mb-12">
+            <h1 class="text-4xl font-bold text-gray-800 mb-4">@yakpo_</h1>
+            <p class="text-lg text-gray-600 max-w-2xl mx-auto">Explore my visual journey through vibrant moments and creative expressions.</p>
+        </div>
+        <div class="instagram-grid">
+            <!-- Instagram posts will be loaded here -->
+            <div class="instagram-item bg-gray-200 animate-pulse"></div>
+            <div class="instagram-item bg-gray-200 animate-pulse"></div>
+            <div class="instagram-item bg-gray-200 animate-pulse"></div>
+            <div class="instagram-item bg-gray-200 animate-pulse"></div>
+            <div class="instagram-item bg-gray-200 animate-pulse"></div>
+            <div class="instagram-item bg-gray-200 animate-pulse"></div>
+            <div class="instagram-item bg-gray-200 animate-pulse"></div>
+            <div class="instagram-item bg-gray-200 animate-pulse"></div>
+            <div class="instagram-item bg-gray-200 animate-pulse"></div>
+        </div>
+        <div class="text-center mt-12">
+            <button id="loadMore" class="load-more bg-pink-600 hover:bg-pink-700 text-white font-medium py-3 px-8 rounded-full shadow-lg inline-flex items-center">
+                <i data-feather="plus" class="mr-2"></i> Load More
+            </button>
+            <p class="text-gray-500 mt-4">Want to see more? Follow me on Instagram!</p>
+            <a href="https://www.instagram.com/yakpo_/" target="_blank" class="inline-block mt-2 text-pink-600 hover:text-pink-700 font-medium">
+                @yakpo_ <i data-feather="external-link" class="inline ml-1 w-4 h-4"></i>
+            </a>
+        </div>
+    </div>
+    <script>
+        // This is a mock implementation since we can't directly access Instagram API without credentials
+        // In a real implementation, you would use Instagram's API or a service like embed.ly
+        document.addEventListener('DOMContentLoaded', function() {
+            feather.replace();
+            // Mock data for demonstration
+            const mockPosts = [
+                { id: 1, image: 'http://static.photos/nature/640x360/1', likes: 124, comments: 12 },
+                { id: 2, image: 'http://static.photos/cityscape/640x360/2', likes: 89, comments: 5 },
+                { id: 3, image: 'http://static.photos/food/640x360/3', likes: 215, comments: 32 },
+                { id: 4, image: 'http://static.photos/travel/640x360/4', likes: 156, comments: 18 },
+                { id: 5, image: 'http://static.photos/technology/640x360/5', likes: 178, comments: 24 },
+                { id: 6, image: 'http://static.photos/abstract/640x360/6', likes: 92, comments: 7 },
+                { id: 7, image: 'http://static.photos/gradient/640x360/7', likes: 145, comments: 21 },
+                { id: 8, image: 'http://static.photos/workspace/640x360/8', likes: 67, comments: 4 },
+                { id: 9, image: 'http://static.photos/education/640x360/9', likes: 203, comments: 28 },
+            ];
+            const grid = document.querySelector('.instagram-grid');
+            grid.innerHTML = ''; // Clear loading placeholders
+            mockPosts.forEach(post => {
+                const postElement = document.createElement('div');
+                postElement.className = 'instagram-item';
+                postElement.innerHTML = `
+                    <img src="${post.image}" alt="Instagram post ${post.id}" loading="lazy">
+                    <div class="instagram-overlay">
+                        <div class="instagram-stats">
+                            <div class="instagram-stat">
+                                <i data-feather="heart"></i>
+                                <span>${post.likes}</span>
+                            </div>
+                            <div class="instagram-stat">
+                                <i data-feather="message-circle"></i>
+                                <span>${post.comments}</span>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                grid.appendChild(postElement);
+            });
+            // For Wix integration, you would typically:
+            // 1. Add this as an iframe or custom HTML element in your Wix site
+            // 2. Or use Wix's built-in Instagram feed component if available
+            // 3. For a real implementation, you might need to use Instagram's API with proper authentication
+            feather.replace();
+        });
+        document.getElementById('loadMore').addEventListener('click', function() {
+            // In a real implementation, this would load more posts from Instagram API
+            const loading = document.createElement('div');
+            loading.className = 'instagram-item bg-gray-200 animate-pulse';
+            document.querySelector('.instagram-grid').appendChild(loading);
+            setTimeout(() => {
+                document.querySelector('.instagram-grid').removeChild(loading);
+                // Simulate loading a new post
+                const newPost = document.createElement('div');
+                newPost.className = 'instagram-item';
+                newPost.innerHTML = `
+                    <img src="http://static.photos/random/640x360" alt="New post" loading="lazy">
+                    <div class="instagram-overlay">
+                        <div class="instagram-stats">
+                            <div class="instagram-stat">
+                                <i data-feather="heart"></i>
+                                <span>${Math.floor(Math.random() * 200)}</span>
+                            </div>
+                            <div class="instagram-stat">
+                                <i data-feather="message-circle"></i>
+                                <span>${Math.floor(Math.random() * 30)}</span>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                document.querySelector('.instagram-grid').appendChild(newPost);
+                feather.replace();
+            }, 1000);
+        });
+    </script>
+    <script>feather.replace();</script>
+</body>
 </html>