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>Nike Waffle Debut - Detail</title>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: #ffffff;15    color: #111;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    background: #000;22    color: #fff;23    padding: 0 36px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    box-sizing: border-box;28    font-weight: 600;29  }30  .status-left { font-size: 38px; letter-spacing: 0.5px; }31  .status-right {32    display: flex; align-items: center; gap: 26px;33    font-size: 30px;34  }35  .status-right svg { fill: none; stroke: #fff; stroke-width: 3.5; }36 37  /* App bar */38  .app-bar {39    height: 160px;40    background: #fff;41    border-bottom: 1px solid #e9e9e9;42    position: relative;43    display: flex;44    align-items: center;45  }46  .app-back {47    width: 120px;48    display: flex; align-items: center; justify-content: center;49    padding-left: 8px;50  }51  .app-title {52    position: absolute;53    left: 50%;54    transform: translateX(-50%);55    font-size: 48px;56    font-weight: 700;57    color: #111;58    white-space: nowrap;59  }60  .app-actions {61    margin-left: auto;62    display: flex; align-items: center; gap: 36px;63    padding-right: 34px;64  }65  .icon { width: 56px; height: 56px; }66 67  /* Image placeholder */68  .hero {69    width: 100%;70    height: 1200px;71    background: #E0E0E0;72    border-top: 1px solid #BDBDBD;73    border-bottom: 1px solid #BDBDBD;74    display: flex;75    align-items: center;76    justify-content: center;77    color: #757575;78    font-size: 42px;79    text-align: center;80    box-sizing: border-box;81  }82 83  /* Description */84  .desc {85    padding: 70px 54px 40px 54px;86    font-size: 44px;87    line-height: 1.5;88    color: #111;89  }90 91  /* Bottom gesture bar */92  .gesture {93    position: absolute;94    left: 0; right: 0; bottom: 0;95    height: 140px;96    background: #000;97    display: flex; align-items: center; justify-content: center;98  }99  .gesture .pill {100    width: 300px; height: 14px; background: #e5e5e5; border-radius: 9px;101    opacity: 0.9;102  }103</style>104</head>105<body>106<div id="render-target">107 108  <!-- Status Bar -->109  <div class="status-bar">110    <div class="status-left">10:56</div>111    <div class="status-right">112      <!-- simple icons -->113      <svg width="40" height="40" viewBox="0 0 24 24" aria-label="Wi‑Fi">114        <path d="M2 8c5.5-4.5 14.5-4.5 20 0"></path>115        <path d="M5 11c4-3 10-3 14 0"></path>116        <path d="M8 14c2.5-2 5.5-2 8 0"></path>117        <circle cx="12" cy="18" r="1.5" fill="#fff" stroke="none"></circle>118      </svg>119      <div style="display:flex; align-items:center; gap:10px;">120        <svg width="46" height="46" viewBox="0 0 26 26" aria-label="Battery">121          <rect x="1" y="6" width="20" height="14" rx="2" ry="2" stroke="#fff"></rect>122          <rect x="22" y="10" width="3" height="6" rx="1" stroke="#fff"></rect>123          <rect x="3" y="8" width="14" height="10" fill="#fff" stroke="none"></rect>124        </svg>125        <span style="color:#fff; font-size:30px; font-weight:600;">80%</span>126      </div>127    </div>128  </div>129 130  <!-- App Bar -->131  <div class="app-bar">132    <div class="app-back">133      <svg class="icon" viewBox="0 0 24 24" aria-label="Back">134        <path d="M15 5L8 12l7 7" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>135      </svg>136    </div>137    <div class="app-title">Nike Waffle Debut</div>138    <div class="app-actions">139      <svg class="icon" viewBox="0 0 24 24" aria-label="Search">140        <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2.2" fill="none"></circle>141        <path d="M16.5 16.5L21 21" stroke="#111" stroke-width="2.2" stroke-linecap="round"></path>142      </svg>143      <svg class="icon" viewBox="0 0 24 24" aria-label="Bag">144        <path d="M6 8h12l-1 11H7L6 8z" stroke="#111" stroke-width="2.2" fill="none" stroke-linejoin="round"></path>145        <path d="M9 8a3 3 0 0 1 6 0" stroke="#111" stroke-width="2.2" fill="none"></path>146      </svg>147    </div>148  </div>149 150  <!-- Hero Image Placeholder -->151  <div class="hero">[IMG: Nike shoe on feet close-up]</div>152 153  <!-- Description -->154  <div class="desc">155    Low-cut, padded collar looks sleek and feels great.156  </div>157 158  <!-- Bottom gesture area -->159  <div class="gesture"><div class="pill"></div></div>160</div>161</body>162</html>