GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Rendered Mobile UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #000000;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 100%;21    height: 84px;22    color: #ffffff;23  }24  .status-bar .time {25    position: absolute;26    left: 32px;27    top: 20px;28    font-size: 32px;29    letter-spacing: 0.3px;30  }31  .status-bar .extras {32    position: absolute;33    left: 190px;34    top: 24px;35    font-size: 28px;36    color: #CFCFCF;37  }38  .status-bar .icons {39    position: absolute;40    right: 24px;41    top: 18px;42    display: flex;43    align-items: center;44    gap: 20px;45  }46  svg { display: block; }47 48  /* Header */49  .header {50    position: absolute;51    top: 84px;52    left: 0;53    width: 100%;54    height: 120px;55  }56  .back-btn {57    position: absolute;58    left: 26px;59    top: 32px;60    width: 56px;61    height: 56px;62  }63  .kebab {64    position: absolute;65    right: 24px;66    top: 26px;67    width: 50px;68    height: 80px;69  }70  .title {71    position: absolute;72    left: 110px;73    top: 20px;74    color: #ffffff;75    font-size: 54px;76    font-weight: 700;77    letter-spacing: 0.2px;78  }79  .title .wave { margin-right: 16px; }80  .title .dropdown {81    display: inline-block;82    margin-left: 12px;83    vertical-align: middle;84  }85 86  .row { position: absolute; left: 32px; right: 32px; }87  .date-row {88    top: 220px;89    height: 60px;90    display: flex;91    align-items: center;92    color: #4EA1FF;93  }94  .date-row .date-text {95    font-size: 36px;96    font-weight: 600;97    color: #4EA1FF;98  }99  .red-note {100    width: 40px;101    height: 40px;102    border-radius: 6px;103    background: #FF4B4B;104    margin-right: 22px;105    position: relative;106  }107  .red-note:after {108    content: "";109    position: absolute;110    top: 8px;111    left: 9px;112    width: 22px;113    height: 18px;114    border: 2px solid rgba(255,255,255,0.85);115    border-top-width: 6px;116  }117  .pin { position: absolute; right: 0; width: 40px; height: 40px; }118 119  .heading {120    top: 300px;121    color: #ffffff;122    font-weight: 800;123    font-size: 64px;124  }125 126  .checklist {127    top: 460px;128    height: 100px;129    border-bottom: 2px solid #2b2b2b;130    display: flex;131    align-items: center;132  }133  .checklist .checkbox {134    width: 60px;135    height: 60px;136    border: 3px solid #757575;137    border-radius: 8px;138    margin-right: 24px;139  }140  .checklist .placeholder {141    flex: 1;142    color: #8a8a8a;143    font-size: 34px;144  }145  .checklist .reorder { width: 64px; height: 64px; }146 147  /* Bottom toolbar */148  .bottom-toolbar {149    position: absolute;150    bottom: 92px;151    left: 32px;152    display: flex;153    gap: 60px;154    align-items: center;155  }156  .toolbar-btn { width: 72px; height: 72px; opacity: 0.85; }157 158  .homebar {159    position: absolute;160    bottom: 24px;161    left: 50%;162    transform: translateX(-50%);163    width: 720px;164    height: 12px;165    background: #ffffff;166    border-radius: 8px;167    opacity: 0.85;168  }169</style>170</head>171<body>172<div id="render-target">173  <!-- Status Bar -->174  <div class="status-bar">175    <div class="time">1:42</div>176    <div class="extras">👻 34°</div>177    <div class="icons">178      <!-- WiFi icon -->179      <svg width="36" height="36" viewBox="0 0 24 24">180        <path d="M12 18.5c.9 0 1.5.6 1.5 1.5s-.6 1.5-1.5 1.5-1.5-.6-1.5-1.5.6-1.5 1.5-1.5z" fill="#FFFFFF"/>181        <path d="M3.5 9.5c4.7-4.7 12.3-4.7 17 0" stroke="#FFFFFF" stroke-width="2" fill="none" opacity="0.7"/>182        <path d="M6.5 12.5c3.1-3.1 8.9-3.1 12 0" stroke="#FFFFFF" stroke-width="2" fill="none" opacity="0.7"/>183        <path d="M9.8 15.5c1.8-1.8 4.6-1.8 6.4 0" stroke="#FFFFFF" stroke-width="2" fill="none" opacity="0.7"/>184      </svg>185      <!-- Battery icon -->186      <svg width="46" height="26" viewBox="0 0 46 26">187        <rect x="1" y="4" width="38" height="18" rx="4" ry="4" stroke="#FFFFFF" stroke-width="2" fill="none"/>188        <rect x="4" y="7" width="28" height="12" fill="#FFFFFF"/>189        <rect x="41" y="9" width="4" height="8" fill="#FFFFFF"/>190      </svg>191    </div>192  </div>193 194  <!-- Header -->195  <div class="header">196    <!-- Back arrow -->197    <svg class="back-btn" viewBox="0 0 24 24">198      <path d="M15 5l-7 7 7 7" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>199    </svg>200 201    <div class="title">202      <span class="wave">👋</span>Welcome203      <!-- dropdown chevron -->204      <svg class="dropdown" width="32" height="32" viewBox="0 0 24 24">205        <path d="M6 9l6 6 6-6" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>206      </svg>207    </div>208 209    <!-- Kebab menu -->210    <svg class="kebab" viewBox="0 0 24 24">211      <circle cx="12" cy="5" r="2.5" fill="#FFFFFF"/>212      <circle cx="12" cy="12" r="2.5" fill="#FFFFFF"/>213      <circle cx="12" cy="19" r="2.5" fill="#FFFFFF"/>214    </svg>215  </div>216 217  <!-- Date row -->218  <div class="row date-row">219    <div class="red-note"></div>220    <div class="date-text">Fri, Aug 4</div>221    <!-- red pin -->222    <svg class="pin" viewBox="0 0 24 24">223      <path d="M12 2l5 5-3 1 1 8-3-3-3 3 1-8-3-1 5-5z" fill="#FF4B4B"/>224    </svg>225  </div>226 227  <!-- Main heading -->228  <div class="row heading">Meeting update</div>229 230  <!-- Checklist input -->231  <div class="row checklist">232    <div class="checkbox"></div>233    <div class="placeholder">Tap "Enter" to create an item</div>234    <!-- handle icon -->235    <svg class="reorder" viewBox="0 0 24 24">236      <path d="M4 9h16M4 15h16" stroke="#9E9E9E" stroke-width="2.5" stroke-linecap="round"/>237    </svg>238  </div>239 240  <!-- Bottom toolbar -->241  <div class="bottom-toolbar">242    <!-- Tag icon -->243    <svg class="toolbar-btn" viewBox="0 0 24 24">244      <path d="M3 12l9-9h7v7l-9 9-7-7z" fill="none" stroke="#CFCFCF" stroke-width="2" stroke-linejoin="round"/>245      <circle cx="17" cy="7" r="2" fill="#CFCFCF"/>246    </svg>247    <!-- List icon -->248    <svg class="toolbar-btn" viewBox="0 0 24 24">249      <rect x="4" y="5" width="16" height="2" fill="#CFCFCF"/>250      <rect x="4" y="11" width="16" height="2" fill="#CFCFCF"/>251      <rect x="4" y="17" width="16" height="2" fill="#CFCFCF"/>252    </svg>253    <!-- Image icon -->254    <svg class="toolbar-btn" viewBox="0 0 24 24">255      <rect x="3" y="5" width="18" height="14" fill="none" stroke="#CFCFCF" stroke-width="2"/>256      <path d="M5 17l5-6 4 4 3-3 4 5H5z" fill="#CFCFCF"/>257      <circle cx="9" cy="9" r="2" fill="#CFCFCF"/>258    </svg>259  </div>260 261  <div class="homebar"></div>262</div>263</body>264</html>