GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Passwords & Accounts</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #F2F5EF;14 color: #1b1b1b;15 }16 17 /* Status bar */18 .status-bar {19 height: 96px;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #2b2b2b;25 font-size: 36px;26 letter-spacing: 1px;27 }28 .status-right {29 display: flex;30 align-items: center;31 gap: 26px;32 }33 .sb-icon {34 width: 34px; height: 34px;35 border-radius: 6px;36 background: rgba(0,0,0,0.12);37 }38 39 /* Header */40 .header {41 height: 132px;42 display: flex;43 align-items: center;44 padding: 0 36px;45 }46 .back-icon {47 width: 64px; height: 64px; margin-right: 24px;48 }49 .title {50 font-size: 60px;51 font-weight: 600;52 letter-spacing: -0.5px;53 }54 55 /* Content */56 .content {57 position: absolute;58 left: 0;59 right: 0;60 top: 228px; /* 96 + 132 */61 bottom: 90px;62 overflow: hidden;63 padding: 16px 0 0 0;64 }65 .scroller {66 height: 100%;67 overflow-y: auto;68 padding: 0 48px 120px 48px;69 }70 71 .section-label {72 font-size: 38px;73 font-weight: 600;74 color: #2E7D32;75 margin: 18px 0 18px 0;76 }77 78 .list-item {79 display: flex;80 align-items: center;81 gap: 34px;82 padding: 28px 0;83 border-bottom: 1px solid #E3E6DE;84 }85 .app-icon {86 width: 96px; height: 96px;87 border-radius: 50%;88 background: #E0E0E0;89 border: 1px solid #C9C9C9;90 display: flex;91 align-items: center;92 justify-content: center;93 font-size: 28px;94 color: #757575;95 }96 .text-col {97 display: flex;98 flex-direction: column;99 }100 .primary {101 font-size: 46px;102 font-weight: 500;103 color: #171717;104 }105 .secondary {106 font-size: 34px;107 color: #6E6E6E;108 margin-top: 8px;109 }110 111 .add-row {112 display: flex;113 align-items: center;114 gap: 30px;115 padding: 36px 0 26px 0;116 }117 .plus-icon {118 width: 72px; height: 72px; border-radius: 50%;119 background: #E0E0E0; border: 1px solid #C9C9C9;120 display: flex; align-items: center; justify-content: center;121 color: #616161; font-size: 54px; line-height: 0;122 }123 .add-text {124 font-size: 50px; font-weight: 500;125 }126 127 /* Gesture bar */128 .gesture-bar {129 position: absolute;130 bottom: 24px;131 left: 50%;132 transform: translateX(-50%);133 width: 520px;134 height: 12px;135 background: rgba(0,0,0,0.35);136 border-radius: 8px;137 }138 139 /* Helper tiny app icons (labels) */140 .label-rect {141 position: absolute;142 top: 24px; left: 24px; right: 24px; bottom: 24px;143 display: flex; align-items: center; justify-content: center;144 font-size: 24px; color: #666;145 text-align: center;146 line-height: 1.1;147 }148</style>149</head>150<body>151<div id="render-target">152 153 <!-- Status Bar -->154 <div class="status-bar">155 <div class="status-left">9:56</div>156 <div class="status-right">157 <div class="sb-icon" title="Signal"></div>158 <div class="sb-icon" title="Wi‑Fi"></div>159 <div class="sb-icon" title="Battery"></div>160 </div>161 </div>162 163 <!-- Header -->164 <div class="header">165 <svg class="back-icon" viewBox="0 0 24 24">166 <path d="M15.5 4.5 7 12l8.5 7.5" stroke="#1b1b1b" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>167 </svg>168 <div class="title">Passwords & accounts</div>169 </div>170 171 <!-- Content -->172 <div class="content">173 <div class="scroller">174 <div class="section-label">Accounts for Owner</div>175 176 <!-- Adobe -->177 <div class="list-item">178 <div class="app-icon"><div class="label-rect">Adobe</div></div>179 <div class="text-col">180 <div class="primary">dbwscratch.test.id2@gmail.com</div>181 <div class="secondary">Adobe</div>182 </div>183 </div>184 185 <!-- Airbnb -->186 <div class="list-item">187 <div class="app-icon"><div class="label-rect">Airbnb</div></div>188 <div class="text-col">189 <div class="primary">dbwscratch.test.id2@gmail.com</div>190 <div class="secondary">Airbnb</div>191 </div>192 </div>193 194 <!-- Duolingo -->195 <div class="list-item">196 <div class="app-icon"><div class="label-rect">Duolingo</div></div>197 <div class="text-col">198 <div class="primary">Duolingo</div>199 <div class="secondary">Duolingo</div>200 </div>201 </div>202 203 <!-- Easy Notes -->204 <div class="list-item">205 <div class="app-icon"><div class="label-rect">Notes</div></div>206 <div class="text-col">207 <div class="primary">note</div>208 <div class="secondary">Easy Notes</div>209 </div>210 </div>211 212 <!-- Google -->213 <div class="list-item">214 <div class="app-icon"><div class="label-rect">Google</div></div>215 <div class="text-col">216 <div class="primary">dbwscratch.test.id2@gmail.com</div>217 <div class="secondary">Google</div>218 </div>219 </div>220 221 <!-- Guest -->222 <div class="list-item">223 <div class="app-icon"><div class="label-rect">LMS</div></div>224 <div class="text-col">225 <div class="primary">Guest</div>226 <div class="secondary">LMS Applications</div>227 </div>228 </div>229 230 <!-- Pinterest -->231 <div class="list-item">232 <div class="app-icon"><div class="label-rect">Pinterest</div></div>233 <div class="text-col">234 <div class="primary">Pinterest</div>235 <div class="secondary">Pinterest</div>236 </div>237 </div>238 239 <!-- Tripadvisor -->240 <div class="list-item">241 <div class="app-icon"><div class="label-rect">Tripadvisor</div></div>242 <div class="text-col">243 <div class="primary">Cerebra R</div>244 <div class="secondary">Tripadvisor</div>245 </div>246 </div>247 248 <!-- Add account -->249 <div class="add-row">250 <div class="plus-icon">+</div>251 <div class="add-text">Add account</div>252 </div>253 </div>254 </div>255 256 <div class="gesture-bar"></div>257</div>258</body>259</html>