GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Meetings UI Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#1e1f22; color:#fff;11  }12 13  /* Top status bar */14  .status-bar {15    height:110px; padding:0 40px;16    display:flex; align-items:center; justify-content:space-between;17    color:#eaeaea; font-weight:600; font-size:40px;18  }19  .status-right { display:flex; align-items:center; gap:28px; }20  .icon-wifi, .icon-battery, .icon-signal {21    width:44px; height:28px; border:2px solid #ddd; border-radius:6px; position:relative;22  }23  .icon-battery::after {24    content:""; position:absolute; right:-10px; top:8px; width:6px; height:12px; background:#ddd; border-radius:2px;25  }26  .icon-wifi::before {27    content:""; position:absolute; left:6px; right:6px; top:6px; height:14px; background:linear-gradient(to right,#ddd 60%, transparent 60%); border-radius:2px;28  }29  .icon-signal { display:flex; align-items:flex-end; gap:3px; padding:3px; }30  .icon-signal span { display:block; width:6px; background:#ddd; border-radius:2px; }31  .icon-signal span:nth-child(1){ height:8px;}32  .icon-signal span:nth-child(2){ height:12px;}33  .icon-signal span:nth-child(3){ height:16px;}34  .icon-signal span:nth-child(4){ height:20px;}35 36  /* Page title */37  .page-title {38    font-size:56px; font-weight:700; padding:10px 40px 0;39  }40 41  /* Quick actions */42  .actions {43    display:flex; gap:42px; padding:36px 40px 28px;44  }45  .quick {46    width:170px; 47    display:flex; flex-direction:column; align-items:center; text-align:center;48  }49  .quick .tile {50    width:170px; height:170px; border-radius:36px; display:flex; align-items:center; justify-content:center;51    box-shadow: 0 4px 12px rgba(0,0,0,0.35);52  }53  .quick.orange .tile { background:#ff7e43; }54  .quick.blue .tile { background:#396bf6; }55  .quick label {56    margin-top:18px; font-size:30px; color:#cfd3da;57  }58  .tile svg { width:92px; height:92px; fill:#fff; }59 60  /* Add calendar link */61  .add-calendar {62    margin:10px 40px 24px; padding:22px 0; border-top:1px solid #2a2c30; border-bottom:1px solid #2a2c30;63    color:#5ba1ff; font-size:36px; 64  }65 66  /* List header */67  .list-header {68    padding:18px 40px; font-size:34px; color:#b8bcc2; background:#1b1c1f;69    border-top:1px solid #2a2c30; border-bottom:1px solid #2a2c30;70  }71 72  /* Meeting item */73  .meeting {74    padding:28px 40px; display:flex; align-items:center; justify-content:space-between;75    background:#232528; border-bottom:1px solid #2a2c30;76  }77  .meet-left { display:flex; gap:40px; align-items:flex-start; }78  .meet-time { width:160px; color:#dcdcdc; }79  .meet-time .time { font-size:44px; font-weight:700; }80  .meet-time .ampm { font-size:28px; color:#9aa0a6; margin-top:6px; }81  .meet-info { max-width:620px; }82  .meet-info .title { font-size:44px; font-weight:700; margin-bottom:10px; }83  .meet-info .id { font-size:30px; color:#9aa0a6; }84  .start-btn {85    width:210px; height:96px; border-radius:28px; background:#2f3338; color:#fff;86    display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:700;87    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);88  }89 90  /* Bottom navigation */91  .bottom-nav {92    position:absolute; left:0; right:0; bottom:80px;93    height:180px; background:#141517; border-top:1px solid #2a2c30;94    display:flex; align-items:center; justify-content:space-around;95  }96  .nav-item { display:flex; flex-direction:column; align-items:center; gap:16px; color:#b8bcc2; font-size:28px; }97  .nav-item.active { color:#ffffff; }98  .nav-icon { width:64px; height:64px; fill:#b8bcc2; }99  .nav-item.active .nav-icon { fill:#ffffff; }100 101  /* Home indicator */102  .home-indicator {103    position:absolute; bottom:24px; left:50%; transform:translateX(-50%);104    width:620px; height:14px; background:#ffffff; border-radius:8px; opacity:0.9;105  }106</style>107</head>108<body>109<div id="render-target">110 111  <!-- Status bar -->112  <div class="status-bar">113    <div class="time">2:03</div>114    <div class="status-right">115      <div class="icon-signal"><span></span><span></span><span></span><span></span></div>116      <div class="icon-wifi"></div>117      <div class="icon-battery"></div>118    </div>119  </div>120 121  <!-- Page Title -->122  <div class="page-title">Meetings</div>123 124  <!-- Quick Actions -->125  <div class="actions">126    <div class="quick orange">127      <div class="tile">128        <!-- Camera icon -->129        <svg viewBox="0 0 24 24">130          <path d="M4 7c0-1.1.9-2 2-2h6l1.4 2H18a2 2 0 012 2v7a2 2 0 01-2 2H6a2 2 0 01-2-2V7zm12 3l4-2v8l-4-2v-4z"/>131        </svg>132      </div>133      <label>New Meeting</label>134    </div>135 136    <div class="quick blue">137      <div class="tile">138        <!-- Plus icon -->139        <svg viewBox="0 0 24 24">140          <path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/>141        </svg>142      </div>143      <label>Join</label>144    </div>145 146    <div class="quick blue">147      <div class="tile">148        <!-- Calendar icon with 19 -->149        <svg viewBox="0 0 24 24">150          <path d="M19 4h-2V2h-2v2H9V2H7v2H5C3.9 4 3 4.9 3 6v13c0 1.1.9 2 2 2h14a2 2 0 002-2V6c0-1.1-.9-2-2-2zm0 15H5V9h14v10z"/>151        </svg>152      </div>153      <label>Schedule</label>154    </div>155 156    <div class="quick blue">157      <div class="tile">158        <!-- Upload arrow icon -->159        <svg viewBox="0 0 24 24">160          <path d="M12 3l5 5h-3v6h-4V8H7l5-5zm-8 14h16v2H4v-2z"/>161        </svg>162      </div>163      <label>Share Screen</label>164    </div>165  </div>166 167  <!-- Add a calendar -->168  <div class="add-calendar">Add a calendar</div>169 170  <!-- Tomorrow header -->171  <div class="list-header">Tomorrow</div>172 173  <!-- Single Meeting Item -->174  <div class="meeting">175    <div class="meet-left">176      <div class="meet-time">177        <div class="time">1:30</div>178        <div class="ampm">PM</div>179      </div>180      <div class="meet-info">181        <div class="title">ABC</div>182        <div class="id">Meeting ID: 839 1296 5774</div>183      </div>184    </div>185    <div class="start-btn">Start</div>186  </div>187 188  <!-- Spacer area (empty list) -->189  <!-- Bottom Navigation -->190  <div class="bottom-nav">191    <div class="nav-item active">192      <svg class="nav-icon" viewBox="0 0 24 24">193        <path d="M4 8c0-1.1.9-2 2-2h6l1.3 2H18a2 2 0 012 2v7a2 2 0 01-2 2H6a2 2 0 01-2-2V8zm12 3l4-2v8l-4-2v-4z"/>194      </svg>195      <div>Meetings</div>196    </div>197    <div class="nav-item">198      <svg class="nav-icon" viewBox="0 0 24 24">199        <path d="M4 4h16v12H7l-3 3V4z"/>200      </svg>201      <div>Team Chat</div>202    </div>203    <div class="nav-item">204      <svg class="nav-icon" viewBox="0 0 24 24">205        <path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-8 9c0-4.4 3.6-8 8-8s8 3.6 8 8H4z"/>206      </svg>207      <div>Contacts</div>208    </div>209    <div class="nav-item">210      <svg class="nav-icon" viewBox="0 0 24 24">211        <circle cx="5" cy="12" r="2"></circle>212        <circle cx="12" cy="12" r="2"></circle>213        <circle cx="19" cy="12" r="2"></circle>214      </svg>215      <div>More</div>216    </div>217  </div>218 219  <!-- Home indicator -->220  <div class="home-indicator"></div>221 222</div>223</body>224</html>