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> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #405DE6; | |
| --secondary-color: #5851DB; | |
| --accent-color: #FD1D1D; | |
| --light-color: #f8f9fa; | |
| --dark-color: #262626; | |
| --gray-color: #8e8e8e; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: var(--light-color); | |
| color: var(--dark-color); | |
| } | |
| .container { | |
| max-width: 935px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 10px 0; | |
| border-bottom: 1px solid #dbdbdb; | |
| margin-bottom: 20px; | |
| } | |
| .logo { | |
| font-size: 24px; | |
| font-weight: bold; | |
| color: var(--primary-color); | |
| } | |
| .settings-menu { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .settings-menu i { | |
| font-size: 24px; | |
| color: var(--dark-color); | |
| cursor: pointer; | |
| } | |
| .profile-section { | |
| display: flex; | |
| padding: 20px 0; | |
| border-bottom: 1px solid #dbdbdb; | |
| } | |
| .profile-pic { | |
| width: 150px; | |
| height: 150px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| margin-left: 50px; | |
| border: 3px solid var(--primary-color); | |
| } | |
| .profile-info { | |
| flex: 1; | |
| } | |
| .profile-stats { | |
| display: flex; | |
| gap: 30px; | |
| margin-bottom: 20px; | |
| } | |
| .stat-item { | |
| text-align: center; | |
| } | |
| .stat-number { | |
| font-weight: bold; | |
| font-size: 18px; | |
| } | |
| .stat-label { | |
| font-size: 14px; | |
| color: var(--gray-color); | |
| } | |
| .profile-name { | |
| font-weight: bold; | |
| margin-bottom: 10px; | |
| } | |
| .profile-bio { | |
| color: var(--gray-color); | |
| margin-bottom: 10px; | |
| } | |
| .profile-website { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| font-weight: 500; | |
| } | |
| .tabs { | |
| display: flex; | |
| justify-content: space-around; | |
| border-top: 1px solid #dbdbdb; | |
| margin-top: 20px; | |
| } | |
| .tab { | |
| padding: 15px 0; | |
| text-align: center; | |
| cursor: pointer; | |
| width: 100%; | |
| border-top: 1px solid transparent; | |
| transition: all 0.3s; | |
| } | |
| .tab.active { | |
| border-top: 1px solid var(--dark-color); | |
| } | |
| .tab i { | |
| font-size: 24px; | |
| margin-bottom: 5px; | |
| } | |
| .tab-label { | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| } | |
| .content { | |
| display: none; | |
| padding: 20px 0; | |
| } | |
| .content.active { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 5px; | |
| } | |
| .item { | |
| aspect-ratio: 1/1; | |
| background-color: #f0f0f0; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .item img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .item-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.3); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .item:hover .item-overlay { | |
| opacity: 1; | |
| } | |
| .item-overlay i { | |
| color: white; | |
| font-size: 24px; | |
| margin: 0 5px; | |
| } | |
| .anycoder-link { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| background-color: var(--primary-color); | |
| color: white; | |
| padding: 10px 15px; | |
| border-radius: 5px; | |
| text-decoration: none; | |
| font-size: 14px; | |
| z-index: 100; | |
| } | |
| @media (max-width: 768px) { | |
| .profile-section { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .profile-pic { | |
| margin-left: 0; | |
| margin-bottom: 20px; | |
| } | |
| .profile-info { | |
| text-align: center; | |
| } | |
| .profile-stats { | |
| justify-content: center; | |
| } | |
| .content.active { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .content.active { | |
| grid-template-columns: 1fr; | |
| } | |
| .tab i { | |
| font-size: 20px; | |
| } | |
| .tab-label { | |
| display: none; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <div class="logo">فروشگاه آنلاین</div> | |
| <div class="settings-menu"> | |
| <i class="fas fa-plus-square"></i> | |
| <i class="fas fa-bars"></i> | |
| </div> | |
| </header> | |
| <section class="profile-section"> | |
| <img src="https://source.unsplash.com/random/300x300/?shop" alt="Profile Picture" class="profile-pic"> | |
| <div class="profile-info"> | |
| <div class="profile-stats"> | |
| <div class="stat-item"> | |
| <div class="stat-number">1,234</div> | |
| <div class="stat-label">پستها</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number">12.3K</div> | |
| <div class="stat-label">دنبالکنندگان</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number">456</div> | |
| <div class="stat-label">دنبالشونده</div> | |
| </div> | |
| </div> | |
| <div class="profile-name">فروشگاه مد و پوشاک</div> | |
| <div class="profile-bio">ارائه دهنده بهترین محصولات مد و پوشاک با کیفیت عالی و قیمت مناسب</div> | |
| <a href="#" class="profile-website">www.example-shop.com</a> | |
| </div> | |
| </section> | |
| <section class="tabs"> | |
| <div class="tab active" data-tab="products"> | |
| <i class="fas fa-th"></i> | |
| <div class="tab-label">محصولات</div> | |
| </div> | |
| <div class="tab" data-tab="videos"> | |
| <i class="fas fa-video"></i> | |
| <div class="tab-label">ویدیوها</div> | |
| </div> | |
| <div class="tab" data-tab="stories"> | |
| <i class="fas fa-circle-play"></i> | |
| <div class="tab-label">استوریها</div> | |
| </div> | |
| </section> | |
| <section class="content active" id="products"> | |
| <div class="item"> | |
| <img src="https://source.unsplash.com/random/300x300/?fashion" alt="Product"> | |
| <div class="item-overlay"> | |
| <i class="fas fa-heart"></i> | |
| <i class="fas fa-shopping-cart"></i> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <img src="https://source.unsplash.com/random/300x300/?clothes" alt="Product"> | |
| <div class="item-overlay"> | |
| <i class="fas fa-heart"></i> | |
| <i class="fas fa-shopping-cart"></i> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <img src="https://source.unsplash.com/random/300x300/?shoes" alt="Product"> | |
| <div class="item-overlay"> | |
| <i class="fas fa-heart"></i> | |
| <i class="fas fa-shopping-cart"></i> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <img src="https://source.unsplash.com/random/300x300/?accessories" alt="Product"> | |
| <div class="item-overlay"> | |
| <i class="fas fa-heart"></i> | |
| <i class="fas fa-shopping-cart"></i> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <img src="https://source.unsplash.com/random/300x300/?bag" alt="Product"> | |
| <div class="item-overlay"> | |
| <i class="fas fa-heart"></i> | |
| <i class="fas fa-shopping-cart"></i> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <img src="https://source.unsplash.com/random/300x300/?jewelry" alt="Product"> | |
| <div class="item-overlay"> | |
| <i class="fas fa-heart"></i> | |
| <i class="fas fa-shopping-cart"></i> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="content" id="videos"> | |
| <div class="item"> | |
| <img src="https://source.unsplash.com/random/300x300/?video1" alt="Video"> | |
| <div class="item-overlay"> | |
| <i class="fas fa-play"></i> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <img src="https://source.unsplash.com/random/300x300/?video2" alt="Video"> | |
| <div class="item-overlay"> | |
| <i class="fas fa-play"></i> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <img src="https://source.unsplash.com/random/300x300/?video3" alt="Video"> | |
| <div class="item-overlay"> | |
| <i class="fas fa-play"></i> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="content" id="stories"> | |
| <div class="item"> | |
| <img src="https://source.unsplash.com/random/300x300/?story1" alt="Story"> | |
| <div class="item-overlay"> | |
| <i class="fas fa-eye"></i> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <img src="https://source.unsplash.com/random/300x300/?story2" alt="Story"> | |
| <div class="item-overlay"> | |
| <i class="fas fa-eye"></i> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <img src="https://source.unsplash.com/random/300x300/?story3" alt="Story"> | |
| <div class="item-overlay"> | |
| <i class="fas fa-eye"></i> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <img src="https://source.unsplash.com/random/300x300/?story4" alt="Story"> | |
| <div class="item-overlay"> | |
| <i class="fas fa-eye"></i> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const tabs = document.querySelectorAll('.tab'); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| // Remove active class from all tabs and contents | |
| document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); | |
| document.querySelectorAll('.content').forEach(c => c.classList.remove('active')); | |
| // Add active class to clicked tab | |
| this.classList.add('active'); | |
| // Show corresponding content | |
| const tabId = this.getAttribute('data-tab'); | |
| document.getElementById(tabId).classList.add('active'); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |