GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>UI Render</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1440px; height: 3120px; position: relative; overflow: hidden;10 background: #F7F7F7; color: #2F2F2F;11 }12 13 /* Top status bar */14 .status-bar {15 height: 120px; background: #7F7F7F; padding: 0 40px; display: flex; align-items: center; justify-content: space-between;16 color: white; font-size: 42px;17 }18 .status-right { display: flex; gap: 28px; align-items: center; }19 20 /* Header */21 .header {22 height: 200px; background: #FFFFFF; display: flex; align-items: center; justify-content: space-between;23 padding: 0 40px; box-sizing: border-box;24 }25 .header-left { display: flex; align-items: center; gap: 30px; }26 .header-right { display: flex; align-items: center; gap: 40px; }27 .icon-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }28 .icon svg { width: 56px; height: 56px; stroke: #6D6D6D; fill: none; stroke-width: 30; }29 30 /* Tabs */31 .tabs {32 background: #FFFFFF; height: 120px; display: flex; align-items: flex-end; gap: 60px; padding: 0 40px; box-sizing: border-box;33 box-shadow: 0 6px 12px rgba(0,0,0,0.06);34 }35 .tab {36 font-size: 42px; color: #6A6A6A; padding: 0 18px 26px; position: relative;37 }38 .tab.active { color: #00AFA1; }39 .tab.active::after {40 content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: #00AFA1; border-radius: 6px;41 }42 43 /* Small info card under tabs */44 .info-card {45 margin: 30px 40px; background: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 20px;46 padding: 40px; display: flex; gap: 30px; align-items: center;47 }48 .circle-icon {49 width: 120px; height: 120px; border-radius: 60px; border: 2px solid #D8D8D8; display: flex; align-items: center; justify-content: center;50 color: #00AFA1; font-size: 46px;51 }52 .info-text { font-size: 42px; color: #6A6A6A; }53 .info-link { color: #00AFA1; font-size: 44px; margin-top: 16px; }54 55 .section-title {56 font-size: 64px; font-weight: 700; margin: 40px; color: #333333;57 }58 59 /* Cards grid */60 .cards-row {61 display: flex; gap: 40px; padding: 0 40px; box-sizing: border-box;62 }63 .car-card {64 width: 660px; background: #FFFFFF; border: 1px solid #E6E6E6; border-radius: 20px; overflow: hidden;65 box-shadow: 0 3px 10px rgba(0,0,0,0.06);66 }67 .car-image {68 width: 100%; height: 420px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;69 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 42px;70 }71 .car-content { padding: 40px; }72 .car-title { font-size: 54px; margin-bottom: 16px; color: #3A3A3A; }73 .car-price { font-size: 48px; font-weight: 700; margin-bottom: 10px; }74 .car-sub { font-size: 38px; color: #7A7A7A; margin-bottom: 30px; }75 .outline-btn {76 height: 110px; border: 4px solid #00AFA1; color: #00AFA1; background: #FFFFFF; border-radius: 16px;77 font-size: 44px; display: flex; align-items: center; justify-content: center; cursor: default;78 }79 .divider { height: 2px; background: #EEEEEE; margin: 30px 0 20px; }80 .link-row { display: flex; align-items: center; gap: 18px; color: #00AFA1; font-size: 42px; }81 82 .scale-icon svg { width: 54px; height: 54px; stroke: #00AFA1; fill: none; stroke-width: 20; }83 84 /* Big outline button */85 .big-outline {86 margin: 40px; height: 130px; border: 4px solid #00AFA1; color: #00AFA1; background: #FFFFFF; border-radius: 20px;87 font-size: 48px; display: flex; align-items: center; justify-content: center;88 }89 90 /* Help card */91 .help-card {92 margin: 40px; background: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 20px;93 padding: 40px; display: flex; gap: 30px; align-items: center;94 }95 .help-title { font-size: 54px; font-weight: 700; margin-bottom: 10px; }96 .help-sub { font-size: 40px; color: #7A7A7A; }97 .filled-btn {98 margin-top: 26px; width: 280px; height: 110px; background: #00AFA1; color: #FFFFFF; border-radius: 16px;99 font-size: 44px; display: flex; align-items: center; justify-content: center;100 }101 102 /* Sticky CTA bar */103 .cta-bar {104 position: absolute; left: 0; bottom: 120px; width: 1440px; height: 180px; display: flex;105 box-shadow: 0 -6px 16px rgba(0,0,0,0.08);106 }107 .cta-left, .cta-right {108 flex: 1; display: flex; align-items: center; justify-content: center; font-size: 56px; color: #FFFFFF;109 }110 .cta-left { background: #17B6A4; }111 .cta-right { background: #E33C22; }112 113 /* Home indicator (gesture bar) */114 .home-indicator {115 position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);116 width: 320px; height: 16px; background: #000000; border-radius: 10px; opacity: 0.35;117 }118</style>119</head>120<body>121<div id="render-target">122 123 <!-- Status bar -->124 <div class="status-bar">125 <div>3:31</div>126 <div class="status-right">127 <div>ib</div>128 <div>◤</div>129 <div>◯</div>130 <div>▶</div>131 <div>•</div>132 <div>🔰</div>133 <div>🔋</div>134 </div>135 </div>136 137 <!-- Header -->138 <div class="header">139 <div class="header-left">140 <div class="icon icon-btn">141 <svg viewBox="0 0 100 100">142 <path d="M70 15 L30 50 L70 85" />143 </svg>144 </div>145 </div>146 <div class="header-right">147 <div class="icon icon-btn">148 <svg viewBox="0 0 100 100">149 <path d="M50 87 C30 87 15 72 15 52 C15 35 30 22 50 22 C70 22 85 35 85 52 C85 72 70 87 50 87 Z" />150 <path d="M50 30 C40 30 32 38 32 49 C32 61 40 70 50 70 C60 70 68 61 68 49 C68 38 60 30 50 30 Z" />151 </svg>152 </div>153 <div class="icon icon-btn">154 <svg viewBox="0 0 100 100">155 <circle cx="20" cy="50" r="15" />156 <circle cx="80" cy="20" r="15" />157 <circle cx="80" cy="80" r="15" />158 <path d="M32 42 L66 28" />159 <path d="M32 58 L66 72" />160 </svg>161 </div>162 </div>163 </div>164 165 <!-- Tabs -->166 <div class="tabs">167 <div class="tab active">EXPERT OPINION</div>168 <div class="tab">ALTERNATIVES</div>169 <div class="tab">COLOURS</div>170 <div class="tab">BROCHURES</div>171 </div>172 173 <!-- Under-tab small info card -->174 <div class="info-card" style="margin-top: 30px;">175 <div class="circle-icon">₹</div>176 <div>177 <div class="info-text">Just a few steps to get the best price for your old car</div>178 <div class="info-link">Sell My Car</div>179 </div>180 </div>181 182 <div class="section-title">Scorpio N Alternatives</div>183 184 <!-- Cards Row -->185 <div class="cards-row">186 <!-- Car card 1 -->187 <div class="car-card">188 <div class="car-image">[IMG: Mahindra XUV700 - Blue SUV]</div>189 <div class="car-content">190 <div class="car-title">Mahindra XUV700</div>191 <div class="car-price">Rs. 16.57 Lakh <span style="font-weight:400; color:#7A7A7A; font-size:38px;">onwards</span></div>192 <div class="car-sub">On-Road Price, Delhi</div>193 <div class="outline-btn">View Price Breakup</div>194 <div class="divider"></div>195 <div class="link-row">196 <div class="scale-icon">197 <svg viewBox="0 0 100 100">198 <path d="M50 20 L50 75" />199 <path d="M30 35 L70 35" />200 <path d="M20 35 L35 60 L5 60 Z" />201 <path d="M95 60 L65 60 L80 35 Z" />202 </svg>203 </div>204 <div>Compare with Scorpio N</div>205 </div>206 </div>207 </div>208 209 <!-- Car card 2 -->210 <div class="car-card">211 <div class="car-image">[IMG: Mahindra Scorpio Classic - Blue SUV]</div>212 <div class="car-content">213 <div class="car-title">Mahindra Scorpio Classic</div>214 <div class="car-price">Rs. 16.01 Lakh <span style="font-weight:400; color:#7A7A7A; font-size:38px;">onwards</span></div>215 <div class="car-sub">On-Road Price, Delhi</div>216 <div class="outline-btn">View Price Breakup</div>217 <div class="divider"></div>218 <div class="link-row">219 <div class="scale-icon">220 <svg viewBox="0 0 100 100">221 <path d="M50 20 L50 75" />222 <path d="M30 35 L70 35" />223 <path d="M20 35 L35 60 L5 60 Z" />224 <path d="M95 60 L65 60 L80 35 Z" />225 </svg>226 </div>227 <div>Compare with Scorpio N</div>228 </div>229 </div>230 </div>231 </div>232 233 <!-- Big outline button -->234 <div class="big-outline">View All Similar Cars</div>235 236 <!-- Help card -->237 <div class="help-card">238 <div class="circle-icon">🛈</div>239 <div>240 <div class="help-title">Not sure, which car to buy?</div>241 <div class="help-sub">Let us help you find the best car</div>242 <div class="filled-btn">Get Started</div>243 </div>244 </div>245 246 <!-- Sticky CTA bar -->247 <div class="cta-bar">248 <div class="cta-left">Contact Dealer</div>249 <div class="cta-right">Get January Offers</div>250 </div>251 252 <!-- Home indicator -->253 <div class="home-indicator"></div>254</div>255</body>256</html>