GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Currency History UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #FFFFFF;11 }12 13 /* General utilities */14 .row { display: flex; align-items: center; }15 .space-between { display: flex; justify-content: space-between; align-items: center; }16 .muted { color: #777; }17 .divider { height: 1px; background: #E6E6E6; }18 .shadow {19 box-shadow: 0 6px 16px rgba(0,0,0,0.12);20 }21 .chip {22 border: 1px solid #D9D9D9; border-radius: 22px; padding: 8px 14px; font-size: 28px; color: #555;23 background: #fff;24 }25 .img-placeholder {26 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;27 display: flex; justify-content: center; align-items: center; text-align: center;28 }29 30 /* Status bar */31 .status-bar {32 height: 96px; padding: 0 32px; font-size: 34px; color: #111;33 display: flex; align-items: center; justify-content: space-between;34 }35 .status-right { display: flex; align-items: center; gap: 16px; color: #333; }36 37 /* Header */38 .app-header {39 height: 132px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between;40 }41 .title { font-size: 54px; font-weight: 600; color: #222; }42 .icon-btn { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; border-radius: 18px; }43 .icon { width: 48px; height: 48px; }44 45 /* Currency selector row */46 .currency-row { padding: 12px 32px; gap: 24px; display: flex; align-items: center; justify-content: space-between; }47 .currency { display: flex; align-items: center; gap: 18px; }48 .flag { width: 140px; height: 94px; border-radius: 12px; }49 .curr-name { font-size: 40px; color: #333; display: flex; align-items: center; gap: 10px; }50 .swap { width: 72px; height: 72px; background: #F3F3F3; border-radius: 18px; display: flex; align-items: center; justify-content: center; }51 52 /* Amount row */53 .amount-row { padding: 16px 44px; display: flex; justify-content: space-between; align-items: flex-end; }54 .amount-input {55 width: 520px; height: 128px; border: 2px solid #DDD; border-radius: 24px; background: #fff;56 display: flex; align-items: center; padding: 0 26px; font-size: 52px; color: #333;57 box-shadow: 0 2px 0 rgba(0,0,0,0.06);58 }59 .convert-result { text-align: right; }60 .convert-result .label { font-size: 30px; color: #8A8A8A; }61 .convert-result .value { font-size: 64px; font-weight: 600; color: #222; }62 63 /* Period header */64 .period-header { padding: 24px 32px; display: flex; align-items: center; gap: 18px; }65 .period-header .period { font-size: 44px; color: #222; font-weight: 600; }66 .period-header .range { font-size: 32px; color: #757575; }67 .period-header .dropdown-btn { margin-left: auto; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }68 69 /* Dropdown menu (overlay) */70 .menu-card {71 position: absolute; top: 760px; right: 110px; width: 420px; background: #fff; border-radius: 22px;72 box-shadow: 0 12px 24px rgba(0,0,0,0.18);73 padding: 8px 0;74 }75 .menu-item {76 padding: 24px 28px; font-size: 36px; color: #222; display: flex; align-items: center; justify-content: space-between;77 }78 .star {79 width: 40px; height: 40px; background: #4A90E2; color: #fff; font-size: 28px; border-radius: 50%;80 display: inline-flex; align-items: center; justify-content: center;81 }82 83 /* Chart area */84 .chart-wrap { margin: 6px 32px 0; background: #fff; border-radius: 18px; border: 1px solid #EFEFEF; }85 .chart-top { padding: 12px 12px; font-size: 32px; color: #888; }86 .chart { width: 1016px; height: 920px; margin: 0 auto 0; position: relative; }87 .grid { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }88 .grid .line { position: absolute; left: 0; width: 100%; height: 1px; background: #F0F0F0; }89 .xlabels { position: absolute; bottom: -6px; left: 0; width: 100%; display: flex; justify-content: space-between; padding: 0 16px; color: #8A8A8A; font-size: 30px; }90 .ylabels { position: absolute; left: 6px; top: 40px; display: grid; grid-template-rows: repeat(6, 1fr); height: 86%; color: #9a9a9a; font-size: 30px; }91 .ylabels span { align-self: start; }92 93 /* Bottom gallery bar */94 .bottom-gallery {95 position: absolute; left: 0; right: 0; bottom: 130px; background: #fff; padding: 12px 16px;96 border-top: 1px solid #EAEAEA; display: flex; align-items: center; gap: 12px;97 }98 .thumb { width: 168px; height: 140px; border-radius: 12px; position: relative; }99 .price-tag {100 position: absolute; bottom: 8px; left: 8px; background: rgba(255,255,255,0.92);101 border-radius: 8px; padding: 6px 10px; font-size: 28px; color: #222; border: 1px solid #DDD;102 }103 .close-x {104 position: absolute; left: 16px; bottom: 270px; width: 48px; height: 48px; border-radius: 10px;105 color: #29ABE2; border: 2px solid #29ABE2; display: flex; align-items: center; justify-content: center; font-weight: bold;106 }107 .info-dot {108 width: 54px; height: 54px; border-radius: 50%; background: #29ABE2; color: #fff; font-size: 36px;109 display: flex; align-items: center; justify-content: center; margin-right: 10px;110 }111 112 /* Gesture bar */113 .gesture { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 340px; height: 12px; background: #BDBDBD; border-radius: 8px; }114</style>115</head>116<body>117<div id="render-target">118 119 <!-- Status bar -->120 <div class="status-bar">121 <div class="row" style="gap:10px;">122 <span>2:00</span>123 <span style="width:16px;height:16px;border-radius:50%;background:#CFCFCF;display:inline-block;"></span>124 <span style="width:16px;height:16px;border-radius:50%;background:#CFCFCF;display:inline-block;"></span>125 </div>126 <div class="status-right">127 <svg class="icon" viewBox="0 0 24 24">128 <circle cx="12" cy="12" r="8" fill="#888"></circle>129 </svg>130 <svg class="icon" viewBox="0 0 24 24">131 <rect x="3" y="10" width="12" height="6" fill="#666"></rect>132 <rect x="16" y="11" width="5" height="4" fill="#666"></rect>133 </svg>134 </div>135 </div>136 137 <!-- Header -->138 <div class="app-header">139 <div class="row" style="gap:16px;">140 <div class="icon-btn">141 <svg class="icon" viewBox="0 0 24 24">142 <path d="M15 6 L9 12 L15 18" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>143 </svg>144 </div>145 <div class="title">History</div>146 </div>147 <div class="icon-btn">148 <svg class="icon" viewBox="0 0 24 24">149 <path d="M4 12a8 8 0 1 0 4-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>150 <path d="M4 4v4h4" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>151 </svg>152 </div>153 </div>154 155 <!-- Currency selector row -->156 <div class="currency-row">157 <div class="currency">158 <div class="img-placeholder flag">[IMG: EU Flag]</div>159 <div class="curr-name">EUR160 <svg viewBox="0 0 24 24" width="30" height="30">161 <path d="M6 9l6 6 6-6" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>162 </svg>163 </div>164 </div>165 <div class="swap">166 <svg viewBox="0 0 24 24" width="36" height="36">167 <path d="M7 7h10l-2-2M17 17H7l2 2" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>168 </svg>169 </div>170 <div class="currency">171 <div class="img-placeholder flag">[IMG: US Flag]</div>172 <div class="curr-name">USD173 <svg viewBox="0 0 24 24" width="30" height="30">174 <path d="M6 9l6 6 6-6" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>175 </svg>176 </div>177 </div>178 </div>179 180 <!-- Amount row -->181 <div class="amount-row">182 <div class="amount-input">1,000.0</div>183 <div class="convert-result" style="padding-right: 38px;">184 <div class="label">Today</div>185 <div class="value">1,063.015</div>186 </div>187 </div>188 189 <div class="divider" style="margin-top: 18px;"></div>190 191 <!-- Period header -->192 <div class="period-header">193 <div class="period">3 months</div>194 <div class="range">Aug 02, 2023 - Oct 31, 2023</div>195 <div class="dropdown-btn">196 <svg class="icon" viewBox="0 0 24 24">197 <path d="M6 9l6 6 6-6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>198 </svg>199 </div>200 </div>201 202 <!-- Chart container -->203 <div class="chart-wrap">204 <div class="chart-top">Min: 1.047</div>205 <div class="chart">206 <!-- Grid lines -->207 <div class="grid">208 <div class="line" style="top: 80px;"></div>209 <div class="line" style="top: 220px;"></div>210 <div class="line" style="top: 360px;"></div>211 <div class="line" style="top: 500px;"></div>212 <div class="line" style="top: 640px;"></div>213 <div class="line" style="top: 780px;"></div>214 </div>215 216 <!-- Y labels -->217 <div class="ylabels">218 <span>1.100</span>219 <span>1.090</span>220 <span>1.080</span>221 <span>1.070</span>222 <span>1.060</span>223 <span>1.050</span>224 </div>225 226 <!-- Area line chart -->227 <svg viewBox="0 0 1016 920" width="1016" height="920" style="position:absolute;left:0;top:0;">228 <!-- Area fill -->229 <path d="M0 140 230 L90 120 L150 180 L210 240 L270 290 L330 260 231 L390 420 L450 360 L510 500 L570 520 L630 450 232 L690 620 L750 560 L810 720 L870 640 L930 700 233 L1016 650 L1016 900 L0 900 Z"234 fill="rgba(243,156,18,0.18)"/>235 <!-- Stroke line -->236 <path d="M0 140 237 L90 120 L150 180 L210 240 L270 290 L330 260 238 L390 420 L450 360 L510 500 L570 520 L630 450 239 L690 620 L750 560 L810 720 L870 640 L930 700 240 L1016 650"241 fill="none" stroke="#F2994A" stroke-width="6" stroke-linecap="round"/>242 </svg>243 244 <!-- X labels -->245 <div class="xlabels">246 <span>8/2</span><span>8/14</span><span>8/27</span><span>9/9</span><span>9/22</span><span>10/5</span><span>10/18</span><span>10/31</span>247 </div>248 </div>249 </div>250 251 <!-- Dropdown overlay menu -->252 <div class="menu-card">253 <div class="menu-item">7 days</div>254 <div class="menu-item">1 month</div>255 <div class="menu-item">3 months</div>256 <div class="menu-item">6 months</div>257 <div class="menu-item">1 year</div>258 <div class="menu-item">2 years <span class="star">★</span></div>259 <div class="menu-item">5 years <span class="star">★</span></div>260 </div>261 262 <!-- Bottom gallery bar -->263 <div class="bottom-gallery">264 <div class="row" style="align-items:center; gap:8px;">265 <div class="info-dot">i</div>266 <div class="img-placeholder thumb" style="width:140px;">[IMG: App Icon]</div>267 </div>268 <div class="img-placeholder thumb">[IMG: City Photo]<div class="price-tag">€17.75</div></div>269 <div class="img-placeholder thumb">[IMG: City Photo]<div class="price-tag">€24.82</div></div>270 <div class="img-placeholder thumb">[IMG: City Photo]<div class="price-tag">€68.98</div></div>271 <div class="img-placeholder thumb">[IMG: City Photo]<div class="price-tag">€5</div></div>272 <div class="img-placeholder thumb">[IMG: City Photo]<div class="price-tag">€12.81</div></div>273 <div class="img-placeholder thumb">[IMG: City Photo]<div class="price-tag">€6</div></div>274 </div>275 276 <!-- Close X near gallery -->277 <div class="close-x">X</div>278 279 <!-- Gesture bar -->280 <div class="gesture"></div>281</div>282</body>283</html>