GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: "Segoe UI", Arial, sans-serif; }7 #render-target {8 width:1440px; height:3120px;9 position:relative; overflow:hidden;10 background:#0c0c0c; color:#fff;11 }12 /* Top status bar */13 .status-bar {14 position:absolute; top:0; left:0; right:0;15 height:120px; padding:0 40px;16 display:flex; align-items:center; justify-content:space-between;17 color:#e5e5e5; font-size:44px;18 }19 .status-left { display:flex; align-items:center; gap:24px; }20 .status-right { display:flex; align-items:center; gap:28px; }21 /* Title bar */22 .title-bar {23 position:absolute; top:120px; left:0; right:0;24 height:140px; display:flex; align-items:center;25 padding:0 36px;26 }27 .title-center {28 flex:1; text-align:center; color:#d5863a; font-weight:600; font-size:56px;29 }30 .title-actions { position:absolute; right:36px; top:40px; display:flex; align-items:center; gap:36px; }31 .check-wrap { position:absolute; left:28px; top:42px; }32 /* Tooltip */33 .tooltip {34 position:absolute; top:220px; left:160px;35 width:1120px; background:#1f1f1f; border:2px solid #2e2e2e;36 border-radius:12px; padding:48px 48px 48px 48px; box-shadow:0 8px 24px rgba(0,0,0,0.5);37 }38 .tooltip:before {39 content:""; position:absolute; top:-22px; left:340px;40 width:0; height:0; border-left:22px solid transparent; border-right:22px solid transparent;41 border-bottom:22px solid #1f1f1f;42 }43 .tooltip h4 {44 margin:0 0 18px 0; font-size:48px; line-height:1.4; color:#ffffff;45 font-weight:500;46 }47 .tooltip p { margin:0 0 40px 0; font-size:42px; color:#d7d7d7; }48 .tooltip .btn {49 position:absolute; right:48px; bottom:48px;50 padding:26px 52px; border:2px solid #5a5a5a; border-radius:10px;51 color:#fff; font-size:44px;52 background:#2a2a2a;53 }54 /* Canvas area */55 .canvas-area {56 position:absolute; top:540px; left:0; right:0; bottom:700px;57 display:flex; align-items:flex-start; justify-content:center;58 background:transparent;59 }60 .slide {61 width:1290px; height:860px; border:2px solid #152a28;62 box-shadow:0 0 0 1px rgba(255,255,255,0.05);63 background:#223a39;64 position:relative; overflow:hidden;65 }66 .slide .left-panel {67 position:absolute; left:0; top:0; bottom:0; width:72%;68 background:linear-gradient(180deg,#213937 0%, #172d2b 100%);69 }70 .slide .accent-line {71 position:absolute; left:72px; top:0; bottom:0; width:6px; background:#6bb8b5;72 opacity:0.5;73 }74 .slide .right-panel {75 position:absolute; right:0; top:0; bottom:0; width:28%;76 background:linear-gradient(180deg,#cfe7c5 0%, #c8e0be 60%, #bdd7b3 100%);77 }78 .slide .title-box {79 position:absolute; left:200px; right:260px; top:360px; height:220px;80 border:2px dashed rgba(255,255,255,0.35); display:flex; align-items:center; justify-content:center;81 color:#ffffff; font-size:88px; font-weight:600; text-align:center; line-height:1.2;82 }83 .slide .subtitle-box {84 position:absolute; left:260px; right:320px; top:280px; height:90px;85 border:2px dashed rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center;86 color:#d9d9d9; font-size:40px;87 }88 /* Notes & Comments */89 .meta-row {90 position:absolute; left:120px; right:120px; bottom:620px;91 display:flex; align-items:center; gap:60px; font-size:52px; color:#e8e8e8;92 }93 .meta-item { display:flex; align-items:center; gap:22px; }94 /* Thumbnails strip */95 .thumb-strip {96 position:absolute; left:0; right:0; bottom:390px;97 height:220px; padding:0 20px; display:flex; align-items:center;98 gap:24px;99 }100 .thumb {101 width:300px; height:180px; border:2px solid #333; background:#E0E0E0;102 display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px;103 position:relative;104 }105 .thumb .bar {106 position:absolute; left:0; bottom:0; height:36px; width:100%; background:#bf6a2e;107 }108 /* Bottom toolbar */109 .toolbar {110 position:absolute; left:0; right:0; bottom:0;111 height:360px; background:#1a1a1a; border-top:1px solid #2a2a2a;112 display:flex; align-items:center; justify-content:center; gap:52px;113 }114 .tool-btn {115 width:120px; height:120px; border:2px solid #3c3c3c; border-radius:10px;116 display:flex; align-items:center; justify-content:center; background:#222;117 }118 .tool-btn.small { width:110px; height:110px; }119 .tool-btn.wide { width:140px; }120 /* Simple text helpers */121 .kebab { width:44px; height:100px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; }122 .dot { width:10px; height:10px; background:#ddd; border-radius:50%; }123</style>124</head>125<body>126<div id="render-target">127 128 <!-- Status bar -->129 <div class="status-bar">130 <div class="status-left">131 <div>8:42</div>132 <div>G</div>133 </div>134 <div class="status-right">135 <!-- WiFi icon -->136 <svg width="60" height="60" viewBox="0 0 24 24" fill="#eaeaea">137 <path d="M12 18.5l2.2-2.2a3.1 3.1 0 00-4.4 0L12 18.5z"></path>138 <path d="M4.9 11.9a9 9 0 0114.2 0l-1.6 1.6a6.9 6.9 0 00-11 0l-1.6-1.6z"></path>139 <path d="M1.8 8a13 13 0 0120.4 0l-1.6 1.6a10.8 10.8 0 00-17.2 0L1.8 8z"></path>140 </svg>141 <!-- Battery icon -->142 <svg width="70" height="60" viewBox="0 0 26 24">143 <rect x="1" y="5" width="20" height="14" rx="2" ry="2" fill="none" stroke="#eaeaea" stroke-width="2"></rect>144 <rect x="3" y="7" width="16" height="10" fill="#eaeaea"></rect>145 <rect x="21.5" y="9" width="3" height="6" fill="#eaeaea"></rect>146 </svg>147 </div>148 </div>149 150 <!-- Title bar -->151 <div class="title-bar">152 <div class="check-wrap">153 <!-- Check icon -->154 <svg width="64" height="64" viewBox="0 0 24 24">155 <circle cx="12" cy="12" r="11" fill="none" stroke="#bfbfbf" stroke-width="2"></circle>156 <path d="M6 12.5l3.2 3.2L18 7.8" stroke="#bfbfbf" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>157 </svg>158 </div>159 <div class="title-center">Presentation (1)</div>160 <div class="title-actions">161 <!-- Kebab menu -->162 <div class="kebab">163 <div class="dot"></div>164 <div class="dot"></div>165 <div class="dot"></div>166 </div>167 </div>168 </div>169 170 <!-- Tooltip bubble -->171 <div class="tooltip">172 <h4>We're saving changes automatically.</h4>173 <p>You can turn Autosave off from Save on the File menu.</p>174 <div class="btn">Got it</div>175 </div>176 177 <!-- Main canvas area -->178 <div class="canvas-area">179 <div class="slide">180 <div class="left-panel"></div>181 <div class="accent-line"></div>182 <div class="right-panel"></div>183 <div class="subtitle-box">Double tap to add subtitle</div>184 <div class="title-box">185 <div>Double tap to<br>add title</div>186 </div>187 </div>188 </div>189 190 <!-- Notes & Comments -->191 <div class="meta-row">192 <div class="meta-item">193 <svg width="44" height="44" viewBox="0 0 24 24" fill="#e8e8e8">194 <path d="M4 4h16v12H7l-3 3V4z"></path>195 </svg>196 <div>Notes</div>197 </div>198 <div class="meta-item">199 <svg width="44" height="44" viewBox="0 0 24 24" fill="#e8e8e8">200 <path d="M21 6v10a2 2 0 01-2 2H7l-4 4V6a2 2 0 012-2h14a2 2 0 012 2z"></path>201 </svg>202 <div>Comments</div>203 </div>204 </div>205 206 <!-- Thumbnails row -->207 <div class="thumb-strip">208 <div class="thumb">209 [IMG: Slide Thumbnail]210 <div class="bar"></div>211 </div>212 <div class="thumb" style="opacity:.45;">[IMG: Empty slot]</div>213 <div class="thumb" style="opacity:.45;">[IMG: Empty slot]</div>214 <div class="thumb" style="opacity:.45;">[IMG: Empty slot]</div>215 <div class="thumb" style="opacity:.45;">[IMG: Empty slot]</div>216 </div>217 218 <!-- Bottom toolbar -->219 <div class="toolbar">220 <div class="tool-btn">221 <svg width="70" height="70" viewBox="0 0 24 24" fill="#9f9f9f">222 <rect x="4" y="4" width="16" height="16" rx="2"></rect>223 </svg>224 </div>225 <div class="tool-btn">226 <svg width="70" height="70" viewBox="0 0 24 24" fill="#9f9f9f">227 <path d="M12 3v18M3 12h18" stroke="#9f9f9f" stroke-width="2"></path>228 </svg>229 </div>230 <div class="tool-btn">231 <svg width="70" height="70" viewBox="0 0 24 24" fill="#9f9f9f">232 <rect x="3" y="5" width="18" height="14" rx="2"></rect>233 <path d="M3 10h18" stroke="#1a1a1a"></path>234 </svg>235 </div>236 <div class="tool-btn">237 <svg width="70" height="70" viewBox="0 0 24 24" fill="#9f9f9f">238 <path d="M4 19l8-8 6 6" stroke="#9f9f9f" stroke-width="2" fill="none"></path>239 <circle cx="9" cy="9" r="3" fill="#9f9f9f" opacity=".35"></circle>240 </svg>241 </div>242 <div class="tool-btn small">243 <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#9f9f9f" stroke-width="2">244 <circle cx="12" cy="12" r="8"></circle>245 </svg>246 </div>247 <div class="tool-btn">248 <svg width="70" height="70" viewBox="0 0 24 24" fill="#9f9f9f">249 <rect x="6" y="4" width="12" height="16" rx="1"></rect>250 <rect x="9" y="8" width="6" height="9" fill="#1a1a1a"></rect>251 </svg>252 </div>253 <div class="tool-btn">254 <svg width="70" height="70" viewBox="0 0 24 24" fill="#9f9f9f">255 <circle cx="12" cy="12" r="8"></circle>256 <rect x="12" y="3" width="1" height="18" fill="#1a1a1a"></rect>257 </svg>258 </div>259 <div class="tool-btn">260 <svg width="70" height="70" viewBox="0 0 24 24" fill="none" stroke="#9f9f9f" stroke-width="2">261 <path d="M7 17l5-5 5 5"></path>262 <path d="M7 7h10"></path>263 </svg>264 </div>265 <div class="tool-btn wide">266 <svg width="76" height="76" viewBox="0 0 24 24" fill="#9f9f9f">267 <path d="M12 4l4 6h-3v10h-2V10H8l4-6z"></path>268 </svg>269 </div>270 </div>271 272</div>273</body>274</html>