GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #E0E0E0;16  }17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #1A1A1A;25    display: flex;26    align-items: center;27    padding: 0 36px;28    box-sizing: border-box;29  }30  .status-left {31    font-weight: 600;32    font-size: 40px;33    letter-spacing: 1px;34  }35  .status-right {36    margin-left: auto;37    display: flex;38    gap: 28px;39    align-items: center;40  }41  .status-dot {42    width: 14px; height: 14px; background: #E0E0E0; border-radius: 50%;43  }44  .icon {45    width: 44px; height: 44px;46  }47  .battery {48    width: 60px; height: 34px; border: 3px solid #E0E0E0; border-radius: 6px; position: relative;49  }50  .battery::after { content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 18px; background: #E0E0E0; border-radius: 2px; }51  .battery-fill { position: absolute; left: 4px; top: 4px; bottom: 4px; right: 16px; background: #E0E0E0; border-radius: 3px; }52  /* App bar */53  .app-bar {54    position: absolute;55    top: 120px;56    left: 0;57    width: 1080px;58    height: 120px;59    background: #1C1C1C;60    display: flex;61    align-items: center;62    padding: 0 24px;63    box-sizing: border-box;64  }65  .app-left, .app-right { display: flex; align-items: center; }66  .app-left { gap: 20px; }67  .app-right { margin-left: auto; gap: 40px; }68  .app-icon { width: 54px; height: 54px; }69  .divider {70    position: absolute;71    top: 360px;72    left: 0;73    width: 100%;74    height: 2px;75    background: #2A2A2A;76  }77  /* Item details section */78  .content {79    position: absolute;80    top: 380px;81    left: 0;82    width: 100%;83    padding: 0 36px;84    box-sizing: border-box;85  }86  .section-header {87    display: flex;88    align-items: center;89    justify-content: space-between;90    margin-top: 18px;91  }92  .section-title {93    font-size: 46px;94    font-weight: 700;95    color: #CFCFCF;96  }97  .chevron {98    width: 40px; height: 40px;99  }100  .list {101    margin-top: 40px;102    display: flex;103    flex-direction: column;104    gap: 36px;105  }106  .list-item {107    display: flex;108    align-items: center;109    gap: 24px;110    color: #BDBDBD;111    font-size: 36px;112  }113  .list-icon {114    width: 56px; height: 56px;115    opacity: 0.8;116  }117  /* Description card */118  .card {119    margin-top: 60px;120    background: #3A3A3A;121    border-radius: 36px 36px 0 0;122    padding: 40px 36px 160px 36px;123    box-sizing: border-box;124    box-shadow: 0 -8px 24px rgba(0,0,0,0.35) inset;125  }126  .card-title {127    font-size: 48px;128    font-weight: 800;129    margin-bottom: 30px;130  }131  .para {132    color: #DADADA;133    font-size: 32px;134    line-height: 1.6;135    margin: 22px 0;136  }137  .bullet {138    display: inline-block;139    width: 34px;140    height: 34px;141    border-radius: 50%;142    background: #5C5C5C;143    margin-right: 14px;144    vertical-align: middle;145    position: relative;146  }147  .bullet::after {148    content: "";149    position: absolute;150    left: 9px; top: 9px;151    width: 16px; height: 16px;152    background: #9E9E9E;153    border-radius: 50%;154  }155  /* Bottom home indicator */156  .home-indicator {157    position: absolute;158    bottom: 38px;159    left: 50%;160    transform: translateX(-50%);161    width: 240px;162    height: 12px;163    background: #787878;164    border-radius: 6px;165    opacity: 0.7;166  }167</style>168</head>169<body>170<div id="render-target">171  <!-- Status Bar -->172  <div class="status-bar">173    <div class="status-left">11:16</div>174    <div class="status-right">175      <!-- Small icons approximations -->176      <svg class="icon" viewBox="0 0 24 24">177        <circle cx="12" cy="12" r="10" fill="none" stroke="#E0E0E0" stroke-width="2"/>178        <text x="12" y="16" text-anchor="middle" font-size="12" fill="#E0E0E0">ib</text>179      </svg>180      <svg class="icon" viewBox="0 0 24 24">181        <rect x="4" y="6" width="16" height="12" rx="2" stroke="#E0E0E0" fill="none" stroke-width="2"/>182        <text x="12" y="15" text-anchor="middle" font-size="10" fill="#E0E0E0">LR</text>183      </svg>184      <svg class="icon" viewBox="0 0 24 24">185        <circle cx="11" cy="11" r="7" fill="none" stroke="#E0E0E0" stroke-width="2"/>186        <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#E0E0E0" stroke-width="2"/>187      </svg>188      <div class="status-dot"></div>189      <svg class="icon" viewBox="0 0 24 24">190        <path d="M12 3L21 9L12 15L3 9L12 3Z" fill="none" stroke="#E0E0E0" stroke-width="2"/>191      </svg>192      <div class="battery"><div class="battery-fill"></div></div>193    </div>194  </div>195 196  <!-- App Bar -->197  <div class="app-bar">198    <div class="app-left">199      <svg class="app-icon" viewBox="0 0 24 24">200        <path d="M15 6L9 12L15 18" fill="none" stroke="#E0E0E0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>201      </svg>202    </div>203    <div class="app-right">204      <svg class="app-icon" viewBox="0 0 24 24">205        <path d="M4 10V19L10 16L16 19V10" fill="none" stroke="#BDBDBD" stroke-width="2"/>206        <rect x="6" y="5" width="12" height="9" fill="none" stroke="#BDBDBD" stroke-width="2"/>207      </svg>208      <svg class="app-icon" viewBox="0 0 24 24">209        <path d="M4 12C7 9 9 7 12 5C15 7 17 9 20 12" fill="none" stroke="#BDBDBD" stroke-width="2"/>210        <path d="M4 12C7 15 9 17 12 19C15 17 17 15 20 12" fill="none" stroke="#BDBDBD" stroke-width="2"/>211      </svg>212      <svg class="app-icon" viewBox="0 0 24 24">213        <path d="M12 21C11.6 21 5 16 5 10C5 7.8 6.8 6 9 6C10.3 6 11.5 6.7 12 7.8C12.5 6.7 13.7 6 15 6C17.2 6 19 7.8 19 10C19 16 12.4 21 12 21Z" fill="none" stroke="#BDBDBD" stroke-width="2"/>214      </svg>215    </div>216  </div>217 218  <div class="divider"></div>219 220  <!-- Content -->221  <div class="content">222    <div class="section-header">223      <div class="section-title">Item details</div>224      <svg class="chevron" viewBox="0 0 24 24">225        <path d="M6 15L12 9L18 15" fill="none" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>226      </svg>227    </div>228 229    <div class="list">230      <div class="list-item">231        <svg class="list-icon" viewBox="0 0 24 24">232          <path d="M12 2L15 8L22 9L17 13L18 20L12 16L6 20L7 13L2 9L9 8L12 2Z" fill="none" stroke="#BDBDBD" stroke-width="2"/>233        </svg>234        <span>Handmade item</span>235      </div>236      <div class="list-item">237        <svg class="list-icon" viewBox="0 0 24 24">238          <path d="M3 17H21" stroke="#BDBDBD" stroke-width="2"/>239          <rect x="4" y="6" width="6" height="6" stroke="#BDBDBD" fill="none" stroke-width="2"/>240          <rect x="14" y="6" width="6" height="6" stroke="#BDBDBD" fill="none" stroke-width="2"/>241        </svg>242        <span>Only ships to United States from New Jersey.</span>243      </div>244    </div>245 246    <div class="card">247      <div class="card-title">Description</div>248 249      <div class="para"><span class="bullet"></span>PORTABLE FOR TRAVEL - Our door jammer is portable, small enough to carry in a pocket or handbag, very suitable safety door lock for travel. Whether in Airbnb, Hotels, Apartments, Dormitories, Bathrooms, or Bedrooms.</div>250 251      <div class="para"><span class="bullet"></span>EASY TO USE &amp; SAFER DESIGN - No need to nail or screw into anything, just put the medal part goes into the hole on the door jam then you close the door, take the gun handle and insert it into the lock in place, then no one could get in and in case of an emergency you could remove the lock in seconds in the dark! Add a door security bar to provide you with a strong sense of safety.</div>252 253      <div class="para"><span class="bullet"></span>STRONGER &amp; SMOOTH TOUCH - Door stopper security lock is upgraded with better performance and durability. A portable door lock made of heavy-duty steel, the solid door lock is guaranteed to remain as good as new for a very long time. Used the latest electroplating and polishing technology to ensure a perfectly smooth touch, and avoid any injury while using the door lock. Provides secondary security for travelers, college students, singles, at-home Moms, and child locks for doors.</div>254 255      <div class="para"><span class="bullet"></span>IDEAL LOCK for ADDED PROTECTION - door lock adds extra security to your room and prevents unauthorized entry, especially when traveling and staying in hotels. It's small but will hold your door shut firmly. Keep those pesky intruders away with Winonly superior travel lock kit. Add an extra lock to provide an additional layer of security and peace of mind.</div>256 257      <div class="para"><span class="bullet"></span>WARRANTY THAT WON’T FAIL YOU - Door security devices are warranted against manufacturing defects. In any case are Winonly responsible for user-related damage or damage incurred during installation. Warranty is valid if door locks are subjected to abnormal conditions, misapplication, or abuse. The portable travel lock brings you additional safety, security, and privacy.</div>258    </div>259  </div>260 261  <!-- Bottom home indicator -->262  <div class="home-indicator"></div>263</div>264</body>265</html>