GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1440, initial-scale=1.0">6<title>Red Tape Men's White Running Shoes</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: 1440px;11    height: 3120px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1440px;23    height: 120px;24    background: #222222;25    color: #ffffff;26    display: flex;27    align-items: center;28    padding: 0 40px;29    box-sizing: border-box;30    font-size: 44px;31    letter-spacing: 0.5px;32  }33  .status-left, .status-right {34    display: flex;35    align-items: center;36  }37  .status-left { gap: 30px; }38  .status-right { margin-left: auto; gap: 34px; }39 40  .status-icon svg { display: block; width: 46px; height: 46px; fill: #ffffff; }41 42  /* App bar */43  .app-bar {44    position: absolute;45    top: 120px;46    left: 0;47    width: 1440px;48    height: 220px;49    background: #2A2A2A;50    color: #ffffff;51    display: flex;52    align-items: center;53    box-sizing: border-box;54    padding: 0 40px;55    box-shadow: 0 2px 0 rgba(0,0,0,0.2);56  }57  .icon-btn {58    width: 88px;59    height: 88px;60    border: none;61    background: transparent;62    padding: 0;63    margin-right: 20px;64    display: flex;65    align-items: center;66    justify-content: center;67    cursor: default;68  }69  .icon-btn svg { width: 64px; height: 64px; stroke: #ffffff; stroke-width: 10; stroke-linecap: round; }70  .title {71    font-size: 56px;72    font-weight: 700;73    color: #ffffff;74    white-space: nowrap;75    overflow: hidden;76    text-overflow: ellipsis;77  }78 79  /* Content area */80  .content {81    position: absolute;82    top: 340px; /* status (120) + app bar (220) */83    left: 0;84    right: 0;85    bottom: 120px; /* leave room for gesture bar */86    background: #ffffff;87  }88 89  /* Bottom gesture/navigation area */90  .nav-bar {91    position: absolute;92    bottom: 0;93    left: 0;94    width: 1440px;95    height: 120px;96    background: #000000;97    display: flex;98    align-items: center;99    justify-content: center;100  }101  .gesture {102    width: 360px;103    height: 16px;104    background: #D0D0D0;105    border-radius: 12px;106    opacity: 0.9;107  }108</style>109</head>110<body>111  <div id="render-target">112    <!-- Status Bar -->113    <div class="status-bar">114      <div class="status-left">115        <div>9:46</div>116        <div class="status-icon" title="Search">117          <svg viewBox="0 0 24 24">118            <circle cx="10" cy="10" r="7" fill="none" stroke="#fff" stroke-width="2"></circle>119            <line x1="15" y1="15" x2="22" y2="22" stroke="#fff" stroke-width="2" stroke-linecap="round"></line>120          </svg>121        </div>122        <div class="status-icon" title="Alert">123          <svg viewBox="0 0 24 24">124            <path d="M12 3 L22 20 H2 Z" fill="none" stroke="#fff" stroke-width="2"></path>125            <line x1="12" y1="9" x2="12" y2="14" stroke="#fff" stroke-width="2" stroke-linecap="round"></line>126            <circle cx="12" cy="17.5" r="1.5" fill="#fff"></circle>127          </svg>128        </div>129      </div>130      <div class="status-right">131        <div class="status-icon" title="Wi-Fi">132          <svg viewBox="0 0 24 24">133            <path d="M2 8 C8 -1 16 -1 22 8" fill="none" stroke="#fff" stroke-width="2"></path>134            <path d="M5 12 C10 6 14 6 19 12" fill="none" stroke="#fff" stroke-width="2"></path>135            <path d="M8 16 C12 12 12 12 16 16" fill="none" stroke="#fff" stroke-width="2"></path>136            <circle cx="12" cy="19" r="1.6" fill="#fff"></circle>137          </svg>138        </div>139        <div class="status-icon" title="Battery">140          <svg viewBox="0 0 24 24">141            <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>142            <rect x="4" y="8" width="12" height="8" fill="#fff"></rect>143            <rect x="20" y="10" width="2" height="4" fill="#fff"></rect>144          </svg>145        </div>146      </div>147    </div>148 149    <!-- App Bar -->150    <div class="app-bar">151      <button class="icon-btn" aria-label="Close">152        <svg viewBox="0 0 24 24">153          <line x1="5" y1="5" x2="19" y2="19"></line>154          <line x1="19" y1="5" x2="5" y2="19"></line>155        </svg>156      </button>157      <div class="title">Red Tape Men's White Running Shoes</div>158    </div>159 160    <!-- Main Content (empty white space as per screenshot) -->161    <div class="content"></div>162 163    <!-- Bottom Gesture Bar -->164    <div class="nav-bar">165      <div class="gesture"></div>166    </div>167  </div>168</body>169</html>