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>UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #ffffff;15 border-radius: 0;16 box-shadow: none;17 }18 19 /* Top toolbar */20 .top-toolbar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 150px;26 background: #ffffff;27 box-shadow: 0 2px 6px rgba(0,0,0,0.15);28 display: flex;29 align-items: center;30 justify-content: space-around;31 padding: 0 18px;32 }33 .icon {34 width: 96px;35 height: 96px;36 display: flex;37 align-items: center;38 justify-content: center;39 }40 .icon svg { width: 72px; height: 72px; fill: #444; }41 42 /* Floating dark panels */43 .panel {44 position: absolute;45 left: 110px;46 width: 860px;47 height: 140px;48 background: #333;49 color: #fff;50 border-radius: 10px;51 box-shadow: 0 6px 10px rgba(0,0,0,0.35);52 display: flex;53 align-items: center;54 padding: 0 24px;55 }56 .panel.top {57 top: 182px;58 border-bottom: 3px solid rgba(255,255,255,0.15);59 }60 .panel.bottom {61 top: 330px;62 height: 160px;63 background: #3b3b3b;64 }65 66 .chip {67 width: 78px;68 height: 78px;69 border-radius: 6px;70 background: #4a89ff;71 margin: 0 18px;72 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.65);73 }74 .chip.outline {75 background: transparent;76 box-shadow: inset 0 0 0 3px #e6e6e6;77 }78 .chip.grad {79 background: linear-gradient(135deg, #111, #777);80 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25);81 }82 .divider {83 width: 2px;84 height: 80px;85 background: rgba(255,255,255,0.18);86 margin: 0 20px;87 }88 .round-btn {89 width: 64px;90 height: 64px;91 border-radius: 50%;92 border: 3px solid #e6e6e6;93 display: flex;94 align-items: center;95 justify-content: center;96 }97 98 .tolerance-label {99 font-size: 38px;100 color: #e9e9e9;101 margin-right: 24px;102 letter-spacing: 0.5px;103 }104 .slider {105 position: relative;106 width: 560px;107 height: 8px;108 background: #6a6a6a;109 border-radius: 6px;110 margin: 0 18px;111 }112 .slider .fill {113 position: absolute;114 left: 0;115 top: 0;116 height: 8px;117 width: 420px;118 background: #7fb2ff;119 border-radius: 6px;120 }121 .slider .thumb {122 position: absolute;123 left: 412px;124 top: -16px;125 width: 40px;126 height: 40px;127 background: #ffffff;128 border-radius: 50%;129 box-shadow: 0 2px 6px rgba(0,0,0,0.45);130 }131 132 /* Canvas elements */133 .halo {134 position: absolute;135 top: 760px;136 left: 210px;137 width: 660px;138 height: 180px;139 border-radius: 50%;140 border: 16px solid rgba(0,0,0,0.95);141 transform: scaleY(0.35);142 box-shadow: 0 10px 12px rgba(0,0,0,0.35) inset, 0 8px 18px rgba(0,0,0,0.25);143 }144 .title {145 position: absolute;146 top: 860px;147 left: 240px;148 font-size: 220px;149 font-weight: 600;150 color: #111;151 letter-spacing: 2px;152 }153 .big-ellipse {154 position: absolute;155 top: 1350px;156 left: 240px;157 width: 600px;158 height: 430px;159 background: #ff0000;160 border-radius: 50%;161 border: 26px solid #1e1e1e;162 box-shadow: -10px 14px 0 rgba(0,0,0,0.35) inset, 0 18px 34px rgba(0,0,0,0.35);163 }164 165 .spinner {166 position: absolute;167 bottom: 84px;168 left: 50%;169 transform: translateX(-50%);170 width: 44px;171 height: 44px;172 border-radius: 50%;173 border: 6px solid #d9d9d9;174 border-top-color: #bdbdbd;175 }176</style>177</head>178<body>179<div id="render-target">180 181 <!-- Top toolbar with icons -->182 <div class="top-toolbar">183 <div class="icon" title="List">184 <svg viewBox="0 0 24 24">185 <rect x="3" y="5" width="18" height="2"></rect>186 <rect x="3" y="11" width="18" height="2"></rect>187 <rect x="3" y="17" width="18" height="2"></rect>188 </svg>189 </div>190 <div class="icon" title="Back">191 <svg viewBox="0 0 24 24">192 <path d="M14 6L8 12l6 6" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>193 </svg>194 </div>195 <div class="icon" title="Forward">196 <svg viewBox="0 0 24 24">197 <path d="M10 6l6 6-6 6" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>198 </svg>199 </div>200 <div class="icon" title="Grid">201 <svg viewBox="0 0 24 24">202 <rect x="3" y="3" width="7" height="7"></rect>203 <rect x="14" y="3" width="7" height="7"></rect>204 <rect x="3" y="14" width="7" height="7"></rect>205 <rect x="14" y="14" width="7" height="7"></rect>206 </svg>207 </div>208 <div class="icon" title="Pencil">209 <svg viewBox="0 0 24 24">210 <path d="M3 17l4 4 13-13-4-4L3 17z"></path>211 </svg>212 </div>213 <div class="icon" title="Brush">214 <svg viewBox="0 0 24 24">215 <path d="M20 4l-6 6 2 2 6-6-2-2zM4 20c3 0 4-2 4-4s-1-3-3-3-3 1-3 3 1 4 2 4z"></path>216 </svg>217 </div>218 <div class="icon" title="Color">219 <svg viewBox="0 0 24 24">220 <circle cx="12" cy="12" r="9" fill="none" stroke="#444" stroke-width="2"></circle>221 <circle cx="8" cy="10" r="2" fill="#ff5252"></circle>222 <circle cx="14" cy="8" r="2" fill="#ffeb3b"></circle>223 <circle cx="16" cy="14" r="2" fill="#4caf50"></circle>224 </svg>225 </div>226 <div class="icon" title="Layers">227 <svg viewBox="0 0 24 24">228 <path d="M12 3l9 5-9 5-9-5 9-5zm-7 9l7 4 7-4M5 18l7 4 7-4" fill="none" stroke="#444" stroke-width="2" stroke-linejoin="round"></path>229 </svg>230 </div>231 <div class="icon" title="Fullscreen">232 <svg viewBox="0 0 24 24">233 <path d="M8 3H3v5h2V5h3V3zm13 0h-5v2h3v3h2V3zM3 16v5h5v-2H5v-3H3zm18 5v-5h-2v3h-3v2h5z"></path>234 </svg>235 </div>236 </div>237 238 <!-- Upper dark panel -->239 <div class="panel top">240 <div class="round-btn" title="Close">241 <svg viewBox="0 0 24 24">242 <path d="M6 6l12 12M18 6L6 18" stroke="#e6e6e6" stroke-width="2" stroke-linecap="round" fill="none"></path>243 </svg>244 </div>245 246 <div class="chip"></div>247 <div class="chip outline"></div>248 <div class="chip grad"></div>249 250 <div class="divider"></div>251 252 <div class="round-btn" title="Dither">253 <svg viewBox="0 0 24 24">254 <circle cx="6" cy="12" r="2" fill="#e6e6e6"></circle>255 <circle cx="12" cy="12" r="2" fill="#e6e6e6"></circle>256 <circle cx="18" cy="12" r="2" fill="#e6e6e6"></circle>257 </svg>258 </div>259 260 <div style="flex:1"></div>261 262 <div class="round-btn" title="Apply">263 <svg viewBox="0 0 24 24">264 <path d="M5 12l4 4 10-10" stroke="#e6e6e6" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>265 </svg>266 </div>267 </div>268 269 <!-- Lower dark panel with slider -->270 <div class="panel bottom">271 <div class="tolerance-label">Tolerance 136</div>272 <div class="slider">273 <div class="fill"></div>274 <div class="thumb"></div>275 </div>276 277 <div class="divider" style="height: 90px; margin-left: 26px; margin-right: 26px;"></div>278 279 <div class="round-btn" title="Flood fill">280 <svg viewBox="0 0 24 24">281 <path d="M12 3l-9 9 6 6 9-9-6-6zm6 11a3 3 0 106 0c0-1.7-3-4-3-4s-3 2.3-3 4z" fill="#e6e6e6"></path>282 </svg>283 </div>284 <div class="round-btn" title="Replace">285 <svg viewBox="0 0 24 24">286 <path d="M7 7h10M7 12h10M7 17h10" stroke="#e6e6e6" stroke-width="2" fill="none" stroke-linecap="round"></path>287 <path d="M19 4l3 3-3 3" stroke="#e6e6e6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>288 </svg>289 </div>290 </div>291 292 <!-- Canvas content -->293 <div class="halo"></div>294 <div class="title">I win</div>295 <div class="big-ellipse"></div>296 297 <!-- Bottom spinner -->298 <div class="spinner"></div>299</div>300</body>301</html>