Lunamakingapps/cryptoglass-snapshot-wizard
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>Mini Program Preview</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <style>10 .preview-bg {11 background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);12 }13 .data-card {14 backdrop-filter: blur(10px);15 background-color: rgba(255, 255, 255, 0.1);16 transition: all 0.3s ease;17 }18 .data-card:hover {19 transform: translateY(-2px);20 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);21 }22 </style>23</head>24<body class="min-h-screen preview-bg text-white">25 <div class="container mx-auto px-4 py-8">26 <header class="text-center mb-8">27 <h1 class="text-3xl font-bold mb-2">Crypto Market Snapshot</h1>28 <p class="text-lg opacity-80">Real-time market indicators and ratios</p>29 <div class="mt-4">30 <i data-feather="activity" class="w-10 h-10 mx-auto"></i>31 </div>32 </header>33 34 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">35 <!-- Market Overview -->36 <div class="data-card rounded-xl p-5 border border-white border-opacity-20">37 <h2 class="text-xl font-semibold mb-4 flex items-center">38 <i data-feather="trending-up" class="mr-2"></i> Market Overview39 </h2>40 <div class="space-y-3">41 <div class="flex justify-between py-2 border-b border-white border-opacity-10">42 <span>24h Volume:</span>43 <span class="font-mono">$42.5B</span>44 </div>45 <div class="flex justify-between py-2 border-b border-white border-opacity-10">46 <span>Full Network Liquidation:</span>47 <span class="font-mono text-red-400">$124.8M</span>48 </div>49 <div class="flex justify-between py-2">50 <span>Fear & Greed Index:</span>51 <span class="font-mono text-yellow-400">56 (Neutral)</span>52 </div>53 </div>54 </div>55 56 <!-- Contract Holdings -->57 <div class="data-card rounded-xl p-5 border border-white border-opacity-20">58 <h2 class="text-xl font-semibold mb-4 flex items-center">59 <i data-feather="dollar-sign" class="mr-2"></i> Contract Holdings60 </h2>61 <div class="space-y-3">62 <div class="flex justify-between py-2 border-b border-white border-opacity-10">63 <span>Total Contract Holdings:</span>64 <span class="font-mono">1.24M BTC</span>65 </div>66 <div class="flex justify-between py-2">67 <span>Total Holdings Value:</span>68 <span class="font-mono">$53.2B</span>69 </div>70 </div>71 </div>72 73 <!-- Trading Volume -->74 <div class="data-card rounded-xl p-5 border border-white border-opacity-20">75 <h2 class="text-xl font-semibold mb-4 flex items-center">76 <i data-feather="bar-chart-2" class="mr-2"></i> Trading Volume77 </h2>78 <div class="space-y-3">79 <div class="flex justify-between py-2 border-b border-white border-opacity-10">80 <span>24h Trading Volume:</span>81 <span class="font-mono">892K BTC</span>82 </div>83 <div class="flex justify-between py-2">84 <span>24h Trading Value:</span>85 <span class="font-mono">$38.3B</span>86 </div>87 </div>88 </div>89 90 <!-- Binance BTC/USDT -->91 <div class="data-card rounded-xl p-5 border border-white border-opacity-20">92 <h2 class="text-xl font-semibold mb-4 flex items-center">93 <i data-feather="hash" class="mr-2"></i> Binance BTC/USDT94 </h2>95 <div class="space-y-3">96 <div class="flex justify-between py-2 border-b border-white border-opacity-10">97 <span>Number Ratio:</span>98 <span class="font-mono">1.24</span>99 </div>100 <div class="flex justify-between py-2 border-b border-white border-opacity-10">101 <span>Long/Short Ratio:</span>102 <span class="font-mono">1.08</span>103 </div>104 <div class="flex justify-between py-2">105 <span>Funding Rate:</span>106 <span class="font-mono text-blue-400">0.01%</span>107 </div>108 </div>109 </div>110 111 <!-- OKX BTC -->112 <div class="data-card rounded-xl p-5 border border-white border-opacity-20">113 <h2 class="text-xl font-semibold mb-4 flex items-center">114 <i data-feather="hash" class="mr-2"></i> OKX BTC115 </h2>116 <div class="space-y-3">117 <div class="flex justify-between py-2 border-b border-white border-opacity-10">118 <span>Buyers/Sellers Ratio:</span>119 <span class="font-mono">1.15</span>120 </div>121 <div class="flex justify-between py-2">122 <span>Long/Short Ratio:</span>123 <span class="font-mono">0.92</span>124 </div>125 </div>126 </div>127 128 <!-- USDT Perpetual -->129 <div class="data-card rounded-xl p-5 border border-white border-opacity-20">130 <h2 class="text-xl font-semibold mb-4 flex items-center">131 <i data-feather="percent" class="mr-2"></i> USDT Perpetual132 </h2>133 <div class="space-y-3">134 <div class="flex justify-between py-2">135 <span>Funding Fee Rate:</span>136 <span class="font-mono text-green-400">0.015%</span>137 </div>138 </div>139 </div>140 </div>141 142 <!-- Refresh Button -->143 <div class="mt-8 flex justify-center">144 <button class="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center">145 <i data-feather="refresh-cw" class="w-5 h-5 mr-2"></i>146 Refresh Data147 </button>148 </div>149 150 <!-- Last Updated -->151 <div class="mt-6 text-center text-sm opacity-75">152 Last updated: <span id="update-time">Just now</span>153 </div>154 </div>155 156 <script>157 feather.replace();158 159 // Update timestamp160 const now = new Date();161 document.getElementById('update-time').textContent = now.toLocaleString();162 163 // Button animation164 document.querySelector('button').addEventListener('click', function() {165 this.classList.add('transform', 'scale-95');166 setTimeout(() => {167 this.classList.remove('transform', 'scale-95');168 const now = new Date();169 document.getElementById('update-time').textContent = now.toLocaleString();170 }, 150);171 });172 </script>173</body>174</html>