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 Screen 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: #111214;14    color: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    height: 90px;20    padding: 0 32px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #EDEDED;25    font-size: 36px;26    letter-spacing: 1px;27  }28  .status-right {29    display: flex;30    align-items: center;31    gap: 26px;32  }33  .icon {34    width: 44px;35    height: 44px;36    display: inline-flex;37    align-items: center;38    justify-content: center;39    fill: #EDEDED;40  }41 42  /* App bar */43  .app-bar {44    height: 140px;45    display: flex;46    align-items: center;47    padding: 0 24px 0 16px;48  }49  .app-title {50    font-size: 64px;51    font-weight: 600;52    margin-left: 24px;53    letter-spacing: 0.2px;54    flex: 1;55  }56  .action {57    width: 56px;58    height: 56px;59    display: flex;60    align-items: center;61    justify-content: center;62  }63 64  /* Content */65  .content {66    padding: 24px 40px 120px 40px;67  }68  .section-label {69    font-size: 44px;70    color: #bdbdbd;71    margin: 24px 0 40px 0;72  }73  .item {74    padding: 38px 0;75    border-bottom: 0px solid #222; /* keep structure simple; no divider visible */76    font-size: 44px;77    color: #f2f2f2;78    line-height: 1.35;79  }80  .item:last-child { border-bottom: none; }81 82  /* Bottom gesture bar */83  .gesture-bar {84    position: absolute;85    bottom: 28px;86    left: 50%;87    transform: translateX(-50%);88    width: 520px;89    height: 12px;90    background: #ffffff;91    opacity: 0.7;92    border-radius: 8px;93  }94</style>95</head>96<body>97<div id="render-target">98 99  <!-- Status Bar -->100  <div class="status-bar">101    <div class="status-left">8:21</div>102    <div class="status-right">103      <!-- Wifi -->104      <svg class="icon" viewBox="0 0 24 24">105        <path d="M12 20.5c.7 0 1.2-.5 1.2-1.2s-.5-1.3-1.2-1.3-1.2.6-1.2 1.3.5 1.2 1.2 1.2zM4 9.5l1.4 1.4C7.7 8.7 9.8 8 12 8s4.3.7 6.6 2.9L20 9.5C17.4 7.1 14.7 6 12 6S6.6 7.1 4 9.5zm4 4l1.4 1.4c1.4-1.3 3.1-1.9 4.6-1.9s3.2.6 4.6 1.9L20 13.5C17.9 11.6 15 11 12 11s-5.9.6-8 2.5z"/>106      </svg>107      <!-- Signal (simple bars) -->108      <svg class="icon" viewBox="0 0 24 24">109        <path d="M3 20h2v-5H3v5zm4 0h2v-8H7v8zm4 0h2v-11h-2v11zm4 0h2V6h-2v14zm4 0h2V3h-2v17z"/>110      </svg>111      <!-- Battery -->112      <svg class="icon" viewBox="0 0 24 24">113        <path d="M16 6h2c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2h-2v1h-2v-1H8c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h8zm0 2H8v8h8V8z"/>114      </svg>115    </div>116  </div>117 118  <!-- App Bar -->119  <div class="app-bar">120    <!-- Back arrow -->121    <div class="action">122      <svg class="icon" viewBox="0 0 24 24">123        <path d="M15.4 5.4 8.8 12l6.6 6.6-1.4 1.4L6 12l8-8 1.4 1.4z"/>124      </svg>125    </div>126    <div class="app-title">Settings</div>127    <!-- Overflow menu -->128    <div class="action">129      <svg class="icon" viewBox="0 0 24 24">130        <path d="M12 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>131      </svg>132    </div>133  </div>134 135  <!-- Content -->136  <div class="content">137    <div class="section-label">General settings</div>138 139    <div class="item">jasonsmith9810244659106538@gmail.com</div>140    <div class="item">amelia.miller2709@gmail.com</div>141    <div class="item">miller.william197305@gmail.com</div>142    <div class="item" style="color:#e6e6e6;">Add account</div>143  </div>144 145  <!-- Bottom gesture bar -->146  <div class="gesture-bar"></div>147</div>148</body>149</html>