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>Main Group UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13  }14  #render-target {15    position: relative;16    overflow: hidden;17    width: 1080px;18    height: 2400px;19    background: #111213;20    color: #fff;21  }22 23  /* Status bar */24  .status-bar {25    height: 96px;26    padding: 0 36px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #ffffff;31    font-size: 40px;32    opacity: 0.9;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .dot {40    width: 10px;41    height: 10px;42    background: #cccccc;43    border-radius: 50%;44    display: inline-block;45    opacity: 0.7;46  }47 48  /* Header */49  .header {50    position: relative;51    height: 170px;52    display: flex;53    align-items: center;54    justify-content: center;55  }56  .back-btn {57    position: absolute;58    left: 36px;59    top: 50%;60    transform: translateY(-50%);61    width: 72px;62    height: 72px;63    display: flex;64    align-items: center;65    justify-content: center;66    opacity: 0.9;67  }68  .title {69    font-size: 88px;70    font-weight: 600;71    letter-spacing: 0.5px;72  }73 74  /* Search pill */75  .search-pill {76    width: 1000px;77    height: 120px;78    margin: 24px auto 40px auto;79    background: #1a1a1a;80    border-radius: 60px;81    box-shadow: 0 18px 30px rgba(0,0,0,0.35);82    display: flex;83    align-items: center;84    padding: 0 36px;85    position: relative;86  }87  .search-placeholder {88    color: #8e8e8e;89    font-size: 42px;90  }91  .plus-btn {92    position: absolute;93    right: 28px;94    width: 96px;95    height: 96px;96    display: flex;97    align-items: center;98    justify-content: center;99    color: #ffffff;100  }101 102  /* List item */103  .list {104    padding: 0 36px;105  }106  .item {107    display: grid;108    grid-template-columns: 80px 80px 1fr 120px;109    align-items: center;110    column-gap: 28px;111    padding: 20px 0;112  }113  .item .left-x {114    display: flex;115    align-items: center;116    justify-content: center;117    width: 64px;118    height: 64px;119  }120  .home-icon {121    width: 64px;122    height: 64px;123    display: flex;124    align-items: center;125    justify-content: center;126  }127  .item-text {128    display: flex;129    flex-direction: column;130    gap: 8px;131  }132  .item-title {133    font-size: 56px;134    font-weight: 600;135    display: inline-flex;136    align-items: center;137    gap: 18px;138  }139  .item-sub {140    font-size: 40px;141    color: #bdbdbd;142  }143  .menu-icon {144    display: flex;145    align-items: center;146    justify-content: flex-end;147    padding-right: 16px;148  }149 150  /* Bottom gesture bar */151  .gesture {152    position: absolute;153    bottom: 30px;154    left: 50%;155    transform: translateX(-50%);156    width: 420px;157    height: 18px;158    background: #e6e6e6;159    border-radius: 9px;160    opacity: 0.8;161  }162</style>163</head>164<body>165<div id="render-target">166  <!-- Status bar -->167  <div class="status-bar">168    <div>9:29</div>169    <div class="status-icons">170      <span class="dot"></span>171      <span class="dot"></span>172      <span class="dot"></span>173      <!-- simple icons: mute, wifi, battery -->174      <svg width="46" height="46" viewBox="0 0 24 24" fill="#ffffff" opacity="0.8"><path d="M7 9v6h2l5 4V5l-5 4H7z"/></svg>175      <svg width="46" height="46" viewBox="0 0 24 24" fill="#ffffff" opacity="0.9"><path d="M12 4C7 4 2.73 6.11 0 9.5L3 12.5C5.05 9.97 8.33 8.5 12 8.5s6.95 1.47 9 4l3-3C21.27 6.11 17 4 12 4z"/></svg>176      <svg width="46" height="46" viewBox="0 0 24 24" fill="#ffffff"><path d="M16 22H8c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2v16c0 1.1-.9 2-2 2zM9 3h6v1H9V3zm3 17a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"/></svg>177    </div>178  </div>179 180  <!-- Header with back button -->181  <div class="header">182    <div class="back-btn">183      <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">184        <path d="M15 18l-6-6 6-6"/>185      </svg>186    </div>187    <div class="title">Main Group</div>188  </div>189 190  <!-- Search pill -->191  <div class="search-pill">192    <div class="search-placeholder">Enter name of city or timezone</div>193    <div class="plus-btn">194      <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round">195        <path d="M12 5v14M5 12h14"/>196      </svg>197    </div>198  </div>199 200  <!-- List -->201  <div class="list">202    <div class="item">203      <div class="left-x">204        <svg width="46" height="46" viewBox="0 0 24 24" stroke="#d32f2f" stroke-width="3" stroke-linecap="round">205          <path d="M5 5l14 14M19 5L5 19"/>206        </svg>207      </div>208      <div class="home-icon">209        <svg width="52" height="52" viewBox="0 0 24 24" fill="#ffffff">210          <path d="M12 3l9 8h-3v10h-12V11H3l9-8z"/>211        </svg>212      </div>213      <div class="item-text">214        <div class="item-title">215          <span>Dawson Creek</span>216          <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">217            <path d="M12 20h9"/>218            <path d="M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4 12.5-12.5z"/>219          </svg>220        </div>221        <div class="item-sub">Canada</div>222      </div>223      <div class="menu-icon">224        <svg width="64" height="64" viewBox="0 0 24 24" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round">225          <path d="M4 8h16M4 16h16"/>226        </svg>227      </div>228    </div>229  </div>230 231  <!-- Bottom gesture bar -->232  <div class="gesture"></div>233</div>234</body>235</html>