GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin:0; padding:0; background:transparent; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#f5f6f8;12    font-family: Arial, Helvetica, sans-serif;13    color:#333;14  }15 16  /* Top dark area */17  .status-bar {18    position:absolute; top:0; left:0; width:100%; height:90px;19    background:#0b2741; color:#fff;20    display:flex; align-items:center; justify-content:space-between;21    padding:0 32px; font-size:32px;22  }23  .status-left { display:flex; align-items:center; gap:18px; opacity:0.95; }24  .status-right { display:flex; align-items:center; gap:24px; }25  .sb-dot { width:10px; height:10px; background:#89a0b8; border-radius:50%; display:inline-block; opacity:0.8; }26 27  .header {28    position:absolute; top:90px; left:0; width:100%; height:380px;29    background:#0b2741; color:#fff; padding:40px 40px 30px 40px;30  }31  .header-inner { display:flex; align-items:center; }32  .avatar {33    width:120px; height:120px; border-radius:60px;34    background:#445a73; border:2px solid rgba(255,255,255,0.2);35    display:flex; align-items:center; justify-content:center;36    font-size:56px; color:#e9eef6; font-weight:bold;37    margin-right:28px;38  }39  .welcome { font-size:30px; color:#c6d3e3; margin-bottom:8px; }40  .org-name { font-size:48px; font-weight:700; letter-spacing:0.2px; }41  .header-actions {42    margin-left:auto; display:flex; align-items:center; gap:26px;43  }44  .icon-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:8px; }45  .icon-btn svg { width:36px; height:36px; fill:#e9eef6; }46 47  .tabs {48    position:absolute; top:470px; left:0; width:100%; height:120px;49    background:#0b2741; display:flex; align-items:flex-end; padding:0 36px 20px 36px; gap:60px;50  }51  .tab {52    color:#b8c6d8; font-size:34px; font-weight:700; letter-spacing:1px;53  }54  .tab.active { color:#ffffff; position:relative; }55  .tab.active::after {56    content:''; position:absolute; left:0; right:0; bottom:-22px; margin:0 auto;57    width:140px; height:6px; background:#ffffff; border-radius:4px;58  }59 60  .content {61    position:absolute; top:590px; left:0; right:0; bottom:370px;62    background:#f1f1f1; padding:24px 24px 0 24px;63  }64  .card {65    width:100%; height:100%; background:#fff; border-radius:16px;66    box-shadow: 0 2px 10px rgba(0,0,0,0.2);67  }68  .card-header {69    display:flex; align-items:flex-start; justify-content:space-between;70    padding:38px 34px 24px 34px;71  }72  .ch-left .title { font-size:44px; color:#3c3c3c; margin-bottom:12px; }73  .ch-left .sub { font-size:30px; color:#8a8a8a; }74  .ch-right { display:flex; align-items:center; gap:22px; }75  .start-link { color:#1976D2; font-weight:800; font-size:34px; }76  .kebab { width:14px; height:40px; display:flex; flex-direction:column; justify-content:space-between; align-items:center; }77  .kebab span { width:10px; height:10px; background:#9e9e9e; border-radius:50%; display:block; }78  .divider { height:2px; background:#e3e3e3; margin:0 34px; }79 80  /* Large blank area to emulate empty card content */81  .blank-area {82    margin:24px 34px; height:1300px; border:1px dashed #e0e0e0; border-radius:8px;83    background:#ffffff;84  }85 86  /* Bottom action sheet */87  .bottom-sheet {88    position:absolute; left:0; right:0; bottom:150px; height:220px;89    background:#ffffff; box-shadow:0 -4px 16px rgba(0,0,0,0.15);90    display:flex; align-items:center; justify-content:center; gap:40px;91  }92  .btn {93    height:110px; padding:0 46px; border-radius:16px; font-size:34px; font-weight:800; letter-spacing:0.5px;94    display:flex; align-items:center; justify-content:center; cursor:default;95  }96  .btn-outline {97    border:3px solid #1976D2; color:#1976D2; background:#fff;98  }99  .btn-primary {100    background:#1976D2; color:#fff; border:3px solid #1976D2;101  }102 103  /* Bottom navigation bar (gesture handle) */104  .nav-bar {105    position:absolute; left:0; right:0; bottom:0; height:150px; background:#000;106    display:flex; align-items:center; justify-content:center;107  }108  .handle {109    width:220px; height:16px; background:#bdbdbd; border-radius:10px; opacity:0.8;110  }111</style>112</head>113<body>114<div id="render-target">115 116  <!-- Status bar -->117  <div class="status-bar">118    <div class="status-left">119      <span>4:02</span>120      <span class="sb-dot"></span>121      <span class="sb-dot"></span>122    </div>123    <div class="status-right">124      <!-- simple wifi icon -->125      <svg viewBox="0 0 24 24">126        <path fill="#e9eef6" d="M12 20a2 2 0 1 0 0.001-3.999A2 2 0 0 0 12 20zm-6.5-6.5 1.7 1.7A6 6 0 0 1 16.8 15l1.7-1.7A8.5 8.5 0 0 0 5.5 13.5zm-3-4 1.7 1.7A10.5 10.5 0 0 1 21.8 12l1.7-1.7A13 13 0 0 0 2 9.5z"/>127      </svg>128      <!-- battery icon -->129      <svg viewBox="0 0 24 24">130        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#e9eef6"></rect>131        <rect x="4" y="8" width="14" height="8" fill="#0b2741"></rect>132        <rect x="20" y="10" width="2" height="4" fill="#e9eef6"></rect>133      </svg>134    </div>135  </div>136 137  <!-- Header with profile -->138  <div class="header">139    <div class="header-inner">140      <div class="avatar">C</div>141      <div>142        <div class="welcome">Welcome</div>143        <div class="org-name">Cerebra Research</div>144      </div>145      <div class="header-actions">146        <div class="icon-btn" title="Add">147          <svg viewBox="0 0 24 24">148            <path d="M11 4h2v6h6v2h-6v6h-2v-6H5v-2h6z"></path>149          </svg>150        </div>151        <div class="icon-btn" title="Settings">152          <svg viewBox="0 0 24 24">153            <path d="M12 8a4 4 0 1 0 0.001 7.999A4 4 0 0 0 12 8zm9 4-2.2.9.4 2.3-2.1 1.2-1.5-1.8-2.3.4-.9 2.2-2.3-.4-1.2-2.1-1.8 1.5-1.2-2.1 1.8-1.5-.4-2.3 2.2-.9.4-2.3 2.3.4 1.2 2.1 1.8-1.5 2.1 1.2-.4 2.3L21 12z"></path>154          </svg>155        </div>156      </div>157    </div>158  </div>159 160  <!-- Tabs -->161  <div class="tabs">162    <div class="tab active">UPCOMING</div>163    <div class="tab">PAST</div>164    <div class="tab">RECORDINGS</div>165  </div>166 167  <!-- Content -->168  <div class="content">169    <div class="card">170      <div class="card-header">171        <div class="ch-left">172          <div class="title">Team Meeting</div>173          <div class="sub">Jul 24, 2023 08:00 AM</div>174        </div>175        <div class="ch-right">176          <div class="start-link">START</div>177          <div class="kebab"><span></span><span></span><span></span></div>178        </div>179      </div>180      <div class="divider"></div>181      <div class="blank-area"></div>182    </div>183  </div>184 185  <!-- Bottom action sheet -->186  <div class="bottom-sheet">187    <div class="btn btn-outline">JOIN A MEETING</div>188    <div class="btn btn-primary">MEET NOW</div>189  </div>190 191  <!-- System navigation bar -->192  <div class="nav-bar"><div class="handle"></div></div>193 194</div>195</body>196</html>