GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Load Theme UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #3f3f3f; border-radius: 26px; box-shadow: 0 20px 60px rgba(0,0,0,0.35);12 color: #fff;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; width: 100%; height: 120px;18 background: #222; color: #f5f5f5;19 display: flex; align-items: center; justify-content: space-between;20 padding: 0 36px; box-sizing: border-box;21 font-size: 40px;22 }23 .status-left { display: flex; align-items: center; gap: 22px; }24 .status-right { display: flex; align-items: center; gap: 26px; }25 .status-icon {26 width: 50px; height: 50px; border-radius: 50%; background: #444;27 }28 .icon-wifi svg, .icon-battery svg { display: block; }29 30 /* Toolbar */31 .toolbar {32 position: absolute; top: 120px; left: 0; width: 100%; height: 140px;33 background: #555; display: flex; align-items: center; justify-content: space-between;34 padding: 0 32px; box-sizing: border-box;35 border-bottom: 1px solid #666;36 }37 .title-area { display: flex; align-items: center; gap: 28px; }38 .toolbar-title { font-size: 54px; font-weight: 600; color: #fff; }39 .icon-btn { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; }40 .icon-btn svg { fill: none; stroke: #fff; stroke-width: 5; }41 42 /* Grid of themes */43 .themes {44 position: absolute; top: 260px; left: 0; width: 100%;45 padding: 24px; box-sizing: border-box;46 }47 .grid {48 display: grid; grid-template-columns: 1fr 1fr; gap: 24px;49 }50 .card {51 position: relative;52 height: 300px; border-radius: 8px; overflow: hidden;53 border: 1px solid #8a8a8a;54 display: flex; align-items: center; justify-content: center;55 text-align: center;56 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);57 }58 .card .label { font-size: 42px; font-weight: 500; letter-spacing: 0.2px; }59 .card.small .label { font-size: 36px; }60 .dots {61 position: absolute; bottom: 18px; left: 18px; display: flex; flex-direction: column; gap: 8px;62 }63 .dots.right { left: auto; right: 18px; }64 .dot { width: 10px; height: 10px; border-radius: 50%; }65 .dot.dark { background: rgba(0,0,0,0.55); }66 .dot.light { background: rgba(255,255,255,0.75); }67 68 /* Background styles for cards */69 .bg-day-paper { background: #e9e7e2; }70 .bg-night-texture { background: #1c1c1c; }71 .bg-pure-white { background: #ffffff; color: #222; border-color: #bfbfbf; }72 .bg-beige { background: #e6d7b6; color: #222; border-color: #b9ab8f; }73 .bg-striped-light {74 background: repeating-linear-gradient(0deg, #e7e7e7 0px, #e7e7e7 8px, #d9d9d9 8px, #d9d9d9 16px);75 color: #222; border-color: #bfbfbf;76 }77 .bg-true-black { background: #000; }78 .bg-bluegray {79 background: linear-gradient(180deg, #3c4751 0%, #2f3942 100%);80 }81 .bg-dark-striped {82 background: repeating-linear-gradient(0deg, #2a2a2a 0px, #2a2a2a 10px, #242424 10px, #242424 20px);83 }84 85 /* Options panel */86 .options-panel {87 position: absolute; left: 0; width: 100%;88 top: 1620px;89 background: #555; border-top: 1px solid #6a6a6a;90 padding: 26px 36px 36px; box-sizing: border-box;91 }92 .option {93 display: flex; align-items: center; gap: 28px; padding: 24px 0; border-radius: 10px;94 color: #eaeaea; font-size: 44px;95 }96 .option + .option { border-top: 1px solid rgba(255,255,255,0.06); }97 .checkbox {98 width: 64px; height: 64px; border: 3px solid #cfcfcf; border-radius: 8px; box-sizing: border-box;99 display: flex; align-items: center; justify-content: center; background: transparent;100 }101 .checkbox.checked { border-color: #2196F3; background: #2196F3; }102 .checkbox.checked svg { stroke: #fff; stroke-width: 8; }103 .option.primary { font-weight: 700; }104 .option.disabled { color: #bdbdbd; }105 .option.disabled .checkbox { border-color: #9b9b9b; }106 .strike { text-decoration: line-through; }107 .info {108 margin-left: auto; width: 54px; height: 54px; border-radius: 50%;109 background: #6a6a6a; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700;110 font-size: 36px;111 }112</style>113</head>114<body>115<div id="render-target">116 117 <!-- Status Bar -->118 <div class="status-bar">119 <div class="status-left">120 <div>1:02</div>121 <div class="status-icon"></div>122 </div>123 <div class="status-right">124 <div class="icon-wifi">125 <svg width="64" height="40" viewBox="0 0 64 40">126 <path d="M8 12 C24 -2,40 -2,56 12" stroke="#fff" stroke-width="4" fill="none"/>127 <path d="M16 20 C28 10,36 10,48 20" stroke="#fff" stroke-width="4" fill="none"/>128 <circle cx="32" cy="28" r="5" fill="#fff"/>129 </svg>130 </div>131 <div class="icon-battery">132 <svg width="70" height="40" viewBox="0 0 70 40">133 <rect x="4" y="8" width="56" height="24" rx="4" stroke="#fff" stroke-width="4" fill="none"/>134 <rect x="8" y="12" width="40" height="16" fill="#fff"/>135 <rect x="62" y="14" width="6" height="12" rx="2" fill="#fff"/>136 </svg>137 </div>138 </div>139 </div>140 141 <!-- Toolbar -->142 <div class="toolbar">143 <div class="title-area">144 <div class="icon-btn">145 <svg width="56" height="56" viewBox="0 0 24 24">146 <path d="M15 18 L9 12 L15 6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>147 </svg>148 </div>149 <div class="toolbar-title">Load Theme</div>150 </div>151 <div class="icon-btn">152 <svg width="54" height="54" viewBox="0 0 24 24">153 <circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2"/>154 <line x1="17" y1="17" x2="22" y2="22" stroke="#fff" stroke-width="2"/>155 </svg>156 </div>157 </div>158 159 <!-- Themes Grid -->160 <div class="themes">161 <div class="grid">162 <!-- Row 1 -->163 <div class="card bg-day-paper">164 <div class="label" style="color:#222;">Day Theme</div>165 </div>166 <div class="card bg-night-texture">167 <div class="label">Night Theme</div>168 </div>169 170 <!-- Row 2 -->171 <div class="card bg-pure-white small">172 <div class="label">Day 1 (Pure white)</div>173 <div class="dots">174 <div class="dot.dark"></div>175 <div class="dot.dark"></div>176 <div class="dot.dark"></div>177 </div>178 </div>179 <div class="card bg-beige">180 <div class="label">Day 2</div>181 <div class="dots">182 <div class="dot.dark"></div>183 <div class="dot.dark"></div>184 <div class="dot.dark"></div>185 </div>186 </div>187 188 <!-- Row 3 -->189 <div class="card bg-striped-light">190 <div class="label">Day 3</div>191 <div class="dots">192 <div class="dot.dark"></div>193 <div class="dot.dark"></div>194 <div class="dot.dark"></div>195 </div>196 </div>197 <div class="card bg-true-black">198 <div class="label">Night 1 (True black)</div>199 <div class="dots right">200 <div class="dot.light"></div>201 <div class="dot.light"></div>202 <div class="dot.light"></div>203 </div>204 </div>205 206 <!-- Row 4 -->207 <div class="card bg-bluegray">208 <div class="label">Night 2</div>209 <div class="dots">210 <div class="dot.light"></div>211 <div class="dot.light"></div>212 <div class="dot.light"></div>213 </div>214 </div>215 <div class="card bg-dark-striped">216 <div class="label">Night 3</div>217 <div class="dots right">218 <div class="dot.light"></div>219 <div class="dot.light"></div>220 <div class="dot.light"></div>221 </div>222 </div>223 </div>224 </div>225 226 <!-- Options Panel -->227 <div class="options-panel">228 <div class="option primary">229 <div class="checkbox checked">230 <svg width="42" height="32" viewBox="0 0 24 24">231 <polyline points="4,13 10,18 20,6"/>232 </svg>233 </div>234 <div>Change theme colors only</div>235 </div>236 <div class="option">237 <div class="checkbox"></div>238 <div>Use AMOLED dark mode</div>239 </div>240 <div class="option disabled">241 <div class="checkbox"></div>242 <div class="strike">Automatic day night mode switch</div>243 <div class="info">i</div>244 </div>245 </div>246 247</div>248</body>249</html>