Мне нужно полностью скопировать эту страницу https://readdy.link/preview/4f2524d4-4549-4a0e-87da-62bc3b69fc09/2916451

README.md

@@ -1,10 +1,13 @@
 ---
-title: Linkvortex Navigator
-emoji: 📉
-colorFrom: blue
-colorTo: blue
+title: LinkVortex Navigator 🌪️
+colorFrom: purple
+colorTo: red
+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,163 @@
-<!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>LinkVortex Navigator</title>
+    <link rel="icon" type="image/x-icon" href="https://static.photos/technology/200x200/7">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></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: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            min-height: 100vh;
+        }
+        
+        .card-hover {
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+        }
+        
+        .card-hover:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        
+        .social-icon {
+            transition: all 0.2s ease;
+        }
+        
+        .social-icon:hover {
+            transform: scale(1.1);
+        }
+        
+        .animate-pulse-slow {
+            animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+        
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.7; }
+        }
+    </style>
+</head>
+<body class="min-h-screen flex items-center justify-center p-4">
+    <div class="max-w-md w-full">
+        <!-- Profile Section -->
+        <div class="bg-white rounded-2xl p-6 mb-6 card-hover text-center">
+            <div class="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-4 border-white shadow-lg">
+                <img src="https://static.photos/people/200x200/42" alt="Profile" class="w-full h-full object-cover">
+            </div>
+            <h1 class="text-2xl font-bold text-gray-800 mb-1">John Doe</h1>
+            <p class="text-gray-600 mb-4">Digital Creator & Tech Enthusiast</p>
+            <p class="text-gray-500 text-sm">Sharing my journey and connecting with amazing people</p>
+        </div>
+
+        <!-- Links Section -->
+        <div class="space-y-4 mb-6">
+            <a href="#" class="block bg-white rounded-xl p-4 card-hover flex items-center space-x-4">
+                <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center">
+                    <i data-feather="globe" class="text-blue-600"></i>
+                </div>
+                <div class="flex-1">
+                    <h3 class="font-semibold text-gray-800">Personal Website</h3>
+                    <p class="text-sm text-gray-600">Check out my portfolio</p>
+                </div>
+                <i data-feather="chevron-right" class="text-gray-400"></i>
+            </a>
+
+            <a href="#" class="block bg-white rounded-xl p-4 card-hover flex items-center space-x-4">
+                <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center">
+                    <i data-feather="youtube" class="text-green-600"></i>
+                </div>
+                <div class="flex-1">
+                    <h3 class="font-semibold text-gray-800">YouTube Channel</h3>
+                    <p class="text-sm text-gray-600">Watch my latest videos</p>
+                </div>
+                <i data-feather="chevron-right" class="text-gray-400"></i>
+            </a>
+
+            <a href="#" class="block bg-white rounded-xl p-4 card-hover flex items-center space-x-4">
+                <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center">
+                    <i data-feather="instagram" class="text-purple-600"></i>
+                </div>
+                <div class="flex-1">
+                    <h3 class="font-semibold text-gray-800">Instagram</h3>
+                    <p class="text-sm text-gray-600">Follow my daily updates</p>
+                </div>
+                <i data-feather="chevron-right" class="text-gray-400"></i>
+            </a>
+
+            <a href="#" class="block bg-white rounded-xl p-4 card-hover flex items-center space-x-4">
+                <div class="w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center">
+                    <i data-feather="linkedin" class="text-gray-600"></i>
+                </div>
+                <div class="flex-1">
+                    <h3 class="font-semibold text-gray-800">LinkedIn</h3>
+                    <p class="text-sm text-gray-600">Connect professionally</p>
+                </div>
+                <i data-feather="chevron-right" class="text-gray-400"></i>
+            </a>
+
+            <a href="#" class="block bg-white rounded-xl p-4 card-hover flex items-center space-x-4">
+                <div class="w-12 h-12 rounded-lg bg-red-100 flex items-center justify-center">
+                    <i data-feather="heart" class="text-red-600"></i>
+                </div>
+                <div class="flex-1">
+                    <h3 class="font-semibold text-gray-800">Support My Work</h3>
+                    <p class="text-sm text-gray-600">Buy me a coffee ☕</p>
+                </div>
+                <i data-feather="chevron-right" class="text-gray-400"></i>
+            </a>
+        </div>
+
+        <!-- Social Links -->
+        <div class="bg-white rounded-2xl p-6 card-hover">
+            <h3 class="font-semibold text-gray-800 mb-4 text-center">Let's Connect</h3>
+            <div class="flex justify-center space-x-4">
+                <a href="#" class="social-icon w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
+                    <i data-feather="twitter" class="text-blue-500"></i>
+                </a>
+                <a href="#" class="social-icon w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center">
+                    <i data-feather="instagram" class="text-pink-500"></i>
+                </a>
+                <a href="#" class="social-icon w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
+                    <i data-feather="linkedin" class="text-blue-700"></i>
+                </a>
+                <a href="#" class="social-icon w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
+                    <i data-feather="youtube" class="text-red-600"></i>
+                </a>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="text-center mt-6">
+            <p class="text-sm text-gray-500 animate-pulse-slow">Made with ❤️ using LinkVortex</p>
+        </div>
+    </div>
+
+    <script>
+        feather.replace();
+        
+        // Add some interactive animations
+        document.addEventListener('DOMContentLoaded', function() {
+            const cards = document.querySelectorAll('.card-hover');
+            
+            cards.forEach(card => {
+                card.addEventListener('mouseenter', () => {
+                    card.style.transform = 'translateY(-4px)';
+                });
+                
+                card.addEventListener('mouseleave', () => {
+                    card.style.transform = 'translateY(0)';
+                });
+            });
+        });
+    </script>
+</body>
 </html>
+