GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI - Write Sheet</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#ffffff;11 border-radius:40px;12 box-shadow:0 10px 40px rgba(0,0,0,0.15);13 }14 15 /* Status bar */16 .status-bar {17 position:absolute; top:0; left:0; right:0;18 height:120px;19 background:#8f8984;20 color:#fff;21 padding:0 40px;22 display:flex; align-items:center; justify-content:space-between;23 font-weight:600; font-size:40px;24 }25 .status-icons { display:flex; align-items:center; gap:28px; }26 .status-icons svg { width:54px; height:54px; fill:none; stroke:#fff; stroke-width:6; }27 28 /* App toolbar */29 .top-toolbar {30 position:absolute; top:120px; left:0; right:0;31 height:140px; background:#ffffff;32 border-bottom:1px solid #e6e6e6;33 display:flex; align-items:center; justify-content:space-between;34 padding:0 40px;35 }36 .left-actions { display:flex; align-items:center; gap:34px; }37 .right-actions { display:flex; align-items:center; gap:30px; }38 .done { font-size:46px; color:#333; }39 .tool-icon { width:54px; height:54px; }40 .page-badge {41 width:68px; height:68px; border:2px solid #4a4a4a; border-radius:8px;42 display:flex; align-items:center; justify-content:center;43 font-size:38px; color:#333;44 }45 .close-lg { width:64px; height:64px; stroke:#333; stroke-width:8; }46 47 /* Document area (white page) */48 .doc-area {49 position:absolute; top:260px; left:0; right:0; bottom:0;50 background:#ffffff;51 }52 .page-placeholder {53 position:absolute; top:340px; left:40px; right:40px; bottom:1250px;54 border:1px dashed #dddddd;55 background:#fff;56 }57 58 /* Bottom sheet */59 .bottom-sheet {60 position:absolute; left:0; bottom:0; width:100%;61 height:1120px; background:#ffffff;62 border-radius:40px 40px 0 0;63 box-shadow:0 -10px 30px rgba(0,0,0,0.12);64 border-top:8px solid #e9d9ff;65 }66 .sheet-header {67 position:relative;68 height:140px;69 display:flex; align-items:center; justify-content:center;70 }71 .sheet-header .title { font-size:56px; font-weight:700; color:#7d56f6; }72 .sheet-header .back, .sheet-header .sheet-close {73 position:absolute; top:44px; width:60px; height:60px; stroke:#7d56f6; stroke-width:8;74 }75 .sheet-header .back { left:34px; }76 .sheet-header .sheet-close { right:34px; }77 .prompt-label {78 margin:0 34px 20px;79 font-size:40px; color:#6b6b6b;80 }81 82 /* Content card simulating the purple gradient container */83 .content-card {84 margin:0 34px;85 background:#ffffff;86 border:2px solid #e9d9ff;87 border-radius:26px;88 box-shadow:0 10px 16px rgba(125,86,246,0.06) inset;89 padding:26px 30px 20px;90 max-height:720px; overflow:auto;91 }92 .content-card h4 { margin:10px 0 6px; font-size:42px; color:#333; }93 .content-card p, .content-card li { font-size:36px; line-height:1.35; color:#333; }94 .content-card ol { margin:10px 0 10px 20px; }95 .content-card ul { margin:6px 0 6px 20px; list-style:disc; }96 .content-note { margin-top:12px; font-size:34px; color:#555; }97 98 /* Inline actions row */99 .actions-row {100 display:flex; align-items:center; justify-content:space-between;101 padding:20px 28px 14px;102 color:#5a5a5a; font-size:36px;103 }104 .left-reactions { display:flex; align-items:center; gap:40px; }105 .action-btn { display:flex; align-items:center; gap:18px; color:#6b6b6b; }106 .action-btn svg { width:48px; height:48px; stroke:#6b6b6b; stroke-width:6; fill:none; }107 .actions-row .spacer { flex:1; }108 109 /* Footer buttons */110 .sheet-footer {111 border-top:1px solid #eaeaea;112 padding:22px 34px;113 display:flex; align-items:center; justify-content:space-between;114 }115 .footer-left { font-size:48px; color:#333; }116 .append-btn {117 display:flex; align-items:center; gap:16px;118 font-size:48px; color:#333;119 }120 .append-btn .bubble {121 width:54px; height:54px; border:2px solid #333; border-radius:10px;122 position:relative;123 }124 .append-btn .bubble:after {125 content:'+'; position:absolute; right:-18px; bottom:-12px;126 font-weight:700; font-size:48px; color:#333;127 }128 .dots-menu { width:16px; height:64px; display:flex; flex-direction:column; gap:12px; align-items:center; margin-left:20px; }129 .dots-menu span { width:12px; height:12px; background:#333; border-radius:50%; display:block; }130 131 /* Small helper */132 .muted { color:#888; }133</style>134</head>135<body>136<div id="render-target">137 138 <!-- Status bar -->139 <div class="status-bar">140 <div>9:41</div>141 <div class="status-icons">142 <!-- Do not disturb circle -->143 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><line x1="6" y1="12" x2="18" y2="12"></line></svg>144 <!-- Wifi -->145 <svg viewBox="0 0 24 24">146 <path d="M3 9c4.5-3.5 13.5-3.5 18 0"></path>147 <path d="M6 12c3-2.2 9-2.2 12 0"></path>148 <path d="M9 15c1.5-1 4.5-1 6 0"></path>149 <circle cx="12" cy="18" r="1"></circle>150 </svg>151 <!-- Battery -->152 <svg viewBox="0 0 26 24">153 <rect x="2" y="6" width="18" height="12" rx="2"></rect>154 <rect x="20.5" y="9" width="3" height="6"></rect>155 </svg>156 <div style="font-size:36px;">87%</div>157 </div>158 </div>159 160 <!-- App toolbar -->161 <div class="top-toolbar">162 <div class="left-actions">163 <div class="done">Done</div>164 <!-- Floppy disk (save) -->165 <svg class="tool-icon" viewBox="0 0 24 24">166 <rect x="3" y="3" width="18" height="18" rx="2" fill="none" stroke="#333" stroke-width="2"></rect>167 <rect x="7" y="6" width="8" height="5" fill="none" stroke="#333" stroke-width="2"></rect>168 <rect x="7" y="13" width="10" height="5" fill="none" stroke="#333" stroke-width="2"></rect>169 </svg>170 <!-- Undo -->171 <svg class="tool-icon" viewBox="0 0 24 24">172 <path d="M8 7L3 12l5 5" fill="none" stroke="#333" stroke-width="2"></path>173 <path d="M21 12c-4-6-10-6-13-5" fill="none" stroke="#333" stroke-width="2"></path>174 </svg>175 <!-- Redo -->176 <svg class="tool-icon" viewBox="0 0 24 24">177 <path d="M16 7l5 5-5 5" fill="none" stroke="#333" stroke-width="2"></path>178 <path d="M3 12c4-6 10-6 13-5" fill="none" stroke="#333" stroke-width="2"></path>179 </svg>180 </div>181 <div class="right-actions">182 <div class="page-badge">1</div>183 <!-- Close X -->184 <svg class="close-lg" viewBox="0 0 24 24">185 <line x1="5" y1="5" x2="19" y2="19"></line>186 <line x1="19" y1="5" x2="5" y2="19"></line>187 </svg>188 </div>189 </div>190 191 <!-- Document page area -->192 <div class="doc-area">193 <div class="page-placeholder"></div>194 </div>195 196 <!-- Bottom sheet -->197 <div class="bottom-sheet">198 <div class="sheet-header">199 <!-- Back arrow -->200 <svg class="back" viewBox="0 0 24 24">201 <polyline points="15,5 7,12 15,19" fill="none"></polyline>202 </svg>203 <div class="title">Write</div>204 <!-- Close -->205 <svg class="sheet-close" viewBox="0 0 24 24">206 <line x1="5" y1="5" x2="19" y2="19"></line>207 <line x1="19" y1="5" x2="5" y2="19"></line>208 </svg>209 </div>210 211 <div class="prompt-label">@AI Write a meeting agenda about</div>212 213 <div class="content-card">214 <ol>215 <li>216 <h4>Welcome and Introductions</h4>217 <ul>218 <li>Greet attendees and introduce all participants.</li>219 <li>Review meeting objectives and expected outcomes.</li>220 </ul>221 </li>222 <li>223 <h4>Review of Previous Meeting</h4>224 <ul>225 <li>Approve minutes from the last meeting.</li>226 <li>Brief status update on previous action items.</li>227 </ul>228 </li>229 <li>230 <h4>Topic Discussion</h4>231 <ul>232 <li>Provide a brief overview of the topic for discussion.</li>233 <li>Present the main discussion points.</li>234 <li>Allow time for group discussion and questions.</li>235 </ul>236 </li>237 <li>238 <h4>Action Items</h4>239 <ul>240 <li>Identify any action items resulting from the discussion.</li>241 <li>Assign responsibility and deadline for each action item.</li>242 </ul>243 </li>244 <li>245 <h4>Next Meeting</h4>246 <ul>247 <li>Decide on the date, time and place of the next meeting.</li>248 <li>Confirm the agenda items for the next meeting.</li>249 </ul>250 </li>251 <li>252 <h4>Adjournment</h4>253 <ul>254 <li>End the meeting with thanks to the attendees.</li>255 </ul>256 </li>257 </ol>258 <p class="content-note">Note: Please come prepared with any relevant materials or reports before the meeting to ensure a productive discussion.</p>259 </div>260 261 <!-- Inline actions row -->262 <div class="actions-row">263 <div class="left-reactions">264 <!-- Thumbs up -->265 <svg viewBox="0 0 24 24">266 <path d="M7 10v10h5l6-6V8h-6l1-4-2-1-4 7z" ></path>267 </svg>268 <!-- Thumbs down -->269 <svg viewBox="0 0 24 24">270 <path d="M7 14V4h5L18 10v6h-6l1 4-2 1-4-7z"></path>271 </svg>272 </div>273 <div class="action-btn">274 <svg viewBox="0 0 24 24">275 <path d="M5 12h14M5 6h10M5 18h10" ></path>276 </svg>277 <span>Rewrite</span>278 </div>279 <div class="action-btn">280 <svg viewBox="0 0 24 24">281 <path d="M4 20v-6l10-10 6 6-10 10H4z" ></path>282 </svg>283 <span>Continue</span>284 </div>285 <div class="action-btn">286 <svg viewBox="0 0 24 24">287 <path d="M4 7h10M10 7v10M4 17h16M14 12h6" ></path>288 </svg>289 </div>290 </div>291 292 <!-- Footer -->293 <div class="sheet-footer">294 <div class="footer-left">Close</div>295 <div style="display:flex; align-items:center; gap:26px;">296 <div class="append-btn">297 <div class="bubble"></div>298 <div>Append</div>299 </div>300 <div class="dots-menu">301 <span></span><span></span><span></span>302 </div>303 </div>304 </div>305 </div>306 307</div>308</body>309</html>