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>Product Preview Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13    font-family: Arial, Helvetica, sans-serif;14    color: #222;15  }16 17  /* Status bar */18  .status-bar {19    height: 110px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    padding: 0 36px;24    font-size: 42px;25    color: #3a3a3a;26  }27  .status-right {28    display: flex; align-items: center; gap: 28px;29  }30  .status-icon { display: inline-flex; align-items: center; justify-content: center; }31 32  /* Header with back arrow */33  .header {34    height: 120px;35    display: flex;36    align-items: center;37    padding-left: 28px;38    background: #fff;39  }40  .icon-btn { width: 72px; height: 72px; }41 42  /* Product image area */43  .image-area {44    width: 100%;45    height: 620px;46    display: flex;47    align-items: center;48    justify-content: center;49    background: #E0E0E0;50    border-top: 1px solid #BDBDBD;51    border-bottom: 1px solid #BDBDBD;52    color: #757575;53    font-size: 40px;54    letter-spacing: 0.3px;55  }56 57  /* Bottom sheet header with close icon */58  .sheet-header {59    height: 140px;60    display: flex;61    align-items: center;62    background: #ffffff;63    padding-left: 36px;64    border-bottom: 1px solid #E6E6E6;65  }66 67  /* Remaining white content space */68  .content {69    height: 1400px;70    background: #ffffff;71  }72 73  /* Gesture navigation bar */74  .gesture-bar {75    position: absolute;76    bottom: 30px;77    left: 50%;78    transform: translateX(-50%);79    width: 300px;80    height: 14px;81    background: #7a7a7a;82    border-radius: 12px;83    opacity: 0.8;84  }85</style>86</head>87<body>88<div id="render-target">89 90  <!-- Status Bar -->91  <div class="status-bar">92    <div class="status-left">2:52</div>93    <div class="status-right">94      <!-- small square (signal) -->95      <span class="status-icon">96        <svg width="40" height="40" viewBox="0 0 40 40">97          <rect x="8" y="12" width="8" height="16" fill="#767676"></rect>98          <rect x="20" y="8" width="8" height="20" fill="#767676"></rect>99          <rect x="32" y="4" width="8" height="24" fill="#767676"></rect>100        </svg>101      </span>102      <!-- gear icon (settings) -->103      <span class="status-icon">104        <svg width="40" height="40" viewBox="0 0 40 40">105          <circle cx="20" cy="20" r="10" stroke="#767676" stroke-width="3" fill="none"></circle>106          <circle cx="20" cy="20" r="3" fill="#767676"></circle>107        </svg>108      </span>109      <!-- wifi icon -->110      <span class="status-icon">111        <svg width="40" height="40" viewBox="0 0 40 40">112          <path d="M4 16 C12 9, 28 9, 36 16" stroke="#767676" stroke-width="3" fill="none" />113          <path d="M8 22 C14 17, 26 17, 32 22" stroke="#767676" stroke-width="3" fill="none" />114          <circle cx="20" cy="28" r="3" fill="#767676"></circle>115        </svg>116      </span>117      <!-- battery icon -->118      <span class="status-icon">119        <svg width="44" height="40" viewBox="0 0 44 40">120          <rect x="4" y="10" width="32" height="20" rx="3" ry="3" stroke="#767676" stroke-width="3" fill="none"></rect>121          <rect x="38" y="15" width="4" height="10" fill="#767676"></rect>122          <rect x="8" y="14" width="24" height="12" fill="#767676"></rect>123        </svg>124      </span>125    </div>126  </div>127 128  <!-- Header with back arrow -->129  <div class="header">130    <div class="icon-btn">131      <svg width="72" height="72" viewBox="0 0 72 72">132        <path d="M44 18 L24 36 L44 54" stroke="#000" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>133      </svg>134    </div>135  </div>136 137  <!-- Product Image Placeholder -->138  <div class="image-area">[IMG: Black Sneaker Product Photo]</div>139 140  <!-- Bottom sheet header with close (X) icon -->141  <div class="sheet-header">142    <div class="icon-btn">143      <svg width="72" height="72" viewBox="0 0 72 72">144        <path d="M22 22 L50 50 M50 22 L22 50" stroke="#000" stroke-width="6" stroke-linecap="round"></path>145      </svg>146    </div>147  </div>148 149  <!-- Content area (blank) -->150  <div class="content"></div>151 152  <!-- Gesture navigation bar -->153  <div class="gesture-bar"></div>154 155</div>156</body>157</html>