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: "Roboto", "Segoe UI", Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #111111;20    color: #FFFFFF;21  }22 23  /* Minimal status bar to mirror spacing */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 110px;30    padding: 0 36px;31    box-sizing: border-box;32    display: flex;33    align-items: center;34    justify-content: space-between;35    color: #EDEDED;36    font-size: 36px;37    letter-spacing: 0.5px;38  }39  .status-icons {40    display: flex;41    align-items: center;42    gap: 26px;43    opacity: 0.85;44  }45  .status-dot {46    width: 10px;47    height: 10px;48    background: #CCCCCC;49    border-radius: 50%;50    display: inline-block;51  }52  .status-icon {53    width: 40px;54    height: 40px;55    opacity: 0.9;56  }57 58  /* Header */59  .header {60    position: absolute;61    top: 140px; /* below status bar */62    left: 0;63    width: 1080px;64    height: 220px;65  }66  .back-btn {67    position: absolute;68    left: 32px;69    top: 70px;70    width: 72px;71    height: 72px;72    display: flex;73    align-items: center;74    justify-content: center;75  }76  .title {77    position: absolute;78    width: 100%;79    top: 56px;80    text-align: center;81    font-size: 60px;82    font-weight: 500;83    color: #F5F5F5;84  }85 86  /* Search/Add pill */87  .search-row {88    position: absolute;89    top: 340px;90    left: 60px;91    width: 960px;92    height: 120px;93    background: #1A1A1A;94    border-radius: 36px;95    box-shadow: 0 14px 28px rgba(0,0,0,0.45);96  }97  .search-placeholder {98    position: absolute;99    left: 40px;100    top: 50%;101    transform: translateY(-50%);102    color: #8F8F8F;103    font-size: 36px;104  }105  .add-btn {106    position: absolute;107    right: 32px;108    top: 50%;109    transform: translateY(-50%);110    width: 72px;111    height: 72px;112    display: flex;113    align-items: center;114    justify-content: center;115  }116 117  /* Bottom gesture bar */118  .home-indicator {119    position: absolute;120    bottom: 42px;121    left: 50%;122    transform: translateX(-50%);123    width: 240px;124    height: 12px;125    background: #E6E6E6;126    border-radius: 8px;127    opacity: 0.9;128  }129</style>130</head>131<body>132<div id="render-target">133 134  <!-- Status bar (simplified) -->135  <div class="status-bar">136    <div>9:27</div>137    <div class="status-icons">138      <!-- Simple shapes as placeholders for system icons -->139      <svg class="status-icon" viewBox="0 0 48 48">140        <path d="M6 34 L24 16 L42 34" stroke="#EDEDED" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>141      </svg>142      <span class="status-dot"></span>143      <svg class="status-icon" viewBox="0 0 48 48">144        <rect x="6" y="14" width="28" height="20" rx="3" ry="3" stroke="#EDEDED" stroke-width="4" fill="none"/>145        <rect x="36" y="18" width="6" height="12" rx="1.5" ry="1.5" fill="#EDEDED"/>146      </svg>147    </div>148  </div>149 150  <!-- Header -->151  <div class="header">152    <div class="back-btn">153      <svg width="64" height="64" viewBox="0 0 48 48">154        <path d="M30 10 L14 24 L30 38" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>155      </svg>156    </div>157    <div class="title">Main Group</div>158  </div>159 160  <!-- Search/Add pill -->161  <div class="search-row">162    <div class="search-placeholder">Enter name of city or timezone</div>163    <div class="add-btn">164      <svg width="50" height="50" viewBox="0 0 48 48">165        <path d="M24 12 V36 M12 24 H36" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"/>166      </svg>167    </div>168  </div>169 170  <!-- Bottom gesture indicator -->171  <div class="home-indicator"></div>172</div>173</body>174</html>