GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Amazon Mobile UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 border-radius: 0;14 }15 16 /* Header / Gradient area */17 .top-gradient {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 230px;23 background: linear-gradient(90deg, #bfe7de 0%, #c7eadf 60%, #cdebe1 100%);24 }25 .pink-divider {26 position: absolute;27 top: 230px;28 left: 0;29 width: 1080px;30 height: 10px;31 background: #ff4f8a;32 }33 34 /* Status bar mock */35 .status-bar {36 position: absolute;37 top: 16px;38 left: 32px;39 width: 1016px;40 height: 36px;41 color: #4a6b6a;42 font-size: 28px;43 display: flex;44 align-items: center;45 justify-content: space-between;46 pointer-events: none;47 }48 .status-left { display: flex; gap: 18px; align-items: center; }49 .status-right { display: flex; gap: 22px; align-items: center; }50 .status-icon {51 width: 28px; height: 28px; border-radius: 6px; background: rgba(255,255,255,0.45);52 }53 54 /* Search bar */55 .search-wrap {56 position: absolute;57 top: 78px;58 left: 30px;59 width: 1020px;60 height: 96px;61 background: #ffffff;62 border-radius: 22px;63 box-shadow: 0 2px 6px rgba(0,0,0,0.12);64 display: flex;65 align-items: center;66 padding: 0 24px;67 }68 .search-icon {69 width: 42px; height: 42px; margin-right: 20px;70 }71 .search-input {72 flex: 1;73 font-size: 36px;74 color: #3c3c3c;75 opacity: 0.85;76 }77 .camera-btn {78 width: 78px; height: 78px;79 border-radius: 16px;80 border: 2px solid #cfd8dc;81 display: flex; align-items: center; justify-content: center;82 background: #ffffff;83 }84 .camera-icon { width: 46px; height: 46px; }85 86 /* Main content area (blank) */87 .content {88 position: absolute;89 top: 240px;90 left: 0;91 width: 1080px;92 height: 1890px;93 background: #ffffff;94 }95 96 /* Bottom navigation */97 .bottom-nav {98 position: absolute;99 bottom: 0;100 left: 0;101 width: 1080px;102 height: 170px;103 background: #f7f7f7;104 border-top: 1px solid #d6d6d6;105 display: flex;106 align-items: center;107 justify-content: space-around;108 }109 .nav-item {110 width: 20%;111 height: 120px;112 display: flex;113 flex-direction: column;114 align-items: center;115 justify-content: center;116 color: #1b5e73;117 font-size: 34px;118 }119 .nav-item svg { width: 70px; height: 70px; }120 .nav-item span { margin-top: 8px; font-size: 34px; color: #2e2e2e; }121 .nav-item.active span { color: #1b5e73; }122</style>123</head>124<body>125<div id="render-target">126 127 <!-- Gradient header and divider -->128 <div class="top-gradient"></div>129 <div class="pink-divider"></div>130 131 <!-- Status bar -->132 <div class="status-bar">133 <div class="status-left">134 <div>10:32</div>135 <div>16°</div>136 <div class="status-icon"></div>137 <div class="status-icon"></div>138 <div class="status-icon"></div>139 <div class="status-icon"></div>140 </div>141 <div class="status-right">142 <div class="status-icon"></div>143 <div class="status-icon"></div>144 <div class="status-icon"></div>145 </div>146 </div>147 148 <!-- Search bar -->149 <div class="search-wrap">150 <!-- search svg -->151 <svg class="search-icon" viewBox="0 0 24 24">152 <circle cx="10" cy="10" r="7" stroke="#5b6e6c" stroke-width="2" fill="none"></circle>153 <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#5b6e6c" stroke-width="2" stroke-linecap="round"></line>154 </svg>155 <div class="search-input">Search Amazon.in</div>156 <div class="camera-btn">157 <svg class="camera-icon" viewBox="0 0 24 24">158 <rect x="3" y="5" width="18" height="14" rx="3" ry="3" stroke="#788a8a" stroke-width="2" fill="none"></rect>159 <circle cx="12" cy="12" r="4" stroke="#788a8a" stroke-width="2" fill="none"></circle>160 <rect x="8" y="2" width="8" height="4" rx="1.5" ry="1.5" fill="#788a8a"></rect>161 </svg>162 </div>163 </div>164 165 <!-- Main content area (blank page) -->166 <div class="content">167 <!-- Leave empty to reflect screenshot -->168 </div>169 170 <!-- Bottom navigation -->171 <div class="bottom-nav">172 <div class="nav-item active">173 <svg viewBox="0 0 24 24">174 <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-5H9v5a1 1 0 0 1-1 1H3z" fill="none" stroke="#1b5e73" stroke-width="2" stroke-linejoin="round"></path>175 </svg>176 <span>Home</span>177 </div>178 <div class="nav-item">179 <svg viewBox="0 0 24 24">180 <circle cx="12" cy="8" r="4" fill="none" stroke="#2e2e2e" stroke-width="2"></circle>181 <path d="M5 21c1.5-4 5.5-6 7-6s5.5 2 7 6" fill="none" stroke="#2e2e2e" stroke-width="2" stroke-linecap="round"></path>182 </svg>183 <span>You</span>184 </div>185 <div class="nav-item">186 <svg viewBox="0 0 24 24">187 <path d="M12 5a7 7 0 1 1-6.4 9.6" fill="none" stroke="#2e2e2e" stroke-width="2"></path>188 <polyline points="4,10 2,15 7,15" fill="none" stroke="#2e2e2e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>189 </svg>190 <span>More</span>191 </div>192 <div class="nav-item">193 <svg viewBox="0 0 24 24">194 <path d="M3 6h2l2 10h10l2-7H8" fill="none" stroke="#2e2e2e" stroke-width="2" stroke-linecap="round"></path>195 <circle cx="9" cy="20" r="1.7" fill="#2e2e2e"></circle>196 <circle cx="17" cy="20" r="1.7" fill="#2e2e2e"></circle>197 </svg>198 <span>Cart</span>199 </div>200 <div class="nav-item">201 <svg viewBox="0 0 24 24">202 <line x1="4" y1="6" x2="20" y2="6" stroke="#2e2e2e" stroke-width="2" stroke-linecap="round"></line>203 <line x1="4" y1="12" x2="20" y2="12" stroke="#2e2e2e" stroke-width="2" stroke-linecap="round"></line>204 <line x1="4" y1="18" x2="20" y2="18" stroke="#2e2e2e" stroke-width="2" stroke-linecap="round"></line>205 </svg>206 <span>Menu</span>207 </div>208 </div>209 210</div>211</body>212</html>