GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Settings Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Roboto, Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #121212;20    color: #EDEDED;21  }22 23  /* Status bar */24  .status-bar {25    height: 110px;26    padding: 0 36px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #EDEDED;31    font-size: 34px;32    letter-spacing: 1px;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 24px;38  }39  .dot {40    width: 10px;41    height: 10px;42    background: #EDEDED;43    border-radius: 50%;44    opacity: 0.9;45  }46 47  /* App bar */48  .app-bar {49    height: 160px;50    display: flex;51    align-items: center;52    padding: 0 28px;53  }54  .back {55    width: 88px;56    height: 88px;57    display: flex;58    align-items: center;59    justify-content: center;60    margin-right: 8px;61  }62  .title {63    font-size: 64px;64    color: #E0E0E0;65    font-weight: 500;66    letter-spacing: 0.2px;67  }68  .app-actions {69    margin-left: auto;70    width: 88px;71    height: 88px;72    display: flex;73    align-items: center;74    justify-content: center;75  }76 77  /* Content list */78  .content {79    padding: 24px 56px 0 56px;80  }81  .list {82    margin-top: 24px;83  }84  .list .section {85    font-size: 40px;86    color: #E0E0E0;87    margin: 36px 0 20px 24px;88  }89  .item {90    font-size: 46px;91    color: #FFFFFF;92    padding: 28px 24px;93  }94  .item + .item {95    margin-top: 8px;96  }97  .cta {98    font-size: 44px;99    color: #E0E0E0;100    padding: 36px 24px;101    margin-top: 24px;102  }103 104  /* Gesture bar */105  .gesture {106    position: absolute;107    bottom: 26px;108    left: 50%;109    transform: translateX(-50%);110    width: 360px;111    height: 14px;112    background: #E0E0E0;113    opacity: 0.8;114    border-radius: 12px;115  }116 117  /* Simple icon colors */118  svg {119    fill: #EDEDED;120  }121</style>122</head>123<body>124<div id="render-target">125  <!-- Status bar -->126  <div class="status-bar">127    <div class="status-left">11:06</div>128    <div class="status-right">129      <div class="dot"></div>130      <div class="dot"></div>131      <div class="dot"></div>132      <!-- WiFi icon -->133      <svg width="44" height="44" viewBox="0 0 24 24" aria-hidden="true">134        <path d="M12 20l-1.6-1.6a2.2 2.2 0 013.2 0L12 20zM2 9a16 16 0 0120 0l-1.8 1.8A13.5 13.5 0 004 10.8L2 9zm3.6 3.6a10.8 10.8 0 0112.8 0L16.6 14a8.2 8.2 0 00-9.2 0l-1.8-1.4zm3.5 3a6 6 0 015.8 0L12 18.5 9.1 15.6z"></path>135      </svg>136      <!-- Battery icon -->137      <svg width="50" height="44" viewBox="0 0 28 24" aria-hidden="true">138        <path d="M24 8h2v8h-2v3a3 3 0 01-3 3H5a3 3 0 01-3-3V8a3 3 0 013-3h16a3 3 0 013 3v0zM6 8h13v8H6V8z"></path>139      </svg>140    </div>141  </div>142 143  <!-- App bar -->144  <div class="app-bar">145    <div class="back" aria-label="Back">146      <svg width="56" height="56" viewBox="0 0 24 24">147        <path d="M15.5 5l-7 7 7 7 1.5-1.5L11 12l6-6z"></path>148      </svg>149    </div>150    <div class="title">Settings</div>151    <div class="app-actions" aria-label="More">152      <svg width="48" height="48" viewBox="0 0 24 24">153        <path d="M12 7a2 2 0 110-4 2 2 0 010 4zm0 7a2 2 0 110-4 2 2 0 010 4zm0 7a2 2 0 110-4 2 2 0 010 4z"></path>154      </svg>155    </div>156  </div>157 158  <!-- Content -->159  <div class="content">160    <div class="list">161      <div class="section">General settings</div>162      <div class="item">dbwscratch.test.id2@gmail.com</div>163      <div class="item">nguyenmichael558@gmail.com</div>164      <div class="cta">Add account</div>165    </div>166  </div>167 168  <!-- Gesture bar -->169  <div class="gesture"></div>170</div>171</body>172</html>