GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Passwords & accounts - Mock</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: "Roboto", Arial, sans-serif;12 color: #EDEDED;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #111615;20 }21 22 /* Status bar */23 .statusbar {24 position: absolute;25 top: 0;26 left: 0;27 width: 1080px;28 height: 100px;29 color: #FFFFFF;30 font-size: 36px;31 display: flex;32 align-items: center;33 padding: 0 36px;34 box-sizing: border-box;35 }36 .statusbar .time {37 flex: 1;38 }39 .statusbar .icons {40 display: flex;41 gap: 26px;42 align-items: center;43 }44 .statusbar svg {45 width: 36px;46 height: 36px;47 fill: none;48 stroke: #FFFFFF;49 stroke-width: 3;50 }51 52 /* Back arrow and page content */53 .back-arrow {54 position: absolute;55 top: 120px;56 left: 28px;57 width: 60px;58 height: 60px;59 display: flex;60 align-items: center;61 justify-content: center;62 }63 .page {64 position: absolute;65 top: 140px;66 left: 0;67 right: 0;68 padding: 0 48px;69 box-sizing: border-box;70 }71 .title {72 font-size: 88px;73 font-weight: 500;74 letter-spacing: 0.5px;75 margin: 60px 0 20px 0;76 }77 78 .section-title {79 color: #9FE5AF;80 font-size: 36px;81 margin-top: 48px;82 margin-bottom: 24px;83 }84 85 .row {86 display: flex;87 align-items: center;88 gap: 28px;89 padding: 24px 0;90 border-bottom: 0 solid transparent;91 }92 .avatar {93 width: 84px;94 height: 84px;95 border-radius: 50%;96 background: #E0E0E0;97 border: 1px solid #BDBDBD;98 color: #757575;99 display: flex;100 align-items: center;101 justify-content: center;102 font-size: 18px;103 text-align: center;104 }105 .main-text {106 font-size: 44px;107 line-height: 1.2;108 }109 .sub-text {110 font-size: 30px;111 color: #9BA1A0;112 margin-top: 6px;113 }114 115 .add-row {116 display: flex;117 align-items: center;118 gap: 28px;119 padding: 28px 0 32px 0;120 }121 .add-row .label {122 font-size: 44px;123 }124 .plus-icon {125 width: 72px;126 height: 72px;127 display: inline-flex;128 align-items: center;129 justify-content: center;130 }131 .divider {132 width: 100%;133 height: 2px;134 background: #2A2F2E;135 margin: 12px 0 24px 0;136 }137 138 /* Toggle setting */139 .setting {140 display: flex;141 align-items: center;142 justify-content: space-between;143 padding: 12px 0 24px 0;144 }145 .setting .texts .label {146 font-size: 46px;147 margin-bottom: 12px;148 }149 .setting .texts .hint {150 font-size: 30px;151 color: #A2A7A6;152 }153 .toggle {154 width: 156px;155 height: 76px;156 border-radius: 38px;157 background: #89DFA0;158 position: relative;159 box-shadow: inset 0 0 0 2px rgba(0,0,0,0.2);160 }161 .toggle::after {162 content: '';163 position: absolute;164 width: 64px;165 height: 64px;166 border-radius: 50%;167 background: #CFF8D2;168 right: 6px;169 top: 6px;170 box-shadow: 0 2px 4px rgba(0,0,0,0.35);171 }172 173 /* Bottom gesture bar */174 .gesture-bar {175 position: absolute;176 bottom: 42px;177 left: 50%;178 transform: translateX(-50%);179 width: 240px;180 height: 12px;181 background: #DADADA;182 border-radius: 8px;183 opacity: 0.85;184 }185</style>186</head>187<body>188<div id="render-target">189 <!-- Status bar -->190 <div class="statusbar">191 <div class="time">3:54</div>192 <div class="icons">193 <!-- Simple icons to simulate status -->194 <svg viewBox="0 0 24 24" aria-hidden="true">195 <path d="M4 5h16M4 10h12M4 15h8" />196 </svg>197 <svg viewBox="0 0 24 24" aria-hidden="true">198 <circle cx="12" cy="12" r="10" />199 </svg>200 <svg viewBox="0 0 24 24" aria-hidden="true">201 <path d="M3 12h18" />202 </svg>203 <svg viewBox="0 0 24 24" aria-hidden="true">204 <path d="M3 21h18v-6H3v6zM7 9h10l-2-6H9l-2 6z" />205 </svg>206 <svg viewBox="0 0 24 24" aria-hidden="true">207 <path d="M3 7h18v10H3z" />208 </svg>209 </div>210 </div>211 212 <!-- Back arrow -->213 <div class="back-arrow">214 <svg viewBox="0 0 24 24" width="48" height="48">215 <path d="M15 6L9 12l6 6" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>216 </svg>217 </div>218 219 <!-- Page content -->220 <div class="page">221 <div class="title">Passwords & accounts</div>222 223 <div class="section-title">Passwords</div>224 <div class="row">225 <div class="avatar">[IMG: Google logo]</div>226 <div>227 <div class="main-text">Google</div>228 <div class="sub-text">3 passwords</div>229 </div>230 </div>231 232 <div class="section-title">Autofill service</div>233 <div class="row">234 <div class="main-text">None</div>235 </div>236 237 <div class="section-title">Accounts for Owner</div>238 <div class="row">239 <div class="avatar">[IMG: Google logo]</div>240 <div>241 <div class="main-text">dbwscratch.test.id3@gmail.com</div>242 <div class="sub-text">Google</div>243 </div>244 </div>245 246 <div class="row">247 <div class="avatar">[IMG: Guest avatar]</div>248 <div>249 <div class="main-text">Guest</div>250 <div class="sub-text">LMS Applications</div>251 </div>252 </div>253 254 <div class="add-row">255 <div class="plus-icon">256 <svg viewBox="0 0 24 24">257 <path d="M12 5v14M5 12h14" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>258 </svg>259 </div>260 <div class="label">Add account</div>261 </div>262 263 <div class="divider"></div>264 265 <div class="setting">266 <div class="texts">267 <div class="label">Automatically sync app data</div>268 <div class="hint">Let apps refresh data automatically</div>269 </div>270 <div class="toggle" aria-label="On"></div>271 </div>272 </div>273 274 <div class="gesture-bar"></div>275</div>276</body>277</html>