GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>CarTrade - Audi Q7</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px; position: relative; overflow: hidden;9    background: #ffffff; color: #1a1a1a;10  }11 12  /* Header */13  .topbar {14    height: 130px; padding: 0 36px;15    display: flex; align-items: center; justify-content: space-between;16    border-bottom: 1px solid #e5e5e5;17  }18  .brand { display: flex; align-items: center; gap: 18px; }19  .logo-text { font-size: 46px; font-weight: 700; letter-spacing: .2px; color: #222; }20  .logo-text .dot {21    display: inline-block; width: 42px; height: 42px; border-radius: 50%; background: #d7282f;22    color: #fff; font-weight: 700; line-height: 42px; text-align: center; margin: 0 6px;23  }24  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 14px; }25  .icon-btn svg { width: 44px; height: 44px; fill: none; stroke: #333; stroke-width: 4; }26 27  /* Tabs */28  .tabs {29    display: flex; align-items: center; gap: 40px;30    padding: 24px 36px 0; height: 90px; border-bottom: 2px solid #efefef;31    font-size: 34px; color: #4a4a4a;32  }33  .tab { padding-bottom: 20px; }34  .tab.active { color: #000; border-bottom: 6px solid #e34234; }35 36  /* Main content */37  .content { padding: 32px 36px; }38  .page-title { font-size: 60px; font-weight: 700; margin-bottom: 18px; }39  .desc { font-size: 34px; line-height: 1.4; color: #444; }40  .more-link { color: #1a73e8; text-decoration: none; font-weight: 600; }41  .review-row {42    display: flex; align-items: center; gap: 26px; margin-top: 28px; margin-bottom: 20px;43  }44  .rating-pill {45    display: inline-flex; align-items: center; gap: 14px;46    background: #1bb76e; color: #fff; padding: 14px 22px; border-radius: 16px; font-size: 34px;47  }48  .rating-pill svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 4; }49  .link { color: #0b6cf3; font-size: 36px; }50  .promo {51    background: #f6f6f6; border: 1px solid #e0e0e0; border-radius: 14px;52    padding: 30px; font-size: 34px; color: #333; display: flex; justify-content: space-between; align-items: center;53    margin-top: 18px;54  }55  .promo .chev { width: 26px; height: 26px; }56 57  /* Feature pills */58  .feature-row { display: flex; gap: 24px; margin-top: 28px; }59  .feature-pill {60    flex: 1; display: flex; align-items: center; gap: 16px;61    border: 1px solid #dcdcdc; border-radius: 18px; padding: 22px 24px; font-size: 34px; color: #333;62  }63  .feature-pill .icon { width: 44px; height: 44px; }64 65  /* Image */66  .car-image {67    width: 1008px; height: 600px; margin: 36px auto; border: 1px solid #BDBDBD; background: #E0E0E0;68    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px; border-radius: 10px;69  }70 71  /* Section Title */72  .section-title { font-size: 56px; font-weight: 700; margin-top: 16px; }73  .para { font-size: 34px; color: #444; line-height: 1.5; margin-top: 16px; }74 75  /* Select boxes */76  .selectors { display: flex; gap: 22px; margin-top: 20px; }77  .select-box {78    flex: 1; border: 1px solid #ddd; border-radius: 18px; padding: 28px;79  }80  .select-label { font-size: 34px; color: #666; margin-bottom: 12px; }81  .select-value { font-size: 40px; color: #222; display: flex; justify-content: space-between; align-items: center; }82  .chevron { width: 32px; height: 32px; }83 84  .price-row { display: flex; align-items: baseline; gap: 26px; margin-top: 30px; }85  .price-main { font-size: 54px; font-weight: 700; }86  .best-link { color: #0b6cf3; font-size: 36px; }87 88  /* Sticky bottom bar */89  .offer-bar {90    position: absolute; bottom: 0; left: 0; width: 1080px; height: 140px;91    background: #c9342e; color: #fff; display: flex; align-items: center; justify-content: center;92    font-size: 44px; font-weight: 700;93  }94</style>95</head>96<body>97<div id="render-target">98 99  <!-- Header -->100  <div class="topbar">101    <div class="brand">102      <div class="icon-btn">103        <!-- Burger -->104        <svg viewBox="0 0 24 24">105          <path d="M3 6h18M3 12h18M3 18h18" />106        </svg>107      </div>108      <div class="logo-text">Car<span class="dot">T</span>rade</div>109    </div>110    <div style="display:flex; gap:16px;">111      <div class="icon-btn">112        <!-- Search -->113        <svg viewBox="0 0 24 24">114          <circle cx="11" cy="11" r="7"></circle>115          <path d="M20 20l-4.5-4.5"></path>116        </svg>117      </div>118      <div class="icon-btn">119        <!-- Location -->120        <svg viewBox="0 0 24 24">121          <path d="M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z"></path>122          <circle cx="12" cy="10" r="3"></circle>123        </svg>124      </div>125    </div>126  </div>127 128  <!-- Tabs -->129  <div class="tabs">130    <div class="tab active">AUDI Q7</div>131    <div class="tab">VERSIONS</div>132    <div class="tab">IMAGES</div>133    <div class="tab">COLOURS</div>134    <div class="tab">MILEAGE</div>135    <div class="tab">PRICE</div>136  </div>137 138  <!-- Content -->139  <div class="content">140    <div class="page-title">Audi Q7</div>141    <div class="desc">142      Audi Q7 price in India starts from ₹ 84.70 Lakh. Q7 is available in 6 colours - Carrara White, Mythos Black, Navarra Blue,...143      <a class="more-link" href="#">+More</a>144    </div>145 146    <div class="review-row">147      <div class="rating-pill">148        <!-- star -->149        <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z"/></svg>150        4151      </div>152      <div class="link">1 Reviews</div>153      <div class="link">Write a review</div>154    </div>155 156    <div class="promo">157      <div>Write a review and win Amazon voucher worth ₹ 2,000</div>158      <svg class="chev" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7" stroke="#666" stroke-width="3" fill="none"/></svg>159    </div>160 161    <div class="feature-row">162      <div class="feature-pill">163        <svg class="icon" viewBox="0 0 24 24">164          <rect x="4" y="7" width="16" height="12" rx="3" ry="3" stroke="#333" stroke-width="2" fill="none"/>165          <circle cx="12" cy="13" r="3" stroke="#333" stroke-width="2" fill="none"/>166        </svg>167        Images (54)168      </div>169      <div class="feature-pill">170        <svg class="icon" viewBox="0 0 24 24">171          <path d="M12 2v20M2 12h20" stroke="#333" stroke-width="2" fill="none"/>172        </svg>173        Colours (6)174      </div>175      <div class="feature-pill">176        <svg class="icon" viewBox="0 0 24 24">177          <circle cx="12" cy="12" r="9" stroke="#333" stroke-width="2" fill="none"/>178          <path d="M4 12h16M12 4a8 8 0 0 1 0 16" stroke="#333" stroke-width="2" fill="none"/>179        </svg>180        360° View181      </div>182    </div>183 184    <div class="car-image">[IMG: Audi Q7 Car Photo]</div>185 186    <div class="section-title">Audi Q7 Price</div>187    <div class="para">188      Audi Q7 price starts from ₹ 84.70 Lakh and goes up to ₹ 92.30 Lakh. Audi Q7 EMI starts from ₹ 1,71,741. Select city to view...189      <a class="more-link" href="#">+More</a>190    </div>191 192    <div class="selectors">193      <div class="select-box">194        <div class="select-label">Version</div>195        <div class="select-value">196          All Versions197          <svg class="chevron" viewBox="0 0 24 24"><path d="M8 5l8 7-8 7" stroke="#777" stroke-width="3" fill="none"/></svg>198        </div>199      </div>200      <div class="select-box">201        <div class="select-label">City</div>202        <div class="select-value">203          Not Selected204          <svg class="chevron" viewBox="0 0 24 24"><path d="M8 5l8 7-8 7" stroke="#777" stroke-width="3" fill="none"/></svg>205        </div>206      </div>207    </div>208 209    <div class="price-row">210      <div class="price-main">₹ 84.70 - 92.30 Lakh</div>211      <div class="best-link">Get Best Price</div>212    </div>213  </div>214 215  <!-- Sticky bottom offer bar -->216  <div class="offer-bar">Get July Offers</div>217</div>218</body>219</html>