GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    font-family: Arial, Helvetica, sans-serif;16    color: #FFFFFF;17  }18 19  /* Status bar */20  .status {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 96px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 32px;30    box-sizing: border-box;31    color: #fff;32  }33  .status .time { font-size: 36px; font-weight: 600; letter-spacing: 0.5px; }34  .status .icons { display: flex; gap: 22px; align-items: center; }35 36  /* Top App Bar */37  .app-bar {38    position: absolute;39    top: 112px;40    left: 24px;41    right: 24px;42    height: 120px;43    display: flex;44    align-items: center;45    justify-content: space-between;46  }47  .app-left {48    display: flex;49    align-items: center;50    gap: 24px;51  }52  .app-title {53    display: flex;54    align-items: center;55    gap: 12px;56    font-size: 58px;57    font-weight: 800;58  }59  .app-title .wave { font-size: 58px; }60  .caret {61    display: inline-flex;62    align-items: center;63  }64 65  /* Task meta row */66  .meta-row {67    position: absolute;68    top: 300px;69    left: 24px;70    right: 24px;71    height: 80px;72    display: flex;73    align-items: center;74    justify-content: space-between;75  }76  .meta-left {77    display: flex;78    align-items: center;79    gap: 24px;80  }81  .date {82    display: flex;83    align-items: center;84    gap: 12px;85    color: #2979FF;86    font-size: 44px;87    font-weight: 700;88  }89 90  /* Title and description */91  .title {92    position: absolute;93    top: 420px;94    left: 24px;95    font-size: 72px;96    font-weight: 800;97    color: #FFFFFF;98  }99  .desc {100    position: absolute;101    top: 540px;102    left: 24px;103    font-size: 48px;104    color: #7A7A7A;105  }106 107  /* Bottom toolbar */108  .bottom-tools {109    position: absolute;110    bottom: 112px;111    left: 24px;112    display: flex;113    gap: 60px;114    align-items: center;115  }116  .tool-icon svg { display: block; }117  .tool-icon { opacity: 0.85; }118 119  /* Gesture pill */120  .gesture-bar {121    position: absolute;122    bottom: 40px;123    left: 50%;124    transform: translateX(-50%);125    width: 320px;126    height: 12px;127    background: #EDEDED;128    border-radius: 12px;129    opacity: 0.95;130  }131 132  /* Generic icon colors */133  .icon-grey { stroke: #9E9E9E; fill: none; }134  .fill-grey { fill: #9E9E9E; }135  .icon-white { stroke: #FFFFFF; fill: none; }136  .fill-white { fill: #FFFFFF; }137  .icon-blue { stroke: #2979FF; fill: none; }138  .fill-blue { fill: #2979FF; }139</style>140</head>141<body>142<div id="render-target">143 144  <!-- Status bar -->145  <div class="status">146    <div class="time">1:24</div>147    <div class="icons">148      <!-- simple placeholders for status icons -->149      <svg width="40" height="24">150        <circle cx="12" cy="12" r="4" class="fill-white"></circle>151        <path d="M2 18 C8 8, 16 8, 22 18" class="icon-white" stroke-width="2"></path>152      </svg>153      <svg width="34" height="24">154        <path d="M2 20 H26 L30 14 L26 8 H2 Z" class="icon-white" stroke-width="2"></path>155      </svg>156      <svg width="44" height="24">157        <rect x="2" y="4" width="32" height="16" rx="3" class="icon-white" stroke-width="2"></rect>158        <rect x="36" y="8" width="4" height="8" class="fill-white"></rect>159        <rect x="6" y="8" width="24" height="8" class="fill-white"></rect>160      </svg>161    </div>162  </div>163 164  <!-- Top app bar -->165  <div class="app-bar">166    <div class="app-left">167      <!-- Back arrow -->168      <svg width="64" height="64" viewBox="0 0 64 64">169        <path d="M36 12 L16 32 L36 52" class="icon-white" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"></path>170      </svg>171 172      <div class="app-title">173        <span class="wave">👋</span>174        <span>Welcome</span>175        <span class="caret">176          <svg width="32" height="32" viewBox="0 0 24 24">177            <path d="M5 9 L12 15 L19 9" class="icon-white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>178          </svg>179        </span>180      </div>181    </div>182    <!-- more (vertical dots) -->183    <svg width="48" height="48" viewBox="0 0 24 24">184      <circle cx="12" cy="5" r="2.2" class="fill-white"></circle>185      <circle cx="12" cy="12" r="2.2" class="fill-white"></circle>186      <circle cx="12" cy="19" r="2.2" class="fill-white"></circle>187    </svg>188  </div>189 190  <!-- Meta row: checkbox + date + flag -->191  <div class="meta-row">192    <div class="meta-left">193      <!-- Checkbox outline -->194      <svg width="56" height="56" viewBox="0 0 24 24">195        <rect x="3" y="3" width="18" height="18" rx="2.5" class="icon-grey" stroke-width="2"></rect>196      </svg>197 198      <div class="date">199        <!-- Blue clock icon -->200        <svg width="44" height="44" viewBox="0 0 24 24">201          <circle cx="12" cy="12" r="9" class="icon-blue" stroke-width="2"></circle>202          <path d="M12 12 L12 7 M12 12 L16 14" class="icon-blue" stroke-width="2" stroke-linecap="round"></path>203        </svg>204        <span>Sat, Jul 29</span>205      </div>206    </div>207 208    <!-- Flag icon on right -->209    <svg width="52" height="52" viewBox="0 0 24 24">210      <path d="M5 21 V4 M5 4 H17 L14 8 H17 L14 12 H5" class="icon-grey" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path>211    </svg>212  </div>213 214  <!-- Title and Description -->215  <div class="title">Yoga classes</div>216  <div class="desc">Description</div>217 218  <!-- Bottom tools -->219  <div class="bottom-tools">220    <!-- Tag icon -->221    <div class="tool-icon">222      <svg width="64" height="64" viewBox="0 0 24 24">223        <path d="M3 7 V17 H11 L20 12 L11 7 H3 Z" class="icon-grey" stroke-width="2" stroke-linejoin="round"></path>224        <circle cx="7" cy="12" r="2" class="fill-grey"></circle>225      </svg>226    </div>227 228    <!-- List icon -->229    <div class="tool-icon">230      <svg width="64" height="64" viewBox="0 0 24 24">231        <circle cx="5" cy="6" r="2" class="fill-grey"></circle>232        <circle cx="5" cy="12" r="2" class="fill-grey"></circle>233        <circle cx="5" cy="18" r="2" class="fill-grey"></circle>234        <path d="M10 6 H20 M10 12 H20 M10 18 H20" class="icon-grey" stroke-width="2" stroke-linecap="round"></path>235      </svg>236    </div>237 238    <!-- Image icon -->239    <div class="tool-icon">240      <svg width="64" height="64" viewBox="0 0 24 24">241        <rect x="3" y="4" width="18" height="16" rx="2" class="icon-grey" stroke-width="2"></rect>242        <circle cx="9" cy="10" r="2" class="fill-grey"></circle>243        <path d="M5 18 L11 12 L15 16 L19 12 V20" class="icon-grey" stroke-width="2" fill="none"></path>244      </svg>245    </div>246  </div>247 248  <!-- Gesture pill -->249  <div class="gesture-bar"></div>250 251</div>252</body>253</html>