GD-ML/AndroidCode
13.4k
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>eBay Mobile Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #000000; color: #FFFFFF;12 }13 14 .top-area { padding: 60px 56px 20px; }15 .logo {16 font-weight: bold; font-size: 88px; letter-spacing: -2px; margin-bottom: 36px;17 }18 .logo span { display: inline-block; }19 .cart-fab {20 position: absolute; right: 36px; top: 220px; width: 112px; height: 112px;21 background: #2c2c2c; border-radius: 56px; display: flex; align-items: center; justify-content: center;22 }23 .search-bar {24 background: #1f1f1f; border-radius: 64px; height: 120px; display: flex; align-items: center;25 padding: 0 28px; border: 1px solid #333;26 }27 .search-input { flex: 1; color: #bdbdbd; font-size: 40px; margin-left: 22px; }28 .icon-btn {29 width: 88px; height: 88px; border-radius: 44px; background: #2a2a2a; border: 1px solid #3a3a3a;30 display: flex; align-items: center; justify-content: center; margin-left: 16px;31 }32 .chip-row { display: flex; gap: 24px; margin-top: 32px; flex-wrap: wrap; }33 .chip {34 padding: 22px 34px; border-radius: 40px; border: 1px solid #494949; background: #141414; color: #eaeaea;35 font-size: 36px; display: inline-flex; align-items: center; gap: 16px;36 }37 38 .signin { text-align: center; margin: 48px 40px 0; color: #dedede; font-size: 42px; line-height: 1.4; }39 .action-row { display: flex; justify-content: center; gap: 36px; margin-top: 40px; }40 .outline-btn {41 width: 420px; height: 120px; border-radius: 60px; border: 3px solid #2f7ae5;42 color: #2f7ae5; background: transparent; font-size: 46px; display: flex; align-items: center; justify-content: center;43 }44 45 .promo {46 margin-top: 48px; background: #F3DB78; color: #3a281b; padding: 60px 56px; border-top: 1px solid #e0c85c;47 }48 .promo h2 { margin: 0; font-size: 64px; line-height: 1.15; font-weight: 800; color: #3b220c; }49 .promo p { margin: 16px 0 36px; font-size: 38px; color: #593819; }50 .promo .cta {51 width: 320px; height: 110px; border-radius: 55px; background: #5A2A12; color: #fff; font-size: 40px;52 display: flex; align-items: center; justify-content: center;53 }54 55 .section { padding: 40px 56px 280px; }56 .section h3 { margin: 30px 0 30px; font-size: 64px; color: #FFFFFF; }57 .destinations { display: flex; gap: 28px; }58 .dest-item { width: 320px; display: flex; flex-direction: column; align-items: center; }59 .img-circle {60 width: 280px; height: 280px; border-radius: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;61 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px; text-align: center;62 }63 .caption { margin-top: 18px; font-size: 38px; color: #eaeaea; text-align: center; }64 65 .bottom-nav {66 position: absolute; bottom: 0; left: 0; width: 1080px; height: 210px; background: #2b2b2b;67 border-top-left-radius: 40px; border-top-right-radius: 40px; border-top: 1px solid #404040;68 display: flex; align-items: center; justify-content: space-around; padding-bottom: 24px;69 }70 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #e0e0e0; }71 .nav-item.active { color: #2f7ae5; }72 .nav-label { font-size: 32px; }73 .nav-icon { width: 64px; height: 64px; }74 75 .safe-bar {76 position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);77 width: 320px; height: 12px; background: #ffffff; border-radius: 6px; opacity: 0.8;78 }79 80 /* Simple utility icons */81 svg { fill: currentColor; }82</style>83</head>84<body>85<div id="render-target">86 87 <div class="top-area">88 <div class="logo">89 <span style="color:#E52D27;">e</span><span style="color:#0064D2;">b</span><span style="color:#F5AF02;">a</span><span style="color:#86B817;">y</span>90 </div>91 92 <div class="search-bar">93 <svg width="60" height="60" viewBox="0 0 24 24" style="color:#9e9e9e;">94 <path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 4 14.5a6.5 6.5 0 0 0 10.23 5l.27.28v.79l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/>95 </svg>96 <div class="search-input">Search on eBay</div>97 <div class="icon-btn">98 <svg width="44" height="44" viewBox="0 0 24 24" style="color:#e0e0e0">99 <path d="M12 3a3 3 0 0 1 3 3v4a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3zm-4 9a4 4 0 0 0 8 0v2a4 4 0 0 1-8 0v-2z"/>100 </svg>101 </div>102 <div class="icon-btn">103 <svg width="44" height="44" viewBox="0 0 24 24" style="color:#e0e0e0">104 <path d="M4 7h4l2-2h4l2 2h4v12H4z"/>105 </svg>106 </div>107 </div>108 109 <div class="chip-row">110 <div class="chip">111 <span>Selling</span>112 </div>113 <div class="chip">114 <svg width="32" height="32" viewBox="0 0 24 24" style="color:#eaeaea">115 <path d="M11 21h-2l3-9H7l8-12-3 9h6z"/>116 </svg>117 <span>Deals</span>118 </div>119 <div class="chip">120 <svg width="28" height="28" viewBox="0 0 24 24" style="color:#eaeaea">121 <path d="M4 4h4v4H4zm6 0h4v4h-4zm6 0h4v4h-4zM4 10h4v4H4zm6 0h4v4h-4zm6 0h4v4h-4z"/>122 </svg>123 <span>Categories</span>124 </div>125 <div class="chip">126 <span>Saved</span>127 </div>128 </div>129 130 <div class="cart-fab">131 <svg width="48" height="48" viewBox="0 0 24 24" style="color:#eaeaea">132 <path d="M7 4h-2l-1 2h2l3 9h9l3-7H9l-1-4zm2 16a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm8 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>133 </svg>134 </div>135 136 <div class="signin">Sign in so we can personalize your eBay experience</div>137 <div class="action-row">138 <div class="outline-btn">Register</div>139 <div class="outline-btn">Sign in</div>140 </div>141 </div>142 143 <div class="promo">144 <h2>Have you been selling on eBay already?</h2>145 <p>To pay your fees or ask questions</p>146 <div class="cta">Read more</div>147 </div>148 149 <div class="section">150 <h3>Popular Destinations</h3>151 <div class="destinations">152 <div class="dest-item">153 <div class="img-circle">[IMG: Watch]</div>154 <div class="caption">Jewelry</div>155 </div>156 <div class="dest-item">157 <div class="img-circle">[IMG: Hair Dryer]</div>158 <div class="caption">Beauty</div>159 </div>160 <div class="dest-item">161 <div class="img-circle">[IMG: Laptop]</div>162 <div class="caption">Computers & Tablets</div>163 </div>164 </div>165 </div>166 167 <div class="bottom-nav">168 <div class="nav-item active">169 <svg class="nav-icon" viewBox="0 0 24 24">170 <path d="M12 3l9 8-1.5 1.8L18 11v8H6v-8l-1.5 1.8L3 11z"/>171 </svg>172 <div class="nav-label">Home</div>173 </div>174 <div class="nav-item">175 <svg class="nav-icon" viewBox="0 0 24 24">176 <path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z"/>177 </svg>178 <div class="nav-label">My eBay</div>179 </div>180 <div class="nav-item">181 <svg class="nav-icon" viewBox="0 0 24 24">182 <path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 4 14.5a6.5 6.5 0 0 0 10.23 5l.27.28v.79l5 5 1.5-1.5-5-5zM9.5 14A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/>183 </svg>184 <div class="nav-label">Search</div>185 </div>186 <div class="nav-item">187 <svg class="nav-icon" viewBox="0 0 24 24">188 <path d="M12 22a4 4 0 0 0 4-4H8a4 4 0 0 0 4 4zm1-19a1 1 0 0 1 2 0v6l3 3H6l3-3V3a1 1 0 0 1 2 0v6h2z"/>189 </svg>190 <div class="nav-label">Inbox</div>191 </div>192 <div class="nav-item">193 <svg class="nav-icon" viewBox="0 0 24 24">194 <path d="M21 7l-9-5-9 5v10l9 5 9-5V7zm-9 11-7-4V9l7 4 7-4v5l-7 4z"/>195 </svg>196 <div class="nav-label">Selling</div>197 </div>198 </div>199 200 <div class="safe-bar"></div>201</div>202</body>203</html>