Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FaceTime Mirror Mockup</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📸</text></svg>"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <style> | |
| :root { | |
| --ios-red: #ff3b30; | |
| --ios-gray: rgba(255,255,255,.2); | |
| --ios-dark-bg: #1a1a3a; | |
| --ios-dark-gradient-end: #3a1a1a; | |
| --ios-light-bg: #ffffff; | |
| --ios-light-text: #000000; | |
| --ios-light-border: #dddddd; | |
| --ios-light-caption-bg: #f0f0f0; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: linear-gradient(to bottom, var(--ios-dark-bg) 0%, var(--ios-dark-gradient-end) 100%); | |
| height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| overflow: hidden; | |
| } | |
| .phone-frame { | |
| width: 375px; | |
| height: 812px; | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 40px; | |
| box-shadow: 0 24px 48px rgba(0,0,0,.35); | |
| background: #000; | |
| } | |
| .screenshot-panel { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 220px; | |
| background: rgba(0,0,0,.85); | |
| backdrop-filter: blur(20px); | |
| border-top: 1px solid rgba(255,255,255,.1); | |
| padding: 16px; | |
| transform: translateY(100%); | |
| transition: transform .4s cubic-bezier(.4,0,.2,1); | |
| } | |
| .screenshot-panel.active { | |
| transform: translateY(0); | |
| } | |
| .screenshot-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 12px; | |
| height: 100%; | |
| } | |
| .screenshot-item { | |
| background: rgba(255,255,255,.1); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| cursor: pointer; | |
| transition: all .3s ease; | |
| position: relative; | |
| } | |
| .screenshot-item:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 8px 24px rgba(0,0,0,.4); | |
| } | |
| .screenshot-item img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .screenshot-item .overlay { | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(to top, rgba(0,0,0,.7), transparent 50%); | |
| opacity: 0; | |
| transition: opacity .3s ease; | |
| display: flex; | |
| align-items: flex-end; | |
| padding: 8px; | |
| } | |
| .screenshot-item:hover .overlay { | |
| opacity: 1; | |
| } | |
| .screenshot-item .timestamp { | |
| color: white; | |
| font-size: 10px; | |
| font-weight: 500; | |
| } | |
| .floating-btn { | |
| position: absolute; | |
| bottom: 90px; | |
| right: 24px; | |
| width: 56px; | |
| height: 56px; | |
| border-radius: 50%; | |
| background: rgba(255,255,255,.15); | |
| backdrop-filter: blur(10px); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all .3s ease; | |
| box-shadow: 0 4px 16px rgba(0,0,0,.3); | |
| } | |
| .floating-btn:hover { | |
| background: rgba(255 | |
| </head> | |
| </html> |