MediumFidelity/electriwidget-pulse
0
1<!DOCTYPE html>2<html lang="en" class="dark">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>ElectriWidget Pulse ⚡️ - Real-Time Energy Widgets</title>7 <meta name="description" content="Beautiful live widgets for tracking electricity prices across major utilities. Save money with real-time pricing insights.">8<link rel="stylesheet" href="style.css">9 <script src="https://cdn.tailwindcss.com"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://unpkg.com/feather-icons"></script>12 <script src="components/navbar.js"></script>13 <script src="components/footer.js"></script>14 <script src="components/price-card.js"></script>15</head>16<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-200">17 <custom-navbar></custom-navbar>18 19 <main class="container mx-auto px-4 py-12">20 <!-- Hero Section -->21 <section class="flex flex-col md:flex-row items-center justify-between mb-16 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-8 rounded-2xl shadow-2xl">22 <div class="md:w-1/2 mb-10 md:mb-0">23 <h1 class="text-4xl md:text-6xl font-bold mb-4 text-white">ElectriWidget Pulse</h1>24 <p class="text-xl md:text-2xl font-medium mb-6 text-white/90">Beautiful widgets. Real savings. ⚡️</p>25 <p class="text-lg mb-8 text-white/80">Glanceable electricity pricing widgets for your home screen. Track rates, set alerts, and save money effortlessly.</p>26<div class="flex flex-col sm:flex-row gap-4">27 <a href="#demo" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg transition duration-200 flex items-center justify-center gap-2">28 <i data-feather="zap"></i>29 Live Demo30 </a>31 <a href="https://apps.apple.com/app/idYOUR_APP_ID" class="bg-gray-800 hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition duration-200 flex items-center justify-center gap-2">32 <i data-feather="download"></i>33 Download App34 </a>35 </div>36 </div>37 <div class="md:w-1/2 relative">38 <div class="absolute -top-16 right-0 w-72 h-72 bg-pink-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>39 <div class="absolute -bottom-8 left-0 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>40 <div class="relative">41 <img src="http://static.photos/technology/640x360/42" alt="Widget showcase" class="rounded-2xl shadow-2xl w-full max-w-md mx-auto border-4 border-white/20">42 <div class="absolute -bottom-4 -right-4 bg-white dark:bg-gray-800 p-2 rounded-xl shadow-lg">43 <div class="flex items-center text-xs font-bold">44 <i data-feather="zap" class="w-4 h-4 mr-1 text-yellow-400"></i>45 LIVE DATA46 </div>47 </div>48 </div>49 </div>50</section>51 <!-- Widget Showcase -->52 <section class="mb-16">53 <h2 class="text-3xl font-bold mb-10 text-center">Widget Collection</h2>54 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">55 <div class="bg-gradient-to-br from-indigo-500 to-purple-600 p-6 rounded-2xl shadow-xl text-white">56 <div class="flex items-center justify-between mb-4">57 <i data-feather="clock" class="w-12 h-12"></i>58 <span class="bg-white/20 px-3 py-1 rounded-full text-xs font-bold">LIVE</span>59 </div>60 <h3 class="text-xl font-bold mb-2">Real-Time Pricing</h3>61 <p class="text-white/80">Glance at current rates from your home screen.</p>62 <div class="mt-4 p-3 bg-white/10 rounded-lg">63 <div class="text-sm font-mono">$0.08/kWh <span class="text-green-300">↓2%</span></div>64 </div>65 </div>66 <div class="bg-gradient-to-br from-pink-500 to-rose-500 p-6 rounded-2xl shadow-xl text-white">67 <div class="flex items-center justify-between mb-4">68 <i data-feather="alert-circle" class="w-12 h-12"></i>69 <span class="bg-white/20 px-3 py-1 rounded-full text-xs font-bold">ALERTS</span>70 </div>71 <h3 class="text-xl font-bold mb-2">Price Alerts</h3>72 <p class="text-white/80">Get notified when prices drop or spike.</p>73 <div class="mt-4 p-3 bg-white/10 rounded-lg">74 <div class="text-sm font-mono">🕒 Next peak: 4PM</div>75 </div>76 </div>77 <div class="bg-gradient-to-br from-amber-500 to-orange-500 p-6 rounded-2xl shadow-xl text-white">78 <div class="flex items-center justify-between mb-4">79 <i data-feather="bar-chart-2" class="w-12 h-12"></i>80 <span class="bg-white/20 px-3 py-1 rounded-full text-xs font-bold">TRENDS</span>81 </div>82 <h3 class="text-xl font-bold mb-2">Daily Trends</h3>83 <p class="text-white/80">See price patterns throughout the day.</p>84 <div class="mt-4 p-3 bg-white/10 rounded-lg">85 <div class="text-sm font-mono">📉 Low: $0.07 (3AM)</div>86 </div>87 </div>88 </div>89</section>90 <!-- Live Widget Demo -->91 <section id="demo" class="mb-16">92 <div class="flex flex-col md:flex-row items-center justify-between mb-8">93 <div>94 <h2 class="text-3xl font-bold">Live Widget Demo</h2>95 <p class="text-gray-600 dark:text-gray-400">Real data from supported utilities</p>96 </div>97 <div class="flex items-center space-x-2 bg-gray-100 dark:bg-gray-800 p-1 rounded-full">98 <button id="refresh-btn" class="px-4 py-2 rounded-full bg-white dark:bg-gray-700 shadow text-sm font-medium flex items-center">99 <i data-feather="refresh-cw" class="w-4 h-4 mr-2"></i>100 Refresh101 </button>102 <span class="text-xs text-gray-500 px-2">Updated: <span id="last-updated">Just now</span></span>103 </div>104 </div>105 106 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" id="prices-container">107 <!-- Price cards will be loaded here by JavaScript -->108 <div class="relative">109 <div class="animate-pulse bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700 h-40 rounded-2xl"></div>110 <div class="absolute inset-0 flex items-center justify-center">111 <div class="w-8 h-8 rounded-full border-4 border-gray-300 dark:border-gray-600 border-t-purple-500 animate-spin"></div>112 </div>113 </div>114 <div class="relative">115 <div class="animate-pulse bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700 h-40 rounded-2xl"></div>116 <div class="absolute inset-0 flex items-center justify-center">117 <div class="w-8 h-8 rounded-full border-4 border-gray-300 dark:border-gray-600 border-t-purple-500 animate-spin"></div>118 </div>119 </div>120 <div class="relative">121 <div class="animate-pulse bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700 h-40 rounded-2xl"></div>122 <div class="absolute inset-0 flex items-center justify-center">123 <div class="w-8 h-8 rounded-full border-4 border-gray-300 dark:border-gray-600 border-t-purple-500 animate-spin"></div>124 </div>125 </div>126 <div class="relative">127 <div class="animate-pulse bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700 h-40 rounded-2xl"></div>128 <div class="absolute inset-0 flex items-center justify-center">129 <div class="w-8 h-8 rounded-full border-4 border-gray-300 dark:border-gray-600 border-t-purple-500 animate-spin"></div>130 </div>131 </div>132 </div>133</section>134 <!-- Widget Gallery -->135 <section class="mb-16">136 <h2 class="text-3xl font-bold mb-8 text-center">Widget Gallery</h2>137 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">138 <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-xl">139 <div class="bg-gradient-to-br from-blue-500 to-indigo-600 p-4 rounded-xl text-white">140 <div class="flex justify-between items-center mb-2">141 <span class="text-xs font-bold">COMED</span>142 <span class="text-xs">LIVE</span>143 </div>144 <div class="text-2xl font-bold">$0.08/kWh</div>145 <div class="flex justify-between items-center mt-2">146 <span class="text-xs">↓ 2% from peak</span>147 <i data-feather="arrow-down-right" class="w-4 h-4 text-green-300"></i>148 </div>149 </div>150 <p class="mt-4 text-gray-600 dark:text-gray-400">Compact widget shows current rate and trend.</p>151 </div>152 <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-xl">153 <div class="bg-gradient-to-br from-purple-500 to-pink-600 p-4 rounded-xl text-white">154 <div class="flex justify-between items-center mb-2">155 <span class="text-xs font-bold">PG&E</span>156 <span class="text-xs">TREND</span>157 </div>158 <div class="h-16 flex items-center justify-center">159 <div class="w-full flex items-end space-x-1">160 <div class="w-3 h-8 bg-white/30 rounded-t-sm"></div>161 <div class="w-3 h-12 bg-white/50 rounded-t-sm"></div>162 <div class="w-3 h-16 bg-white rounded-t-sm"></div>163 <div class="w-3 h-20 bg-white rounded-t-sm"></div>164 <div class="w-3 h-12 bg-white/50 rounded-t-sm"></div>165 </div>166 </div>167 <div class="text-xs mt-2">Peak: 4-7PM</div>168 </div>169 <p class="mt-4 text-gray-600 dark:text-gray-400">Graph widget shows daily price patterns.</p>170 </div>171 <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-xl">172 <div class="bg-gradient-to-br from-green-500 to-teal-600 p-4 rounded-xl text-white">173 <div class="flex justify-between items-center mb-2">174 <span class="text-xs font-bold">CONED</span>175 <span class="text-xs">ALERT</span>176 </div>177 <div class="text-xl font-bold">Low Price Alert!</div>178 <div class="text-sm mt-2">Best time to run appliances</div>179 <div class="flex items-center mt-2">180 <i data-feather="clock" class="w-4 h-4 mr-1"></i>181 <span class="text-xs">Until 8AM</span>182 </div>183 </div>184 <p class="mt-4 text-gray-600 dark:text-gray-400">Alert widget notifies of price drops.</p>185 </div>186 </div>187</section>188 </main>189 190 <custom-footer></custom-footer>191 192 <script>193 feather.replace();194 </script>195 <script src="script.js"></script>196<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>197</body>198</html>