GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Rendering</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px;9    position: relative; overflow: hidden;10    background: #ffffff; color: #222;11  }12 13  /* Top status bar */14  .status-bar {15    height: 110px;16    padding: 0 32px;17    display: flex; align-items: center; justify-content: space-between;18    font-size: 36px; color: #333;19  }20  .status-left { display: flex; align-items: center; gap: 18px; }21  .status-right { display: flex; align-items: center; gap: 22px; }22  .icon {23    width: 48px; height: 48px;24  }25  .wifi, .battery, .dot {26    width: 48px; height: 48px;27  }28  .dot { border-radius: 50%; background:#777; width: 12px; height: 12px; }29 30  /* Header with profile & bell */31  .header {32    height: 100px;33    padding: 10px 36px;34    display: flex; align-items: center; justify-content: space-between;35  }36  .icon-btn {37    width: 72px; height: 72px;38  }39 40  /* Narrow placeholders under header */41  .quick-row {42    display: grid; grid-template-columns: 1fr 1fr;43    gap: 30px; padding: 0 36px; margin: 24px 0 6px 0;44  }45  .quick-tile {46    height: 100px; border-radius: 12px;47    background: #F3F3F3; border: 1px solid #E0E0E0;48  }49 50  /* Grid of category cards */51  .grid {52    display: grid; grid-template-columns: 1fr 1fr;53    gap: 34px; padding: 0 36px; margin-top: 10px;54  }55  .card {56    background: #fff; border-radius: 12px; overflow: hidden;57    box-shadow: 0 0 0 1px #EEE inset;58  }59  .card .img {60    height: 380px; background: #E0E0E0;61    border-bottom: 1px solid #BDBDBD;62    display: flex; align-items: center; justify-content: center;63    color: #757575; font-size: 32px; text-align: center; padding: 0 16px;64  }65  .card .label {66    background: #FAFAFA;67    padding: 30px 28px 34px 28px;68  }69  .title {70    font-size: 44px; font-weight: 600; line-height: 1.15; color: #111;71  }72 73  /* Bottom navigation */74  .bottom-bar {75    position: absolute; left: 0; right: 0; bottom: 90px;76    height: 150px; border-top: 1px solid #E5E5E5; background: #fff;77    display: flex; align-items: center; justify-content: space-around;78  }79  .bottom-icon {80    width: 78px; height: 78px;81  }82  .home-indicator {83    position: absolute; left: 50%; transform: translateX(-50%);84    bottom: 24px; width: 380px; height: 10px; background: #000; opacity: 0.12; border-radius: 6px;85  }86</style>87</head>88<body>89<div id="render-target">90 91  <!-- Status Bar -->92  <div class="status-bar">93    <div class="status-left">94      <span>1:13</span>95      <span style="color:#666;">87°</span>96      <!-- simple message icon -->97      <svg class="icon" viewBox="0 0 24 24">98        <path d="M3 5h18v12H7l-4 4V5z" fill="none" stroke="#555" stroke-width="2" stroke-linejoin="round"/>99      </svg>100      <!-- notification mail icon substitute -->101      <svg class="icon" viewBox="0 0 24 24">102        <path d="M3 6h18v12H3z" fill="none" stroke="#555" stroke-width="2"/>103        <path d="M3 6l9 7 9-7" fill="none" stroke="#555" stroke-width="2"/>104      </svg>105      <!-- play icon -->106      <svg class="icon" viewBox="0 0 24 24">107        <path d="M7 5l12 7-12 7z" fill="#555"/>108      </svg>109      <span class="dot"></span>110    </div>111    <div class="status-right">112      <!-- WiFi -->113      <svg class="wifi" viewBox="0 0 24 24">114        <path d="M2 9c5-5 15-5 20 0" fill="none" stroke="#444" stroke-width="2"/>115        <path d="M5 12c3-3 11-3 14 0" fill="none" stroke="#444" stroke-width="2"/>116        <path d="M8 15c2-2 6-2 8 0" fill="none" stroke="#444" stroke-width="2"/>117        <circle cx="12" cy="18" r="1.8" fill="#444"/>118      </svg>119      <!-- Battery -->120      <svg class="battery" viewBox="0 0 28 24">121        <rect x="2" y="6" width="22" height="12" rx="2" ry="2" fill="none" stroke="#444" stroke-width="2"/>122        <rect x="24" y="9" width="3" height="6" rx="1" fill="#444"/>123        <rect x="4" y="8" width="12" height="8" fill="#9CCC65"/>124      </svg>125    </div>126  </div>127 128  <!-- Header with profile and bell -->129  <div class="header">130    <!-- Profile icon -->131    <svg class="icon-btn" viewBox="0 0 24 24">132      <circle cx="12" cy="8" r="3" fill="none" stroke="#111" stroke-width="2"/>133      <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round"/>134      <circle cx="12" cy="12" r="11" fill="none" stroke="#111" stroke-width="2"/>135    </svg>136    <!-- Bell icon -->137    <svg class="icon-btn" viewBox="0 0 24 24">138      <path d="M6 9a6 6 0 0112 0c0 6 2 7 2 7H4s2-1 2-7" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round"/>139      <path d="M9 20a3 3 0 006 0" fill="none" stroke="#111" stroke-width="2"/>140    </svg>141  </div>142 143  <!-- Quick placeholder row -->144  <div class="quick-row">145    <div class="quick-tile"></div>146    <div class="quick-tile"></div>147  </div>148 149  <!-- Category Grid -->150  <div class="grid">151    <!-- Furniture -->152    <div class="card">153      <div class="img">[IMG: White sofa living room]</div>154      <div class="label"><div class="title">Furniture</div></div>155    </div>156 157    <!-- Storage & organization -->158    <div class="card">159      <div class="img">[IMG: Open wardrobe against blue wall]</div>160      <div class="label"><div class="title">Storage &<br>organization</div></div>161    </div>162 163    <!-- Beds & mattresses -->164    <div class="card">165      <div class="img">[IMG: Mattress on platform bed]</div>166      <div class="label"><div class="title">Beds & mattresses</div></div>167    </div>168 169    <!-- Kitchen & appliances -->170    <div class="card">171      <div class="img">[IMG: White kitchen cabinets]</div>172      <div class="label"><div class="title">Kitchen &<br>appliances</div></div>173    </div>174 175    <!-- Home décor -->176    <div class="card">177      <div class="img">[IMG: Framed art and vase on green wall]</div>178      <div class="label"><div class="title">Home décor</div></div>179    </div>180 181    <!-- Home textiles -->182    <div class="card">183      <div class="img">[IMG: Couch with pillows and curtains]</div>184      <div class="label"><div class="title">Home textiles</div></div>185    </div>186  </div>187 188  <!-- Bottom Navigation -->189  <div class="bottom-bar">190    <!-- Home -->191    <svg class="bottom-icon" viewBox="0 0 24 24">192      <path d="M3 11l9-7 9 7v9H15v-5H9v5H3z" fill="none" stroke="#666" stroke-width="2" stroke-linejoin="round"/>193    </svg>194    <!-- Search -->195    <svg class="bottom-icon" viewBox="0 0 24 24">196      <circle cx="10" cy="10" r="6" fill="none" stroke="#666" stroke-width="2"/>197      <path d="M21 21l-5-5" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round"/>198    </svg>199    <!-- Analytics/Orders -->200    <svg class="bottom-icon" viewBox="0 0 24 24">201      <rect x="4" y="12" width="3" height="8" fill="none" stroke="#666" stroke-width="2"/>202      <rect x="10" y="8" width="3" height="12" fill="none" stroke="#666" stroke-width="2"/>203      <rect x="16" y="5" width="3" height="15" fill="none" stroke="#666" stroke-width="2"/>204    </svg>205    <!-- Favorites -->206    <svg class="bottom-icon" viewBox="0 0 24 24">207      <path d="M12 20s-7-4.5-7-9a4.5 4.5 0 017-3.5A4.5 4.5 0 0119 11c0 4.5-7 9-7 9z" fill="none" stroke="#666" stroke-width="2" stroke-linejoin="round"/>208    </svg>209    <!-- Cart -->210    <svg class="bottom-icon" viewBox="0 0 24 24">211      <path d="M3 4h3l2 12h10l2-8H7" fill="none" stroke="#666" stroke-width="2" stroke-linejoin="round"/>212      <circle cx="9" cy="20" r="2" fill="none" stroke="#666" stroke-width="2"/>213      <circle cx="18" cy="20" r="2" fill="none" stroke="#666" stroke-width="2"/>214    </svg>215  </div>216 217  <div class="home-indicator"></div>218</div>219</body>220</html>