GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Settings Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #121212;14    color: #EDEDED;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 96px;24    padding: 0 32px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #EDEDED;29    font-size: 32px;30    box-sizing: border-box;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 18px;36    opacity: 0.9;37  }38  .icon-dot {39    width: 16px;40    height: 16px;41    background: #EDEDED;42    border-radius: 50%;43    opacity: 0.9;44  }45 46  /* App bar */47  .app-bar {48    position: absolute;49    top: 96px;50    left: 0;51    width: 100%;52    height: 144px;53    display: flex;54    align-items: center;55    padding: 0 24px;56    box-sizing: border-box;57  }58  .app-bar .title {59    font-size: 56px;60    font-weight: 600;61    margin-left: 24px;62    letter-spacing: 0.3px;63  }64  .bar-actions {65    margin-left: auto;66    padding-right: 12px;67  }68 69  /* Icons */70  .icon-btn {71    width: 96px;72    height: 96px;73    display: flex;74    align-items: center;75    justify-content: center;76  }77  .icon {78    width: 48px;79    height: 48px;80    fill: #EDEDED;81  }82 83  /* Content list */84  .content {85    position: absolute;86    top: 240px; /* below bars */87    left: 0;88    width: 100%;89    height: calc(100% - 240px);90    overflow: hidden;91  }92 93  .list {94    padding-top: 8px;95  }96 97  .row {98    height: 120px;99    display: flex;100    align-items: center;101    padding: 0 40px;102    box-sizing: border-box;103  }104  .row-label {105    font-size: 42px;106    color: #EDEDED;107  }108 109  .simple-row {110    padding-left: 96px; /* aligns with rows that have dots */111  }112 113  .divider {114    height: 1px;115    background: #242424;116    margin: 10px 0;117  }118 119  .section-caption {120    color: #9AA0A6;121    font-size: 34px;122    padding: 32px 40px 16px 40px;123    letter-spacing: 0.2px;124  }125 126  .dot {127    width: 54px;128    height: 54px;129    border-radius: 50%;130    margin-right: 26px;131  }132  .dot.blue { background: #6FA8FF; }133  .dot.purple { background: #8B8EF9; }134  .dot.green { background: #66BB8A; }135  .dot.teal { background: #4FA7A0; }136 137  /* Bottom gesture pill */138  .gesture {139    position: absolute;140    bottom: 38px;141    left: 50%;142    transform: translateX(-50%);143    width: 460px;144    height: 14px;145    background: #E6E6E6;146    border-radius: 10px;147    opacity: 0.9;148  }149</style>150</head>151<body>152<div id="render-target">153  <!-- Status bar -->154  <div class="status-bar">155    <div>6:56</div>156    <div class="status-icons">157      <div class="icon-dot"></div>158      <div class="icon-dot"></div>159      <div class="icon-dot"></div>160      <div class="icon-dot"></div>161    </div>162  </div>163 164  <!-- App Bar -->165  <div class="app-bar">166    <div class="icon-btn">167      <svg class="icon" viewBox="0 0 24 24">168        <path d="M15.5 4l-8 8 8 8 1.5-1.5L10.5 12 17 5.5 15.5 4z"/>169      </svg>170    </div>171    <div class="title">Settings</div>172    <div class="bar-actions icon-btn">173      <svg class="icon" viewBox="0 0 24 24">174        <circle cx="12" cy="5" r="2.2"></circle>175        <circle cx="12" cy="12" r="2.2"></circle>176        <circle cx="12" cy="19" r="2.2"></circle>177      </svg>178    </div>179  </div>180 181  <!-- Content List -->182  <div class="content">183    <div class="list">184      <div class="row simple-row">185        <div class="row-label">General</div>186      </div>187      <div class="row simple-row">188        <div class="row-label">Events from Gmail</div>189      </div>190 191      <div class="divider"></div>192 193      <div class="section-caption">victorjonesdbwresearchpersona@gmail.com</div>194 195      <div class="row">196        <div class="dot blue"></div>197        <div class="row-label">Events</div>198      </div>199      <div class="row">200        <div class="dot purple"></div>201        <div class="row-label">Tasks</div>202      </div>203 204      <div class="divider"></div>205 206      <div class="section-caption">More</div>207 208      <div class="row">209        <div class="dot green"></div>210        <div class="row-label">Birthdays</div>211      </div>212      <div class="row">213        <div class="dot teal"></div>214        <div class="row-label">Holidays</div>215      </div>216    </div>217  </div>218 219  <!-- Bottom gesture bar -->220  <div class="gesture"></div>221</div>222</body>223</html>