Spaces:
Running
Running
| <html dir="rtl" lang="fa-IR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>پیشنمایش ویو، قالب آنلاین شاپ بلاگر اینستاگرام | راست چین</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| :root { | |
| --bg: #0a0a0f; | |
| --bg-secondary: #12121a; | |
| --fg: #f0f0f5; | |
| --muted: #6b6b80; | |
| --accent: #00d4aa; | |
| --accent-glow: rgba(0, 212, 170, 0.3); | |
| --card: #1a1a25; | |
| --border: #2a2a3a; | |
| --danger: #ff4757; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Vazirmatn', system-ui, sans-serif; | |
| background: var(--bg); | |
| color: var(--fg); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* Background Pattern */ | |
| .bg-pattern { | |
| position: fixed; | |
| inset: 0; | |
| background: | |
| radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 212, 170, 0.15), transparent), | |
| radial-gradient(ellipse 60% 40% at 100% 100%, rgba(99, 102, 241, 0.1), transparent), | |
| linear-gradient(180deg, var(--bg) 0%, var(--bg-secondary) 100%); | |
| z-index: -1; | |
| } | |
| .bg-grid { | |
| position: fixed; | |
| inset: 0; | |
| background-image: | |
| linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); | |
| background-size: 60px 60px; | |
| z-index: -1; | |
| } | |
| /* Top Bar */ | |
| .top-bar { | |
| position: fixed; | |
| top: 0; | |
| right: 0; | |
| left: 0; | |
| z-index: 100; | |
| background: rgba(10, 10, 15, 0.85); | |
| backdrop-filter: blur(20px); | |
| border-bottom: 1px solid var(--border); | |
| transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .top-bar.hidden { | |
| transform: translateY(-100%); | |
| } | |
| .top-bar-inner { | |
| display: grid; | |
| grid-template-columns: auto 1fr auto auto auto; | |
| align-items: center; | |
| gap: 1.5rem; | |
| padding: 0.75rem 1.5rem; | |
| max-width: 1800px; | |
| margin: 0 auto; | |
| } | |
| @media (max-width: 1024px) { | |
| .top-bar-inner { | |
| grid-template-columns: auto 1fr auto; | |
| gap: 1rem; | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| .top-bar-inner { | |
| grid-template-columns: 1fr auto; | |
| padding: 0.5rem 1rem; | |
| } | |
| } | |
| /* Logo */ | |
| .logo-col { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .logo { | |
| height: 36px; | |
| width: auto; | |
| transition: transform 0.3s ease; | |
| } | |
| .logo:hover { | |
| transform: scale(1.05); | |
| } | |
| .logo-icon { | |
| width: 40px; | |
| height: 40px; | |
| background: linear-gradient(135deg, var(--accent), #00a080); | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 4px 15px var(--accent-glow); | |
| } | |
| .logo-text { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| background: linear-gradient(135deg, var(--fg), var(--accent)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* Title */ | |
| .title-col { | |
| text-align: center; | |
| } | |
| @media (max-width: 640px) { | |
| .title-col { | |
| grid-column: 1 / -1; | |
| order: 3; | |
| } | |
| } | |
| .title { | |
| font-size: clamp(0.85rem, 2vw, 1.1rem); | |
| font-weight: 600; | |
| color: var(--fg); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .title span { | |
| color: var(--accent); | |
| } | |
| /* Devices */ | |
| .devices-col { | |
| display: flex; | |
| align-items: center; | |
| } | |
| @media (max-width: 1024px) { | |
| .devices-col { | |
| display: none; | |
| } | |
| } | |
| .devices { | |
| display: flex; | |
| gap: 0.5rem; | |
| background: var(--card); | |
| padding: 0.35rem; | |
| border-radius: 12px; | |
| border: 1px solid var(--border); | |
| } | |
| .device-btn { | |
| width: 40px; | |
| height: 40px; | |
| border: none; | |
| background: transparent; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--muted); | |
| transition: all 0.25s ease; | |
| } | |
| .device-btn:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| color: var(--fg); | |
| } | |
| .device-btn.active { | |
| background: var(--accent); | |
| color: var(--bg); | |
| box-shadow: 0 2px 10px var(--accent-glow); | |
| } | |
| .device-btn svg { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| /* Buy Button */ | |
| .btn-col { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .buy-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.6rem 1.25rem; | |
| background: linear-gradient(135deg, var(--accent), #00a080); | |
| color: var(--bg); | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| border: none; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 20px var(--accent-glow); | |
| } | |
| .buy-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 30px var(--accent-glow); | |
| } | |
| .buy-btn:active { | |
| transform: translateY(0); | |
| } | |
| .buy-btn svg { | |
| width: 18px; | |
| height: 18px; | |
| } | |
| /* Close Button */ | |
| .close-col { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .close-btn { | |
| width: 40px; | |
| height: 40px; | |
| border: 1px solid var(--border); | |
| background: var(--card); | |
| border-radius: 10px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--muted); | |
| transition: all 0.25s ease; | |
| text-decoration: none; | |
| } | |
| .close-btn:hover { | |
| background: var(--danger); | |
| border-color: var(--danger); | |
| color: white; | |
| } | |
| .close-btn svg { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| /* Show Top Bar Toggle */ | |
| .show-top-bar { | |
| position: fixed; | |
| top: 1rem; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(-100px); | |
| z-index: 99; | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: 50px; | |
| padding: 0.5rem 1rem; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| color: var(--fg); | |
| font-size: 0.85rem; | |
| transition: all 0.3s ease; | |
| opacity: 0; | |
| } | |
| .show-top-bar.visible { | |
| transform: translateX(-50%) translateY(0); | |
| opacity: 1; | |
| } | |
| .show-top-bar:hover { | |
| background: var(--accent); | |
| color: var(--bg); | |
| } | |
| .show-top-bar svg { | |
| width: 16px; | |
| height: 16px; | |
| transition: transform 0.3s ease; | |
| } | |
| /* Preview Container */ | |
| .preview-container { | |
| padding-top: 70px; | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: center; | |
| padding-bottom: 2rem; | |
| } | |
| .preview-wrapper { | |
| width: 100%; | |
| max-width: 1400px; | |
| margin: 1rem; | |
| border-radius: 20px; | |
| overflow: hidden; | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| box-shadow: | |
| 0 25px 50px -12px rgba(0, 0, 0, 0.5), | |
| 0 0 0 1px rgba(255, 255, 255, 0.05); | |
| transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| } | |
| .preview-wrapper::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: 20px; | |
| padding: 1px; | |
| background: linear-gradient(135deg, rgba(0, 212, 170, 0.3), transparent, rgba(99, 102, 241, 0.2)); | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| pointer-events: none; | |
| } | |
| /* Device Frames */ | |
| .preview-wrapper.mobile { | |
| max-width: 375px; | |
| border-radius: 40px; | |
| padding: 12px; | |
| background: linear-gradient(145deg, #2a2a3a, #1a1a25); | |
| } | |
| .preview-wrapper.mobile::before { | |
| border-radius: 40px; | |
| } | |
| .preview-wrapper.mobile .preview-frame { | |
| border-radius: 30px; | |
| } | |
| .preview-wrapper.tablet { | |
| max-width: 768px; | |
| border-radius: 30px; | |
| padding: 10px; | |
| } | |
| .preview-wrapper.tablet::before { | |
| border-radius: 30px; | |
| } | |
| .preview-wrapper.tablet .preview-frame { | |
| border-radius: 22px; | |
| } | |
| .preview-wrapper.laptop { | |
| max-width: 1200px; | |
| border-radius: 20px; | |
| padding: 8px; | |
| } | |
| .preview-wrapper.desktop { | |
| max-width: 1400px; | |
| } | |
| /* Device Notch */ | |
| .device-notch { | |
| display: none; | |
| height: 28px; | |
| background: var(--bg); | |
| border-radius: 0 0 16px 16px; | |
| margin: 0 auto; | |
| width: 120px; | |
| position: relative; | |
| } | |
| .device-notch::before { | |
| content: ''; | |
| position: absolute; | |
| top: 8px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 8px; | |
| height: 8px; | |
| background: var(--card); | |
| border-radius: 50%; | |
| } | |
| .preview-wrapper.mobile .device-notch, | |
| .preview-wrapper.tablet .device-notch { | |
| display: block; | |
| } | |
| /* Preview Frame */ | |
| .preview-frame { | |
| width: 100%; | |
| height: 80vh; | |
| min-height: 500px; | |
| border: none; | |
| background: white; | |
| display: block; | |
| } | |
| /* Loading State */ | |
| .loading-overlay { | |
| position: absolute; | |
| inset: 0; | |
| background: var(--card); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 1.5rem; | |
| z-index: 10; | |
| transition: opacity 0.5s ease; | |
| } | |
| .loading-overlay.hidden { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .loader { | |
| width: 50px; | |
| height: 50px; | |
| border: 3px solid var(--border); | |
| border-top-color: var(--accent); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .loading-text { | |
| color: var(--muted); | |
| font-size: 0.9rem; | |
| } | |
| /* Floating Actions */ | |
| .floating-actions { | |
| position: fixed; | |
| bottom: 2rem; | |
| left: 2rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| z-index: 50; | |
| } | |
| @media (max-width: 640px) { | |
| .floating-actions { | |
| bottom: 1rem; | |
| left: 1rem; | |
| } | |
| } | |
| .fab { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 14px; | |
| border: 1px solid var(--border); | |
| background: var(--card); | |
| color: var(--fg); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s ease; | |
| backdrop-filter: blur(10px); | |
| } | |
| .fab:hover { | |
| background: var(--accent); | |
| color: var(--bg); | |
| border-color: var(--accent); | |
| transform: scale(1.1); | |
| } | |
| .fab svg { | |
| width: 22px; | |
| height: 22px; | |
| } | |
| /* Device Switcher Mobile */ | |
| .mobile-device-switcher { | |
| display: none; | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| z-index: 50; | |
| } | |
| @media (max-width: 1024px) { | |
| .mobile-device-switcher { | |
| display: block; | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| .mobile-device-switcher { | |
| bottom: 1rem; | |
| right: 1rem; | |
| } | |
| } | |
| .device-menu { | |
| position: absolute; | |
| bottom: 60px; | |
| left: 0; | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 0.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.25rem; | |
| opacity: 0; | |
| transform: translateY(10px); | |
| pointer-events: none; | |
| transition: all 0.3s ease; | |
| } | |
| .device-menu.open { | |
| opacity: 1; | |
| transform: translateY(0); | |
| pointer-events: auto; | |
| } | |
| .device-menu button { | |
| padding: 0.75rem 1rem; | |
| background: transparent; | |
| border: none; | |
| color: var(--muted); | |
| font-family: inherit; | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| white-space: nowrap; | |
| transition: all 0.2s ease; | |
| } | |
| .device-menu button:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| color: var(--fg); | |
| } | |
| .device-menu button.active { | |
| background: var(--accent); | |
| color: var(--bg); | |
| } | |
| .device-menu button svg { | |
| width: 18px; | |
| height: 18px; | |
| } | |
| /* Built with link */ | |
| .built-with { | |
| position: fixed; | |
| bottom: 1rem; | |
| right: 1rem; | |
| font-size: 0.75rem; | |
| color: var(--muted); | |
| z-index: 50; | |
| opacity: 0.6; | |
| transition: opacity 0.3s ease; | |
| } | |
| .built-with:hover { | |
| opacity: 1; | |
| } | |
| .built-with a { | |
| color: var(--accent); | |
| text-decoration: none; | |
| } | |
| /* Animations */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .animate-in { | |
| animation: fadeInUp 0.6s ease forwards; | |
| } | |
| /* Reduced Motion */ | |
| @media (prefers-reduced-motion: reduce) { | |
| *, | |
| *::before, | |
| *::after { | |
| animation-duration: 0.01ms ; | |
| animation-iteration-count: 1 ; | |
| transition-duration: 0.01ms ; | |
| } | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--bg); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--border); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--muted); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="bg-pattern"></div> | |
| <div class="bg-grid"></div> | |
| <!-- Top Bar --> | |
| <header class="top-bar" id="topBar"> | |
| <div class="top-bar-inner"> | |
| <div class="logo-col"> | |
| <a href="https://www.rtl-theme.com" class="flex items-center gap-3"> | |
| <div class="logo-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" width="22" height="22"> | |
| <path d="M12 2L2 7l10 5 10-5-10-5z"/> | |
| <path d="M2 17l10 5 10-5"/> | |
| <path d="M2 12l10 5 10-5"/> | |
| </svg> | |
| </div> | |
| <span class="logo-text">راست چین</span> | |
| </a> | |
| </div> | |
| <div class="title-col"> | |
| <h1 class="title">پیش نمایش : <span>ویو</span>، قالب آنلاین شاپ بلاگر اینستاگرام</h1> | |
| </div> | |
| <div class="devices-col"> | |
| <div class="devices"> | |
| <button class="device-btn" data-device="mobile" title="موبایل"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="5" y="2" width="14" height="20" rx="2" ry="2"/> | |
| <line x1="12" y1="18" x2="12" y2="18"/> | |
| </svg> | |
| </button> | |
| <button class="device-btn" data-device="tablet" title="تبلت"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="4" y="2" width="16" height="20" rx="2" ry="2"/> | |
| <line x1="12" y1="18" x2="12" y2="18"/> | |
| </svg> | |
| </button> | |
| <button class="device-btn active" data-device="laptop" title="لپتاپ"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/> | |
| <line x1="2" y1="20" x2="22" y2="20"/> | |
| </svg> | |
| </button> | |
| <button class="device-btn" data-device="desktop" title="دسکتاپ"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/> | |
| <line x1="8" y1="21" x2="16" y2="21"/> | |
| <line x1="12" y1="17" x2="12" y2="21"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="btn-col"> | |
| <a href="https://www.rtl-theme.com/view-wordpress-theme/" class="buy-btn"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> | |
| <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/> | |
| <line x1="3" y1="6" x2="21" y2="6"/> | |
| <path d="M16 10a4 4 0 0 1-8 0"/> | |
| </svg> | |
| خرید و دانلود | |
| </a> | |
| </div> | |
| <div class="close-col"> | |
| <a href="https://demo.code-snippet.ir/view" class="close-btn" title="بستن"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> | |
| <line x1="18" y1="6" x2="6" y2="18"/> | |
| <line x1="6" y1="6" x2="18" y2="18"/> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Show Top Bar Toggle --> | |
| <button class="show-top-bar" id="showTopBar"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> | |
| <polyline points="18 15 12 9 6 15"/> | |
| </svg> | |
| نمایش نوار بالا | |
| </button> | |
| <!-- Preview Container --> | |
| <main class="preview-container"> | |
| <div class="preview-wrapper laptop" id="previewWrapper"> | |
| <div class="device-notch"></div> | |
| <div class="loading-overlay" id="loadingOverlay"> | |
| <div class="loader"></div> | |
| <p class="loading-text">در حال بارگذاری پیشنمایش...</p> | |
| </div> | |
| <iframe | |
| src="https://demo.code-snippet.ir/view" | |
| class="preview-frame" | |
| id="previewFrame" | |
| loading="lazy" | |
| allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture" | |
| ></iframe> | |
| </div> | |
| </main> | |
| <!-- Floating Actions --> | |
| <div class="floating-actions"> | |
| <button class="fab" id="refreshBtn" title="بازنشانی"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> | |
| <polyline points="23 4 23 10 17 10"/> | |
| <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/> | |
| </svg> | |
| </button> | |
| <button class="fab" id="fullscreenBtn" title="تمام صفحه"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> | |
| <polyline points="15 3 21 3 21 9"/> | |
| <polyline points="9 21 3 21 3 15"/> | |
| <line x1="21" y1="3" x2="14" y2="10"/> | |
| <line x1="3" y1="21" x2="10" y2="14"/> | |
| </svg> | |
| </button> | |
| </div> | |
| <!-- Mobile Device Switcher --> | |
| <div class="mobile-device-switcher"> | |
| <div class="device-menu" id="deviceMenu"> | |
| <button data-device="mobile"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="5" y="2" width="14" height="20" rx="2" ry="2"/> | |
| </svg> | |
| موبایل | |
| </button> | |
| <button data-device="tablet"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="4" y="2" width="16" height="20" rx="2" ry="2"/> | |
| </svg> | |
| تبلت | |
| </button> | |
| <button data-device="laptop" class="active"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/> | |
| <line x1="2" y1="20" x2="22" y2="20"/> | |
| </svg> | |
| لپتاپ | |
| </button> | |
| <button data-device="desktop"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/> | |
| <line x1="8" y1="21" x2="16" y2="21"/> | |
| <line x1="12" y1="17" x2="12" y2="21"/> | |
| </svg> | |
| دسکتاپ | |
| </button> | |
| </div> | |
| <button class="fab" id="deviceMenuBtn"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> | |
| <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/> | |
| <line x1="8" y1="21" x2="16" y2="21"/> | |
| <line x1="12" y1="17" x2="12" y2="21"/> | |
| </svg> | |
| </button> | |
| </div> | |
| <!-- Built with --> | |
| <div class="built-with"> | |
| Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener">anycoder</a> | |
| </div> | |
| <script> | |
| // Initialize variables first | |
| const topBar = document.getElementById('topBar'); | |
| const showTopBarBtn = document.getElementById('showTopBar'); | |
| const previewWrapper = document.getElementById('previewWrapper'); | |
| const previewFrame = document.getElementById('previewFrame'); | |
| const loadingOverlay = document.getElementById('loadingOverlay'); | |
| const deviceBtns = document.querySelectorAll('.device-btn'); | |
| const deviceMenuBtns = document.querySelectorAll('.device-menu button'); | |
| const deviceMenu = document.getElementById('deviceMenu'); | |
| const deviceMenuBtn = document.getElementById('deviceMenuBtn'); | |
| const refreshBtn = document.getElementById('refreshBtn'); | |
| const fullscreenBtn = document.getElementById('fullscreenBtn'); | |
| let lastScrollY = 0; | |
| let isTopBarHidden = false; | |
| // Hide loading when iframe loads | |
| previewFrame.addEventListener('load', () => { | |
| setTimeout(() => { | |
| loadingOverlay.classList.add('hidden'); | |
| }, 500); | |
| }); | |
| // Scroll behavior for top bar | |
| window.addEventListener('scroll', () => { | |
| const currentScrollY = window.scrollY; | |
| if (currentScrollY > lastScrollY && currentScrollY > 100) { | |
| if (!isTopBarHidden) { | |
| topBar.classList.add('hidden'); | |
| showTopBarBtn.classList.add('visible'); | |
| isTopBarHidden = true; | |
| } | |
| } else if (currentScrollY < lastScrollY) { | |
| if (isTopBarHidden) { | |
| topBar.classList.remove('hidden'); | |
| showTopBarBtn.classList.remove('visible'); | |
| isTopBarHidden = false; | |
| } | |
| } | |
| lastScrollY = currentScrollY; | |
| }); | |
| // Show top bar button | |
| showTopBarBtn.addEventListener('click', () => { | |
| topBar.classList.remove('hidden'); | |
| showTopBarBtn.classList.remove('visible'); | |
| isTopBarHidden = false; | |
| }); | |
| // Device switching | |
| function setDevice(device) { | |
| // Update preview wrapper | |
| previewWrapper.className = 'preview-wrapper ' + device; | |
| // Update desktop device buttons | |
| deviceBtns.forEach(btn => { | |
| btn.classList.toggle('active', btn.dataset.device === device); | |
| }); | |
| // Update mobile device menu buttons | |
| deviceMenuBtns.forEach(btn => { | |
| btn.classList.toggle('active', btn.dataset.device === device); | |
| }); | |
| // Close mobile menu | |
| deviceMenu.classList.remove('open'); | |
| } | |
| deviceBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| setDevice(btn.dataset.device); | |
| }); | |
| }); | |
| deviceMenuBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| setDevice(btn.dataset.device); | |
| }); | |
| }); | |
| // Mobile device menu toggle | |
| deviceMenuBtn.addEventListener('click', () => { | |
| deviceMenu.classList.toggle('open'); | |
| }); | |
| // Close menu when clicking outside | |
| document.addEventListener('click', (e) => { | |
| if (!e.target.closest('.mobile-device-switcher')) { | |
| deviceMenu.classList.remove('open'); | |
| } | |
| }); | |
| // Refresh iframe | |
| refreshBtn.addEventListener('click', () => { | |
| loadingOverlay.classList.remove('hidden'); | |
| previewFrame.src = previewFrame.src; | |
| }); | |
| // Fullscreen | |
| fullscreenBtn.addEventListener('click', () => { | |
| if (document.fullscreenElement) { | |
| document.exitFullscreen(); | |
| } else if (previewWrapper.requestFullscreen) { | |
| previewWrapper.requestFullscreen(); | |
| } | |
| }); | |
| // Keyboard shortcuts | |
| document.addEventListener('keydown', (e) => { | |
| // Escape to show top bar | |
| if (e.key === 'Escape' && isTopBarHidden) { | |
| topBar.classList.remove('hidden'); | |
| showTopBarBtn.classList.remove('visible'); | |
| isTopBarHidden = false; | |
| } | |
| // Number keys for device switching | |
| if (e.key >= '1' && e.key <= '4') { | |
| const devices = ['mobile', 'tablet', 'laptop', 'desktop']; | |
| setDevice devices[parseInt(e.key) - 1]); | |
| } | |
| // R for refresh | |
| if (e.key === 'r' && !e.ctrlKey && !e.metaKey) { | |
| loadingOverlay.classList.remove('hidden'); | |
| previewFrame.src = previewFrame.src; | |
| } | |
| }); | |
| // Initial animation | |
| document.addEventListener('DOMContentLoaded', () => { | |
| document.body.style.opacity = '0'; | |
| requestAnimationFrame(() => { | |
| document.body.style.transition = 'opacity 0.5s ease'; | |
| document.body.style.opacity = '1'; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |