Spaces:

samirerty
/

anycoder-e71f9d05

Running

App Files Files Community

samirerty commited on Feb 8

Commit

7d91f01

verified ·

1 Parent(s): fc85e51

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +644 -19

index.html CHANGED Viewed

@@ -1,19 +1,644 @@
-<!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">
+    <title>آکواریوم لوکس | فروشگاه ماهی‌های گرافیکی</title>
+    <!-- Import Persian Font (Vazirmatn) -->
+    <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet" type="text/css" />
+    <!-- Import FontAwesome for Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary-color: #00f2ff;
+            --secondary-color: #ff0055;
+            --glass-bg: rgba(255, 255, 255, 0.1);
+            --glass-border: rgba(255, 255, 255, 0.2);
+            --text-color: #ffffff;
+            --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            font-family: 'Vazirmatn', sans-serif;
+            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
+            color: var(--text-color);
+            min-height: 100vh;
+            overflow-x: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+        /* --- Animated Fish Tank Background --- */
+        .ocean-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            overflow: hidden;
+            background: linear-gradient(to bottom, #001d3d, #003366, #005588);
+        }
+        .bubble {
+            position: absolute;
+            bottom: -50px;
+            background-color: rgba(255, 255, 255, 0.1);
+            border-radius: 50%;
+            animation: rise 15s infinite ease-in;
+        }
+        @keyframes rise {
+            0% { bottom: -50px; transform: translateX(0); }
+            50% { transform: translateX(100px); }
+            100% { bottom: 110vh; transform: translateX(-100px); }
+        }
+        /* Floating Fish CSS Animation */
+        .fish-container {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+        }
+        .fish {
+            position: absolute;
+            font-size: 3rem;
+            animation: swim linear infinite;
+            opacity: 0.8;
+            filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
+        }
+        @keyframes swim {
+            0% { left: -10%; transform: rotate(0deg); }
+            50% { transform: rotate(10deg); }
+            100% { left: 110%; transform: rotate(-10deg); }
+        }
+        /* --- UI Components --- */
+        header {
+            padding: 20px 5%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            z-index: 100;
+            position: relative;
+        }
+        .logo {
+            font-size: 1.8rem;
+            font-weight: 800;
+            color: var(--primary-color);
+            text-shadow: 0 0 10px var(--primary-color);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        nav ul {
+            display: flex;
+            list-style: none;
+            gap: 30px;
+        }
+        nav a {
+            color: white;
+            text-decoration: none;
+            font-weight: 600;
+            transition: 0.3s;
+            position: relative;
+        }
+        nav a:hover {
+            color: var(--primary-color);
+        }
+        nav a::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -5px;
+            left: 0;
+            background-color: var(--primary-color);
+            transition: 0.3s;
+        }
+        nav a:hover::after {
+            width: 100%;
+        }
+        .cart-icon {
+            position: relative;
+            cursor: pointer;
+            font-size: 1.5rem;
+            transition: transform 0.3s;
+        }
+        .cart-icon:hover {
+            transform: scale(1.2);
+        }
+        .cart-count {
+            position: absolute;
+            top: -10px;
+            left: -10px;
+            background-color: var(--secondary-color);
+            color: white;
+            border-radius: 50%;
+            padding: 2px 6px;
+            font-size: 0.75rem;
+        }
+        /* --- Hero Section --- */
+        .hero {
+            text-align: center;
+            padding: 15vh 20px;
+            z-index: 10;
+            position: relative;
+            animation: fadeIn 1.5s ease;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .hero h1 {
+            font-size: 4rem;
+            margin-bottom: 20px;
+            line-height: 1.2;
+        }
+        .hero span {
+            color: var(--primary-color);
+        }
+        .hero p {
+            font-size: 1.2rem;
+            max-width: 600px;
+            margin: 0 auto 40px auto;
+            opacity: 0.9;
+        }
+        .btn {
+            padding: 15px 40px;
+            font-size: 1.2rem;
+            font-family: 'Vazirmatn', sans-serif;
+            border: none;
+            border-radius: 50px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-decoration: none;
+            display: inline-block;
+        }
+        .btn-primary {
+            background: linear-gradient(45deg, var(--primary-color), #00aaff);
+            color: white;
+            box-shadow: 0 0 20px rgba(0, 242, 255, 0.4);
+        }
+        .btn-primary:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 0 40px rgba(0, 242, 255, 0.6);
+        }
+        /* --- Glass Card Section (Products) --- */
+        .section-container {
+            max-width: 1200px;
+            margin: 0 auto 100px auto;
+            padding: 0 20px;
+            z-index: 10;
+            position: relative;
+        }
+        .section-title {
+            text-align: center;
+            margin-bottom: 50px;
+            font-size: 2.5rem;
+            border-bottom: 2px solid var(--glass-border);
+            display: inline-block;
+            padding-bottom: 10px;
+        }
+        .products-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 30px;
+        }
+        .glass-card {
+            background: var(--glass-bg);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid var(--glass-border);
+            border-radius: 20px;
+            padding: 30px;
+            box-shadow: var(--card-shadow);
+            transition: all 0.4s ease;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+        }
+        .glass-card:hover {
+            transform: translateY(-10px);
+            background: rgba(255, 255, 255, 0.15);
+            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
+            border-color: var(--primary-color);
+        }
+        .card-icon {
+            font-size: 5rem;
+            margin-bottom: 20px;
+            animation: float 3s ease-in-out infinite;
+        }
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-15px); }
+            100% { transform: translateY(0px); }
+        }
+        .card-title {
+            font-size: 1.8rem;
+            margin-bottom: 10px;
+            color: white;
+        }
+        .card-price {
+            font-size: 1.4rem;
+            color: var(--primary-color);
+            font-weight: bold;
+            margin-bottom: 20px;
+            background: rgba(0, 0, 0, 0.3);
+            padding: 5px 15px;
+            border-radius: 20px;
+        }
+        .card-desc {
+            color: #ddd;
+            margin-bottom: 25px;
+            line-height: 1.6;
+        }
+        .add-btn {
+            background: transparent;
+            border: 2px solid var(--primary-color);
+            color: white;
+            padding: 10px 30px;
+            border-radius: 30px;
+            cursor: pointer;
+            font-family: 'Vazirmatn', sans-serif;
+            font-size: 1rem;
+            transition: 0.3s;
+            width: 100%;
+        }
+        .add-btn:hover {
+            background: var(--primary-color);
+            color: #000;
+            box-shadow: 0 0 20px var(--primary-color);
+        }
+        /* --- Glass Footer --- */
+        footer {
+            background: rgba(0, 0, 0, 0.4);
+            backdrop-filter: blur(10px);
+            padding: 50px 20px;
+            text-align: center;
+            border-top: 1px solid var(--glass-border);
+            z-index: 10;
+            position: relative;
+        }
+        .footer-content {
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        .footer-links {
+            margin: 30px 0;
+            display: flex;
+            justify-content: center;
+            gap: 30px;
+        }
+        .footer-links a {
+            color: #aaa;
+            text-decoration: none;
+        }
+        .footer-links a:hover {
+            color: var(--primary-color);
+        }
+        .bottom-footer {
+            margin-top: 40px;
+            font-size: 0.9rem;
+            color: #888;
+        }
+        .anycoder-link {
+            color: #00f2ff;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        .anycoder-link:hover {
+            text-decoration: underline;
+        }
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .hero h1 { font-size: 2.5rem; }
+            nav ul { display: none; } /* Simple hide for mobile in this demo */
+            .products-grid { grid-template-columns: 1fr; }
+        }
+        /* Toast Notification */
+        .toast {
+            position: fixed;
+            bottom: 30px;
+            left: 30px; /* RTL context: left is actually visual right in LTR, but we want it on the side */
+            background: rgba(0, 242, 255, 0.9);
+            color: #000;
+            padding: 15px 25px;
+            border-radius: 10px;
+            font-weight: bold;
+            transform: translateX(200%);
+            transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+            z-index: 1000;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+        }
+        .toast.show {
+            transform: translateX(0);
+        }
+    </style>
+</head>
+<body>
+    <!-- Background Elements -->
+    <div class="ocean-container" id="oceanContainer">
+        <!-- Bubbles will be generated by JS -->
+        <!-- Fish will be generated by JS -->
+    </div>
+    <!-- Floating Fish Container -->
+    <div class="fish-container" id="fishContainer">
+        <div class="fish" style="top: 20%; animation-duration: 15s; animation-delay: 0s;"><i class="fa-solid fa-fish"></i></div>
+        <div class="fish" style="top: 40%; animation-duration: 20s; animation-delay: 5s; font-size: 2.5rem;"><i class="fa-solid fa-fish-fins"></i></div>
+        <div class="fish" style="top: 60%; animation-duration: 12s; animation-delay: 2s;"><i class="fa-solid fa-fish"></i></div>
+        <div class="fish" style="top: 30%; animation-duration: 18s; animation-delay: 8s; font-size: 4rem;"><i class="fa-solid fa-shrimp"></i></div>
+        <div class="fish" style="top: 70%; animation-duration: 25s; animation-delay: 1s;"><i class="fa-solid fa-octopus"></i></div>
+    </div>
+    <!-- Header -->
+    <header>
+        <div class="logo">
+            <i class="fa-solid fa-water"></i>
+            آکواریوم لوکس
+        </div>
+        <nav>
+            <ul>
+                <li><a href="#home">خانه</a></li>
+                <li><a href="#products">ماهی‌های شگفت‌انگیز</a></li>
+                <li><a href="#about">درباره ما</a></li>
+                <li><a href="#contact">تماس</a></li>
+            </ul>
+        </nav>
+        <div class="cart-icon" onclick="alert('در حال حاضر سبد خرید خالی است!')">
+            <i class="fa-solid fa-cart-shopping"></i>
+            <span class="cart-count" id="cartCount">0</span>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="hero" id="home">
+        <h1>دنیای زیبای ماهی‌ها را در <span>زندگی خود</span> جا دهید</h1>
+        <p>ماهی‌های گرافیکی، آکواریوم‌های دیجیتال و دکوراسیون‌های شناور با استایل مدرن و فیروزه‌ای. تجربه‌ای بی‌نظیر از زیبایی طبیعت در محیط شیشه‌ای.</p>
+        <a href="#products" class="btn btn-primary">مشاهده کاتالوگ</a>
+    </section>
+    <!-- Products Section -->
+    <section class="section-container" id="products">
+        <h2 class="section-title">ماهی‌های پرطرفدار</h2>
+        <div class="products-grid">
+            <!-- Product 1 -->
+            <div class="glass-card">
+                <div class="card-icon"><i class="fa-solid fa-fish"></i></div>
+                <h3 class="card-title">ماهی طلایی شناور</h3>
+                <div class="card-price">۴۹,۰۰۰ تومان</div>
+                <p class="card-desc">ماهی طلایی اصیل با رنگ‌بندی درخشان و حرکت آرام. ایده‌آل برای آرامش بخشیدن به محیط کار شما.</p>
+                <button class="add-btn" onclick="addToCart('ماهی طلایی شناور')">
+                    <i class="fa-solid fa-plus"></i> افزودن به سبد
+                </button>
+            </div>
+            <!-- Product 2 -->
+            <div class="glass-card">
+                <div class="card-icon" style="color: var(--secondary-color);"><i class="fa-solid fa-fish-fins"></i></div>
+                <h3 class="card-title">ماهی قرمز نئون</h3>
+                <div class="card-price">۳۵,۰۰۰ تومان</div>
+                <p class="card-desc">رنگ نئونی زنده و انرژیک. این ماهی فضای اتاق را با نورهای جذاب پر می‌کند.</p>
+                <button class="add-btn" onclick="addToCart('ماهی قرمز نئون')">
+                    <i class="fa-solid fa-plus"></i> افزودن به سبد
+                </button>
+            </div>
+            <!-- Product 3 -->
+            <div class="glass-card">
+                <div class="card-icon"><i class="fa-solid fa-shrimp"></i></div>
+                <h3 class="card-title">قایق‌ماهی شفاف</h3>
+                <div class="card-price">۶۲,۰۰۰ تومان</div>
+                <p class="card-desc">نوعی نایاب با بدن شفاف و جذاب. ویژه علاقه‌مندان به گونه‌های خاص آبزیان.</p>
+                <button class="add-btn" onclick="addToCart('قایق‌ماهی شفاف')">
+                    <i class="fa-solid fa-plus"></i> افزودن به سبد
+                </button>
+            </div>
+            <!-- Product 4 -->
+            <div class="glass-card">
+                <div class="card-icon"><i class="fa-solid fa-octopus"></i></div>
+                <h3 class="card-title">اُکتاپوس مدرن</h3>
+                <div class="card-price">۸۵,۰۰۰ تومان</div>
+                <p class="card-desc">نماد هوش و رمزآلود بودن. این موجود شناور فضای شما را با حس هیجان پر می‌کند.</p>
+                <button class="add-btn" onclick="addToCart('اُکتاپوس مدرن')">
+                    <i class="fa-solid fa-plus"></i> افزودن به سبد
+                </button>
+            </div>
+            <!-- Product 5 -->
+            <div class="glass-card">
+                <div class="card-icon" style="color: #9D50BB;"><i class="fa-solid fa-otter"></i></div>
+                <h3 class="card-title">دریاچه‌ماهی بنفش</h3>
+                <div class="card-price">۵۵,۰۰۰ تومان</div>
+                <p class="card-desc">رنگ بنفش شیک و جذاب. برای کسانی که به دنبال متفاوت بودن هستند.</p>
+                <button class="add-btn" onclick="addToCart('دریاچه‌ماهی بنفش')">
+                    <i class="fa-solid fa-plus"></i> افزودن به سبد
+                </button>
+            </div>
+            <!-- Product 6 -->
+            <div class="glass-card">
+                <div class="card-icon"><i class="fa-solid fa-whale"></i></div>
+                <h3 class="card-title">کیفه ماهی بزرگ</h3>
+                <div class="card-price">۱۲۰,۰۰۰ تومان</div>
+                <p class="card-desc">نماد قدرت و آرامش. این ماهی بزرگ، مرکز توجه هر اتاقی را تشکیل می‌دهد.</p>
+                <button class="add-btn" onclick="addToCart('کیفه ماهی بزرگ')">
+                    <i class="fa-solid fa-plus"></i> افزودن به سبد
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer id="contact">
+        <div class="footer-content">
+            <div class="logo" style="justify-content: center; margin-bottom: 20px;">
+                <i class="fa-solid fa-water"></i>
+                آکواریوم لوکس
+            </div>
+            <p>تولیدکننده ماهی‌های گرافیکی و آکواریوم‌های دیجیتال با کیفیت بالا و طراحی مدرن.</p>
+            <div class="footer-links">
+                <a href="#">سوالات متداول</a>
+                <a href="#">شرایط استفاده</a>
+                <a href="#">حریم خصوصی</a>
+                <a href="#">پشتیبانی</a>
+            </div>
+            <div class="social-icons" style="margin-bottom: 30px;">
+                <i class="fa-brands fa-telegram" style="margin: 0 10px; font-size: 1.5rem; cursor: pointer;"></i>
+                <i class="fa-brands fa-instagram" style="margin: 0 10px; font-size: 1.5rem; cursor: pointer;"></i>
+                <i class="fa-brands fa-whatsapp" style="margin: 0 10px; font-size: 1.5rem; cursor: pointer;"></i>
+            </div>
+            <div class="bottom-footer">
+                &copy; ۱۴۰۳ تمامی حقوق محفوظ است. طراحی شده با <i class="fa-solid fa-heart" style="color: var(--secondary-color);"></i>
+                <br><br>
+                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a>
+            </div>
+        </div>
+    </footer>
+    <!-- Toast Notification -->
+    <div class="toast" id="toast">
+        <i class="fa-solid fa-check-circle"></i>
+        <span id="toastMessage">محصول به سبد اضافه شد!</span>
+    </div>
+    <script>
+        // --- Background Bubble Generator ---
+        const oceanContainer = document.getElementById('oceanContainer');
+        function createBubbles() {
+            for (let i = 0; i < 20; i++) {
+                const bubble = document.createElement('div');
+                bubble.classList.add('bubble');
+                // Random size
+                const size = Math.random() * 40 + 10;
+                bubble.style.width = `${size}px`;
+                bubble.style.height = `${size}px`;
+                // Random position
+                bubble.style.left = `${Math.random() * 100}vw`;
+                // Random animation duration and delay
+                const duration = Math.random() * 10 + 10; // 10-20s
+                const delay = Math.random() * 10;
+                bubble.style.animationDuration = `${duration}s`;
+                bubble.style.animationDelay = `${delay}s`;
+                oceanContainer.appendChild(bubble);
+            }
+        }
+        createBubbles();
+        // --- Fish Animation Logic (Randomize existing fish) ---
+        const fishContainer = document.getElementById('fishContainer');
+        const fishElements = document.querySelectorAll('.fish');
+        function randomizeFish() {
+            fishElements.forEach(fish => {
+                // Randomize animation duration
+                const duration = Math.random() * 20 + 10;
+                fish.style.animationDuration = `${duration}s`;
+                // Randomize animation delay
+                const delay = Math.random() * 10;
+                fish.style.animationDelay = `${delay}s`;
+                // Randomize font size slightly
+                const size = Math.random() * 2 + 1.5;
+                fish.style.fontSize = `${size}rem`;
+                // Randomize top position
+                const top = Math.random() * 80;
+                fish.style.top = `${top}%`;
+            });
+        }
+        // Change fish positions every 30 seconds
+        setInterval(randomizeFish, 30000);
+        randomizeFish(); // Run once on load
+        // --- Cart Logic ---
+        let cartCount = 0;
+        const cartCountEl = document.getElementById('cartCount');
+        const toast = document.getElementById('toast');
+        const toastMessage = document.getElementById('toastMessage');
+        function addToCart(productName) {
+            cartCount++;
+            cartCountEl.textContent = cartCount;
+            // Show Toast
+            toastMessage.textContent = `✅ ${productName} به سبد خرید اضافه شد!`;
+            toast.classList.add('show');
+            // Hide Toast after 3 seconds
+            setTimeout(() => {
+                toast.classList.remove('show');
+            }, 3000);
+            // Add simple animation to cart icon
+            cartCountEl.style.transform = "scale(1.5)";
+            setTimeout(() => {
+                cartCountEl.style.transform = "scale(1)";
+            }, 200);
+        }
+        // --- Smooth Scroll for Links ---
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
+        });
+    </script>
+</body>
+</html>