GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Coolblue Dark - Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #0f1318; color: #fff;12  }13 14  /* Status bar */15  .status-bar {16    height: 88px;17    padding: 0 36px;18    display: flex; align-items: center; justify-content: space-between;19    font-size: 34px; color: #d8d8d8;20  }21  .status-left { display: flex; align-items: center; gap: 24px; }22  .status-right { display: flex; align-items: center; gap: 26px; }23  .status-icon {24    width: 32px; height: 32px; opacity: 0.85;25  }26 27  /* Header / logo / search */28  .top-header {29    position: relative;30    padding: 12px 36px 24px;31  }32  .logo-wrap {33    display: flex; justify-content: center; margin-bottom: 18px;34  }35  .logo-circle {36    width: 160px; height: 160px; border-radius: 50%;37    background: #ff7a00; display: flex; align-items: center; justify-content: center;38    box-shadow: 0 8px 16px rgba(0,0,0,0.35);39    font-weight: 800; letter-spacing: 0.5px; line-height: 1.05;40    text-align: center; color: #fff; font-size: 44px;41  }42  .search-bar {43    height: 120px; border-radius: 18px;44    background: #222831; border: 1px solid #2e3540;45    display: flex; align-items: center; gap: 24px;46    padding: 0 28px; color: #cfd4dc; font-size: 42px;47  }48  .search-input-text { flex: 1; opacity: 0.9; }49  .circle-icon {50    width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center;51  }52  .heart-top {53    position: absolute; right: 36px; top: -6px;54  }55 56  /* Skeleton content */57  .content {58    padding: 24px 20px 160px;59  }60  .skeleton {61    background: #5f656b; border: 1px solid #6c7177; border-radius: 22px; color: #cfd4dc;62    display: flex; align-items: center; justify-content: center;63  }64  .hero { height: 620px; margin: 24px 10px; }65  .row { display: flex; gap: 28px; margin: 26px 10px; }66  .card-large { flex: 1; height: 380px; }67  .card-medium { width: 410px; height: 380px; }68  .lines { margin: 20px 34px; }69  .line { height: 22px; background: linear-gradient(90deg,#858b92,#737980,#858b92); border-radius: 12px; margin-bottom: 28px; }70  .line.w1 { width: 640px; }71  .line.w2 { width: 520px; }72  .line.w3 { width: 420px; }73  .line.w4 { width: 860px; height: 18px; }74  .product-row { display: flex; gap: 28px; margin: 24px 10px; }75  .product {76    width: 490px; height: 360px; border-radius: 24px; background: #2a3038; border: 1px solid #3a414b;77    padding: 26px;78  }79  .product .thumb {80    width: 320px; height: 190px; margin: 6px auto 22px;81    background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 14px;82    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;83  }84  .product .bar { height: 18px; background: #7a8086; border-radius: 10px; margin: 16px auto; }85  .product .bar.short { width: 360px; }86  .product .bar.tiny { width: 310px; }87 88  /* Bottom navigation */89  .bottom-nav {90    position: absolute; left: 0; right: 0; bottom: 0;91    height: 160px; background: #1b2129; border-top: 1px solid #2b313b;92    display: flex; align-items: center; justify-content: space-around;93  }94  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #cfd4dc; font-size: 36px; }95  .nav-icon { width: 70px; height: 70px; opacity: 0.9; }96  .nav-item.active { color: #6ab4ff; }97</style>98</head>99<body>100<div id="render-target">101 102  <!-- Status bar -->103  <div class="status-bar">104    <div class="status-left">105      <div>11:29</div>106      <!-- simple icons -->107      <svg class="status-icon" viewBox="0 0 24 24">108        <circle cx="12" cy="12" r="10" fill="#9aa0a6"/>109      </svg>110      <svg class="status-icon" viewBox="0 0 24 24">111        <rect x="4" y="5" width="16" height="14" rx="2" fill="#9aa0a6"/>112      </svg>113      <svg class="status-icon" viewBox="0 0 24 24">114        <rect x="2" y="11" width="20" height="2" fill="#9aa0a6"/>115      </svg>116    </div>117    <div class="status-right">118      <!-- Wi-Fi -->119      <svg class="status-icon" viewBox="0 0 24 24">120        <path d="M2 8c5-5 15-5 20 0M5 12c3-3 11-3 14 0M9 16c2-2 4-2 6 0M12 20l2-2-2-2-2 2 2 2z" stroke="#d8d8d8" stroke-width="2" fill="none" stroke-linecap="round"/>121      </svg>122      <!-- Battery -->123      <svg class="status-icon" viewBox="0 0 28 24">124        <rect x="2" y="6" width="20" height="12" rx="2" fill="#d8d8d8"/>125        <rect x="23" y="9" width="3" height="6" rx="1" fill="#d8d8d8"/>126      </svg>127    </div>128  </div>129 130  <!-- Header with logo and search -->131  <div class="top-header">132    <div class="logo-wrap">133      <div class="logo-circle">134        cool<br>blue135      </div>136    </div>137 138    <div class="search-bar">139      <!-- Magnifier -->140      <div class="circle-icon">141        <svg width="60" height="60" viewBox="0 0 24 24">142          <circle cx="11" cy="11" r="7" stroke="#cfd4dc" stroke-width="2" fill="none"/>143          <line x1="16" y1="16" x2="22" y2="22" stroke="#cfd4dc" stroke-width="2" stroke-linecap="round"/>144        </svg>145      </div>146      <div class="search-input-text">What are you looking for?</div>147      <!-- Barcode/scan icon -->148      <div class="circle-icon">149        <svg width="60" height="60" viewBox="0 0 24 24">150          <rect x="3" y="3" width="6" height="6" stroke="#cfd4dc" stroke-width="2" fill="none"/>151          <rect x="15" y="3" width="6" height="6" stroke="#cfd4dc" stroke-width="2" fill="none"/>152          <rect x="3" y="15" width="6" height="6" stroke="#cfd4dc" stroke-width="2" fill="none"/>153          <rect x="15" y="15" width="6" height="6" stroke="#cfd4dc" stroke-width="2" fill="none"/>154        </svg>155      </div>156    </div>157 158    <!-- Heart icon top-right -->159    <div class="heart-top circle-icon">160      <svg width="72" height="72" viewBox="0 0 24 24">161        <path d="M12 21s-7-5-9-9c-1.5-3.2 1.2-6 4.5-6 2 0 3.3 1.2 4.5 2.6C13.2 7.2 14.5 6 16.5 6c3.3 0 6 2.8 4.5 6-2 4-9 9-9 9z"162              fill="none" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"/>163      </svg>164    </div>165  </div>166 167  <!-- Content area -->168  <div class="content">169    <div class="skeleton hero">[IMG: Large promotional banner]</div>170 171    <div class="row">172      <div class="skeleton card-large">[IMG: Feature Block]</div>173      <div class="skeleton card-medium">[IMG: Secondary Block]</div>174    </div>175 176    <div class="lines">177      <div class="line w1"></div>178      <div class="line w2"></div>179      <div class="line w3"></div>180    </div>181 182    <div class="line w4" style="margin: 24px 34px;"></div>183 184    <div class="product-row">185      <div class="product">186        <div class="thumb">[IMG: Product Card]</div>187        <div class="bar short"></div>188        <div class="bar tiny"></div>189      </div>190      <div class="product">191        <div class="thumb">[IMG: Product Card]</div>192        <div class="bar short"></div>193        <div class="bar tiny"></div>194      </div>195    </div>196  </div>197 198  <!-- Bottom navigation -->199  <div class="bottom-nav">200    <div class="nav-item active">201      <svg class="nav-icon" viewBox="0 0 24 24">202        <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9z" stroke="#6ab4ff" stroke-width="2" fill="none"/>203      </svg>204      <div>start</div>205    </div>206    <div class="nav-item">207      <svg class="nav-icon" viewBox="0 0 24 24">208        <circle cx="11" cy="11" r="7" stroke="#cfd4dc" stroke-width="2" fill="none"/>209        <line x1="16" y1="16" x2="22" y2="22" stroke="#cfd4dc" stroke-width="2" stroke-linecap="round"/>210      </svg>211      <div>search</div>212    </div>213    <div class="nav-item">214      <svg class="nav-icon" viewBox="0 0 24 24">215        <rect x="3" y="10" width="18" height="10" rx="2" stroke="#cfd4dc" stroke-width="2" fill="none"/>216        <rect x="7" y="4" width="10" height="6" rx="2" stroke="#cfd4dc" stroke-width="2" fill="none"/>217      </svg>218      <div>stores</div>219    </div>220    <div class="nav-item">221      <svg class="nav-icon" viewBox="0 0 24 24">222        <path d="M3 6h2l3 11h9l3-8H8" stroke="#cfd4dc" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>223        <circle cx="9" cy="20" r="2" fill="#cfd4dc"/>224        <circle cx="18" cy="20" r="2" fill="#cfd4dc"/>225      </svg>226      <div>cart</div>227    </div>228    <div class="nav-item">229      <svg class="nav-icon" viewBox="0 0 24 24">230        <circle cx="12" cy="7" r="4" stroke="#cfd4dc" stroke-width="2" fill="none"/>231        <path d="M4 22c0-4 4-7 8-7s8 3 8 7" stroke="#cfd4dc" stroke-width="2" fill="none"/>232      </svg>233      <div>profile</div>234    </div>235  </div>236 237</div>238</body>239</html>