Spaces:

2KKLabs
/

asdf

Running

App Files Files Community

2KKLabs commited on Aug 6

Commit

f3c432e

verified ·

1 Parent(s): ef8fb46

Сделай получше, по красивей, с адаптацией под телефоны. Анимацию плавнее. Курсор печати сделай больше и чтобы он плавно пульсировал - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +210 -19

README.md CHANGED Viewed

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

 ---
+title: asdf
+emoji: 🐳
+colorFrom: yellow
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,210 @@
-<!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="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Вход и регистрация</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    keyframes: {
+                        typing: {
+                            "0%": { width: "0%" },
+                            "100%": { width: "100%" }
+                        },
+                        blink: {
+                            "0%": { opacity: 1 },
+                            "50%": { opacity: 0 },
+                            "100%": { opacity: 1 }
+                        },
+                        fadeOut: {
+                            "0%": { opacity: 1 },
+                            "100%": { opacity: 0 }
+                        },
+                        slideUp: {
+                            "0%": { transform: "translateY(100%)", opacity: 0 },
+                            "100%": { transform: "translateY(0)", opacity: 1 }
+                        }
+                    },
+                    animation: {
+                        typing: "typing 2s steps(20, end)",
+                        blink: "blink 1s infinite",
+                        fadeOut: "fadeOut 1s forwards",
+                        slideUp: "slideUp 0.8s ease-out forwards"
+                    }
+                }
+            }
+        }
+    </script>
+    <style type="text/tailwindcss">
+        @layer base {
+            body {
+                @apply bg-black text-white;
+            }
+        }
+        .form-container {
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .form-container:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(255, 255, 255, 0.1);
+        }
+        .input-field:focus {
+            outline: 1px solid white;
+            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
+        }
+        .social-btn:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .tab-btn.active {
+            border-bottom: 2px solid white;
+        }
+    </style>
+</head>
+<body class="min-h-screen flex items-center justify-center p-4">
+    <!-- Экран приветствия -->
+    <div id="welcome-screen" class="fixed inset-0 bg-white flex items-center justify-center z-50">
+        <div class="text-center">
+            <h1 id="welcome-text" class="text-4xl md:text-6xl font-bold text-black overflow-hidden whitespace-nowrap border-r-2 border-black animate-typing">
+                добро пожаловать
+            </h1>
+        </div>
+    </div>
+    <!-- Основной контент -->
+    <div id="main-content" class="w-full max-w-md hidden">
+        <div class="text-center mb-10">
+            <h1 class="text-3xl font-bold mb-2">Добро пожаловать</h1>
+            <p class="text-gray-400">Войдите или зарегистрируйтесь для продолжения</p>
+        </div>
+        <!-- Переключатель форм -->
+        <div class="flex border-b border-gray-700 mb-8">
+            <button id="login-tab" class="tab-btn flex-1 py-3 font-medium active">Вход</button>
+            <button id="register-tab" class="tab-btn flex-1 py-3 font-medium">Регистрация</button>
+        </div>
+        <!-- Форма входа -->
+        <div id="login-form" class="form-container bg-black border border-white rounded-lg p-8 animate-slideUp">
+            <form>
+                <div class="mb-6">
+                    <label for="login-email" class="block mb-2 text-sm">Email</label>
+                    <input type="email" id="login-email" class="input-field w-full bg-black border border-white rounded px-4 py-3 focus:outline-none">
+                </div>
+                <div class="mb-6">
+                    <label for="login-password" class="block mb-2 text-sm">Пароль</label>
+                    <input type="password" id="login-password" class="input-field w-full bg-black border border-white rounded px-4 py-3 focus:outline-none">
+                </div>
+                <div class="flex items-center justify-between mb-6">
+                    <div class="flex items-center">
+                        <input type="checkbox" id="remember" class="mr-2">
+                        <label for="remember" class="text-sm">Запомнить меня</label>
+                    </div>
+                    <a href="#" class="text-sm hover:underline">Забыли пароль?</a>
+                </div>
+                <button type="submit" class="w-full bg-white text-black font-bold py-3 rounded hover:bg-gray-200 transition duration-300">
+                    Войти
+                </button>
+            </form>
+            <div class="my-6 flex items-center">
+                <div class="flex-grow border-t border-gray-700"></div>
+                <span class="mx-4 text-gray-500 text-sm">или</span>
+                <div class="flex-grow border-t border-gray-700"></div>
+            </div>
+            <button class="social-btn w-full border border-white rounded py-3 flex items-center justify-center mb-4">
+                <i class="fab fa-google mr-3 text-red-500"></i>
+                <span>Войти через Google</span>
+            </button>
+        </div>
+        <!-- Форма регистрации (скрыта по умолчанию) -->
+        <div id="register-form" class="form-container bg-black border border-white rounded-lg p-8 hidden">
+            <form>
+                <div class="mb-6">
+                    <label for="register-name" class="block mb-2 text-sm">Имя</label>
+                    <input type="text" id="register-name" class="input-field w-full bg-black border border-white rounded px-4 py-3 focus:outline-none">
+                </div>
+                <div class="mb-6">
+                    <label for="register-email" class="block mb-2 text-sm">Email</label>
+                    <input type="email" id="register-email" class="input-field w-full bg-black border border-white rounded px-4 py-3 focus:outline-none">
+                </div>
+                <div class="mb-6">
+                    <label for="register-password" class="block mb-2 text-sm">Пароль</label>
+                    <input type="password" id="register-password" class="input-field w-full bg-black border border-white rounded px-4 py-3 focus:outline-none">
+                </div>
+                <div class="mb-6">
+                    <label for="register-confirm" class="block mb-2 text-sm">Подтвердите пароль</label>
+                    <input type="password" id="register-confirm" class="input-field w-full bg-black border border-white rounded px-4 py-3 focus:outline-none">
+                </div>
+                <button type="submit" class="w-full bg-white text-black font-bold py-3 rounded hover:bg-gray-200 transition duration-300">
+                    Зарегистрироваться
+                </button>
+            </form>
+            <div class="my-6 flex items-center">
+                <div class="flex-grow border-t border-gray-700"></div>
+                <span class="mx-4 text-gray-500 text-sm">или</span>
+                <div class="flex-grow border-t border-gray-700"></div>
+            </div>
+            <button class="social-btn w-full border border-white rounded py-3 flex items-center justify-center mb-4">
+                <i class="fab fa-google mr-3 text-red-500"></i>
+                <span>Зарегистрироваться через Google</span>
+            </button>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const welcomeScreen = document.getElementById('welcome-screen');
+            const mainContent = document.getElementById('main-content');
+            const welcomeText = document.getElementById('welcome-text');
+            const loginForm = document.getElementById('login-form');
+            const registerForm = document.getElementById('register-form');
+            const loginTab = document.getElementById('login-tab');
+            const registerTab = document.getElementById('register-tab');
+            // Анимация приветствия
+            setTimeout(() => {
+                welcomeText.style.animation = 'fadeOut 1s forwards';
+            }, 2500);
+            // Скрытие экрана приветствия и показ основного контента
+            setTimeout(() => {
+                welcomeScreen.style.display = 'none';
+                mainContent.style.display = 'block';
+            }, 3500);
+            // Переключение между формами
+            loginTab.addEventListener('click', () => {
+                loginTab.classList.add('active');
+                registerTab.classList.remove('active');
+                loginForm.classList.remove('hidden');
+                registerForm.classList.add('hidden');
+            });
+            registerTab.addEventListener('click', () => {
+                registerTab.classList.add('active');
+                loginTab.classList.remove('active');
+                registerForm.classList.remove('hidden');
+                loginForm.classList.add('hidden');
+            });
+            // Обработка отправки форм
+            const forms = document.querySelectorAll('form');
+            forms.forEach(form => {
+                form.addEventListener('submit', (e) => {
+                    e.preventDefault();
+                    // Здесь можно добавить логику обработки формы
+                    alert('Форма отправлена!');
+                });
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=2KKLabs/asdf" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>