GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Passwords & Accounts - Android UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#FCFCF8;11    color:#222;12  }13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; right:0;16    height:100px;17    padding:0 36px;18    display:flex; align-items:center; justify-content:space-between;19    font-weight:600; color:#2b2b2b;20  }21  .status-left { display:flex; align-items:center; gap:24px; }22  .status-time { font-size:44px; letter-spacing:0.5px; }23  .status-icons { display:flex; align-items:center; gap:26px; }24  .icon-dot{ width:10px; height:10px; background:#555; border-radius:50%; }25  .ic { width:40px; height:40px; }26  .ic svg { width:100%; height:100%; }27  /* Back arrow */28  .back-btn {29    position:absolute; top:120px; left:36px;30    width:70px; height:70px; display:flex; align-items:center; justify-content:center;31  }32  /* Title */33  .title {34    position:absolute; top:210px; left:48px; right:48px;35    font-size:92px; font-weight:700; line-height:1.06;36  }37  /* Sections */38  .section {39    position:absolute; left:48px; right:48px;40  }41  .sec-label {42    color:#2E7D32; font-weight:700; font-size:42px;43    margin-bottom:28px;44  }45  .row {46    display:flex; align-items:center; gap:32px;47    padding:24px 0;48    border-bottom:1px solid #E8E8E8;49  }50  .avatar {51    width:94px; height:94px; border-radius:50%;52    display:flex; align-items:center; justify-content:center;53    font-weight:700; font-size:36px; color:#fff;54  }55  .avatar.google { background:#4285F4; }56  .avatar.adobe { background:#D32F2F; border-radius:18px; }57  .avatar.airbnb { background:#FF8DA1; }58  .avatar.duo { background:#7CB342; }59  .avatar.note { background:#64B5F6; border-radius:20px; }60  .row-content { flex:1; }61  .row-title { font-size:54px; font-weight:700; }62  .row-sub { font-size:36px; color:#6A6A6A; margin-top:6px; }63  /* Autofill actions */64  .divider {65    width:2px; height:70px; background:#D8D8D8; margin:0 20px;66  }67  .gear {68    width:70px; height:70px; border-radius:14px;69    display:flex; align-items:center; justify-content:center;70  }71  .gear svg { width:60px; height:60px; fill:#2E7D32; }72  /* Positions of sections */73  #sec-passwords { top:520px; }74  #sec-autofill { top:800px; }75  #sec-accounts { top:1120px; }76</style>77</head>78<body>79<div id="render-target">80 81  <!-- Status Bar -->82  <div class="status-bar">83    <div class="status-left">84      <div class="status-time">9:55</div>85      <!-- Small icons mimicking Android status -->86      <div class="ic">87        <svg viewBox="0 0 24 24">88          <path d="M4 10h16v10H4z" fill="#9E9E9E"></path>89          <path d="M6 12h12v6H6z" fill="#4CAF50"></path>90        </svg>91      </div>92      <div class="ic">93        <svg viewBox="0 0 24 24">94          <path d="M12 2l4 8H8l4-8zm0 20a4 4 0 100-8 4 4 0 000 8z" fill="#9E9E9E"></path>95        </svg>96      </div>97      <div class="ic">98        <svg viewBox="0 0 24 24">99          <path d="M4 14h16v2H4zm3-4h10v2H7zm5-4h0" fill="#9E9E9E"></path>100        </svg>101      </div>102      <div class="icon-dot"></div>103    </div>104    <div class="status-icons">105      <div class="ic">106        <svg viewBox="0 0 24 24">107          <path d="M2 18h20v2H2zM6 11l6-6 6 6" fill="#9E9E9E"></path>108        </svg>109      </div>110      <div class="ic">111        <svg viewBox="0 0 24 24">112          <path d="M3 8h18v8H3z" fill="#9E9E9E"></path>113          <path d="M20 4v2M4 4v2" stroke="#9E9E9E" stroke-width="2"></path>114        </svg>115      </div>116      <div class="ic">117        <svg viewBox="0 0 24 24">118          <path d="M6 18h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2z" fill="#9E9E9E"></path>119          <path d="M20 6v12M4 6v12" stroke="#9E9E9E"></path>120        </svg>121      </div>122    </div>123  </div>124 125  <!-- Back button -->126  <div class="back-btn">127    <svg viewBox="0 0 24 24">128      <path d="M15 19L8 12l7-7" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>129    </svg>130  </div>131 132  <!-- Title -->133  <div class="title">Passwords & accounts</div>134 135  <!-- Passwords section -->136  <div class="section" id="sec-passwords">137    <div class="sec-label">Passwords</div>138    <div class="row">139      <div class="avatar google">G</div>140      <div class="row-content">141        <div class="row-title">Google</div>142        <div class="row-sub">5 passwords</div>143      </div>144    </div>145  </div>146 147  <!-- Autofill service section -->148  <div class="section" id="sec-autofill">149    <div class="sec-label">Autofill service</div>150    <div class="row" style="border-bottom:none;">151      <div class="avatar google">G</div>152      <div class="row-content">153        <div class="row-title">Google</div>154      </div>155      <div class="divider"></div>156      <div class="gear">157        <svg viewBox="0 0 24 24">158          <path d="M12 8a4 4 0 110 8 4 4 0 010-8zm8.7 3l-1.9-.5c-.2-.6-.5-1.2-.8-1.7l1.1-1.6-1.7-1.7-1.6 1.1c-.5-.3-1.1-.6-1.7-.8L13 2.3h-2L9.9 4c-.6.2-1.2.5-1.7.8L6.6 3.7 4.9 5.4l1.1 1.6c-.3.5-.6 1.1-.8 1.7L3.3 9h-2l.3 2 1.9.5c.2.6.5 1.2.8 1.7l-1.1 1.6 1.7 1.7 1.6-1.1c.5.3 1.1.6 1.7.8l.5 1.9h2l.5-1.9c.6-.2 1.2-.5 1.7-.8l1.6 1.1 1.7-1.7-1.1-1.6c.3-.5.6-1.1.8-1.7l1.9-.5.3-2h-2z" fill="#2E7D32"></path>159        </svg>160      </div>161    </div>162  </div>163 164  <!-- Accounts section -->165  <div class="section" id="sec-accounts">166    <div class="sec-label">Accounts for Owner</div>167 168    <div class="row">169      <div class="avatar adobe">A</div>170      <div class="row-content">171        <div class="row-title">dbwscratch.test.id2@gmail.com</div>172        <div class="row-sub">Adobe</div>173      </div>174    </div>175 176    <div class="row">177      <div class="avatar airbnb">A</div>178      <div class="row-content">179        <div class="row-title">dbwscratch.test.id2@gmail.com</div>180        <div class="row-sub">Airbnb</div>181      </div>182    </div>183 184    <div class="row">185      <div class="avatar duo">D</div>186      <div class="row-content">187        <div class="row-title">Duolingo</div>188        <div class="row-sub">Duolingo</div>189      </div>190    </div>191 192    <div class="row">193      <div class="avatar note">n</div>194      <div class="row-content">195        <div class="row-title">note</div>196        <div class="row-sub">Easy Notes</div>197      </div>198    </div>199 200    <div class="row" style="border-bottom:none;">201      <div class="avatar google">G</div>202      <div class="row-content">203        <div class="row-title">dbwscratch.test.id2@gmail.com</div>204        <div class="row-sub">Google</div>205      </div>206    </div>207  </div>208 209</div>210</body>211</html>