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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    background: #000;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 36px;28    box-sizing: border-box;29    font-size: 40px;30  }31  .status-left { flex: 1; }32  .status-right { display: flex; align-items: center; gap: 24px; }33  .status-icon { width: 36px; height: 36px; }34  /* App header */35  .app-header {36    position: absolute;37    top: 110px;38    left: 0;39    width: 1080px;40    height: 140px;41    background: #fff;42    border-bottom: 1px solid #e6e6e6;43    display: flex;44    align-items: center;45    padding: 0 24px;46    box-sizing: border-box;47  }48  .header-left, .header-right { width: 220px; display: flex; align-items: center; gap: 34px; }49  .header-left { justify-content: flex-start; }50  .header-right { justify-content: flex-end; }51  .header-title {52    flex: 1;53    text-align: center;54    font-size: 46px;55    font-weight: 600;56    color: #111;57  }58  .icon-btn { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; }59  /* Image placeholder */60  .hero-img {61    position: absolute;62    top: 250px;63    left: 0;64    width: 1080px;65    height: 1180px;66    background: #E0E0E0;67    border-top: 1px solid #BDBDBD;68    border-bottom: 1px solid #BDBDBD;69    display: flex;70    align-items: center;71    justify-content: center;72    color: #757575;73    font-size: 40px;74    letter-spacing: 0.3px;75    box-sizing: border-box;76  }77  /* Description */78  .desc {79    position: absolute;80    top: 1430px;81    left: 0;82    width: 1080px;83    box-sizing: border-box;84    padding: 50px 60px 40px;85    background: #fff;86  }87  .desc p {88    margin: 0;89    font-size: 44px;90    line-height: 1.5;91    color: #111;92  }93  /* Next image peek */94  .next-img {95    position: absolute;96    top: 1810px;97    left: 0;98    width: 1080px;99    height: 420px;100    background: #E0E0E0;101    border-top: 1px solid #BDBDBD;102    display: flex;103    align-items: flex-start;104    justify-content: center;105    color: #757575;106    font-size: 36px;107    padding-top: 18px;108    box-sizing: border-box;109  }110  /* Gesture bar area */111  .gesture-bar-wrap {112    position: absolute;113    bottom: 0;114    left: 0;115    width: 1080px;116    height: 110px;117    background: #fff;118    display: flex;119    align-items: center;120    justify-content: center;121    border-top: 1px solid #eee;122  }123  .gesture-bar {124    width: 240px;125    height: 12px;126    background: #d6d6d6;127    border-radius: 12px;128  }129</style>130</head>131<body>132<div id="render-target">133 134  <!-- Status Bar -->135  <div class="status-bar">136    <div class="status-left">10:56</div>137    <div class="status-right">138      <!-- Simple status icons -->139      <svg class="status-icon" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">140        <path d="M12 2l9 16H3L12 2z"></path>141      </svg>142      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" aria-hidden="true">143        <circle cx="12" cy="12" r="4"></circle>144        <path d="M2 12h4M18 12h4M12 2v4M12 18v4"></path>145      </svg>146      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" aria-hidden="true">147        <path d="M3 12c2-4 6-7 9-7s7 3 9 7"></path>148        <path d="M6 12c1.8-2.8 4.2-4.5 6-4.5s4.2 1.7 6 4.5"></path>149        <path d="M9 12c.8-1.6 2-2.5 3-2.5s2.2.9 3 2.5"></path>150        <circle cx="12" cy="16.5" r="1.5" fill="#fff"></circle>151      </svg>152      <svg class="status-icon" viewBox="0 0 24 24" aria-hidden="true">153        <rect x="2" y="7" width="18" height="10" rx="2" fill="#fff"></rect>154        <rect x="20" y="10" width="2" height="4" fill="#fff"></rect>155      </svg>156      <span style="font-size:36px;">80%</span>157    </div>158  </div>159 160  <!-- App Header -->161  <div class="app-header">162    <div class="header-left">163      <span class="icon-btn">164        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">165          <path d="M15 18l-6-6 6-6"></path>166        </svg>167      </span>168    </div>169    <div class="header-title">Nike Waffle Debut</div>170    <div class="header-right">171      <span class="icon-btn">172        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" aria-hidden="true">173          <circle cx="11" cy="11" r="7"></circle>174          <path d="M21 21l-4.3-4.3"></path>175        </svg>176      </span>177      <span class="icon-btn">178        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" aria-hidden="true">179          <path d="M6 7h12l-1 12H7L6 7z"></path>180          <path d="M9 7a3 3 0 0 1 6 0"></path>181        </svg>182      </span>183    </div>184  </div>185 186  <!-- Hero Image Placeholder -->187  <div class="hero-img">[IMG: Close-up of white sneaker with orange trim]</div>188 189  <!-- Description -->190  <div class="desc">191    <p>Soft suede overlays echo the materials used on pre-Nike Blue Ribbon Sports shoes, while textile underlays add durability with a crisp finish.</p>192  </div>193 194  <!-- Next image preview -->195  <div class="next-img">[IMG: Next product lifestyle shot]</div>196 197  <!-- Gesture bar -->198  <div class="gesture-bar-wrap">199    <div class="gesture-bar"></div>200  </div>201 202</div>203</body>204</html>