GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</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:#0b0b0b; color:#fff;11  }12  /* Status bar */13  .status-bar {14    position:absolute; top:0; left:0; right:0;15    height:120px; padding:0 32px;16    display:flex; align-items:center; justify-content:space-between;17    color:#eaeaea; font-size:44px;18  }19  .status-right { display:flex; align-items:center; gap:24px; }20  .tiny-icon { width:40px; height:40px; background:#eaeaea20; border-radius:8px; }21  /* App header */22  .app-header {23    position:absolute; top:120px; left:0; right:0;24    height:160px; padding:0 32px;25    display:flex; align-items:center; justify-content:space-between;26  }27  .header-left { display:flex; align-items:flex-start; gap:28px; }28  .hamburger { width:72px; height:72px; }29  .header-titles { line-height:1.2; }30  .subtitle { font-size:40px; color:#cfcfcf; }31  .title-row { display:flex; align-items:center; gap:16px; }32  .main-title { font-size:64px; font-weight:600; }33  .caret { width:36px; height:36px; }34  .header-actions { display:flex; align-items:center; gap:36px; }35  .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }36  /* Info banner */37  .info-banner {38    position:absolute; top:280px; left:32px; right:32px;39    background:#8ea8d6; color:#0b0b0b;40    border-radius:18px; padding:28px 28px;41    display:flex; align-items:center; justify-content:space-between;42    font-size:44px;43  }44  .banner-left { display:flex; align-items:center; gap:24px; }45  .banner-icon { width:56px; height:56px; border-radius:12px; background:#ffffff55; display:flex; align-items:center; justify-content:center; }46  .banner-close { width:56px; height:56px; border-radius:12px; background:#ffffff33; display:flex; align-items:center; justify-content:center; }47  /* Section label */48  .section {49    position:absolute; top:420px; left:32px; right:32px;50    display:flex; align-items:center; justify-content:space-between;51    color:#cfcfcf; font-size:44px;52    letter-spacing:0.5px;53  }54  .section-right { display:flex; align-items:center; gap:18px; color:#cfcfcf; }55  .check-count { display:flex; align-items:center; gap:8px; }56  .toggle {57    width:120px; height:56px; background:#3a3a3a; border-radius:32px; position:relative;58  }59  .toggle::after {60    content:""; position:absolute; top:6px; right:6px; width:44px; height:44px;61    background:#7a7a7a; border-radius:50%;62  }63  /* Task card */64  .task-card {65    position:absolute; top:500px; left:32px; right:32px;66    background:#181818; border-radius:20px; padding:28px;67    display:flex; align-items:flex-start; gap:24px;68    box-shadow:0 2px 0 #111;69  }70  .checkbox {71    width:60px; height:60px; border:4px solid #707070; border-radius:10px; box-sizing:border-box;72    margin-top:6px;73  }74  .task-text { font-size:56px; color:#fff; line-height:1.2; }75  /* Quick task bar */76  .quick-bar {77    position:absolute; left:32px; right:32px; bottom:80px;78    height:120px; background:#171717; border-radius:32px;79    display:flex; align-items:center; gap:24px; padding:0 28px; color:#9e9e9e; font-size:48px;80    box-shadow:0 -1px 0 #111;81  }82  .mic { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }83  /* Floating add button */84  .fab {85    position:absolute; right:60px; bottom:220px;86    width:160px; height:160px; border-radius:36px;87    background:#9bc2ff; display:flex; align-items:center; justify-content:center;88    box-shadow:0 8px 20px rgba(0,0,0,0.5);89  }90  /* Snackbar */91  .snackbar {92    position:absolute; left:50%; transform:translateX(-50%);93    bottom:360px; background:#2f2a27; color:#fff;94    border-radius:48px; padding:26px 36px; display:flex; align-items:center; gap:20px;95    font-size:44px;96  }97  .clock { width:56px; height:56px; border-radius:50%; background:#ffffff12; display:flex; align-items:center; justify-content:center; }98  /* Simple SVG color */99  svg { fill:#fff; }100</style>101</head>102<body>103<div id="render-target">104 105  <!-- Status Bar -->106  <div class="status-bar">107    <div>12:54</div>108    <div class="status-right">109      <div>70°</div>110      <div class="tiny-icon"></div>111      <div class="tiny-icon"></div>112      <div class="tiny-icon"></div>113    </div>114  </div>115 116  <!-- App Header -->117  <div class="app-header">118    <div class="header-left">119      <div class="hamburger">120        <svg viewBox="0 0 24 24" width="72" height="72">121          <rect x="3" y="5" width="18" height="2"></rect>122          <rect x="3" y="11" width="18" height="2"></rect>123          <rect x="3" y="17" width="18" height="2"></rect>124        </svg>125      </div>126      <div class="header-titles">127        <div class="subtitle">All lists</div>128        <div class="title-row">129          <div class="main-title">All todo 1</div>130          <div class="caret">131            <svg viewBox="0 0 24 24" width="36" height="36">132              <path d="M7 9l5 5 5-5z"></path>133            </svg>134          </div>135        </div>136      </div>137    </div>138 139    <div class="header-actions">140      <div class="icon-btn">141        <svg viewBox="0 0 24 24" width="54" height="54">142          <path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1015.5 14zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z"></path>143          <path d="M20 20l-4-4"></path>144        </svg>145      </div>146      <div class="icon-btn">147        <svg viewBox="0 0 24 24" width="54" height="54">148          <circle cx="12" cy="5" r="2"></circle>149          <circle cx="12" cy="12" r="2"></circle>150          <circle cx="12" cy="19" r="2"></circle>151        </svg>152      </div>153    </div>154  </div>155 156  <!-- Info banner -->157  <div class="info-banner">158    <div class="banner-left">159      <div class="banner-icon">160        <svg viewBox="0 0 24 24" width="40" height="40">161          <path d="M12 2v12l-3-3H5v8h14V2z"></path>162        </svg>163      </div>164      <div>Long press on any task to select many tasks</div>165    </div>166    <div class="banner-close">167      <svg viewBox="0 0 24 24" width="36" height="36">168        <path d="M18 6L6 18M6 6l12 12" stroke="#000" stroke-width="2" fill="none"></path>169      </svg>170    </div>171  </div>172 173  <!-- Section header -->174  <div class="section">175    <div>NO TIME 1</div>176    <div class="section-right">177      <div class="check-count">178        <svg viewBox="0 0 24 24" width="36" height="36">179          <path d="M9 16.2l-3.5-3.5 1.4-1.4L9 13.4l7.1-7.1 1.4 1.4z"></path>180        </svg>181        <div>1</div>182      </div>183      <div class="toggle"></div>184    </div>185  </div>186 187  <!-- Task Card -->188  <div class="task-card">189    <div class="checkbox"></div>190    <div class="task-text">191      Buy New Balance<br>hiking shoes192    </div>193  </div>194 195  <!-- Floating Add Button -->196  <div class="fab">197    <svg viewBox="0 0 24 24" width="120" height="120">198      <path d="M11 5h2v14h-2zM5 11h14v2H5z"></path>199    </svg>200  </div>201 202  <!-- Snackbar -->203  <div class="snackbar">204    <div class="clock">205      <svg viewBox="0 0 24 24" width="36" height="36">206        <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2" fill="none"></circle>207        <path d="M12 12V7M12 12l4 2" stroke="#fff" stroke-width="2" fill="none"></path>208      </svg>209    </div>210    <div>Task added</div>211  </div>212 213  <!-- Quick Task Bar -->214  <div class="quick-bar">215    <div class="mic">216      <svg viewBox="0 0 24 24" width="64" height="64">217        <path d="M12 14a3 3 0 003-3V6a3 3 0 10-6 0v5a3 3 0 003 3z"></path>218        <path d="M5 11a7 7 0 0014 0M12 18v3M9 21h6" stroke="#fff" stroke-width="2" fill="none"></path>219      </svg>220    </div>221    <div>Quick task...</div>222  </div>223 224</div>225</body>226</html>