| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Fragment</title> |
| <link rel="stylesheet" href="styles.css"> |
| <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| </head> |
| <body> |
| <div class="container"> |
| |
| <header class="header"> |
| <div class="logo-container"> |
| |
| <img src="https://files.catbox.moe/n7cdux.png" alt="Fragment" class="logo"> |
| </div> |
|
|
| <div class="search-container"> |
| <div class="search-input-wrapper"> |
| <div class="search-icon"> |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <path |
| d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" |
| stroke="currentColor" |
| stroke-width="2" |
| stroke-linecap="round" |
| stroke-linejoin="round" |
| /> |
| </svg> |
| </div> |
| <input |
| type="text" |
| placeholder="Search usernames" |
| class="search-input" |
| /> |
| </div> |
| </div> |
|
|
| <button class="menu-button" id="menuButton"> |
| |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <path |
| d="M3 12H21M3 6H21M3 18H21" |
| stroke="white" |
| stroke-width="2" |
| stroke-linecap="round" |
| stroke-linejoin="round" |
| /> |
| </svg> |
| </button> |
| </header> |
|
|
| |
| <main class="main-content"> |
| |
| <div class="username-header"> |
| <h1 class="username-title">imightbemilo.t.me</h1> |
| <span class="claimed-badge">Claimed</span> |
| </div> |
|
|
| |
| <div class="info-box"> |
| <h2 class="info-box-title">What is this?</h2> |
| <div class="info-box-content"> |
| <p class="info-text"> |
| Someone offered |
| |
| <span class="ton-symbol"> |
| <img src="https://files.catbox.moe/fkq9s6.png" alt="TON" class="ton-logo"> |
| </span> |
| 301.00 (~$893.97) for your username. If the price suits you, press "Accept the offer". |
| </p> |
| <a href="#" class="link">How does this work?</a> |
| </div> |
| </div> |
|
|
| |
| <div class="details-box"> |
| <div class="details-row"> |
| <div class="details-label">Telegram Username</div> |
| <a href="#" class="link">@imightbemilo</a> |
| </div> |
| <div class="details-row"> |
| <div class="details-label">Web Address</div> |
| <a href="#" class="link">t.me/imightbemilo</a> |
| </div> |
| <div class="details-row no-border"> |
| <div class="details-label">TON Web 3.0 Address</div> |
| <a href="#" class="link">imightbemilo.t.me</a> |
| </div> |
| </div> |
|
|
| |
| <div class="timer-container"> |
| <span class="timer-label">Ends in</span> |
| <div class="timer-box" id="days">0 days</div> |
| <span class="timer-separator">:</span> |
| <div class="timer-box" id="hours">0</div> |
| <span class="timer-separator">:</span> |
| <div class="timer-box" id="minutes">5</div> |
| <span class="timer-separator">:</span> |
| <div class="timer-box" id="seconds">23</div> |
| </div> |
|
|
| |
| <button class="accept-button">Accept the offer</button> |
|
|
| |
| <div class="subscribe-container"> |
| <a href="#" class="link">Subscribe to updates</a> |
| </div> |
|
|
| |
| <div class="history-container"> |
| <h2 class="history-title">Ownership History</h2> |
| <div class="history-box"> |
| <div class="history-header"> |
| <div class="history-cell">Sale price</div> |
| <div class="history-cell">Date</div> |
| <div class="history-cell">Buyer</div> |
| </div> |
| <div class="history-row"> |
| <div class="history-cell">Transferred</div> |
| <div class="history-cell"></div> |
| <div class="history-cell buyer">UQDIicMi7q... pcWGrDybj7Z</div> |
| </div> |
| <div class="history-row"> |
| <div class="history-cell">Transferred</div> |
| <div class="history-cell"></div> |
| <div class="history-cell buyer">UQCmQue... ermoTr_9hRFd</div> |
| </div> |
| <div class="history-row no-border"> |
| <div class="history-cell ton-price"> |
| <span class="ton-symbol-small"> |
| <img src="https://files.catbox.moe/fkq9s6.png" alt="TON" class="ton-logo-small"> |
| </span> |
| 510 |
| </div> |
| <div class="history-cell"></div> |
| <div class="history-cell buyer">UQAWd1F6_... fcLCnrDp71h8</div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="footer"> |
| <div class="footer-content"> |
| <a href="#" class="footer-link">Top Auctions</a> |
| <a href="#" class="footer-link">About</a> |
| <a href="#" class="footer-link">Terms</a> |
| <a href="#" class="footer-link">Privacy</a> |
| </div> |
| </footer> |
|
|
| |
| <div class="sidebar-overlay" id="sidebarOverlay"> |
| |
| <div class="overlay" id="overlay"> |
| <button class="close-button" id="closeButton"> |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M18 6L6 18M6 6L18 18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| </svg> |
| </button> |
| </div> |
|
|
| |
| <div class="sidebar"> |
| <div class="sidebar-header"> |
| <div class="sidebar-logo-container"> |
| <img src="https://files.catbox.moe/n7cdux.png" alt="Fragment" class="sidebar-logo"> |
| </div> |
| </div> |
|
|
| <div class="sidebar-content"> |
| <h3 class="sidebar-section-title">PLATFORM</h3> |
|
|
| <div class="sidebar-menu"> |
| <a href="#" class="sidebar-menu-item"> |
| <div class="sidebar-icon-container"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/> |
| <path d="M12 8V12M12 16V16.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> |
| </svg> |
| </div> |
| <span>About</span> |
| </a> |
|
|
| <a href="#" class="sidebar-menu-item"> |
| <div class="sidebar-icon-container"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| <path d="M14 2V8H20M16 13H8M16 17H8M10 9H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| </svg> |
| </div> |
| <span>Terms</span> |
| </a> |
|
|
| <a href="#" class="sidebar-menu-item"> |
| <div class="sidebar-icon-container"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| <path d="M12 16.5V16.51M12 7.5V12.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| </svg> |
| </div> |
| <span>Privacy Policy</span> |
| </a> |
| </div> |
|
|
| <div class="connect-container"> |
| <h3 class="connect-title">Connect TON and Telegram</h3> |
| <p class="connect-subtitle">to view your bids and assets</p> |
|
|
| <button class="connect-button ton-button"> |
| <div class="connect-icon-container"> |
| <img src="https://files.catbox.moe/24qe3k.png" alt="TON" class="connect-icon"> |
| </div> |
| Connect TON |
| </button> |
|
|
| <button class="connect-button telegram-button"> |
| |
| <svg |
| width="16" |
| height="16" |
| viewBox="0 0 24 24" |
| fill="none" |
| xmlns="http://www.w3.org/2000/svg" |
| class="connect-icon" |
| > |
| <circle cx="12" cy="12" r="10" fill="#2AABEE" /> |
| <path d="M17 8L12 13L9 11L7 17L17 8Z" fill="white" /> |
| </svg> |
| Connect Telegram |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script src="script.js"></script> |
| </body> |
| </html> |
|
|
