GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>UI Render - Yoga Mats Details</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Top gradient header area */18  .header {19    position: relative;20    width: 100%;21    height: 360px;22    background: linear-gradient(135deg, #76d6d0 0%, #b8ece6 100%);23  }24 25  /* Status bar */26  .status-bar {27    height: 70px;28    padding: 0 36px;29    display: flex;30    align-items: center;31    color: #1a1a1a;32    font-weight: 600;33    font-size: 40px;34  }35  .status-icons {36    margin-left: auto;37    display: flex;38    gap: 26px;39  }40  .status-icons svg { width: 40px; height: 40px; opacity: 0.8; }41 42  /* Search row */43  .search-row {44    display: flex;45    align-items: center;46    padding: 22px 28px;47    gap: 22px;48  }49  .back-btn {50    width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;51  }52  .search-box {53    flex: 1;54    height: 104px;55    background: #ffffff;56    border-radius: 22px;57    box-shadow: 0 4px 10px rgba(0,0,0,0.12);58    display: flex; align-items: center;59    padding: 0 30px;60    gap: 20px;61  }62  .search-box .placeholder {63    flex: 1;64    font-size: 38px;65    color: #616161;66  }67  .scan-btn {68    width: 80px; height: 80px; border-radius: 18px;69    background: #f3f7f7; display: flex; align-items: center; justify-content: center;70    border: 1px solid #d0d7d7;71  }72  .scan-btn svg { width: 44px; height: 44px; }73 74  /* Tabs */75  .tabs {76    display: flex;77    align-items: center;78    gap: 42px;79    padding: 12px 36px 0 36px;80    height: 120px;81    background: transparent;82    border-bottom: 1px solid #e0e0e0;83  }84  .tab {85    font-size: 40px;86    color: #757575;87    position: relative;88    padding-bottom: 22px;89  }90  .tab.active {91    color: #ef6c00;92    font-weight: 700;93  }94  .tab.active::after {95    content: "";96    position: absolute;97    left: 0; bottom: 0;98    width: 120px; height: 10px;99    background: #ef6c00; border-radius: 6px;100  }101  .tabs .spacer { flex: 1; }102  .tabs .up-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }103 104  /* Content area */105  .content {106    position: absolute;107    left: 0; right: 0;108    top: 360px; /* below header */109    bottom: 340px; /* above bottom nav */110    overflow: hidden;111    padding: 26px 36px 0 36px;112    color: #222;113  }114  .spec-row {115    display: flex; gap: 24px; align-items: baseline; font-size: 40px;116    margin: 12px 0 16px 0;117  }118  .spec-label { font-weight: 800; color: #333; }119  .divider { height: 1px; background: #e0e0e0; margin: 22px 0 10px 0; }120 121  .bullets {122    list-style-type: disc;123    padding-left: 40px;124    margin: 0;125  }126  .bullets li {127    font-size: 38px;128    line-height: 58px;129    color: #333;130    margin-bottom: 26px;131  }132  .bullets b { font-weight: 800; color: #333; }133 134  /* Bottom navigation */135  .bottom-nav {136    position: absolute;137    left: 0; right: 0; bottom: 100px;138    height: 200px;139    background: #ffffff;140    border-top: 2px solid #e6e6e6;141    display: flex; justify-content: space-around; align-items: center;142    padding: 10px 0;143  }144  .nav-item {145    width: 180px;146    display: flex; flex-direction: column; align-items: center; justify-content: center;147    gap: 12px; color: #606060; font-size: 32px;148    position: relative;149  }150  .nav-item svg { width: 64px; height: 64px; }151  .nav-item.active { color: #17b8b0; font-weight: 700; }152  .nav-item.active .indicator {153    position: absolute; top: -3px; width: 140px; height: 10px; background: #17b8b0; border-radius: 5px;154  }155 156  /* OS handle */157  .os-handle {158    position: absolute; left: 390px; bottom: 30px;159    width: 300px; height: 14px; border-radius: 7px; background: #bdbdbd;160    opacity: 0.9;161  }162</style>163</head>164<body>165<div id="render-target">166 167  <!-- Header with gradient -->168  <div class="header">169    <!-- Status bar -->170    <div class="status-bar">171      11:30172      <div class="status-icons">173        <!-- simple mail icon -->174        <svg viewBox="0 0 24 24"><path fill="#333" d="M3 5h18v14H3z"/><path fill="#fff" d="M3 5l9 7 9-7"/></svg>175        <!-- cloud icon -->176        <svg viewBox="0 0 24 24"><path fill="#333" d="M6 15a5 5 0 015-5 4 4 0 118 2h1a3 3 0 010 6H7a3 3 0 01-1-3z"/></svg>177        <!-- wifi icon -->178        <svg viewBox="0 0 24 24"><path fill="#333" d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4l2 2 2-2-2-2-2 2z"/></svg>179        <!-- battery icon -->180        <svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2" fill="#333"/><rect x="4" y="8" width="14" height="8" fill="#fff"/><rect x="20" y="9" width="2" height="6" fill="#333"/></svg>181      </div>182    </div>183 184    <!-- Search -->185    <div class="search-row">186      <div class="back-btn">187        <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#2c2c2c" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>188      </div>189      <div class="search-box">190        <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6" stroke="#707070" stroke-width="2" fill="none"/><path d="M15 15l6 6" stroke="#707070" stroke-width="2" stroke-linecap="round"/></svg>191        <div class="placeholder">yoga mats for women</div>192        <div class="scan-btn">193          <svg viewBox="0 0 24 24">194            <rect x="3" y="3" width="6" height="6" stroke="#616161" stroke-width="2" fill="none"/>195            <rect x="15" y="3" width="6" height="6" stroke="#616161" stroke-width="2" fill="none"/>196            <rect x="3" y="15" width="6" height="6" stroke="#616161" stroke-width="2" fill="none"/>197            <rect x="15" y="15" width="6" height="6" stroke="#616161" stroke-width="2" fill="none"/>198          </svg>199        </div>200      </div>201    </div>202 203    <!-- Tabs -->204    <div class="tabs">205      <div class="tab active">Details</div>206      <div class="tab">Questions</div>207      <div class="tab">Compare</div>208      <div class="tab">Reviews</div>209      <div class="spacer"></div>210      <div class="up-icon">211        <svg viewBox="0 0 24 24"><path d="M6 14l6-6 6 6" stroke="#5c5c5c" stroke-width="2.5" fill="none" stroke-linecap="round"/></svg>212      </div>213    </div>214  </div>215 216  <!-- Content -->217  <div class="content">218    <div class="spec-row">219      <div class="spec-label">Item Weight</div>220      <div>350 Grams</div>221    </div>222    <div class="divider"></div>223 224    <ul class="bullets">225      <li><b>Comfortable Yoga Mats</b> - 6 feet long & 2 feet wide (183 cm X 61 cm) ensures comfort for people of all shapes and sizes. With highly durable EVA material, the 4 mm thick premium mat comfortably cushions spine, hips, knees and elbows on hard floors. The mat size is perfect for men and women of all shapes. This is the best yoga mat for men and women alike.</li>226 227      <li><b>Yoga Mat with Strap</b> - A yoga mat strip is included with our Boldfit EVA all‑purpose premium workout mat. Easy strapping and light weight feature are added to this mat for easy transport and storage. Carry around your yoga mat & flaunt it with ease!</li>228 229      <li><b>Anti Slip Mat with Extra Grip</b> - With double sided non‑slip surfaces, Boldfit EVA gym mat comes with an excellent slip resistant advantage to prevent injuries and perform any move with confidence. This anti skid mat wavy bottom side stops the mat from sliding on the floor and gives you that much needed extra grip! The beautiful texture on the top surface prevents the hands and feet from slipping out of position. Now whether it's heavy asana’s or just surya namaskar’s do it.</li>230 231      <li><b>Durable Yoga Mats for Women</b> - The EVA material is extremely durable. It lasts more than a regular plasticky mat! This yoga mats for workout at home men is free from toxic materials. We believe in creating quality products for our customers!</li>232 233      <li><b>Sweat Resistant and Washable Workout Mat</b> - Next time don’t stress when you sweat while doing yoga.</li>234    </ul>235  </div>236 237  <!-- Bottom navigation -->238  <div class="bottom-nav">239    <div class="nav-item active">240      <div class="indicator"></div>241      <svg viewBox="0 0 24 24"><path d="M3 11l9-8 9 8v9H3z" fill="#17b8b0"/></svg>242      <div>Home</div>243    </div>244    <div class="nav-item">245      <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="#606060"/><path d="M4 22c0-4 4-6 8-6s8 2 8 6" fill="#606060"/></svg>246      <div>You</div>247    </div>248    <div class="nav-item">249      <svg viewBox="0 0 24 24"><path d="M7 6l-4 4 4 4" stroke="#606060" stroke-width="2" fill="none"/><path d="M17 18l4-4-4-4" stroke="#606060" stroke-width="2" fill="none"/><path d="M9 8h6v8H9z" stroke="#606060" stroke-width="2" fill="none"/></svg>250      <div>More</div>251    </div>252    <div class="nav-item">253      <svg viewBox="0 0 24 24"><path d="M6 6h15l-2 10H7L6 6z" fill="#606060"/><circle cx="9" cy="20" r="2" fill="#606060"/><circle cx="18" cy="20" r="2" fill="#606060"/></svg>254      <div>Cart</div>255    </div>256    <div class="nav-item">257      <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z" fill="#606060"/></svg>258      <div>Menu</div>259    </div>260  </div>261 262  <!-- OS handle bar -->263  <div class="os-handle"></div>264</div>265</body>266</html>