GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Save Screen</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #000000;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 150px;24 background: #2b2b2b;25 color: #ffffff;26 display: flex;27 align-items: center;28 padding: 0 40px;29 box-sizing: border-box;30 }31 .status-left { font-size: 42px; font-weight: 600; }32 .status-right {33 margin-left: auto;34 display: flex;35 align-items: center;36 gap: 28px;37 }38 .status-dot {39 width: 16px; height: 16px; background: #e6e6e6; border-radius: 50%;40 }41 42 /* App bar */43 .app-bar {44 position: absolute;45 top: 150px;46 left: 0;47 width: 1080px;48 height: 140px;49 background: #2b2b2b;50 display: flex;51 align-items: center;52 padding: 0 40px;53 box-sizing: border-box;54 color: #eaeaea;55 }56 .back-btn {57 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 24px;58 }59 .title {60 font-size: 54px; font-weight: 600; letter-spacing: 0.5px;61 }62 63 /* Content */64 .content {65 position: absolute;66 top: 290px;67 left: 0;68 width: 100%;69 padding: 40px 60px;70 box-sizing: border-box;71 color: #eaeaea;72 }73 .doc-title {74 font-size: 60px;75 color: #d46a33;76 font-weight: 700;77 margin-top: 20px;78 }79 .doc-path {80 font-size: 34px;81 color: #9e9e9e;82 margin-top: 10px;83 }84 85 .section {86 margin-top: 80px;87 }88 .section h3 {89 font-size: 44px;90 margin: 0 0 30px 0;91 font-weight: 600;92 }93 94 .toggle-row {95 display: flex;96 align-items: center;97 gap: 30px;98 margin-top: 10px;99 }100 .toggle-label {101 font-size: 40px;102 }103 .switch {104 width: 280px;105 height: 58px;106 background: #c7622f;107 border-radius: 29px;108 position: relative;109 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);110 }111 .switch .knob {112 position: absolute;113 right: 6px;114 top: 6px;115 width: 46px;116 height: 46px;117 border-radius: 50%;118 background: #bdbdbd;119 }120 121 .hint {122 font-size: 34px;123 color: #bcbcbc;124 margin-top: 36px;125 }126 127 .action-list {128 margin-top: 70px;129 display: flex;130 flex-direction: column;131 gap: 50px;132 }133 .action {134 display: flex;135 align-items: center;136 gap: 30px;137 }138 .action svg {139 width: 72px;140 height: 72px;141 }142 .action span {143 font-size: 42px;144 color: #eaeaea;145 }146 .icon-stroke { stroke: #8cb5ff; fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }147 148 /* Gesture bar */149 .gesture-bar {150 position: absolute;151 bottom: 38px;152 left: 50%;153 transform: translateX(-50%);154 width: 420px;155 height: 14px;156 background: #e6e6e6;157 border-radius: 7px;158 opacity: 0.9;159 }160</style>161</head>162<body>163<div id="render-target">164 165 <!-- Top status bar -->166 <div class="status-bar">167 <div class="status-left">11:04</div>168 <div class="status-right">169 <!-- Simple status icons -->170 <svg width="36" height="36" viewBox="0 0 36 36">171 <circle cx="18" cy="18" r="10" fill="#eaeaea"></circle>172 <rect x="15" y="6" width="6" height="6" fill="#2b2b2b"></rect>173 </svg>174 <div class="status-dot"></div>175 <svg width="46" height="36" viewBox="0 0 46 36">176 <path d="M4 26h26" stroke="#eaeaea" stroke-width="4" stroke-linecap="round"></path>177 <path d="M8 20h18" stroke="#eaeaea" stroke-width="4" stroke-linecap="round"></path>178 <path d="M12 14h10" stroke="#eaeaea" stroke-width="4" stroke-linecap="round"></path>179 <rect x="36" y="10" width="6" height="16" rx="2" fill="none" stroke="#eaeaea" stroke-width="4"></rect>180 </svg>181 </div>182 </div>183 184 <!-- App bar -->185 <div class="app-bar">186 <div class="back-btn">187 <svg width="56" height="56" viewBox="0 0 56 56">188 <path d="M34 12 L18 28 L34 44" stroke="#eaeaea" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>189 </svg>190 </div>191 <div class="title">Save</div>192 </div>193 194 <!-- Content -->195 <div class="content">196 <div class="doc-title">Presentation</div>197 <div class="doc-path">This device » Documents</div>198 199 <div class="section">200 <h3>Autosave</h3>201 <div class="toggle-row">202 <div class="toggle-label">On</div>203 <div class="switch"><div class="knob"></div></div>204 </div>205 <div class="hint">All your changes are saved automatically.</div>206 </div>207 208 <div class="action-list">209 <div class="action">210 <!-- Rename icon: monitor with pencil -->211 <svg viewBox="0 0 72 72">212 <rect x="8" y="14" width="48" height="30" rx="4" class="icon-stroke"></rect>213 <path d="M20 54h24" class="icon-stroke"></path>214 <path d="M50 18l12 12" class="icon-stroke"></path>215 <path d="M44 24l6-6 12 12-6 6" class="icon-stroke"></path>216 </svg>217 <span>Rename this file</span>218 </div>219 220 <div class="action">221 <!-- Link icon: document with chain -->222 <svg viewBox="0 0 72 72">223 <rect x="12" y="10" width="36" height="48" rx="6" class="icon-stroke"></rect>224 <path d="M48 26l12 0" class="icon-stroke"></path>225 <path d="M45 36c0-6 6-6 12-6" class="icon-stroke"></path>226 <path d="M24 36c0 6 6 6 12 6" class="icon-stroke"></path>227 <path d="M24 22h16" class="icon-stroke"></path>228 </svg>229 <span>Copy a link to this file</span>230 </div>231 232 <div class="action">233 <!-- Export icon: tray with arrow -->234 <svg viewBox="0 0 72 72">235 <rect x="10" y="36" width="52" height="20" rx="4" class="icon-stroke"></rect>236 <path d="M36 12v22" class="icon-stroke"></path>237 <path d="M28 22l8-8 8 8" class="icon-stroke"></path>238 </svg>239 <span>Export this file to ODP</span>240 </div>241 </div>242 </div>243 244 <div class="gesture-bar"></div>245</div>246</body>247</html>