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 {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "SF Pro Text", "SF Pro Display", sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #0a0f17;20 border-radius: 28px;21 box-shadow: 0 30px 70px rgba(0,0,0,0.55);22 color: #E6E8EB;23 }24 25 /* Status bar */26 .status-bar {27 position: absolute;28 top: 0;29 left: 0;30 width: 1080px;31 height: 120px;32 background: #0d0f14;33 display: flex;34 align-items: center;35 padding: 0 36px;36 box-sizing: border-box;37 color: #ffffff;38 }39 .status-time {40 font-size: 44px;41 font-weight: 600;42 letter-spacing: 0.5px;43 }44 .status-icons {45 margin-left: auto;46 display: flex;47 align-items: center;48 gap: 26px;49 }50 .icon {51 width: 40px;52 height: 40px;53 }54 .battery {55 width: 58px;56 height: 28px;57 }58 59 /* Editor area */60 .editor {61 position: absolute;62 top: 120px;63 left: 0;64 width: 100%;65 height: calc(100% - 120px - 180px);66 background: linear-gradient(180deg, #0f1624 0%, #0c1420 100%);67 padding: 40px;68 box-sizing: border-box;69 }70 .code {71 font-family: "SF Mono", "Menlo", Consolas, "Roboto Mono", monospace;72 font-size: 34px;73 line-height: 56px;74 color: #c7d1e0;75 opacity: 0.9;76 }77 .code .line-number {78 color: #63728a;79 display: inline-block;80 width: 72px;81 }82 .code .keyword { color: #7fd1ff; }83 .code .prop { color: #a5d6ff; }84 .code .value { color: #c6ffdd; }85 .code .selector { color: #9be7ff; }86 87 /* Modal backdrop and dialog */88 .backdrop {89 position: absolute;90 top: 0;91 left: 0;92 width: 1080px;93 height: 2400px;94 background: rgba(0,0,0,0.55);95 }96 .modal {97 position: absolute;98 top: 540px;99 left: 90px;100 width: 900px;101 background: #111a28;102 border: 1px solid #243247;103 border-radius: 18px;104 box-shadow: 0 20px 60px rgba(0,0,0,0.55);105 padding: 36px;106 box-sizing: border-box;107 color: #dce2ea;108 }109 .modal-header {110 display: flex;111 align-items: center;112 justify-content: space-between;113 padding-bottom: 24px;114 }115 .modal-title {116 font-size: 30px;117 letter-spacing: 1px;118 text-transform: uppercase;119 color: #b9c5d6;120 }121 .close-btn {122 width: 56px;123 height: 56px;124 border-radius: 10px;125 background: #0f1522;126 border: 1px solid #263449;127 display: flex;128 align-items: center;129 justify-content: center;130 cursor: default;131 }132 133 .form-group {134 margin-top: 16px;135 }136 .label {137 font-size: 28px;138 color: #aab6c8;139 margin-bottom: 16px;140 }141 .select {142 height: 92px;143 border-radius: 12px;144 border: 1px solid #2b3b52;145 background: #0f1724;146 color: #e0e6ee;147 display: flex;148 align-items: center;149 justify-content: space-between;150 padding: 0 24px;151 box-sizing: border-box;152 font-size: 32px;153 font-weight: 600;154 }155 .select .value {156 display: flex;157 align-items: center;158 gap: 18px;159 }160 .select-pill {161 padding: 10px 18px;162 background: #162238;163 border: 1px solid #2c3e57;164 border-radius: 10px;165 font-size: 28px;166 color: #9fc2ff;167 }168 .modal-actions {169 margin-top: 30px;170 display: flex;171 justify-content: flex-end;172 gap: 18px;173 }174 .btn {175 height: 90px;176 min-width: 170px;177 border-radius: 12px;178 border: 1px solid #2a3447;179 display: inline-flex;180 align-items: center;181 justify-content: center;182 font-size: 34px;183 font-weight: 600;184 cursor: default;185 }186 .btn.cancel {187 background: #1a2233;188 color: #cbd4e2;189 }190 .btn.ok {191 background: #2573ff;192 border-color: #1f63db;193 color: #ffffff;194 }195 196 /* Bottom toolbar and home indicator */197 .toolbar {198 position: absolute;199 bottom: 120px;200 left: 0;201 width: 100%;202 height: 160px;203 background: #121424;204 border-top: 1px solid #273044;205 display: flex;206 align-items: center;207 padding: 0 34px;208 box-sizing: border-box;209 color: #a9b3c6;210 }211 .tool-icons {212 display: flex;213 align-items: center;214 gap: 40px;215 }216 .tool {217 width: 64px;218 height: 64px;219 background: #0e1220;220 border: 1px solid #2a344a;221 border-radius: 12px;222 display: flex;223 align-items: center;224 justify-content: center;225 }226 .editor-status {227 margin-left: auto;228 font-family: "SF Mono", "Menlo", Consolas, "Roboto Mono", monospace;229 font-size: 28px;230 color: #b2bdd1;231 }232 233 .home-indicator {234 position: absolute;235 bottom: 36px;236 left: 50%;237 transform: translateX(-50%);238 width: 280px;239 height: 10px;240 background: #f2f2f2;241 border-radius: 6px;242 opacity: 0.85;243 }244</style>245</head>246<body>247<div id="render-target">248 249 <!-- Status Bar -->250 <div class="status-bar">251 <div class="status-time">8:30</div>252 <div class="status-icons">253 <!-- Temperature (simple text badge) -->254 <div style="font-size:28px; color:#ffffff;">35°</div>255 <!-- Weather icon -->256 <svg class="icon" viewBox="0 0 24 24" fill="none">257 <circle cx="12" cy="12" r="5" fill="#ffd54f"></circle>258 <path d="M2 12h4M18 12h4M12 2v4M12 18v4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M19.1 4.9l-2.8 2.8M7.7 16.3l-2.8 2.8" stroke="#ffd54f" stroke-width="2" stroke-linecap="round"></path>259 </svg>260 <!-- Wi-Fi -->261 <svg class="icon" viewBox="0 0 24 24" fill="none">262 <path d="M2 9c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>263 <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>264 <path d="M8 15c3-2 5-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>265 <circle cx="12" cy="18" r="1.6" fill="#fff"/>266 </svg>267 <!-- Signal -->268 <svg class="icon" viewBox="0 0 24 24" fill="none">269 <rect x="3" y="14" width="3" height="7" fill="#fff"/>270 <rect x="8" y="11" width="3" height="10" fill="#fff" opacity="0.85"/>271 <rect x="13" y="8" width="3" height="13" fill="#fff" opacity="0.7"/>272 <rect x="18" y="5" width="3" height="16" fill="#fff" opacity="0.55"/>273 </svg>274 <!-- Battery -->275 <svg class="battery" viewBox="0 0 32 16" fill="none">276 <rect x="1" y="1" width="26" height="14" rx="3" stroke="#fff" stroke-width="2"></rect>277 <rect x="28" y="4" width="3" height="8" rx="1.5" fill="#fff"></rect>278 <rect x="3" y="3" width="20" height="10" rx="2" fill="#66ff66"></rect>279 </svg>280 </div>281 </div>282 283 <!-- Editor Background -->284 <div class="editor">285 <div class="code">286 <div><span class="line-number">17</span>text-align: center;</div>287 <div><span class="line-number">18</span>width: 100%;</div>288 <div><span class="line-number">19</span>padding: 10px;</div>289 <div><span class="line-number">20</span>box-sizing: border-box;</div>290 <div><span class="line-number">21</span>height: 300px;</div>291 <div><span class="line-number">22</span>margin: auto;</div>292 <div><span class="line-number">23</span>}</div>293 <div><span class="line-number">24</span><span class="selector">.up</span> {</div>294 <div><span class="line-number">25</span> position: relative;</div>295 <div><span class="line-number">26</span> top: -4px;</div>296 <div><span class="line-number">27</span>}</div>297 <div><span class="line-number">29</span><span class="selector">.chevron::before</span> {</div>298 <div><span class="line-number">30</span> border-style: solid;</div>299 <div><span class="line-number">31</span> border-width: 8px 8px 0 0;</div>300 <div><span class="line-number">32</span> content: '';</div>301 <div><span class="line-number">33</span> display: inline-block;</div>302 <div><span class="line-number">34</span> height: 20px;</div>303 <div><span class="line-number">35</span> width: 20px;</div>304 <div><span class="line-number">37</span> position: relative;</div>305 <div><span class="line-number">38</span> transform: rotate(-45deg);</div>306 <div><span class="line-number">39</span>}</div>307 <div><span class="line-number">41</span><span class="selector">.chevron.down::before</span> {</div>308 <div><span class="line-number">42</span> transform: rotate(135deg);</div>309 <div><span class="line-number">43</span> top: -22px;</div>310 <div><span class="line-number">44</span>}</div>311 <div><span class="line-number">46</span><span class="selector">.chevron.right::before</span> {</div>312 <div><span class="line-number">47</span> transform: rotate(45deg);</div>313 <div><span class="line-number">48</span> top: -18px;</div>314 <div><span class="line-number">49</span> left: -5px;</div>315 <div><span class="line-number">50</span>}</div>316 </div>317 </div>318 319 <!-- Backdrop and Modal -->320 <div class="backdrop"></div>321 <div class="modal">322 <div class="modal-header">323 <div class="modal-title">SET LANGUAGE MODE</div>324 <div class="close-btn">325 <svg width="30" height="30" viewBox="0 0 24 24">326 <path d="M6 6l12 12M18 6L6 18" stroke="#b9c5d6" stroke-width="2" stroke-linecap="round"></path>327 </svg>328 </div>329 </div>330 331 <div class="form-group">332 <div class="label">Language Mode</div>333 <div class="select">334 <div class="value">335 <div class="select-pill">CSS</div>336 </div>337 <svg width="32" height="32" viewBox="0 0 24 24">338 <path d="M6 9l6 6 6-6" stroke="#9fc2ff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>339 </svg>340 </div>341 </div>342 343 <div class="modal-actions">344 <div class="btn cancel">Cancel</div>345 <div class="btn ok">Ok</div>346 </div>347 </div>348 349 <!-- Bottom Toolbar -->350 <div class="toolbar">351 <div class="tool-icons">352 <div class="tool">353 <svg width="34" height="34" viewBox="0 0 24 24">354 <path d="M8 12l5-5M8 12l5 5" stroke="#cdd6e6" stroke-width="2" stroke-linecap="round"></path>355 </svg>356 </div>357 <div class="tool">358 <svg width="34" height="34" viewBox="0 0 24 24">359 <path d="M16 7a5 5 0 0 0-9 3H4l3.5 3.5L11 10h-3a3 3 0 1 1 6 0" stroke="#cdd6e6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>360 </svg>361 </div>362 <div class="tool">363 <svg width="34" height="34" viewBox="0 0 24 24">364 <path d="M8 7a5 5 0 0 1 9 3h3l-3.5 3.5L13 10h3a3 3 0 1 0-6 0" stroke="#cdd6e6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>365 </svg>366 </div>367 <div class="tool">368 <svg width="34" height="34" viewBox="0 0 24 24">369 <path d="M3 6h13l5 5v7a2 2 0 0 1-2 2H3z" stroke="#cdd6e6" stroke-width="2" fill="none"></path>370 <path d="M8 12h8" stroke="#cdd6e6" stroke-width="2" stroke-linecap="round"></path>371 </svg>372 </div>373 <div class="tool">374 <svg width="34" height="34" viewBox="0 0 24 24">375 <path d="M4 7h12v12H4zM16 9h4v12h-4z" stroke="#cdd6e6" stroke-width="2" fill="none"></path>376 </svg>377 </div>378 <div class="tool">379 <svg width="34" height="34" viewBox="0 0 24 24">380 <path d="M3 12h18M12 3v18" stroke="#cdd6e6" stroke-width="2" stroke-linecap="round"></path>381 </svg>382 </div>383 </div>384 <div class="editor-status">Ln 1, Col 1 • Spaces: 2 • JSON • UTF-8</div>385 </div>386 387 <!-- Home Indicator -->388 <div class="home-indicator"></div>389</div>390</body>391</html>