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 Presentation Editor Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #0f0f0f; color: #fff;11 }12 13 /* Top status bar */14 .status-bar {15 position: absolute; top: 0; left: 0; width: 100%; height: 80px;16 background: #1c1c1c; display: flex; align-items: center; padding: 0 26px;17 font-size: 28px; color: #e6e6e6;18 }19 .status-left { display: flex; align-items: center; gap: 18px; }20 .status-icons { margin-left: auto; display: flex; align-items: center; gap: 18px; opacity: 0.8; }21 .dot { width: 10px; height: 10px; background: #bcbcbc; border-radius: 50%; display: inline-block; }22 23 /* Toolbar */24 .toolbar {25 position: absolute; top: 80px; left: 0; width: 100%; height: 140px;26 background: #1c1c1c; display: flex; align-items: center; padding: 0 24px;27 }28 .toolbar-title {29 font-size: 36px; color: #ce6a2b; font-weight: 600;30 }31 .toolbar-actions { margin-left: auto; display: flex; align-items: center; gap: 28px; }32 .icon-btn {33 width: 64px; height: 64px; border: 1px solid #707070; border-radius: 10px;34 display: inline-flex; align-items: center; justify-content: center;35 color: #e0e0e0; font-size: 30px; background: #252525;36 }37 .check { background: #252525; border-color: #7a7a7a; }38 .more { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #7a7a7a; }39 40 /* Workspace area */41 .workspace {42 position: absolute; top: 220px; left: 0; width: 100%; height: 1400px;43 background: #000;44 display: flex; justify-content: center; align-items: flex-start;45 }46 47 /* Slide */48 .slide {49 width: 930px; height: 560px; background: #ffffff; border: 1px solid #d9d9d9; border-radius: 2px;50 position: relative; margin-top: 320px; box-shadow: 0 10px 40px rgba(0,0,0,0.35);51 overflow: hidden;52 background-image: repeating-radial-gradient(circle at 55% 55%, rgba(0,0,0,0.035) 0 2px, transparent 2px 16px);53 }54 /* Red shapes group */55 .red-group { position: absolute; left: 95px; top: 160px; width: 740px; }56 .red-title {57 width: 740px; height: 70px; background: #e53935;58 }59 .red-rect {60 position: relative; width: 740px; height: 250px; background: #e53935;61 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15);62 }63 .red-rect .dashed {64 position: absolute; left: 20px; right: 20px; top: 18px; bottom: 18px;65 border: 2px dashed rgba(255,255,255,0.45);66 }67 .subtitle {68 position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);69 text-align: center; color: #fff; font-size: 28px;70 }71 /* Pointer triangle */72 .pointer {73 position: absolute; left: 50%; transform: translateX(-50%);74 width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent;75 border-top: 38px solid #e53935; bottom: -38px;76 }77 78 /* Selection handles */79 .handle {80 position: absolute; width: 32px; height: 32px; border-radius: 50%;81 border: 4px solid #8b8b8b; background: #f2f2f2;82 }83 .red-rect .handle { z-index: 3; }84 .h-tl { top: -16px; left: -16px; }85 .h-tr { top: -16px; right: -16px; }86 .h-bl { bottom: -16px; left: -16px; }87 .h-br { bottom: -16px; right: -16px; }88 .h-tm { top: -16px; left: calc(50% - 16px); }89 .h-bm { bottom: -16px; left: calc(50% - 16px); }90 .h-ml { top: calc(50% - 16px); left: -16px; }91 .h-mr { top: calc(50% - 16px); right: -16px; }92 93 /* Rotate handle above title bar */94 .rotate {95 position: absolute; top: -68px; left: calc(50% - 24px); width: 48px; height: 48px;96 border-radius: 50%; border: 4px solid #8b8b8b; background: #f7f7f7;97 color: #666; font-size: 28px; display: flex; align-items: center; justify-content: center;98 }99 100 /* Bottom utility area */101 .bottom-panel {102 position: absolute; bottom: 250px; left: 0; width: 100%; height: 220px;103 background: #101010; border-top: 1px solid #2c2c2c; display: flex;104 }105 .thumb {106 width: 240px; height: 220px; background: #1f1f1f; display: flex; align-items: center; justify-content: center;107 border-right: 1px solid #2c2c2c;108 }109 .thumb .mini-slide {110 width: 190px; height: 140px; background: #ffffff; border: 1px solid #cfcfcf; position: relative;111 }112 .mini-slide::after {113 content: ''; position: absolute; left: 70px; bottom: 10px;114 width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 16px solid #e53935;115 }116 .panel-right {117 flex: 1; display: flex; align-items: center; padding: 0 34px; gap: 60px;118 }119 .panel-item { display: flex; align-items: center; gap: 16px; color: #d7d7d7; font-size: 34px; }120 .panel-icon {121 width: 44px; height: 44px; border-radius: 6px; border: 2px solid #7a7a7a; display: inline-flex; align-items: center; justify-content: center; color: #bfbfbf;122 }123 124 /* Formatting toolbar */125 .format-bar {126 position: absolute; bottom: 110px; left: 0; width: 100%; height: 120px;127 background: #1b1b1b; border-top: 1px solid #2b2b2b; display: flex; align-items: center; padding: 0 26px; gap: 34px;128 }129 .fmt-btn {130 width: 86px; height: 86px; background: #242424; border: 1px solid #555; border-radius: 10px;131 display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 40px;132 }133 .color-chip { background: #e53935; width: 40px; height: 12px; border-radius: 2px; margin-top: 8px; }134 .list-btn { font-size: 34px; color: #dcdcdc; }135 .spacer { flex: 1; }136 137 /* iOS bottom gesture bar */138 .gesture {139 position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);140 width: 420px; height: 10px; background: #d9d9d9; border-radius: 6px; opacity: 0.9;141 }142</style>143</head>144<body>145<div id="render-target">146 147 <!-- Status Bar -->148 <div class="status-bar">149 <div class="status-left">150 <div>9:34</div>151 <span class="dot"></span>152 <span class="dot"></span>153 <span class="dot"></span>154 </div>155 <div class="status-icons">156 <div>◉</div>157 <div>🔋</div>158 <div>📶</div>159 </div>160 </div>161 162 <!-- Toolbar -->163 <div class="toolbar">164 <div class="icon-btn check">✓</div>165 <div class="toolbar-title">Presentation - Saved</div>166 <div class="toolbar-actions">167 <div class="icon-btn">✎</div>168 <div class="icon-btn">☁</div>169 <div class="icon-btn">🔍</div>170 <div class="icon-btn">🖼</div>171 <div class="icon-btn">⤴</div>172 <div class="more"></div>173 </div>174 </div>175 176 <!-- Workspace with slide -->177 <div class="workspace">178 <div class="slide">179 <div class="red-group">180 <div class="red-title"></div>181 182 <div class="red-rect">183 <div class="dashed"></div>184 <div class="subtitle">Double tap to add subtitle</div>185 186 <!-- Selection handles -->187 <div class="handle h-tl"></div>188 <div class="handle h-tr"></div>189 <div class="handle h-bl"></div>190 <div class="handle h-br"></div>191 <div class="handle h-tm"></div>192 <div class="handle h-bm"></div>193 <div class="handle h-ml"></div>194 <div class="handle h-mr"></div>195 196 <div class="pointer"></div>197 </div>198 199 <div class="rotate">↻</div>200 </div>201 </div>202 </div>203 204 <!-- Bottom panel -->205 <div class="bottom-panel">206 <div class="thumb">207 <div class="mini-slide"></div>208 </div>209 <div class="panel-right">210 <div class="panel-item"><span class="panel-icon">🗒</span><span>Notes</span></div>211 <div class="panel-item"><span class="panel-icon">💬</span><span>Comments</span></div>212 <div class="spacer"></div>213 </div>214 </div>215 216 <!-- Formatting toolbar -->217 <div class="format-bar">218 <div class="fmt-btn">B</div>219 <div class="fmt-btn"><span style="font-style: italic;">I</span></div>220 <div class="fmt-btn"><span style="text-decoration: underline;">U</span></div>221 <div class="fmt-btn">222 <div style="display:flex; flex-direction:column; align-items:center;">223 <span style="font-size:38px;">A</span>224 <div class="color-chip"></div>225 </div>226 </div>227 <div class="fmt-btn list-btn">•</div>228 <div class="fmt-btn list-btn">1.</div>229 <div class="fmt-btn">⇤</div>230 <div class="fmt-btn">⇥</div>231 <div class="spacer"></div>232 <div class="fmt-btn">▲</div>233 </div>234 235 <!-- Gesture bar -->236 <div class="gesture"></div>237 238</div>239</body>240</html>