GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile Editor UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #ffffff;14 font-family: Arial, Helvetica, sans-serif;15 color: #333;16 }17 18 /* Top teal app bar */19 .app-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 180px;25 background: #5EC3CE;26 box-sizing: border-box;27 padding: 28px 36px;28 color: #ffffff;29 }30 .status-row {31 display: flex;32 align-items: center;33 justify-content: space-between;34 font-weight: 600;35 }36 .status-left {37 display: flex;38 align-items: center;39 gap: 20px;40 font-size: 36px;41 }42 .status-icons {43 display: flex;44 align-items: center;45 gap: 20px;46 }47 .status-dot {48 width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.85);49 }50 .wifi {51 width: 42px; height: 28px;52 }53 .battery {54 width: 60px; height: 28px;55 }56 57 /* Content area below app bar */58 .content {59 position: absolute;60 top: 180px;61 left: 0;62 width: 100%;63 height: calc(100% - 180px);64 background: #ffffff;65 }66 67 .top-controls {68 display: flex;69 align-items: center;70 padding: 30px 34px 10px 34px;71 gap: 22px;72 }73 .back-btn {74 width: 74px; height: 74px; border-radius: 50%;75 display: flex; align-items: center; justify-content: center;76 }77 .back-btn svg { width: 40px; height: 40px; }78 .title-input {79 flex: 1;80 height: 110px;81 background: #F1F3F5;82 border-radius: 14px;83 box-sizing: border-box;84 padding: 30px;85 font-size: 44px;86 color: #2d2d2d;87 }88 .action-icons {89 display: flex;90 align-items: center;91 gap: 26px;92 }93 .circle-icon {94 width: 74px; height: 74px; border-radius: 50%;95 background: #ffffff;96 border: 2px solid #D9D9D9;97 display: flex; align-items: center; justify-content: center;98 }99 .circle-icon svg { width: 36px; height: 36px; }100 101 /* Formatting toolbar rows */102 .toolbar {103 padding: 20px 34px 0 34px;104 }105 .tool-row {106 display: flex;107 align-items: center;108 gap: 24px;109 margin-bottom: 26px;110 }111 .tool-btn {112 height: 90px;113 min-width: 110px;114 background: #EFEFEF;115 border: 1px solid #DDDDDD;116 border-radius: 10px;117 display: flex; align-items: center; justify-content: center;118 font-size: 40px;119 color: #444;120 padding: 0 18px;121 box-sizing: border-box;122 }123 .tool-btn.narrow { min-width: 90px; }124 .tool-btn.wide { min-width: 160px; }125 .tool-btn .sub { font-size: 30px; vertical-align: super; margin-left: 6px; }126 .tool-btn .sub2 { font-size: 30px; vertical-align: sub; margin-left: 6px; }127 .tool-btn svg { width: 40px; height: 40px; }128 .done-btn {129 margin-left: auto;130 height: 100px;131 padding: 0 36px;132 background: #56BFCB;133 color: #ffffff;134 border-radius: 10px;135 display: flex; align-items: center; justify-content: center;136 font-size: 42px; font-weight: 700;137 border: none;138 }139 140 /* Editor area */141 .editor {142 margin-top: 16px;143 height: 1600px;144 border-top: 2px solid #F0F0F0;145 padding: 36px;146 font-size: 44px;147 color: #8A8A8A;148 }149 150 /* Bottom navigation bar indicator */151 .gesture-bar {152 position: absolute;153 bottom: 32px;154 left: 50%;155 transform: translateX(-50%);156 width: 500px; height: 12px; border-radius: 8px;157 background: #C7C7C7;158 }159</style>160</head>161<body>162<div id="render-target">163 164 <!-- Top teal bar with status -->165 <div class="app-bar">166 <div class="status-row">167 <div class="status-left">168 <span>10:56</span>169 <div class="status-dot"></div>170 <div class="status-dot"></div>171 </div>172 <div class="status-icons">173 <!-- Simple connection icon -->174 <svg class="wifi" viewBox="0 0 24 24" fill="none">175 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>176 <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>177 <path d="M9 16c3-2 5-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>178 <circle cx="12" cy="19" r="2" fill="#fff"/>179 </svg>180 <!-- Battery -->181 <svg class="battery" viewBox="0 0 28 16" fill="none">182 <rect x="1" y="1" width="22" height="14" rx="3" stroke="#fff" stroke-width="2"/>183 <rect x="24" y="5" width="3" height="6" rx="1" fill="#fff"/>184 <rect x="4" y="4" width="16" height="8" rx="2" fill="#fff"/>185 </svg>186 </div>187 </div>188 </div>189 190 <!-- Content -->191 <div class="content">192 <div class="top-controls">193 <!-- Back Arrow -->194 <div class="back-btn">195 <svg viewBox="0 0 24 24" fill="#666">196 <path d="M15 6l-6 6 6 6" stroke="#666" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>197 </svg>198 </div>199 200 <!-- Title field -->201 <div class="title-input">Title</div>202 203 <!-- Right small icons -->204 <div class="action-icons">205 <div class="circle-icon">206 <svg viewBox="0 0 24 24" fill="none">207 <path d="M6 9l6 6 6-6" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>208 </svg>209 </div>210 <div class="circle-icon">211 <svg viewBox="0 0 24 24" fill="none">212 <rect x="6" y="3" width="12" height="16" stroke="#666" stroke-width="2"/>213 <rect x="9" y="6" width="6" height="10" fill="#666"/>214 </svg>215 </div>216 <div class="circle-icon">217 <svg viewBox="0 0 24 24" fill="none">218 <circle cx="12" cy="12" r="9" stroke="#666" stroke-width="2"/>219 <path d="M12 7a2 2 0 012 2c0 1.5-2 1.6-2 4" stroke="#666" stroke-width="2" stroke-linecap="round"/>220 <circle cx="12" cy="17" r="1.3" fill="#666"/>221 </svg>222 </div>223 </div>224 </div>225 226 <!-- Formatting tools -->227 <div class="toolbar">228 229 <div class="tool-row">230 <div class="tool-btn wide" style="border-style:dashed;">OCR</div>231 <div class="tool-btn">B</div>232 <div class="tool-btn">I</div>233 <div class="tool-btn">T</div>234 <div class="tool-btn">U</div>235 <div class="tool-btn">A</div>236 <div class="tool-btn wide">TT</div>237 </div>238 239 <div class="tool-row">240 <div class="tool-btn">241 <svg viewBox="0 0 24 24">242 <path d="M3 12h14" stroke="#666" stroke-width="2"/>243 <path d="M10 6l-6 6 6 6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>244 </svg>245 </div>246 <div class="tool-btn">247 <svg viewBox="0 0 24 24">248 <path d="M21 12H7" stroke="#666" stroke-width="2"/>249 <path d="M14 6l6 6-6 6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>250 </svg>251 </div>252 <div class="tool-btn">X<span class="sub">2</span></div>253 <div class="tool-btn">X<span class="sub2">2</span></div>254 <div class="tool-btn">255 <svg viewBox="0 0 24 24">256 <path d="M8 12l8 0" stroke="#666" stroke-width="2"/>257 <path d="M5 8l5 4-5 4" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>258 </svg>259 </div>260 <div class="tool-btn">261 <svg viewBox="0 0 24 24">262 <path d="M16 12H8" stroke="#666" stroke-width="2"/>263 <path d="M19 8l-5 4 5 4" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>264 </svg>265 </div>266 </div>267 268 <div class="tool-row">269 <div class="tool-btn">270 <svg viewBox="0 0 24 24">271 <rect x="3" y="5" width="18" height="2" fill="#666"/>272 <rect x="3" y="11" width="18" height="2" fill="#666"/>273 <rect x="3" y="17" width="18" height="2" fill="#666"/>274 </svg>275 </div>276 <div class="tool-btn">277 <svg viewBox="0 0 24 24">278 <rect x="8" y="5" width="13" height="2" fill="#666"/>279 <rect x="3" y="11" width="18" height="2" fill="#666"/>280 <rect x="8" y="17" width="13" height="2" fill="#666"/>281 </svg>282 </div>283 <div class="tool-btn">284 <svg viewBox="0 0 24 24">285 <rect x="3" y="5" width="14" height="2" fill="#666"/>286 <rect x="3" y="11" width="18" height="2" fill="#666"/>287 <rect x="3" y="17" width="10" height="2" fill="#666"/>288 </svg>289 </div>290 <div class="tool-btn">291 <svg viewBox="0 0 24 24">292 <circle cx="6" cy="6" r="2" fill="#666"/>293 <rect x="10" y="5" width="11" height="2" fill="#666"/>294 <circle cx="6" cy="12" r="2" fill="#666"/>295 <rect x="10" y="11" width="11" height="2" fill="#666"/>296 <circle cx="6" cy="18" r="2" fill="#666"/>297 <rect x="10" y="17" width="11" height="2" fill="#666"/>298 </svg>299 </div>300 <div class="tool-btn">301 <svg viewBox="0 0 24 24">302 <text x="3" y="10" font-size="8" fill="#666">1.</text>303 <rect x="9" y="7" width="12" height="2" fill="#666"/>304 <text x="3" y="18" font-size="8" fill="#666">2.</text>305 <rect x="9" y="15" width="12" height="2" fill="#666"/>306 </svg>307 </div>308 <div class="tool-btn">309 <svg viewBox="0 0 24 24">310 <rect x="5" y="6" width="14" height="12" rx="2" stroke="#666" stroke-width="2" fill="none"/>311 <path d="M9 12l2 2 4-4" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>312 </svg>313 </div>314 315 <div class="done-btn">DONE</div>316 </div>317 </div>318 319 <!-- Writing area -->320 <div class="editor">Start writing here...</div>321 </div>322 323 <div class="gesture-bar"></div>324</div>325</body>326</html>