GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Mobile PPT Editor Mock</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; color:#333;11 }12 13 /* Status bar */14 .status-bar {15 position:absolute; top:0; left:0; width:100%; height:110px;16 display:flex; align-items:center; justify-content:space-between;17 padding:0 32px; font-size:40px; color:#555;18 }19 .status-right { display:flex; align-items:center; gap:26px; }20 .icon { width:48px; height:48px; display:inline-block; }21 22 /* App bar */23 .app-bar {24 position:absolute; top:110px; left:0; width:100%; height:120px;25 background:#fff; border-bottom:1px solid #e5e5e5;26 display:flex; align-items:center; padding:0 24px;27 }28 .app-title {29 position:absolute; left:0; top:0; width:100%; height:120px;30 display:flex; align-items:center; justify-content:center;31 font-size:40px; color:#333;32 }33 .app-actions { margin-left:auto; display:flex; align-items:center; gap:36px; z-index:2; }34 .action { width:56px; height:56px; }35 36 /* Canvas */37 .canvas {38 position:absolute; top:230px; left:0; width:100%; height:1500px;39 background:#efefef;40 }41 42 /* Slide on canvas */43 .slide {44 position:absolute; left:50%; top:420px; transform:translateX(-50%);45 width:930px; height:650px; background:#fff; box-shadow:0 2px 0 rgba(0,0,0,0.03);46 }47 .placeholder {48 position:absolute; left:60px; right:60px; top:240px; height:260px;49 border:2px dashed #9c9c9c; border-radius:6px;50 }51 .subtitle-text {52 position:absolute; left:0; right:0; top:360px;53 text-align:center; font-size:34px; color:#3a3a3a;54 }55 .rotate-handle {56 position:absolute; left:50%; top:210px; transform:translateX(-50%);57 width:64px; height:64px; border-radius:50%; border:4px solid #777; background:#fff;58 display:flex; align-items:center; justify-content:center;59 }60 61 /* Notes / Comments row */62 .meta-row {63 position:absolute; bottom:360px; right:32px; display:flex; gap:40px; align-items:center;64 font-size:40px; color:#444;65 }66 .meta-item { display:flex; align-items:center; gap:16px; }67 .thumbnail-bar {68 position:absolute; bottom:290px; left:20px; display:flex; gap:24px; align-items:flex-end;69 }70 .thumb {71 width:280px; height:180px; background:#fff; border:1px solid #dcdcdc;72 box-shadow:inset 0 0 0 1px #f0f0f0;73 position:relative;74 }75 .thumb-index {76 position:absolute; bottom:0; left:0; width:100%; height:42px; background:#9b4a37;77 color:#fff; font-size:34px; display:flex; align-items:center; padding-left:16px;78 }79 .thumb-index.alt { background:#ffffff; color:#333; border-top:1px solid #e0e0e0; }80 81 .float-plus {82 position:absolute; bottom:300px; right:36px;83 width:86px; height:86px; border-radius:14px; background:#e85c2b; display:flex; align-items:center; justify-content:center;84 }85 .bottom-toolbar {86 position:absolute; bottom:0; left:0; width:100%; height:240px;87 background:#fafafa; border-top:1px solid #e5e5e5;88 }89 .format-row {90 position:absolute; left:24px; right:24px; bottom:40px; display:flex; align-items:center; gap:46px;91 font-size:56px; color:#222;92 }93 .underA {94 position:relative; padding-bottom:8px;95 }96 .underA::after {97 content:""; position:absolute; left:0; right:0; bottom:-10px; height:10px; background:#e1432f;98 border-radius:2px;99 }100 .list-icon, .align-icon { width:80px; height:60px; }101 .handle-bar {102 position:absolute; bottom:16px; left:50%; transform:translateX(-50%);103 width:520px; height:12px; background:#cfcfcf; border-radius:6px;104 }105</style>106</head>107<body>108<div id="render-target">109 110 <!-- Status Bar -->111 <div class="status-bar">112 <div>11:47</div>113 <div class="status-right">114 <!-- Simple "Do not disturb" circle -->115 <svg class="icon" viewBox="0 0 24 24">116 <circle cx="12" cy="12" r="10" fill="none" stroke="#666" stroke-width="2"></circle>117 <rect x="6" y="11" width="12" height="2" fill="#666"></rect>118 </svg>119 <!-- Wi‑Fi icon -->120 <svg class="icon" viewBox="0 0 24 24">121 <path d="M2 8c5-4 15-4 20 0" stroke="#666" stroke-width="2" fill="none"/>122 <path d="M5 12c4-3 10-3 14 0" stroke="#666" stroke-width="2" fill="none"/>123 <path d="M8 16c3-2 5-2 8 0" stroke="#666" stroke-width="2" fill="none"/>124 <circle cx="12" cy="19" r="2" fill="#666"/>125 </svg>126 <!-- Battery 100% -->127 <svg class="icon" viewBox="0 0 24 24">128 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#666" stroke-width="2"></rect>129 <rect x="20" y="9" width="2" height="6" fill="#666"></rect>130 <rect x="4" y="8" width="14" height="8" fill="#08a000"></rect>131 </svg>132 <div style="font-size:40px; color:#333;">100%</div>133 </div>134 </div>135 136 <!-- App Header -->137 <div class="app-bar">138 <!-- Left check icon -->139 <svg class="action" viewBox="0 0 24 24">140 <path d="M4 12l5 5 11-11" stroke="#666" stroke-width="2" fill="none"/>141 </svg>142 143 <div class="app-title">Presentation (1) - Saved</div>144 145 <div class="app-actions">146 <!-- Pen icon -->147 <svg class="action" viewBox="0 0 24 24">148 <path d="M3 17l2 4 4-2L20 8l-4-4L5 15z" fill="none" stroke="#555" stroke-width="2"/>149 </svg>150 <!-- Search icon -->151 <svg class="action" viewBox="0 0 24 24">152 <circle cx="10" cy="10" r="6" fill="none" stroke="#555" stroke-width="2"></circle>153 <path d="M14 14l6 6" stroke="#555" stroke-width="2" fill="none"/>154 </svg>155 <!-- Slideshow icon -->156 <svg class="action" viewBox="0 0 24 24">157 <rect x="3" y="6" width="16" height="10" rx="2" ry="2" fill="none" stroke="#555" stroke-width="2"></rect>158 <polygon points="10,9 15,11 10,13" fill="#555"></polygon>159 </svg>160 <!-- Undo icon -->161 <svg class="action" viewBox="0 0 24 24">162 <path d="M10 7H5l4-4M5 7h8a7 7 0 1 1-7 7" fill="none" stroke="#555" stroke-width="2"/>163 </svg>164 <!-- Kebab menu -->165 <svg class="action" viewBox="0 0 24 24">166 <circle cx="12" cy="5" r="2" fill="#555"></circle>167 <circle cx="12" cy="12" r="2" fill="#555"></circle>168 <circle cx="12" cy="19" r="2" fill="#555"></circle>169 </svg>170 </div>171 </div>172 173 <!-- Editing Canvas -->174 <div class="canvas">175 <div class="slide">176 <!-- rotate handle above placeholder -->177 <div class="rotate-handle">178 <svg viewBox="0 0 24 24" width="36" height="36">179 <path d="M12 6v4l3-2M12 20a8 8 0 1 1 0-16" fill="none" stroke="#777" stroke-width="2"/>180 </svg>181 </div>182 183 <div class="placeholder"></div>184 <div class="subtitle-text">Double tap to add subtitle</div>185 </div>186 187 <!-- Bottom meta row -->188 <div class="meta-row">189 <div class="meta-item">190 <svg class="icon" viewBox="0 0 24 24">191 <rect x="4" y="4" width="16" height="16" fill="none" stroke="#666" stroke-width="2"></rect>192 <line x1="7" y1="8" x2="17" y2="8" stroke="#666" stroke-width="2"/>193 <line x1="7" y1="12" x2="17" y2="12" stroke="#666" stroke-width="2"/>194 <line x1="7" y1="16" x2="13" y2="16" stroke="#666" stroke-width="2"/>195 </svg>196 <div>Notes</div>197 </div>198 <div class="meta-item">199 <svg class="icon" viewBox="0 0 24 24">200 <path d="M4 4h16v11H9l-5 5V4z" fill="none" stroke="#666" stroke-width="2"/>201 </svg>202 <div>Comments</div>203 </div>204 </div>205 206 <!-- Slide thumbnails -->207 <div class="thumbnail-bar">208 <div class="thumb">209 <div class="thumb-index">1</div>210 </div>211 <div class="thumb">212 <div class="thumb-index alt">2</div>213 </div>214 </div>215 216 <!-- Floating Add button -->217 <div class="float-plus">218 <svg viewBox="0 0 24 24" width="40" height="40">219 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="3" fill="none"/>220 </svg>221 </div>222 </div>223 224 <!-- Bottom formatting toolbar -->225 <div class="bottom-toolbar">226 <div class="format-row">227 <div style="font-weight:bold;">B</div>228 <div style="font-style:italic;">I</div>229 <div style="text-decoration:underline;">U</div>230 <div class="underA">A</div>231 232 <!-- Bulleted list -->233 <svg class="list-icon" viewBox="0 0 48 36">234 <circle cx="6" cy="8" r="3" fill="#555"></circle>235 <rect x="14" y="6" width="28" height="4" fill="#555"></rect>236 <circle cx="6" cy="20" r="3" fill="#555"></circle>237 <rect x="14" y="18" width="28" height="4" fill="#555"></rect>238 <circle cx="6" cy="32" r="3" fill="#555"></circle>239 <rect x="14" y="30" width="28" height="4" fill="#555"></rect>240 </svg>241 242 <!-- Numbered list -->243 <svg class="list-icon" viewBox="0 0 48 36">244 <text x="2" y="10" font-size="8" fill="#555">1</text>245 <rect x="14" y="6" width="28" height="4" fill="#555"></rect>246 <text x="2" y="22" font-size="8" fill="#555">2</text>247 <rect x="14" y="18" width="28" height="4" fill="#555"></rect>248 <text x="2" y="34" font-size="8" fill="#555">3</text>249 <rect x="14" y="30" width="28" height="4" fill="#555"></rect>250 </svg>251 252 <!-- Align left -->253 <svg class="align-icon" viewBox="0 0 48 36">254 <rect x="4" y="6" width="32" height="5" fill="#555"></rect>255 <rect x="4" y="14" width="24" height="5" fill="#555"></rect>256 <rect x="4" y="22" width="32" height="5" fill="#555"></rect>257 </svg>258 259 <!-- Align center -->260 <svg class="align-icon" viewBox="0 0 48 36">261 <rect x="8" y="6" width="32" height="5" fill="#555"></rect>262 <rect x="12" y="14" width="24" height="5" fill="#555"></rect>263 <rect x="8" y="22" width="32" height="5" fill="#555"></rect>264 </svg>265 266 <!-- Align right -->267 <svg class="align-icon" viewBox="0 0 48 36">268 <rect x="12" y="6" width="32" height="5" fill="#555"></rect>269 <rect x="20" y="14" width="24" height="5" fill="#555"></rect>270 <rect x="12" y="22" width="32" height="5" fill="#555"></rect>271 </svg>272 </div>273 274 <div class="handle-bar"></div>275 </div>276 277</div>278</body>279</html>