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>Set Language Mode Modal - Code Editor</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 10 #render-target {11 width: 1080px;12 height: 2400px;13 position: relative;14 overflow: hidden;15 background: linear-gradient(#0b1220, #0e1a2e 45%, #0b1220);16 color: #E5E7EB;17 font-family: "SF Pro Text", -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;18 }19 20 /* Status bar */21 .status-bar {22 position: absolute;23 top: 0; left: 0; width: 100%; height: 120px;24 background: #111111;25 color: #fff;26 display: flex;27 align-items: center;28 padding: 0 40px;29 box-sizing: border-box;30 font-weight: 600;31 }32 .status-left { display: flex; align-items: center; gap: 24px; }33 .status-time { font-size: 44px; letter-spacing: 0.5px; }34 .status-temp { font-size: 28px; opacity: 0.9; }35 36 .status-icons {37 margin-left: auto;38 display: flex;39 align-items: center;40 gap: 26px;41 }42 .icon {43 width: 40px; height: 40px;44 display: inline-flex; align-items: center; justify-content: center;45 opacity: 0.9;46 }47 .battery {48 width: 62px; height: 32px;49 border: 3px solid #fff; border-radius: 6px;50 position: relative;51 }52 .battery:after {53 content: "";54 position: absolute; right: -10px; top: 8px;55 width: 8px; height: 16px; background: #fff; border-radius: 2px;56 }57 .battery .level {58 position: absolute; left: 4px; top: 4px;59 height: 20px; width: 42px; background: #9EE37D; border-radius: 3px;60 }61 62 /* Editor background area */63 .editor {64 position: absolute;65 top: 120px; left: 0; right: 0; bottom: 0;66 padding: 30px 40px 140px 40px;67 box-sizing: border-box;68 }69 .editor-surface {70 position: absolute;71 inset: 120px 0 0 0;72 pointer-events: none;73 }74 75 /* Code content */76 .code {77 position: relative;78 margin-top: 20px;79 background: #0f1c30;80 border-radius: 20px;81 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);82 padding: 40px 40px 220px 40px;83 }84 .line {85 display: flex;86 gap: 24px;87 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;88 font-size: 32px;89 line-height: 48px;90 color: #cbd5e1;91 }92 .ln {93 width: 80px; text-align: right; color: #64748b;94 }95 .token-selector { color: #38bdf8; }96 .token-prop { color: #a3e635; }97 .token-value { color: #eab308; }98 .token-keyword { color: #a78bfa; }99 .token-comment { color: #64748b; }100 101 /* Overlay for modal */102 .dim {103 position: absolute;104 inset: 120px 0 0 0;105 background: rgba(0,0,0,0.55);106 }107 108 /* Modal dialog */109 .dialog {110 position: absolute;111 left: 50%;112 transform: translateX(-50%);113 top: 420px;114 width: 900px;115 background: #0f172a;116 border-radius: 18px;117 box-shadow: 0 30px 60px rgba(0,0,0,0.6);118 border: 1px solid rgba(255,255,255,0.06);119 }120 .dialog-header {121 padding: 34px 40px 16px 40px;122 display: flex; align-items: center;123 }124 .dialog-title {125 font-size: 34px;126 letter-spacing: 1px;127 color: #cbd5e1;128 }129 .close-btn {130 margin-left: auto;131 width: 46px; height: 46px;132 border-radius: 10px;133 background: #111827;134 border: 1px solid rgba(255,255,255,0.08);135 display: flex; align-items: center; justify-content: center;136 cursor: pointer;137 }138 .dialog-body {139 padding: 24px 40px 32px 40px;140 display: flex; align-items: center;141 gap: 20px;142 }143 .field-label {144 color: #9ca3af; font-size: 30px;145 }146 .select {147 margin-left: auto;148 width: 280px; height: 78px;149 background: #0b1020;150 border: 1px solid rgba(255,255,255,0.12);151 border-radius: 12px;152 display: flex; align-items: center; justify-content: space-between;153 padding: 0 20px; box-sizing: border-box;154 font-size: 30px; color: #e5e7eb;155 }156 .dialog-footer {157 padding: 24px 40px 40px 40px;158 display: flex; justify-content: flex-end; gap: 16px;159 }160 .btn {161 height: 78px; padding: 0 38px;162 border-radius: 12px; font-size: 30px;163 display: inline-flex; align-items: center; justify-content: center;164 cursor: pointer; border: 1px solid transparent;165 }166 .btn-secondary { background: #1f2937; color: #e5e7eb; border-color: rgba(255,255,255,0.08); }167 .btn-primary { background: #2563eb; color: #fff; box-shadow: 0 6px 14px rgba(37,99,235,0.35); }168 169 /* Bottom toolbar */170 .bottom-bar {171 position: absolute;172 left: 0; right: 0; bottom: 120px;173 height: 110px;174 background: #0d1527;175 border-top: 1px solid rgba(255,255,255,0.06);176 display: flex; align-items: center; justify-content: space-between;177 padding: 0 40px; box-sizing: border-box;178 }179 .bb-left, .bb-right { display: flex; align-items: center; gap: 36px; }180 .bb-icon {181 width: 64px; height: 64px; border-radius: 12px;182 background: #0b1020; border: 1px solid rgba(255,255,255,0.08);183 display: flex; align-items: center; justify-content: center;184 }185 .bb-center { color: #94a3b8; font-size: 28px; }186 187 /* Home indicator */188 .home-indicator {189 position: absolute; bottom: 40px; left: 50%;190 transform: translateX(-50%);191 width: 360px; height: 12px; background: rgba(255,255,255,0.9);192 border-radius: 6px;193 }194</style>195</head>196<body>197<div id="render-target">198 199 <!-- Status bar -->200 <div class="status-bar">201 <div class="status-left">202 <div class="status-time">8:28</div>203 <div class="status-temp">35°</div>204 <div class="icon">205 <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="#fff" stroke-width="2">206 <path d="M3 11l4 4 7-7 7 7" />207 </svg>208 </div>209 <div class="icon">210 <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="#fff" stroke-width="2">211 <circle cx="12" cy="12" r="6"></circle>212 <path d="M12 2v4M12 18v4M2 12h4M18 12h4"></path>213 </svg>214 </div>215 </div>216 <div class="status-icons">217 <div class="icon">218 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#fff" stroke-width="2">219 <path d="M3 18h18M6 15h12M9 12h6M12 9h0" />220 </svg>221 </div>222 <div class="icon">223 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#fff" stroke-width="2">224 <path d="M4 12h16M12 4v16" />225 </svg>226 </div>227 <div class="battery"><div class="level"></div></div>228 </div>229 </div>230 231 <!-- Editor with code -->232 <div class="editor">233 <div class="code">234 <div class="line"><div class="ln">17</div><div><span class="token-prop">text-align</span>: <span class="token-value">center</span>;</div></div>235 <div class="line"><div class="ln">18</div><div><span class="token-prop">width</span>: <span class="token-value">100%</span>;</div></div>236 <div class="line"><div class="ln">19</div><div><span class="token-prop">padding</span>: <span class="token-value">10px</span>;</div></div>237 <div class="line"><div class="ln">20</div><div><span class="token-prop">box-sizing</span>: <span class="token-value">border-box</span>;</div></div>238 <div class="line"><div class="ln">21</div><div><span class="token-prop">height</span>: <span class="token-value">300px</span>;</div></div>239 <div class="line"><div class="ln">22</div><div><span class="token-prop">margin</span>: <span class="token-value">auto</span>;</div></div>240 <div class="line"><div class="ln">23</div><div>}</div></div>241 <div class="line"><div class="ln">24</div><div><span class="token-selector">.up</span> {</div></div>242 <div class="line"><div class="ln">25</div><div><span class="token-prop">position</span>: <span class="token-value">relative</span>;</div></div>243 <div class="line"><div class="ln">26</div><div><span class="token-prop">top</span>: <span class="token-value">-4px</span>;</div></div>244 <div class="line"><div class="ln">27</div><div>}</div></div>245 <div class="line"><div class="ln">28</div><div><span class="token-selector">.chevron::before</span> {</div></div>246 <div class="line"><div class="ln">29</div><div><span class="token-prop">border-style</span>: <span class="token-value">solid</span>;</div></div>247 <div class="line"><div class="ln">30</div><div><span class="token-prop">border-width</span>: <span class="token-value">8px 8px 0 0</span>;</div></div>248 <div class="line"><div class="ln">31</div><div><span class="token-prop">content</span>: <span class="token-value">''</span>;</div></div>249 <div class="line"><div class="ln">32</div><div><span class="token-prop">display</span>: <span class="token-value">inline-block</span>;</div></div>250 <div class="line"><div class="ln">33</div><div><span class="token-prop">height</span>: <span class="token-value">20px</span>;</div></div>251 <div class="line"><div class="ln">34</div><div><span class="token-prop">width</span>: <span class="token-value">20px</span>;</div></div>252 <div class="line"><div class="ln">35</div><div><span class="token-prop">top</span>: <span class="token-value">-10px</span>;</div></div>253 <div class="line"><div class="ln">36</div><div><span class="token-prop">position</span>: <span class="token-value">relative</span>;</div></div>254 <div class="line"><div class="ln">37</div><div><span class="token-prop">transform</span>: <span class="token-value">rotate(-45deg)</span>;</div></div>255 <div class="line"><div class="ln">38</div><div>}</div></div>256 <div class="line"><div class="ln">39</div><div><span class="token-selector">.chevron.down::before</span> {</div></div>257 <div class="line"><div class="ln">40</div><div><span class="token-prop">transform</span>: <span class="token-value">rotate(135deg)</span>;</div></div>258 <div class="line"><div class="ln">41</div><div><span class="token-prop">top</span>: <span class="token-value">-22px</span>;</div></div>259 <div class="line"><div class="ln">42</div><div>}</div></div>260 <div class="line"><div class="ln">43</div><div><span class="token-selector">.chevron.right::before</span> {</div></div>261 <div class="line"><div class="ln">44</div><div><span class="token-prop">transform</span>: <span class="token-value">rotate(45deg)</span>;</div></div>262 <div class="line"><div class="ln">45</div><div><span class="token-prop">top</span>: <span class="token-value">-18px</span>;</div></div>263 <div class="line"><div class="ln">46</div><div><span class="token-prop">left</span>: <span class="token-value">-5px</span>;</div></div>264 <div class="line"><div class="ln">47</div><div>}</div></div>265 </div>266 </div>267 268 <!-- Dim background for modal -->269 <div class="dim"></div>270 271 <!-- Modal dialog -->272 <div class="dialog">273 <div class="dialog-header">274 <div class="dialog-title">SET LANGUAGE MODE</div>275 <div class="close-btn">276 <svg viewBox="0 0 24 24" width="26" height="26" stroke="#cbd5e1" stroke-width="2" fill="none" stroke-linecap="round">277 <path d="M5 5 L19 19"></path>278 <path d="M19 5 L5 19"></path>279 </svg>280 </div>281 </div>282 <div class="dialog-body">283 <div class="field-label">Language Mode</div>284 <div class="select">285 <span>JSON</span>286 <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round">287 <path d="M6 9l6 6 6-6"></path>288 </svg>289 </div>290 </div>291 <div class="dialog-footer">292 <div class="btn btn-secondary">Cancel</div>293 <div class="btn btn-primary">Ok</div>294 </div>295 </div>296 297 <!-- Bottom toolbar -->298 <div class="bottom-bar">299 <div class="bb-left">300 <div class="bb-icon">301 <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round">302 <path d="M15 6 L9 12 L15 18"></path>303 </svg>304 </div>305 <div class="bb-icon">306 <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round">307 <path d="M9 8h6M9 12h6M9 16h6"></path>308 </svg>309 </div>310 <div class="bb-icon">311 <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round">312 <path d="M4 7h16M4 17h16M10 7v10"></path>313 </svg>314 </div>315 </div>316 <div class="bb-center">Ln 1, Col 1 Spaces: 2 JSON UTF-8</div>317 <div class="bb-right">318 <div class="bb-icon">319 <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round">320 <path d="M6 6 L18 18"></path>321 <path d="M18 6 L6 18"></path>322 </svg>323 </div>324 <div class="bb-icon">325 <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round">326 <path d="M12 5v14M5 12h14"></path>327 </svg>328 </div>329 </div>330 </div>331 332 <!-- Home indicator -->333 <div class="home-indicator"></div>334 335</div>336</body>337</html>