GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Create new group - Mock UI</title>5<style>6  body{margin:0;padding:0;background:transparent;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}7  #render-target{8    width:1080px;height:2400px;position:relative;overflow:hidden;9    background:#111316;color:#fff;10  }11  /* Status bar */12  .status-bar{height:110px;padding:0 36px;display:flex;align-items:center;justify-content:space-between;color:#eaeaea;font-weight:600;font-size:36px;opacity:.9;}13  .status-right{display:flex;gap:26px;align-items:center;}14  .sb-dot{width:22px;height:22px;background:#eaeaea;border-radius:50%;opacity:.7;}15  .sb-icon{width:38px;height:28px;border:3px solid #eaeaea;border-radius:6px;position:relative;}16  .sb-icon::after{content:"";position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:10px;height:10px;border:3px solid #eaeaea;border-radius:50%;}17  .battery{width:60px;height:28px;border:3px solid #eaeaea;border-radius:6px;position:relative;}18  .battery::before{content:"";position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:8px;height:18px;background:#eaeaea;border-radius:3px;}19  .battery::after{content:"";position:absolute;left:4px;top:4px;width:40px;height:20px;background:#eaeaea;border-radius:3px;}20  /* Header */21  .header{display:flex;align-items:center;gap:24px;padding:10px 30px 0 30px;height:120px;}22  .back{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;}23  .title{font-size:54px;font-weight:700;}24  /* Search */25  .search{margin:14px 28px 12px 28px;height:120px;background:#1b1d22;border-radius:24px;display:flex;align-items:center;padding:0 30px;color:#9aa0a6;font-size:42px;}26  .search svg{margin-right:22px;opacity:.7;}27  /* Selected chip area */28  .chips{padding:10px 30px;display:flex;gap:26px;}29  .chip{position:relative;display:flex;flex-direction:column;align-items:center;}30  .avatar{width:120px;height:120px;border-radius:60px;background:#E0E0E0;border:1px solid #BDBDBD;display:flex;align-items:center;justify-content:center;color:#757575;font-size:28px;position:relative;}31  .closeX{position:absolute;right:-6px;top:-6px;width:56px;height:56px;background:#1976ff;border-radius:50%;display:flex;align-items:center;justify-content:center;border:4px solid #0e1620;}32  .closeX svg{width:26px;height:26px;}33  .chip-label{margin-top:12px;color:#cfd2d6;font-size:32px;}34  /* Sections */35  .section{padding:18px 32px;color:#b9bdc2;font-size:42px;}36  /* List items */37  .list{padding-bottom:20px;}38  .item{height:160px;display:flex;align-items:center;padding:0 34px;gap:26px;border-top:1px solid #1f2227;}39  .item .name{font-size:46px;font-weight:600;}40  .sub{color:#a7acb1;font-size:34px;}41  .right{margin-left:auto;display:flex;align-items:center;}42  .toggle{width:90px;height:90px;border-radius:50%;border:5px solid #6b6f75;display:flex;align-items:center;justify-content:center;}43  .toggle svg{width:48px;height:48px;opacity:.0;}44  .toggle.selected{background:#1e75ff;border-color:#1e75ff;}45  .toggle.selected svg{opacity:1;}46  .status-dot{position:absolute;width:24px;height:24px;border-radius:50%;border:3px solid #111316;}47  .yellow{background:#ffbf1f;left:-6px;bottom:-6px;}48  .green{background:#2ecc71;left:-6px;bottom:-6px;}49  .verified{margin-left:12px;padding:6px 14px;background:#1e75ff;border-radius:24px;display:inline-flex;align-items:center;gap:10px;font-size:30px;}50  .verified svg{width:28px;height:28px;}51  /* Done button */52  .done-btn{53    position:absolute;bottom:120px;left:50%;transform:translateX(-50%);54    width:380px;height:120px;border-radius:60px;55    background:linear-gradient(90deg,#3a7bfd,#5fb3ff);56    color:#fff;font-size:50px;font-weight:800;border:none;box-shadow:0 8px 24px rgba(30,117,255,.35);57  }58</style>59</head>60<body>61<div id="render-target">62 63  <!-- Status Bar -->64  <div class="status-bar">65    <div>11:42</div>66    <div class="status-right">67      <div class="sb-dot"></div>68      <div class="sb-dot"></div>69      <div class="sb-dot"></div>70      <div class="sb-dot"></div>71      <div class="sb-dot"></div>72      <div class="sb-icon"></div>73      <div class="battery"></div>74    </div>75  </div>76 77  <!-- Header -->78  <div class="header">79    <div class="back">80      <svg viewBox="0 0 24 24" width="46" height="46" fill="#ffffff">81        <path d="M15.5 4.5L6 12l9.5 7.5-2 2.5L2 12l11.5-10z"/>82      </svg>83    </div>84    <div class="title">Create new group</div>85  </div>86 87  <!-- Search Bar -->88  <div class="search">89    <svg viewBox="0 0 24 24" width="52" height="52" fill="#9aa0a6">90      <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16a6.471 6.471 0 0 0 4.23-1.57l.27.28v.79l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/>91    </svg>92    <div>Search people and bots</div>93  </div>94 95  <!-- Selected Chip -->96  <div class="chips">97    <div class="chip">98      <div class="avatar">[IMG: Avatar]</div>99      <div class="closeX">100        <svg viewBox="0 0 24 24" fill="#fff"><path d="M18 6L6 18M6 6l12 12" stroke="#fff" stroke-width="3" stroke-linecap="round"/></svg>101      </div>102      <div class="chip-label">Natalie</div>103    </div>104  </div>105 106  <!-- Suggested -->107  <div class="section">Suggested</div>108  <div class="list">109    <div class="item">110      <div class="avatar" style="position:relative;">[IMG: Avatar]<span class="status-dot yellow"></span></div>111      <div class="name">Natalie Larson</div>112      <div class="right">113        <div class="toggle selected">114          <svg viewBox="0 0 24 24" fill="#fff"><path d="M9 16.2l-3.5-3.5L4 13.2l5 5 11-11-1.5-1.5z"/></svg>115        </div>116      </div>117    </div>118    <div class="item">119      <div class="avatar" style="position:relative;">[IMG: RW]<span class="status-dot yellow"></span></div>120      <div class="name">Richard Wagner</div>121      <div class="right">122        <div class="toggle">123          <svg viewBox="0 0 24 24" fill="#fff"><path d="M9 16.2l-3.5-3.5L4 13.2l5 5 11-11-1.5-1.5z"/></svg>124        </div>125      </div>126    </div>127  </div>128 129  <!-- People -->130  <div class="section">People</div>131  <div class="list">132    <div class="item">133      <div class="avatar">[IMG: Bing]</div>134      <div class="name">Bing135        <span class="verified">136          <svg viewBox="0 0 24 24" fill="#fff"><path d="M9 16.5l-3.5-3.5 1.4-1.4L9 13.7l8.1-8.1 1.4 1.4z"/></svg>137          Verified138        </span>139      </div>140      <div class="right">141        <div class="toggle">142          <svg viewBox="0 0 24 24" fill="#fff"><path d="M9 16.2l-3.5-3.5L4 13.2l5 5 11-11-1.5-1.5z"/></svg>143        </div>144      </div>145    </div>146 147    <div class="item">148      <div class="avatar" style="position:relative;">[IMG: Echo]<span class="status-dot green"></span></div>149      <div class="name">Echo / Sound Test Service<span class="sub"> .</span></div>150      <div class="right">151        <div class="toggle">152          <svg viewBox="0 0 24 24" fill="#fff"><path d="M9 16.2l-3.5-3.5L4 13.2l5 5 11-11-1.5-1.5z"/></svg>153        </div>154      </div>155    </div>156 157    <div class="item">158      <div class="avatar" style="position:relative;">[IMG: Avatar]<span class="status-dot yellow"></span></div>159      <div class="name">Natalie Larson</div>160      <div class="right">161        <div class="toggle selected">162          <svg viewBox="0 0 24 24" fill="#fff"><path d="M9 16.2l-3.5-3.5L4 13.2l5 5 11-11-1.5-1.5z"/></svg>163        </div>164      </div>165    </div>166 167    <div class="item">168      <div class="avatar" style="position:relative;">[IMG: RW]<span class="status-dot yellow"></span></div>169      <div class="name">Richard Wagner</div>170      <div class="right">171        <div class="toggle">172          <svg viewBox="0 0 24 24" fill="#fff"><path d="M9 16.2l-3.5-3.5L4 13.2l5 5 11-11-1.5-1.5z"/></svg>173        </div>174      </div>175    </div>176  </div>177 178  <!-- Done Button -->179  <button class="done-btn">Done</button>180 181</div>182</body>183</html>