GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Main Group UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #111111;14    color: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    padding: 0 32px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #F3F3F3;30    font-size: 34px;31    letter-spacing: 0.5px;32  }33  .status-left, .status-right { display: flex; align-items: center; gap: 22px; }34  .status-dot { width: 10px; height: 10px; background: #BEBEBE; border-radius: 50%; }35 36  /* Header */37  .header {38    position: absolute;39    top: 120px;40    left: 0;41    width: 1080px;42    height: 140px;43    display: flex;44    align-items: center;45    justify-content: center;46  }47  .back-btn {48    position: absolute;49    left: 28px;50    top: 50%;51    transform: translateY(-50%);52    width: 72px;53    height: 72px;54  }55  .title {56    font-size: 64px;57    font-weight: 600;58    letter-spacing: 0.5px;59    color: #FFFFFF;60  }61 62  /* Search bar */63  .search-wrap {64    position: absolute;65    top: 280px;66    left: 40px;67    width: 1000px;68    height: 120px;69    background: #1A1A1A;70    border-radius: 60px;71    box-shadow: 0 12px 24px rgba(0,0,0,0.35);72    display: flex;73    align-items: center;74    padding: 0 40px;75    box-sizing: border-box;76  }77  .search-placeholder {78    flex: 1;79    color: #8D8D8D;80    font-size: 36px;81  }82  .search-plus {83    width: 72px;84    height: 72px;85    border-radius: 36px;86    display: flex;87    align-items: center;88    justify-content: center;89    color: #FFFFFF;90  }91 92  /* List */93  .list {94    position: absolute;95    top: 460px;96    left: 0;97    width: 1080px;98  }99  .row {100    display: flex;101    align-items: center;102    padding: 36px 48px;103    box-sizing: border-box;104    gap: 28px;105  }106  .row + .row { margin-top: 16px; }107  .row .left-icons { display: flex; align-items: center; gap: 30px; width: 220px; }108  .row .content { flex: 1; }109  .city-line {110    display: flex;111    align-items: center;112    gap: 14px;113  }114  .city-name {115    font-size: 54px;116    font-weight: 600;117    color: #FFFFFF;118  }119  .country {120    margin-top: 8px;121    font-size: 36px;122    color: #CFCFCF;123  }124  .drag {125    width: 84px;126    height: 84px;127    display: flex;128    align-items: center;129    justify-content: center;130  }131 132  /* Bottom gesture bar */133  .gesture-bar {134    position: absolute;135    bottom: 40px;136    left: 50%;137    transform: translateX(-50%);138    width: 320px;139    height: 14px;140    background: #E7E7E7;141    border-radius: 8px;142    opacity: 0.85;143  }144</style>145</head>146<body>147<div id="render-target">148 149  <!-- Status Bar -->150  <div class="status-bar">151    <div class="status-left">152      <div>9:31</div>153      <!-- small app icons represented by dots/ghost shapes -->154      <svg width="36" height="36" viewBox="0 0 36 36"><circle cx="18" cy="18" r="16" fill="#EDEDED" opacity="0.6"/></svg>155      <svg width="36" height="36" viewBox="0 0 36 36"><circle cx="18" cy="18" r="16" fill="#EDEDED" opacity="0.6"/></svg>156      <svg width="36" height="36" viewBox="0 0 36 36"><circle cx="18" cy="18" r="16" fill="#EDEDED" opacity="0.6"/></svg>157      <svg width="36" height="36" viewBox="0 0 36 36"><circle cx="18" cy="18" r="16" fill="#EDEDED" opacity="0.6"/></svg>158      <svg width="36" height="36" viewBox="0 0 36 36"><circle cx="18" cy="18" r="16" fill="#EDEDED" opacity="0.6"/></svg>159      <div class="status-dot"></div>160    </div>161    <div class="status-right">162      <!-- mute icon -->163      <svg width="40" height="40" viewBox="0 0 24 24">164        <path d="M3 9v6h4l5 5V4L7 9H3z" fill="#EDEDED" opacity="0.85"></path>165        <path d="M16 9l5 5M21 9l-5 5" stroke="#EDEDED" stroke-width="2" stroke-linecap="round" opacity="0.85"></path>166      </svg>167      <!-- wifi -->168      <svg width="44" height="44" viewBox="0 0 24 24">169        <path d="M2 8c5-4 15-4 20 0M5 11c3-3 11-3 14 0M8 14c2-2 6-2 8 0M12 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"></path>170      </svg>171      <!-- battery -->172      <svg width="48" height="48" viewBox="0 0 28 16">173        <rect x="1" y="3" width="22" height="10" rx="2" stroke="#EDEDED" stroke-width="2" fill="none"></rect>174        <rect x="3" y="5" width="16" height="6" rx="1" fill="#EDEDED"></rect>175        <rect x="24" y="6" width="3" height="4" rx="1" fill="#EDEDED"></rect>176      </svg>177    </div>178  </div>179 180  <!-- Header -->181  <div class="header">182    <svg class="back-btn" viewBox="0 0 24 24">183      <path d="M15 19l-7-7 7-7" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>184    </svg>185    <div class="title">Main Group</div>186  </div>187 188  <!-- Search bar -->189  <div class="search-wrap">190    <div class="search-placeholder">Enter name of city or timezone</div>191    <div class="search-plus">192      <svg width="56" height="56" viewBox="0 0 24 24">193        <path d="M12 5v14M5 12h14" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round"></path>194      </svg>195    </div>196  </div>197 198  <!-- List -->199  <div class="list">200    <!-- Row 1 -->201    <div class="row">202      <div class="left-icons">203        <!-- red X -->204        <svg width="44" height="44" viewBox="0 0 24 24">205          <path d="M5 5l14 14M19 5L5 19" stroke="#E53935" stroke-width="3" stroke-linecap="round"></path>206        </svg>207        <!-- home icon -->208        <svg width="54" height="54" viewBox="0 0 24 24">209          <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4H9v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9z" fill="#FFFFFF"></path>210        </svg>211      </div>212      <div class="content">213        <div class="city-line">214          <div class="city-name">Dawson Creek</div>215          <!-- pencil -->216          <svg width="34" height="34" viewBox="0 0 24 24">217            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z" fill="#FFFFFF"></path>218            <path d="M20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#FFFFFF"></path>219          </svg>220        </div>221        <div class="country">Canada</div>222      </div>223      <div class="drag">224        <!-- hamburger/drag -->225        <svg width="70" height="70" viewBox="0 0 24 24">226          <path d="M4 8h16M4 12h16M4 16h16" stroke="#FFFFFF" stroke-width="2.8" stroke-linecap="round"></path>227        </svg>228      </div>229    </div>230 231    <!-- Row 2 -->232    <div class="row">233      <div class="left-icons">234        <!-- red X -->235        <svg width="44" height="44" viewBox="0 0 24 24">236          <path d="M5 5l14 14M19 5L5 19" stroke="#E53935" stroke-width="3" stroke-linecap="round"></path>237        </svg>238        <!-- numeric badge "1" -->239        <div style="font-size: 36px; color: #FFFFFF;">1</div>240      </div>241      <div class="content">242        <div class="city-line">243          <div class="city-name">Sydney</div>244          <!-- pencil -->245          <svg width="34" height="34" viewBox="0 0 24 24">246            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z" fill="#FFFFFF"></path>247            <path d="M20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#FFFFFF"></path>248          </svg>249        </div>250        <div class="country">Australia</div>251      </div>252      <div class="drag">253        <svg width="70" height="70" viewBox="0 0 24 24">254          <path d="M4 8h16M4 12h16M4 16h16" stroke="#FFFFFF" stroke-width="2.8" stroke-linecap="round"></path>255        </svg>256      </div>257    </div>258  </div>259 260  <!-- bottom gesture bar -->261  <div class="gesture-bar"></div>262</div>263</body>264</html>