GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Passwords & accounts UI</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#F3F5EF;11 color:#1f1f1f;12 }13 14 /* Top bars */15 .status-bar {16 position:absolute; top:0; left:0; width:100%; height:100px;17 display:flex; align-items:center; justify-content:space-between;18 padding:0 40px; color:#3f3f3f; font-size:36px;19 }20 .status-right { display:flex; align-items:center; gap:28px; }21 .status-dot { width:14px; height:14px; background:#6b6b6b; border-radius:50%; }22 .status-icon {23 width:28px; height:28px; border:2px solid #6b6b6b; border-radius:6px;24 }25 26 .app-bar {27 position:absolute; top:100px; left:0; width:100%; height:140px;28 display:flex; align-items:center;29 padding:0 30px; border-bottom:1px solid #e4e4e4;30 background:transparent;31 }32 .back-btn {33 width:88px; height:88px; display:flex; align-items:center; justify-content:center;34 margin-right:18px;35 }36 .app-title { font-size:54px; font-weight:600; letter-spacing:0.2px; }37 38 /* Content */39 .content { position:absolute; top:240px; left:0; right:0; bottom:0; overflow:hidden; }40 .section-label {41 font-size:40px; color:#2E7D32; margin:26px 40px 6px;42 }43 44 .item { display:flex; align-items:center; padding:28px 40px; }45 .icon {46 width:86px; height:86px; border-radius:50%;47 margin-right:28px;48 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);49 }50 .icon.adobe { background:#FF6F61; }51 .icon.airbnb { background:#FF8A80; }52 .icon.duo { background:#8BC34A; }53 .icon.notes { background:#9CC9FF; }54 .icon.guest { background:#C7C7FF; }55 .icon.pinterest { background:#EF5350; }56 .icon.trip { background:#8EE08E; }57 58 .text { display:flex; flex-direction:column; }59 .title { font-size:44px; line-height:56px; }60 .subtitle { font-size:32px; color:#6b6b6b; }61 62 .divider { height:1px; background:#e7e7e7; margin:0 40px; }63 64 .add-row { display:flex; align-items:center; padding:34px 40px; }65 .plus {66 width:70px; height:70px; border-radius:18px; border:2px solid #9e9e9e;67 display:flex; align-items:center; justify-content:center; color:#5f5f5f; font-size:48px; margin-right:26px;68 background:#fff;69 }70 .add-text { font-size:44px; }71 72 /* Sync card */73 .sync-card {74 position:absolute; left:0; bottom:170px; width:100%;75 padding:28px 40px 20px; border-top:1px solid #dadada;76 background:transparent;77 }78 .sync-row { display:flex; align-items:center; justify-content:space-between; }79 .sync-title { font-size:44px; }80 .sync-sub { font-size:32px; color:#6b6b6b; margin-top:10px; }81 82 .switch {83 width:168px; height:88px; border-radius:44px; background:#9e9e9e;84 position:relative;85 }86 .switch::after {87 content:""; width:76px; height:76px; border-radius:38px; background:#ffffff;88 position:absolute; top:6px; left:8px; box-shadow:0 2px 6px rgba(0,0,0,0.15);89 }90 91 /* Bottom navigation pill */92 .nav-pill {93 position:absolute; bottom:72px; left:50%;94 transform:translateX(-50%);95 width:480px; height:12px; background:#BDBDBD; border-radius:6px;96 }97 98 /* Small labels inside icons for clarity */99 .icon-label {100 width:100%; height:100%; display:flex; align-items:center; justify-content:center;101 color:#ffffff; font-size:30px; font-weight:600;102 }103 104 /* Simple inline svg styling */105 svg { display:block; }106</style>107</head>108<body>109<div id="render-target">110 111 <!-- Status Bar -->112 <div class="status-bar">113 <div>9:58</div>114 <div class="status-right">115 <div class="status-dot"></div>116 <div class="status-icon"></div>117 <div class="status-icon" style="border-radius:50%"></div>118 <div class="status-dot"></div>119 <div class="status-icon" style="width:34px; height:20px; border-radius:4px"></div>120 </div>121 </div>122 123 <!-- App Bar -->124 <div class="app-bar">125 <div class="back-btn">126 <svg width="48" height="48" viewBox="0 0 48 48">127 <path d="M30 8 L14 24 L30 40" stroke="#2f2f2f" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>128 </svg>129 </div>130 <div class="app-title">Passwords & accounts</div>131 </div>132 133 <!-- Content List -->134 <div class="content">135 <div class="section-label">Accounts for Owner</div>136 137 <div class="item">138 <div class="icon adobe"><div class="icon-label">A</div></div>139 <div class="text">140 <div class="title">dbwscratch.test.id2@gmail.com</div>141 <div class="subtitle">Adobe</div>142 </div>143 </div>144 145 <div class="item">146 <div class="icon airbnb"><div class="icon-label">Air</div></div>147 <div class="text">148 <div class="title">dbwscratch.test.id2@gmail.com</div>149 <div class="subtitle">Airbnb</div>150 </div>151 </div>152 153 <div class="item">154 <div class="icon duo"><div class="icon-label">D</div></div>155 <div class="text">156 <div class="title">Duolingo</div>157 <div class="subtitle">Duolingo</div>158 </div>159 </div>160 161 <div class="item">162 <div class="icon notes"><div class="icon-label">✎</div></div>163 <div class="text">164 <div class="title">note</div>165 <div class="subtitle">Easy Notes</div>166 </div>167 </div>168 169 <div class="item">170 <div class="icon guest"><div class="icon-label">G</div></div>171 <div class="text">172 <div class="title">Guest</div>173 <div class="subtitle">LMS Applications</div>174 </div>175 </div>176 177 <div class="item">178 <div class="icon pinterest"><div class="icon-label">P</div></div>179 <div class="text">180 <div class="title">Pinterest</div>181 <div class="subtitle">Pinterest</div>182 </div>183 </div>184 185 <div class="item">186 <div class="icon trip"><div class="icon-label">T</div></div>187 <div class="text">188 <div class="title">Cerebra R</div>189 <div class="subtitle">Tripadvisor</div>190 </div>191 </div>192 193 <div class="add-row">194 <div class="plus">+</div>195 <div class="add-text">Add account</div>196 </div>197 198 <!-- Sync setting card -->199 <div class="sync-card">200 <div class="sync-row">201 <div>202 <div class="sync-title">Automatically sync app data</div>203 <div class="sync-sub">Let apps refresh data automatically</div>204 </div>205 <div class="switch"></div>206 </div>207 </div>208 </div>209 210 <div class="nav-pill"></div>211</div>212</body>213</html>