| | <!DOCTYPE html> |
| | <html lang="ko"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>HairPick</title> |
| | <style> |
| | * { |
| | margin: 0; |
| | padding: 0; |
| | box-sizing: border-box; |
| | } |
| | |
| | html, body { |
| | width: 100%; |
| | height: 100%; |
| | overflow: hidden; |
| | } |
| | |
| | .iframe-container { |
| | position: fixed; |
| | top: 0; |
| | left: 0; |
| | width: 100%; |
| | height: 100%; |
| | } |
| | |
| | iframe { |
| | width: 100%; |
| | height: 100%; |
| | border: none; |
| | } |
| | |
| | .loading { |
| | position: absolute; |
| | top: 50%; |
| | left: 50%; |
| | transform: translate(-50%, -50%); |
| | font-family: Arial, sans-serif; |
| | font-size: 18px; |
| | color: #666; |
| | display: none; |
| | } |
| | |
| | .iframe-container.loading-state .loading { |
| | display: block; |
| | } |
| | |
| | |
| | .badge { |
| | position: fixed; |
| | top: 12px; |
| | left: 50%; |
| | transform: translateX(-50%); |
| | z-index: 10000; |
| | filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)); |
| | } |
| | .badge img { display: block; height: 40px; } |
| | @media (max-width: 420px) { |
| | .badge img { height: 34px; } |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | |
| | <a class="badge" href="https://hairpick.me/en" target="_blank" rel="noopener noreferrer" aria-label="Open HairPick in new tab"> |
| | <img src="https://img.shields.io/static/v1?label=HAIR%20STYLE%20X%20100&message=HAIRPICK.ME&color=%230000ff&labelColor=%23800080&logo=huggingface&logoColor=white&style=for-the-badge" alt="badge"> |
| | </a> |
| |
|
| | <div class="iframe-container loading-state" id="container"> |
| | <div class="loading">Loading HairPick...</div> |
| | <iframe |
| | id="hairpick-frame" |
| | src="https://www.hairpick.me/en" |
| | title="HairPick" |
| | allowfullscreen |
| | loading="eager"> |
| | </iframe> |
| | </div> |
| | |
| | <script> |
| | document.getElementById('hairpick-frame').addEventListener('load', function() { |
| | document.getElementById('container').classList.remove('loading-state'); |
| | }); |
| | document.getElementById('hairpick-frame').addEventListener('error', function() { |
| | document.querySelector('.loading').textContent = 'Failed to load HairPick. Please check your connection.'; |
| | }); |
| | </script> |
| | </body> |
| | </html> |
| |
|
