GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Meeting Update</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#000000; color:#FFFFFF;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; right:0;16    height:88px; padding:0 36px;17    display:flex; align-items:center; justify-content:space-between;18    font-size:36px; color:#fff; opacity:0.92;19  }20  .status-right {21    display:flex; align-items:center; gap:22px;22  }23  .icon-signal, .icon-wifi, .icon-battery {24    width:42px; height:24px; border:2px solid #fff; border-radius:4px; position:relative;25  }26  .icon-battery::after{27    content:""; position:absolute; right:-8px; top:6px; width:6px; height:12px; background:#fff; border-radius:1px;28  }29 30  /* App bar */31  .app-bar {32    position:absolute; top:88px; left:0; right:0; height:120px;33    display:flex; align-items:center; padding:0 24px;34  }35  .nav-btn {36    width:96px; height:96px; display:flex; align-items:center; justify-content:center;37  }38  .title-area {39    display:flex; align-items:center; gap:18px;40    font-size:56px; font-weight:700; letter-spacing:0.5px;41  }42  .title-area .caret { width:28px; height:28px; margin-left:6px; opacity:0.85; }43  .actions {44    margin-left:auto; display:flex; align-items:center; gap:8px; padding-right:10px;45  }46  .dot-menu { width:56px; height:56px; display:flex; align-items:center; justify-content:center; opacity:0.9; }47 48  /* Content */49  .content {50    position:absolute; left:56px; right:56px; top:260px;51  }52  .date {53    color:#8AB4F8; font-size:42px; margin-bottom:22px;54  }55  .main-title {56    font-size:84px; line-height:1.15; font-weight:800; margin:16px 0 28px 0; color:#FFFFFF;57  }58  .subtitle {59    font-size:42px; color:#9E9E9E; line-height:1.5;60  }61  .subtitle a {62    color:#9E9E9E; text-decoration:underline;63  }64 65  /* Bottom icons */66  .bottom-tools {67    position:absolute; left:48px; bottom:148px;68    display:flex; align-items:center; gap:48px;69    color:#BDBDBD;70  }71  .tool {72    width:82px; height:82px; display:flex; align-items:center; justify-content:center;73    opacity:0.9;74  }75 76  /* Floating pill */77  .pill {78    position:absolute; left:50%; transform:translateX(-50%);79    bottom:240px; background:#2B2B2F; color:#EDEDED;80    border-radius:60px; padding:18px 34px; display:flex; align-items:center; gap:18px;81    box-shadow:0 8px 20px rgba(0,0,0,0.35);82    font-size:44px;83  }84  .check-circle {85    width:86px; height:86px; border-radius:50%; background:#1E1E1E; display:flex; align-items:center; justify-content:center;86    border:4px solid #2E2E2E;87  }88  .check-badge {89    width:64px; height:64px; background:#FFFFFF; border-radius:50%; display:flex; align-items:center; justify-content:center;90    border:6px solid #4E7EF7;91    box-shadow:0 0 0 4px #2B2B2F inset;92  }93 94  /* Gesture bar */95  .gesture {96    position:absolute; left:50%; transform:translateX(-50%);97    bottom:24px; width:360px; height:12px; background:#FFFFFF; border-radius:8px; opacity:0.85;98  }99 100  /* Simple helpers */101  .emoji { font-size:64px; }102  svg { display:block; }103</style>104</head>105<body>106<div id="render-target">107 108  <!-- Status Bar -->109  <div class="status-bar">110    <div style="display:flex; align-items:center; gap:22px;">111      <span style="font-weight:600;">1:44</span>112      <span style="font-size:30px; opacity:0.9;">📣</span>113      <span style="font-size:30px; opacity:0.9;">34°</span>114    </div>115    <div class="status-right">116      <div class="icon-wifi"></div>117      <div class="icon-signal"></div>118      <div class="icon-battery"></div>119    </div>120  </div>121 122  <!-- App Bar -->123  <div class="app-bar">124    <div class="nav-btn">125      <!-- Back Arrow -->126      <svg width="54" height="54" viewBox="0 0 24 24" fill="#FFFFFF" opacity="0.95">127        <path d="M15.5 19.5 7 12l8.5-7.5 1.5 1.8L10.6 12l6.4 5.7-1.5 1.8z"/>128      </svg>129    </div>130 131    <div class="title-area">132      <span class="emoji">👋</span>133      <span>Welcome</span>134      <!-- caret -->135      <svg class="caret" viewBox="0 0 24 24" fill="#FFFFFF">136        <path d="M7 9l5 6 5-6z"/>137      </svg>138    </div>139 140    <div class="actions">141      <div class="dot-menu">142        <!-- vertical dots -->143        <svg width="36" height="36" viewBox="0 0 24 24" fill="#FFFFFF">144          <circle cx="12" cy="5" r="2.2"></circle>145          <circle cx="12" cy="12" r="2.2"></circle>146          <circle cx="12" cy="19" r="2.2"></circle>147        </svg>148      </div>149    </div>150  </div>151 152  <!-- Content -->153  <div class="content">154    <div class="date">Fri, Aug 4</div>155    <div class="main-title">Meeting update</div>156    <div class="subtitle">157      Write down your ideas, or <a href="#">use a template</a>158    </div>159  </div>160 161  <!-- Floating Converted pill -->162  <div class="pill">163    <div class="check-circle">164      <div class="check-badge">165        <svg width="36" height="36" viewBox="0 0 24 24" fill="#4E7EF7">166          <path d="M9.5 16.2 5.8 12.6 4.4 14l5.1 5.1L20 8.6 18.6 7.2z" fill="#4E7EF7"/>167        </svg>168      </div>169    </div>170    <span>Converted</span>171  </div>172 173  <!-- Bottom tools -->174  <div class="bottom-tools">175    <div class="tool">176      <!-- Tag icon -->177      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#BDBDBD" stroke-width="2">178        <path d="M10 3H4v6l10 10 6-6L10 3z"></path>179        <circle cx="7" cy="7" r="1.5" fill="#BDBDBD"></circle>180      </svg>181    </div>182    <div class="tool">183      <!-- Calendar icon -->184      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#BDBDBD" stroke-width="2">185        <rect x="3" y="4" width="18" height="17" rx="2"></rect>186        <line x1="3" y1="9" x2="21" y2="9"></line>187        <line x1="8" y1="2.5" x2="8" y2="6.5"></line>188        <line x1="16" y1="2.5" x2="16" y2="6.5"></line>189      </svg>190    </div>191    <div class="tool">192      <!-- Image icon -->193      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#BDBDBD" stroke-width="2">194        <rect x="3" y="5" width="18" height="14" rx="2"></rect>195        <path d="M7 15l3-3 4 4 3-3 2 2"></path>196        <circle cx="9" cy="9" r="1.5"></circle>197      </svg>198    </div>199  </div>200 201  <!-- Gesture bar -->202  <div class="gesture"></div>203 204</div>205</body>206</html>