GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Settings Screen Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #121212;14    font-family: Arial, Helvetica, sans-serif;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    padding: 0 40px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #FAFAFA;26    font-size: 42px;27    letter-spacing: 0.5px;28  }29  .status-left {30    display: flex;31    align-items: center;32    gap: 22px;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 14px;38  }39 40  /* App bar */41  .app-bar {42    height: 140px;43    display: flex;44    align-items: center;45    padding: 0 36px;46    gap: 24px;47  }48  .app-title {49    font-size: 64px;50    font-weight: 500;51    letter-spacing: 0.2px;52  }53  .app-actions {54    margin-left: auto;55    display: flex;56    align-items: center;57    padding-right: 24px;58  }59 60  /* Content list */61  .content {62    padding: 30px 60px 0 60px;63  }64  .section-title {65    font-size: 44px;66    color: #E0E0E0;67    margin: 40px 0 40px 0;68  }69  .list-item {70    font-size: 46px;71    color: #EDEDED;72    margin: 34px 0 34px 0;73    line-height: 1.35;74  }75  .add-account {76    font-size: 44px;77    color: #FFFFFF;78    margin-top: 40px;79  }80 81  /* Bottom gesture pill */82  .gesture {83    position: absolute;84    bottom: 34px;85    left: 50%;86    transform: translateX(-50%);87    width: 300px;88    height: 16px;89    background: #E0E0E0;90    border-radius: 10px;91    opacity: 0.85;92  }93 94  /* Icon helpers */95  .icon {96    display: inline-block;97  }98  .dots-vertical svg circle { fill: #FFFFFF; }99</style>100</head>101<body>102<div id="render-target">103 104  <!-- Status Bar -->105  <div class="status-bar">106    <div class="status-left">107      <div class="time">9:08</div>108      <div style="font-size:36px; color:#BDBDBD;">• • • • •</div>109      <div style="font-size:36px; color:#BDBDBD;">•</div>110    </div>111    <div class="status-icons">112      <!-- WiFi -->113      <svg class="icon" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">114        <path d="M2 8c5-5 15-5 20 0"/>115        <path d="M6 12c3-3 9-3 12 0"/>116        <path d="M10 16c1.5-1.5 4.5-1.5 6 0"/>117        <circle cx="12" cy="20" r="1.5" fill="#FFFFFF"/>118      </svg>119      <!-- Battery -->120      <svg class="icon" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">121        <rect x="2" y="6" width="18" height="12" rx="2"/>122        <rect x="20" y="10" width="2" height="4"/>123        <rect x="4" y="8" width="12" height="8" fill="#FFFFFF" />124      </svg>125    </div>126  </div>127 128  <!-- App Bar -->129  <div class="app-bar">130    <!-- Back Arrow -->131    <svg class="icon" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">132      <path d="M15 18l-6-6 6-6"/>133    </svg>134 135    <div class="app-title">Settings</div>136 137    <div class="app-actions">138      <!-- Vertical dots menu -->139      <div class="dots-vertical">140        <svg width="40" height="80" viewBox="0 0 24 48">141          <circle cx="12" cy="8" r="3"/>142          <circle cx="12" cy="24" r="3"/>143          <circle cx="12" cy="40" r="3"/>144        </svg>145      </div>146    </div>147  </div>148 149  <!-- Content -->150  <div class="content">151    <div class="section-title">General settings</div>152 153    <div class="list-item">jasonsmith9810244659106538@gmail.com</div>154    <div class="list-item">amelia.miller2709@gmail.com</div>155    <div class="list-item">miller.william197305@gmail.com</div>156 157    <div class="add-account">Add account</div>158  </div>159 160  <!-- Bottom gesture pill -->161  <div class="gesture"></div>162 163</div>164</body>165</html>