GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Today</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #0f0f0f;18    color: #ffffff;19  }20 21  /* Top bars */22  .top-area {23    width: 100%;24    height: 260px;25    background: #3f3f3f;26    position: relative;27    box-sizing: border-box;28  }29  .status-bar {30    height: 100px;31    color: #eaeaea;32    font-size: 36px;33    display: flex;34    align-items: center;35    padding: 0 36px;36    opacity: 0.9;37  }38  .status-bar .right {39    margin-left: auto;40    display: flex;41    gap: 24px;42    align-items: center;43  }44  .app-bar {45    height: 160px;46    display: flex;47    align-items: center;48    padding: 0 32px;49    box-sizing: border-box;50  }51  .title {52    font-size: 78px;53    font-weight: 700;54    margin-left: 24px;55  }56  .app-actions {57    margin-left: auto;58    display: flex;59    align-items: center;60    gap: 40px;61  }62  .icon {63    width: 64px;64    height: 64px;65  }66  .icon svg {67    width: 100%;68    height: 100%;69    stroke: #ffffff;70    fill: none;71    stroke-width: 3.5;72    stroke-linecap: round;73    stroke-linejoin: round;74    opacity: 0.95;75  }76 77  /* Content */78  .content {79    position: absolute;80    left: 0;81    top: 260px;82    width: 100%;83    height: calc(100% - 260px);84    background: #0b0b0b;85    box-sizing: border-box;86    text-align: center;87  }88  .illustration {89    width: 820px;90    height: 500px;91    margin: 280px auto 60px;92    background: #E0E0E0;93    border: 1px solid #BDBDBD;94    color: #757575;95    display: flex;96    align-items: center;97    justify-content: center;98    font-size: 34px;99    border-radius: 6px;100  }101  .ground-line {102    width: 820px;103    height: 2px;104    background: #7d7d7d;105    margin: -40px auto 40px;106    opacity: 0.5;107  }108  .headline {109    font-size: 60px;110    font-weight: 700;111    color: #eaeaea;112    margin-top: 40px;113  }114  .subtext {115    font-size: 42px;116    color: #bfbfbf;117    margin-top: 32px;118  }119 120  /* Bottom gesture bar */121  .gesture-bar {122    position: absolute;123    bottom: 40px;124    left: 50%;125    transform: translateX(-50%);126    width: 480px;127    height: 16px;128    background: #ffffff;129    border-radius: 12px;130    opacity: 0.9;131  }132 133  /* Simple helpers for mini status icons */134  .mini-icon {135    width: 40px;136    height: 40px;137  }138  .mini-icon svg {139    width: 100%;140    height: 100%;141    stroke: #eaeaea;142    fill: none;143    stroke-width: 3;144    stroke-linecap: round;145    stroke-linejoin: round;146  }147</style>148</head>149<body>150<div id="render-target">151 152  <!-- Top combined area -->153  <div class="top-area">154    <!-- Status bar -->155    <div class="status-bar">156      <div>10:14</div>157      <div class="right">158        <div class="mini-icon">159          <!-- bell -->160          <svg viewBox="0 0 24 24">161            <path d="M12 3c-3 0-5 2-5 5v3c0 1-1 2-2 3l-1 1h16l-1-1c-1-1-2-2-2-3V8c0-3-2-5-5-5z"/>162            <path d="M9 18c1 2 5 2 6 0"/>163          </svg>164        </div>165        <div class="mini-icon">166          <!-- play triangle (placeholder app icon) -->167          <svg viewBox="0 0 24 24">168            <path d="M6 5l12 7-12 7z"/>169          </svg>170        </div>171        <div class="mini-icon">172          <!-- temperature 88° -->173          <svg viewBox="0 0 24 24">174            <circle cx="18" cy="6" r="3"/>175            <path d="M6 5v10a4 4 0 1 0 4-4V5z"/>176          </svg>177        </div>178        <div class="mini-icon">179          <!-- alert triangle -->180          <svg viewBox="0 0 24 24">181            <path d="M12 3l10 17H2z"/>182            <path d="M12 9v5"/>183            <circle cx="12" cy="17" r="1.5" fill="#eaeaea" stroke="none"/>184          </svg>185        </div>186      </div>187    </div>188 189    <!-- App bar -->190    <div class="app-bar">191      <div class="icon">192        <!-- hamburger -->193        <svg viewBox="0 0 24 24">194          <path d="M3 6h18M3 12h18M3 18h18"/>195        </svg>196      </div>197      <div class="title">Today</div>198      <div class="app-actions">199        <div class="icon">200          <!-- search -->201          <svg viewBox="0 0 24 24">202            <circle cx="11" cy="11" r="6"/>203            <path d="M20 20l-4.5-4.5"/>204          </svg>205        </div>206        <div class="icon">207          <!-- filter/sort -->208          <svg viewBox="0 0 24 24">209            <path d="M4 6h16"/>210            <path d="M7 12h10"/>211            <path d="M10 18h4"/>212          </svg>213        </div>214        <div class="icon">215          <!-- check -->216          <svg viewBox="0 0 24 24">217            <path d="M5 13l4 4L19 7"/>218          </svg>219        </div>220        <div class="icon">221          <!-- overflow vertical dots -->222          <svg viewBox="0 0 24 24">223            <circle cx="12" cy="5" r="2" fill="#ffffff" stroke="none"/>224            <circle cx="12" cy="12" r="2" fill="#ffffff" stroke="none"/>225            <circle cx="12" cy="19" r="2" fill="#ffffff" stroke="none"/>226          </svg>227        </div>228      </div>229    </div>230  </div>231 232  <!-- Main content -->233  <div class="content">234    <div class="illustration">[IMG: Illustration - person walking dog next to a yellow tree]</div>235    <div class="ground-line"></div>236    <div class="headline">There are no tasks due today</div>237    <div class="subtext">Open a list to add some tasks!</div>238  </div>239 240  <!-- Bottom gesture bar -->241  <div class="gesture-bar"></div>242 243</div>244</body>245</html>