Spaces:
Running
Running
| <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"> | |
| © ۱۴۰۳ تمامی حقوق محفوظ است. طراحی شده با <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> |