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 href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Vazirmatn', sans-serif; | |
| } | |
| :root { | |
| --primary: #e1306c; | |
| --bg: #fafafa; | |
| --border: #dbdbdb; | |
| --text: #262626; | |
| --text-light: #8e8e8e; | |
| } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| min-height: 100vh; | |
| } | |
| /* Header */ | |
| header { | |
| background: #fff; | |
| border-bottom: 1px solid var(--border); | |
| padding: 12px 20px; | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 22px; | |
| font-weight: 700; | |
| background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .header-actions { | |
| display: flex; | |
| gap: 15px; | |
| align-items: center; | |
| } | |
| .header-actions i { | |
| font-size: 22px; | |
| cursor: pointer; | |
| color: var(--text); | |
| transition: 0.2s; | |
| } | |
| .header-actions i:hover { | |
| color: var(--primary); | |
| } | |
| /* Settings Menu */ | |
| .settings-menu { | |
| position: fixed; | |
| top: 60px; | |
| right: 20px; | |
| background: #fff; | |
| border-radius: 12px; | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.15); | |
| padding: 10px; | |
| width: 220px; | |
| opacity: 0; | |
| visibility: hidden; | |
| transform: translateY(-10px); | |
| transition: 0.3s; | |
| z-index: 200; | |
| } | |
| .settings-menu.active { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translateY(0); | |
| } | |
| .settings-menu a { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px; | |
| color: var(--text); | |
| text-decoration: none; | |
| border-radius: 8px; | |
| transition: 0.2s; | |
| } | |
| .settings-menu a:hover { | |
| background: #f0f0f0; | |
| } | |
| .settings-menu a i { | |
| width: 20px; | |
| color: var(--text-light); | |
| } | |
| /* Profile Section */ | |
| .profile-section { | |
| background: #fff; | |
| border-bottom: 1px solid var(--border); | |
| padding: 30px 20px; | |
| } | |
| .profile-container { | |
| max-width: 935px; | |
| margin: 0 auto; | |
| display: flex; | |
| align-items: center; | |
| gap: 50px; | |
| } | |
| .profile-image { | |
| width: 150px; | |
| height: 150px; | |
| border-radius: 50%; | |
| padding: 3px; | |
| background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); | |
| flex-shrink: 0; | |
| } | |
| .profile-image img { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| border: 3px solid #fff; | |
| } | |
| .profile-info h1 { | |
| font-size: 28px; | |
| font-weight: 400; | |
| margin-bottom: 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .edit-profile { | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| padding: 5px 15px; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| } | |
| .stats { | |
| display: flex; | |
| gap: 40px; | |
| margin-bottom: 20px; | |
| } | |
| .stat-item { | |
| text-align: center; | |
| } | |
| .stat-item span { | |
| font-weight: 700; | |
| font-size: 18px; | |
| } | |
| .stat-item p { | |
| color: var(--text); | |
| font-size: 14px; | |
| } | |
| .bio h2 { | |
| font-size: 16px; | |
| font-weight: 700; | |
| } | |
| .bio p { | |
| font-size: 14px; | |
| color: var(--text); | |
| margin-top: 5px; | |
| } | |
| /* Tabs Navigation */ | |
| .tabs { | |
| background: #fff; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| justify-content: center; | |
| gap: 60px; | |
| } | |
| .tab { | |
| padding: 15px 5px; | |
| cursor: pointer; | |
| color: var(--text-light); | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| border-bottom: 2px solid transparent; | |
| transition: 0.2s; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .tab.active { | |
| color: var(--text); | |
| border-bottom-color: var(--text); | |
| } | |
| .tab i { | |
| font-size: 14px; | |
| } | |
| /* Content Area */ | |
| .content { | |
| max-width: 935px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| /* Stories */ | |
| .stories-container { | |
| display: flex; | |
| gap: 15px; | |
| overflow-x: auto; | |
| padding: 10px 0; | |
| scrollbar-width: none; | |
| } | |
| .stories-container::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .story { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 8px; | |
| cursor: pointer; | |
| flex-shrink: 0; | |
| } | |
| .story-ring { | |
| width: 70px; | |
| height: 70px; | |
| border-radius: 50%; | |
| padding: 3px; | |
| background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); | |
| } | |
| .story-ring.seen { | |
| background: var(--border); | |
| } | |
| .story-ring img { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| border: 2px solid #fff; | |
| } | |
| .story span { | |
| font-size: 12px; | |
| color: var(--text); | |
| } | |
| /* Posts Grid */ | |
| .posts-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 3px; | |
| } | |
| .post { | |
| aspect-ratio: 1; | |
| position: relative; | |
| cursor: pointer; | |
| overflow: hidden; | |
| } | |
| .post img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: 0.3s; | |
| } | |
| .post:hover img { | |
| transform: scale(1.05); | |
| } | |
| .post-overlay { | |
| position: absolute; | |
| inset: 0; | |
| background: rgba(0,0,0,0.5); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 20px; | |
| opacity: 0; | |
| transition: 0.3s; | |
| } | |
| .post:hover .post-overlay { | |
| opacity: 1; | |
| } | |
| .post-overlay span { | |
| color: #fff; | |
| font-weight: 700; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| /* Reels */ | |
| .reels-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 3px; | |
| } | |
| .reel { | |
| aspect-ratio: 9/16; | |
| position: relative; | |
| cursor: pointer; | |
| overflow: hidden; | |
| border-radius: 8px; | |
| } | |
| .reel img, .reel video { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .reel-overlay { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| padding: 15px; | |
| background: linear-gradient(transparent, rgba(0,0,0,0.7)); | |
| color: #fff; | |
| } | |
| .reel-overlay i { | |
| margin-left: 10px; | |
| } | |
| /* Mobile Responsive */ | |
| @media (max-width: 768px) { | |
| .profile-container { | |
| flex-direction: column; | |
| gap: 20px; | |
| text-align: center; | |
| } | |
| .profile-image { | |
| width: 100px; | |
| height: 100px; | |
| } | |
| .profile-info h1 { | |
| justify-content: center; | |
| font-size: 22px; | |
| } | |
| .stats { | |
| justify-content: center; | |
| gap: 25px; | |
| } | |
| .tabs { | |
| gap: 30px; | |
| } | |
| .posts-grid, .reels-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .settings-menu { | |
| right: 10px; | |
| left: 10px; | |
| width: auto; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .posts-grid, .reels-grid { | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| .profile-section { | |
| padding: 20px 15px; | |
| } | |
| } | |
| /* Overlay for menu */ | |
| .overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0,0,0,0.5); | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: 0.3s; | |
| z-index: 150; | |
| } | |
| .overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="logo">فروشگاه</div> | |
| <div class="header-actions"> | |
| <i class="fas fa-bars" id="settingsBtn"></i> | |
| <i class="fas fa-heart"></i> | |
| <i class="fas fa-paper-plane"></i> | |
| </div> | |
| </header> | |
| <!-- Settings Menu --> | |
| <div class="overlay" id="overlay"></div> | |
| <div class="settings-menu" id="settingsMenu"> | |
| <a href="#"><i class="fas fa-user"></i> پروفایل</a> | |
| <a href="#"><i class="fas fa-bookmark"></i> ذخیره شده</a> | |
| <a href="#"><i class="fas fa-cog"></i> تنظیمات</a> | |
| <a href="#"><i class="fas fa-exchange-alt"></i> تعویض حساب</a> | |
| <a href="#"><i class="fas fa-sign-out-alt"></i> خروج</a> | |
| </div> | |
| <!-- Profile Section --> | |
| <section class="profile-section"> | |
| <div class="profile-container"> | |
| <div class="profile-image"> | |
| <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=300" alt="Profile"> | |
| </div> | |
| <div class="profile-info"> | |
| <h1> | |
| <span>فروشگاه مد</span> | |
| <button class="edit-profile">ویرایش پروفایل</button> | |
| </h1> | |
| <div class="stats"> | |
| <div class="stat-item"> | |
| <span>۲۴۵</span> | |
| <p>پست</p> | |
| </div> | |
| <div class="stat-item"> | |
| <span>۱۵.۲K</span> | |
| <p>دنبالکننده</p> | |
| </div> | |
| <div class="stat-item"> | |
| <span>۳۲۰</span> | |
| <p>دنبالشده</p> | |
| </div> | |
| </div> | |
| <div class="bio"> | |
| <h2>فروشگاه تخصصی مد و لباس</h2> | |
| <p>🌟 ارسال به سراسر کشور<br>📦 ضمانت کیفیت<br>💬 پاسخگویی 24/7</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tabs --> | |
| <nav class="tabs"> | |
| <div class="tab active" data-tab="posts"> | |
| <i class="fas fa-th"></i> | |
| <span>پستها</span> | |
| </div> | |
| <div class="tab" data-tab="reels"> | |
| <i class="fas fa-play"></i> | |
| <span>ویدیوها</span> | |
| </div> | |
| <div class="tab" data-tab="tags"> | |
| <i class="fas fa-user-tag"></i> | |
| <span>تگ شده</span> | |
| </div> | |
| </nav> | |
| <!-- Content --> | |
| <div class="content"> | |
| <!-- Stories --> | |
| <div class="stories-container"> | |
| <div class="story"> | |
| <div class="story-ring"> | |
| <img src="https://images.unsplash.com/photo-1513721032312-6a18a42cf900?w=150" alt="Story"> | |
| </div> | |
| <span>کفشهای جدید</span> | |
| </div> | |
| <div class="story"> | |
| <div class="story-ring"> | |
| <img src="https://images.unsplash.com/photo-1529139574466-a303027c1d8b?w=150" alt="Story"> | |
| </div> | |
| <span>لباس تابستانه</span> | |
| </div> | |
| <div class="story"> | |
| <div class="story-ring seen"> | |
| <img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=150" alt="Story"> | |
| </div> | |
| <span>کیف دستی</span> | |
| </div> | |
| <div class="story"> | |
| <div class="story-ring"> | |
| <img src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=150" alt="Story"> | |
| </div> | |
| <span>اکسسوری</span> | |
| </div> | |
| <div class="story"> | |
| <div class="story-ring"> | |
| <img src="https://images.unsplash.com/photo-1445205170230-053b83016050?w=150" alt="Story"> | |
| </div> | |
| <span>پوشاک</span> | |
| </div> | |
| <div class="story"> | |
| <div class="story-ring seen"> | |
| <img src="https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=150" alt="Story"> | |
| </div> | |
| <span>فصل بهار</span> | |
| </div> | |
| </div> | |
| <!-- Posts Grid --> | |
| <div class="tab-content active" id="posts"> | |
| <div class="posts-grid"> | |
| <div class="post"> | |
| <img src="https://images.unsplash.com/photo-1434389677669-e08b4cac3105?w=400" alt="Post"> | |
| <div class="post-overlay"> | |
| <span><i class="fas fa-heart"></i> 1.2K</span> | |
| <span><i class="fas fa-comment"></i> 45</span> | |
| </div> | |
| </div> | |
| <div class="post"> | |
| <img src="https://images.unsplash.com/photo-1467043237213-65f2da53396f?w=400" alt="Post"> | |
| <div class="post-overlay"> | |
| <span><i class="fas fa-heart"></i> 890</span> | |
| <span><i class="fas fa-comment"></i> 32</span> | |
| </div> | |
| </div> | |
| <div class="post"> | |
| <img src="https://images.unsplash.com/photo-1509631179647-0177331693ae?w=400" alt="Post"> | |
| <div class="post-overlay"> | |
| <span><i class="fas fa-heart"></i> 2.1K</span> | |
| <span><i class="fas fa-comment"></i> 78</span> | |
| </div> | |
| </div> | |
| <div class="post"> | |
| <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400" alt="Post"> | |
| <div class="post-overlay"> | |
| <span><i class="fas fa-heart"></i> 567</span> | |
| <span><i class="fas fa-comment"></i> 21</span> | |
| </div> | |
| </div> | |
| <div class="post"> | |
| <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?w=400" alt="Post"> | |
| <div class="post-overlay"> | |
| <span><i class="fas fa-heart"></i> 1.5K</span> | |
| <span><i class="fas fa-comment"></i> 56</span> | |
| </div> | |
| </div> | |
| <div class="post"> | |
| <img src="https://images.unsplash.com/photo-1594938298603-c8148c4dae35?w=400" alt="Post"> | |
| <div class="post-overlay"> | |
| <span><i class="fas fa-heart"></i> 3.2K</span> | |
| <span><i class="fas fa-comment"></i> 102</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Reels --> | |
| <div class="tab-content" id="reels"> | |
| <div class="reels-grid"> | |
| <div class="reel"> | |
| <img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=300" alt="Reel"> | |
| <div class="reel-overlay"> | |
| <span><i class="fas fa-heart"></i> 5.2K</span> | |
| <span><i class="fas fa-comment"></i> 123</span> | |
| </div> | |
| </div> | |
| <div class="reel"> | |
| <img src="https://images.unsplash.com/photo-1552374196-c4e7ffc6e126?w=300" alt="Reel"> | |
| <div class="reel-overlay"> | |
| <span><i class="fas fa-heart"></i> 3.8K</span> | |
| <span><i class="fas fa-comment"></i> 89</span> | |
| </div> | |
| </div> | |
| <div class="reel"> | |
| <img src="https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?w=300" alt="Reel"> | |
| <div class="reel-overlay"> | |
| <span><i class="fas fa-heart"></i> 7.1K</span> | |
| <span><i class="fas fa-comment"></i> 201</span> | |
| </div> | |
| </div> | |
| <div class="reel"> | |
| <img src="https://images.unsplash.com/photo-1485968579580-b6d095142e6e?w=300" alt="Reel"> | |
| <div class="reel-overlay"> | |
| <span><i class="fas fa-heart"></i> 2.4K</span> | |
| <span><i class="fas fa-comment"></i> 67</span> | |
| </div> | |
| </div> | |
| <div class="reel"> | |
| <img src="https://images.unsplash.com/photo-1523381210434-271e8be1f52b?w=300" alt="Reel"> | |
| <div class="reel-overlay"> | |
| <span><i class="fas fa-heart"></i> 4.9K</span> | |
| <span><i class="fas fa-comment"></i> 156</span> | |
| </div> | |
| </div> | |
| <div class="reel"> | |
| <img src="https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?w=300" alt="Reel"> | |
| <div class="reel-overlay"> | |
| <span><i class="fas fa-heart"></i> 6.3K</span> | |
| <span><i class="fas fa-comment"></i> 189</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tags --> | |
| <div class="tab-content" id="tags"> | |
| <div class="posts-grid"> | |
| <div class="post"> | |
| <img src="https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=400" alt="Post"> | |
| <div class="post-overlay"> | |
| <span><i class="fas fa-heart"></i> 980</span> | |
| <span><i class="fas fa-comment"></i> 34</span> | |
| </div> | |
| </div> | |
| <div class="post"> | |
| <img src="https://images.unsplash.com/photo-1512436991641-6745cdb1723f?w=400" alt="Post"> | |
| <div class="post-overlay"> | |
| <span><i class="fas fa-heart"></i> 1.1K</span> | |
| <span><i class="fas fa-comment"></i> 42</span> | |
| </div> | |
| </div> | |
| <div class="post"> | |
| <img src="https://images.unsplash.com/photo-1475180098004-ca77a66827be?w=400" alt="Post"> | |
| <div class="post-overlay"> | |
| <span><i class="fas fa-heart"></i> 760</span> | |
| <span><i class="fas fa-comment"></i> 28</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Built with anycoder --> | |
| <div style="text-align: center; padding: 30px; color: #8e8e8e; font-size: 13px;"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: #8e8e8e; text-decoration: none;"> | |
| Built with <strong>anycoder</strong> | |
| </a> | |
| </div> | |
| <script> | |
| // Settings Menu Toggle | |
| const settingsBtn = document.getElementById('settingsBtn'); | |
| const settingsMenu = document.getElementById('settingsMenu'); | |
| const overlay = document.getElementById('overlay'); | |
| settingsBtn.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| settingsMenu.classList.toggle('active'); | |
| overlay.classList.toggle('active'); | |
| }); | |
| overlay.addEventListener('click', () => { | |
| settingsMenu.classList.remove('active'); | |
| overlay.classList.remove('active'); | |
| }); | |
| // Tab Switching | |
| const tabs = document.querySelectorAll('.tab'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| // Remove active class from all tabs and contents | |
| tabs.forEach(t => t.classList.remove('active')); | |
| tabContents.forEach(c => c.classList.remove('active')); | |
| // Add active class to clicked tab | |
| tab.classList.add('active'); | |
| // Show corresponding content | |
| const tabId = tab.getAttribute('data-tab'); | |
| document.getElementById(tabId).classList.add('active'); | |
| }); | |
| }); | |
| // Close menu when clicking outside | |
| document.addEventListener('click', (e) => { | |
| if (!settingsMenu.contains(e.target) && e.target !== settingsBtn) { | |
| settingsMenu.classList.remove('active'); | |
| overlay.classList.remove('active'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |