peterdr4in/hyperliquid-vision-tracker
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>HyperSpy Official | Hyperliquid Extension Tracker</title>7 <link rel="icon" type="image/png" href="https://huggingface.co/spaces/peterdr4in/hyperliquid-vision-tracker/resolve/main/images/ChatGPT%20Image%20Nov%2019,%202025,%2003_16_04%20PM.png">8<script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <link rel="stylesheet" href="style.css">12 <script>13 tailwind.config = {14 theme: {15 extend: {16 colors: {17 aquamarine: '#97FCE4',18 firefly: '#0F3933',19 ebony: '#04060C',20 foam: '#F5FEFD',21 }22 }23 }24 }25 </script>26</head>27<body class="min-h-screen flex flex-col items-center justify-center p-4 relative">28<div class="absolute top-4 right-4 flex items-center gap-2 bg-firefly px-3 py-1 rounded-full border border-aquamarine border-opacity-30">29 <div class="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>30 <span class="text-xs text-foam font-medium">BETA ACCESS</span>31</div>32<main class="max-w-2xl w-full text-center">33 <div class="mb-12">34 <h1 class="text-4xl md:text-6xl font-bold text-aquamarine mb-4 animate-pulse">HyperSpy</h1>35 <p class="text-foam text-xl md:text-2xl opacity-90">The First Ever Bookmark Extension Tracker for Hyperliquid</p>36 </div>37 38 <div class="relative group">39 <div class="absolute -inset-1 bg-aquamarine rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-200"></div>40 <button class="relative bg-firefly text-foam px-8 py-4 rounded-lg font-bold text-xl md:text-2xl hover:bg-opacity-90 transition duration-200 mx-auto flex items-center justify-center gap-2">41 <i data-feather="bookmark" class="w-5 h-5"></i>42 Drag to Bookmarks43 </button>44</div>45 <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-6 max-w-3xl mx-auto">46 <p class="col-span-full text-center text-foam text-opacity-50 italic text-sm mt-2">Powered by HyperEVM</p>47<div class="bg-firefly bg-opacity-40 p-6 rounded-xl border border-aquamarine border-opacity-20">48 <i data-feather="eye" class="text-aquamarine w-10 h-10 mb-4 mx-auto"></i>49 <h3 class="text-foam text-lg font-semibold mb-2">Smart Money Tracking</h3>50 <p class="text-foam text-opacity-80">Follow top traders in the world</p>51 </div>52 <div class="bg-firefly bg-opacity-40 p-6 rounded-xl border border-aquamarine border-opacity-20">53 <i data-feather="trending-up" class="text-aquamarine w-10 h-10 mb-4 mx-auto"></i>54 <h3 class="text-foam text-lg font-semibold mb-2">Insider Alerts</h3>55 <p class="text-foam text-opacity-80">Get notified about suspicious wallet movements</p>56 </div>57 <div class="bg-firefly bg-opacity-40 p-6 rounded-xl border border-aquamarine border-opacity-20">58 <i data-feather="zap" class="text-aquamarine w-10 h-10 mb-4 mx-auto"></i>59 <h3 class="text-foam text-lg font-semibold mb-2">HyperLiquid Native</h3>60 <p class="text-foam text-opacity-80">First ever extension for Hyperliquid traders</p>61 </div>62 </div>63 </main>64 <div class="max-w-4xl mx-auto px-4 py-16">65 <h2 class="text-3xl font-bold text-aquamarine mb-8 text-center">How It Works?</h2>66<div class="grid grid-cols-1 md:grid-cols-3 gap-8">67 <div class="bg-firefly bg-opacity-40 p-6 rounded-xl border border-aquamarine border-opacity-20">68 <div class="text-aquamarine text-2xl font-bold mb-3">1</div>69 <h3 class="text-foam text-lg font-semibold mb-2">Install the Extension</h3>70 <p class="text-foam text-opacity-80">Simply drag our button to your bookmarks bar.No downloads no wallet connects!</p>71 </div>72 <div class="bg-firefly bg-opacity-40 p-6 rounded-xl border border-aquamarine border-opacity-20">73 <div class="text-aquamarine text-2xl font-bold mb-3">2</div>74 <h3 class="text-foam text-lg font-semibold mb-2">Visit Hyperliquid</h3>75 <p class="text-foam text-opacity-80">Navigate to Hyperliquid's trading interface as you normally would.</p>76 </div>77 <div class="bg-firefly bg-opacity-40 p-6 rounded-xl border border-aquamarine border-opacity-20">78 <div class="text-aquamarine text-2xl font-bold mb-3">3</div>79 <h3 class="text-foam text-lg font-semibold mb-2">Activate HyperSpy</h3>80 <p class="text-foam text-opacity-80">Click the bookmarklet to overlay real-time wallet tracking on Hyperliquid's interface.</p>81 </div>82 </div>83 </div>84 85 <div class="max-w-2xl mx-auto text-center py-12 px-4">86 <div class="bg-firefly bg-opacity-20 border border-aquamarine border-opacity-30 rounded-xl p-8 relative overflow-hidden">87 <div class="absolute -inset-1 bg-aquamarine opacity-10 blur-lg"></div>88 <h3 class="text-2xl font-bold text-aquamarine mb-4"> Exclusive BETA ACCESS Perk!</h3>89 <p class="text-xl text-foam font-medium">90 All <span class="text-aquamarine font-bold">beta access</span> users will receive the 91 <span class="text-aquamarine font-bold">$SPY</span> airdrop in the future!92 </p>93 <p class="text-foam text-opacity-80 mt-4">94 Your early adoption won't go unrewarded. Stay tuned for our token launch!95 </p>96 </div>97 </div>98 99 <footer class="mt-20 text-foam text-opacity-60 text-sm text-center">100<p>© 2025 HyperSpy. All rights reserved.</p>101 <p class="mt-2">BETA ACCESS CLOSING <span class="font-bold">SOON</span></p>102</footer>103<script>104 feather.replace();105 </script>106</body>107</html>