Spaces:

samirerty
/

anycoder-e5d41a8d

Running

App Files Files Community

samirerty commited on 6 days ago

Commit

c38963e

verified ·

1 Parent(s): 841ce61

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +573 -19

index.html CHANGED Viewed

@@ -1,19 +1,573 @@
-<!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="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>چت روم ساده | AnyCoder</title>
+    <!-- Importing FontAwesome for modern icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            /* iOS Color Palette */
+            --ios-bg-dark: #000000;
+            --ios-bg-gradient-start: #1c1c1e;
+            --ios-bg-gradient-end: #2c2c2e;
+            --glass-bg: rgba(255, 255, 255, 0.1);
+            --glass-border: rgba(255, 255, 255, 0.15);
+            --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+            --text-primary: #ffffff;
+            --text-secondary: rgba(255, 255, 255, 0.7);
+            --accent-blue: #0a84ff;
+            --accent-purple: #bf5af2;
+            --accent-gradient: linear-gradient(135deg, #0a84ff, #bf5af2);
+            --blur-amount: 20px;
+            --card-radius: 24px;
+            --btn-radius: 50px;
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            -webkit-tap-highlight-color: transparent;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+            background-color: var(--ios-bg-dark);
+            color: var(--text-primary);
+            min-height: 100vh;
+            overflow-x: hidden;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+        }
+        /* Animated Background Blobs */
+        .background-blobs {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            overflow: hidden;
+            background: radial-gradient(circle at 50% 120%, #1a1a2e, #000000);
+        }
+        .blob {
+            position: absolute;
+            border-radius: 50%;
+            filter: blur(80px);
+            opacity: 0.6;
+            animation: float 10s infinite ease-in-out alternate;
+        }
+        .blob-1 {
+            top: -10%;
+            right: -10%;
+            width: 400px;
+            height: 400px;
+            background: var(--accent-blue);
+            animation-delay: 0s;
+        }
+        .blob-2 {
+            bottom: -10%;
+            left: -10%;
+            width: 350px;
+            height: 350px;
+            background: var(--accent-purple);
+            animation-delay: -5s;
+        }
+        .blob-3 {
+            top: 40%;
+            left: 30%;
+            width: 200px;
+            height: 200px;
+            background: #5e5ce6;
+            opacity: 0.4;
+            animation-duration: 15s;
+        }
+        @keyframes float {
+            0% { transform: translate(0, 0) scale(1); }
+            100% { transform: translate(30px, 50px) scale(1.1); }
+        }
+        /* Glassmorphism Utility Class */
+        .glass {
+            background: var(--glass-bg);
+            backdrop-filter: blur(var(--blur-amount));
+            -webkit-backdrop-filter: blur(var(--blur-amount));
+            border: 1px solid var(--glass-border);
+            box-shadow: var(--glass-shadow);
+        }
+        /* Header / Nav */
+        header {
+            padding: 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        .brand {
+            font-size: 1.2rem;
+            font-weight: 700;
+            letter-spacing: -0.5px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .user-menu {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+        .user-info {
+            text-align: left;
+            font-size: 0.85rem;
+        }
+        .user-name {
+            font-weight: 600;
+            display: block;
+        }
+        .user-status {
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+        }
+        .avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #ff9f0a, #ff453a);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            font-size: 1.1rem;
+            border: 2px solid rgba(255,255,255,0.2);
+        }
+        .logout-btn {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            transition: color 0.3s;
+        }
+        .logout-btn:hover {
+            color: #ff453a;
+        }
+        /* Main Container */
+        .container {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 40px 20px;
+            width: 100%;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        /* Hero Section */
+        .hero {
+            text-align: center;
+            margin-bottom: 60px;
+            animation: fadeInDown 1s ease-out;
+        }
+        .hero h1 {
+            font-size: 3rem;
+            font-weight: 800;
+            margin-bottom: 15px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            letter-spacing: -1px;
+        }
+        .subtitle {
+            font-size: 1.2rem;
+            color: var(--text-secondary);
+            font-weight: 400;
+        }
+        /* Features Grid */
+        .features {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 25px;
+            width: 100%;
+            margin-bottom: 60px;
+        }
+        .feature {
+            border-radius: var(--card-radius);
+            padding: 30px;
+            text-align: center;
+            transition: transform 0.3s ease, background 0.3s ease;
+            position: relative;
+            overflow: hidden;
+            animation: fadeInUp 0.8s ease-out backwards;
+        }
+        .feature:nth-child(1) { animation-delay: 0.1s; }
+        .feature:nth-child(2) { animation-delay: 0.2s; }
+        .feature:nth-child(3) { animation-delay: 0.3s; }
+        .feature:hover {
+            transform: translateY(-10px);
+            background: rgba(255, 255, 255, 0.15);
+        }
+        .icon-wrapper {
+            width: 70px;
+            height: 70px;
+            border-radius: 20px;
+            margin: 0 auto 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.8rem;
+            position: relative;
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+        /* Icon Gradients */
+        .feature:nth-child(1) .icon-wrapper { color: #30d158; background: linear-gradient(135deg, rgba(48, 209, 88, 0.2), rgba(48, 209, 88, 0.05)); }
+        .feature:nth-child(2) .icon-wrapper { color: #0a84ff; background: linear-gradient(135deg, rgba(10, 132, 255, 0.2), rgba(10, 132, 255, 0.05)); }
+        .feature:nth-child(3) .icon-wrapper { color: #bf5af2; background: linear-gradient(135deg, rgba(191, 90, 242, 0.2), rgba(191, 90, 242, 0.05)); }
+        .feature h3 {
+            font-size: 1.3rem;
+            margin-bottom: 10px;
+            font-weight: 600;
+        }
+        .feature p {
+            color: var(--text-secondary);
+            font-size: 0.95rem;
+            line-height: 1.5;
+        }
+        /* CTA Section */
+        .cta {
+            display: flex;
+            gap: 20px;
+            flex-wrap: wrap;
+            justify-content: center;
+            animation: fadeInUp 1s ease-out backwards;
+            animation-delay: 0.4s;
+            width: 100%;
+        }
+        .btn {
+            padding: 16px 40px;
+            border-radius: var(--btn-radius);
+            text-decoration: none;
+            font-weight: 600;
+            font-size: 1.1rem;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+            min-width: 160px;
+            justify-content: center;
+        }
+        .btn-primary {
+            background: var(--accent-gradient);
+            color: white;
+            box-shadow: 0 4px 15px rgba(10, 132, 255, 0.4);
+            border: none;
+        }
+        .btn-primary:hover {
+            transform: scale(1.05);
+            box-shadow: 0 8px 25px rgba(10, 132, 255, 0.6);
+        }
+        .btn-secondary {
+            background: rgba(255, 255, 255, 0.1);
+            color: white;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            backdrop-filter: blur(10px);
+        }
+        .btn-secondary:hover {
+            background: rgba(255, 255, 255, 0.2);
+            transform: scale(1.05);
+        }
+        /* Footer / Attribution */
+        .footer {
+            padding: 20px;
+            text-align: center;
+            width: 100%;
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            z-index: 10;
+        }
+        .footer a {
+            color: var(--accent-blue);
+            text-decoration: none;
+            font-weight: 600;
+        }
+        .footer a:hover {
+            text-decoration: underline;
+        }
+        /* Modal Styles (Simulating PHP pages) */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(5px);
+            z-index: 1000;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+        }
+        .modal-overlay.active {
+            opacity: 1;
+            pointer-events: all;
+        }
+        .modal {
+            width: 90%;
+            max-width: 400px;
+            padding: 30px;
+            border-radius: var(--card-radius);
+            transform: scale(0.9);
+            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            text-align: center;
+        }
+        .modal-overlay.active .modal {
+            transform: scale(1);
+        }
+        .modal h2 {
+            margin-bottom: 20px;
+        }
+        .close-modal {
+            margin-top: 20px;
+            background: transparent;
+            border: 1px solid rgba(255,255,255,0.3);
+            color: white;
+            padding: 10px 20px;
+            border-radius: 20px;
+            cursor: pointer;
+        }
+        /* Animations */
+        @keyframes fadeInDown {
+            from { opacity: 0; transform: translateY(-30px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes fadeInUp {
+            from { opacity: 0; transform: translateY(30px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        /* Responsive */
+        @media (max-width: 768px) {
+            .hero h1 { font-size: 2.2rem; }
+            .features { grid-template-columns: 1fr; }
+            .cta { flex-direction: column; width: 100%; }
+            .btn { width: 100%; }
+            .header { padding: 15px; }
+            .user-info { display: none; } /* Hide name on mobile for space */
+        }
+    </style>
+</head>
+<body>
+    <!-- Background Elements -->
+    <div class="background-blobs">
+        <div class="blob blob-1"></div>
+        <div class="blob blob-2"></div>
+        <div class="blob blob-3"></div>
+    </div>
+    <!-- Navigation / Header -->
+    <header class="glass">
+        <div class="brand">
+            <i class="fa-solid fa-cube" style="color: var(--accent-blue);"></i>
+            AnyCoder
+        </div>
+        <div class="user-menu">
+            <div class="user-info">
+                <span class="user-name">saertymati</span>
+                <span class="user-status">samirerty</span>
+            </div>
+            <div class="avatar">S</div>
+            <button class="logout-btn" title="Logout">
+                <i class="fa-solid fa-arrow-right-from-bracket"></i>
+            </button>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <div class="container">
+        <div class="hero">
+            <h1>💬 چت روم ساده</h1>
+            <p class="subtitle">محلی برای گفتگو با دوستان</p>
+        </div>
+        <div class="features">
+            <div class="feature glass">
+                <div class="icon-wrapper">
+                    <i class="fa-solid fa-lock"></i>
+                </div>
+                <h3>ثبت‌نام آسان</h3>
+                <p>با شماره موبایل ثبت‌نام کنید</p>
+            </div>
+            <div class="feature glass">
+                <div class="icon-wrapper">
+                    <i class="fa-solid fa-users"></i>
+                </div>
+                <h3>ساخت اتاق</h3>
+                <p>تا ۳ اتاق مختلف بسازید</p>
+            </div>
+            <div class="feature glass">
+                <div class="icon-wrapper">
+                    <i class="fa-solid fa-comments"></i>
+                </div>
+                <h3>چت زنده</h3>
+                <p>گفتگوی آنلاین و سریع</p>
+            </div>
+        </div>
+        <div class="cta">
+            <!-- Using onclick to show modal instead of actual PHP link for demo purposes -->
+            <a href="#" class="btn btn-primary" onclick="openModal('register')">شروع کنید</a>
+            <a href="#" class="btn btn-secondary" onclick="openModal('login')">ورود</a>
+        </div>
+    </div>
+    <!-- Footer Attribution -->
+    <footer class="footer">
+        <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p>
+    </footer>
+    <!-- Interactive Modals (Simulating Backend Pages) -->
+    <div class="modal-overlay" id="modalOverlay">
+        <div class="modal glass">
+            <div id="modalContent">
+                <!-- Content injected via JS -->
+            </div>
+            <button class="close-modal" onclick="closeModal()">بستن</button>
+        </div>
+    </div>
+    <script>
+        // Modal Logic
+        const modalOverlay = document.getElementById('modalOverlay');
+        const modalContent = document.getElementById('modalContent');
+        function openModal(type) {
+            event.preventDefault();
+            modalOverlay.classList.add('active');
+            if (type === 'register') {
+                modalContent.innerHTML = `
+                    <div class="icon-wrapper" style="margin-bottom:15px; color:#30d158; background:rgba(48,209,88,0.1);">
+                        <i class="fa-solid fa-user-plus"></i>
+                    </div>
+                    <h2>ثبت‌نام</h2>
+                    <p style="color: rgba(255,255,255,0.7); margin-bottom: 15px;">برای شروع گفتگو ثبت‌نام کنید</p>
+                    <button class="btn btn-primary" style="width:100%; font-size:0.9rem;">ادامه با شماره</button>
+                `;
+            } else if (type === 'login') {
+                modalContent.innerHTML = `
+                    <div class="icon-wrapper" style="margin-bottom:15px; color:#0a84ff; background:rgba(10,132,255,0.1);">
+                        <i class="fa-solid fa-right-to-bracket"></i>
+                    </div>
+                    <h2>ورود</h2>
+                    <p style="color: rgba(255,255,255,0.7); margin-bottom: 15px;">به حساب کاربری خود وارد شوید</p>
+                    <button class="btn btn-primary" style="width:100%; font-size:0.9rem;">ورود</button>
+                `;
+            }
+        }
+        function closeModal() {
+            modalOverlay.classList.remove('active');
+        }
+        // Close modal on outside click
+        modalOverlay.addEventListener('click', (e) => {
+            if (e.target === modalOverlay) {
+                closeModal();
+            }
+        });
+        // Interactive Tilt Effect for Cards (3D feel)
+        const cards = document.querySelectorAll('.feature');
+        cards.forEach(card => {
+            card.addEventListener('mousemove', (e) => {
+                const rect = card.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                const centerX = rect.width / 2;
+                const centerY = rect.height / 2;
+                const rotateX = ((y - centerY) / centerY) * -5; // Max 5deg rotation
+                const rotateY = ((x - centerX) / centerX) * 5;
+                card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.02)`;
+            });
+            card.addEventListener('mouseleave', () => {
+                card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)';
+            });
+        });
+        // Parallax Effect for Background Blobs
+        document.addEventListener('mousemove', (e) => {
+            const x = e.clientX / window.innerWidth;
+            const y = e.clientY / window.innerHeight;
+            const blob1 = document.querySelector('.blob-1');
+            const blob2 = document.querySelector('.blob-2');
+            const blob3 = document.querySelector('.blob-3');
+            blob1.style.transform = `translate(${x * 30}px, ${y * 30}px)`;
+            blob2.style.transform = `translate(-${x * 30}px, -${y * 30}px)`;
+            blob3.style.transform = `translate(${x * 15}px, -${y * 15}px)`;
+        });
+    </script>
+</body>
+</html>