GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<meta name="viewport" content="width=1080, initial-scale=1">5<title>Cart UI</title>6<style>7 body { margin:0; padding:0; background:transparent; }8 #render-target{9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#0f1115; color:#ffffff; font-family: "Segoe UI", Roboto, Arial, sans-serif;11 }12 13 /* Status bar */14 .status-bar{15 height:90px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;16 color:#ffffff; opacity:0.95; font-size:30px;17 }18 .status-icons{ display:flex; gap:26px; align-items:center; }19 .dot{ width:8px; height:8px; background:#ffffff; border-radius:50%; opacity:.8; }20 .sb-ico{21 width:28px; height:28px; border:2px solid #fff; border-radius:4px; opacity:.9;22 }23 .battery{24 width:36px; height:18px; border:2px solid #fff; position:relative; border-radius:3px;25 }26 .battery:after{27 content:""; position:absolute; right:-6px; top:4px; width:4px; height:10px; background:#fff; border-radius:1px;28 }29 30 /* Title */31 .page-title{32 font-size:72px; font-weight:700; margin:20px 0 0 56px; letter-spacing:1px;33 }34 35 /* Notice */36 .notice{37 text-align:center; color:#ff4d4f; font-size:36px; font-weight:700; margin-top:26px;38 }39 40 /* Cart card */41 .cart-card{42 width:960px; margin:34px auto 0; background:#171a1f;43 border-radius:20px; padding:28px 30px; display:flex; gap:30px; align-items:flex-start;44 box-shadow: 0 6px 20px rgba(0,0,0,0.35);45 }46 .img-box{47 width:260px; height:330px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:10px;48 display:flex; align-items:center; justify-content:center; color:#555; font-size:26px; text-align:center; padding:10px;49 }50 .info{ flex:1; }51 .row-top{ display:flex; align-items:flex-start; }52 .title-author{ flex:1; }53 .book-title{ font-size:44px; font-weight:700; margin-top:12px; }54 .book-sub{ font-size:30px; color:#a5aab4; margin-top:10px; }55 .price{ font-size:44px; font-weight:700; margin-top:20px; }56 .actions{ display:flex; align-items:center; gap:26px; margin-top:40px; }57 .action{ display:flex; align-items:center; gap:18px; color:#e6e6e6; font-size:34px; }58 .minus-ico{59 width:46px; height:46px; border:3px solid #ff4d4f; border-radius:50%; display:flex; align-items:center; justify-content:center;60 }61 .minus-ico svg{ width:24px; height:24px; }62 .menu-ico svg{ width:44px; height:44px; }63 .divider{64 width:2px; height:48px; background:#6a6f78; opacity:.6;65 }66 67 /* Buy Button */68 .buy-now{69 position:absolute; left:125px; right:125px; bottom:320px;70 height:140px; background:#7b2cbf; border-radius:90px; display:flex; align-items:center; justify-content:center;71 box-shadow:0 14px 30px rgba(123,44,191,0.45);72 font-size:44px; font-weight:700;73 }74 .buy-now span{ margin-left:12px; }75 76 /* Bottom nav */77 .bottom-nav{78 position:absolute; left:0; right:0; bottom:80px; height:170px;79 display:flex; align-items:center; justify-content:space-around; color:#cfd3da;80 }81 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:16px; font-size:26px; }82 .nav-ico{ width:72px; height:72px; display:flex; align-items:center; justify-content:center; }83 .accent{ color:#9e53ff; }84 /* Home indicator */85 .home-indicator{86 position:absolute; bottom:24px; left:50%; transform:translateX(-50%);87 width:300px; height:10px; border-radius:8px; background:#e6e6e6; opacity:.9;88 }89</style>90</head>91<body>92<div id="render-target">93 94 <!-- Status bar -->95 <div class="status-bar">96 <div>7:51</div>97 <div class="status-icons">98 <div class="sb-ico"></div>99 <div class="dot"></div>100 <div class="battery"></div>101 </div>102 </div>103 104 <!-- Title -->105 <div class="page-title">CART</div>106 107 <!-- Notice -->108 <div class="notice">Same delivery charge for one or more items</div>109 110 <!-- Cart Item Card -->111 <div class="cart-card">112 <div class="img-box">[IMG: Book cover - Do It Now!]</div>113 114 <div class="info">115 <div class="row-top">116 <div class="title-author">117 <div class="book-title">Do It Now! X 1</div>118 <div class="book-sub">Napolean Hill</div>119 </div>120 <div class="price">₹149</div>121 </div>122 123 <div class="actions">124 <div class="action">125 <div class="minus-ico">126 <svg viewBox="0 0 24 24" fill="#ff4d4f"><rect x="4" y="11" width="16" height="2" rx="1"/></svg>127 </div>128 <div>Remove</div>129 </div>130 131 <div class="divider"></div>132 133 <div class="action">134 <div class="menu-ico">135 <svg viewBox="0 0 24 24" fill="#e6e6e6">136 <rect x="4" y="6" width="16" height="2" rx="1"></rect>137 <rect x="4" y="11" width="16" height="2" rx="1"></rect>138 <rect x="4" y="16" width="16" height="2" rx="1"></rect>139 </svg>140 </div>141 <div>Details</div>142 </div>143 </div>144 </div>145 </div>146 147 <!-- Buy Now Button -->148 <div class="buy-now">Buy Now <span>₹149</span></div>149 150 <!-- Bottom Navigation -->151 <div class="bottom-nav">152 <div class="nav-item">153 <div class="nav-ico">154 <svg width="48" height="48" viewBox="0 0 24 24" fill="#cfd3da">155 <rect x="3" y="3" width="7" height="7" rx="1"></rect>156 <rect x="14" y="3" width="7" height="7" rx="1"></rect>157 <rect x="3" y="14" width="7" height="7" rx="1"></rect>158 <rect x="14" y="14" width="7" height="7" rx="1"></rect>159 </svg>160 </div>161 </div>162 163 <div class="nav-item">164 <div class="nav-ico">165 <svg width="48" height="48" viewBox="0 0 24 24" fill="#cfd3da">166 <circle cx="11" cy="11" r="7" stroke="#cfd3da" stroke-width="2" fill="none"></circle>167 <line x1="17" y1="17" x2="22" y2="22" stroke="#cfd3da" stroke-width="2"></line>168 </svg>169 </div>170 </div>171 172 <div class="nav-item">173 <div class="nav-ico accent">174 <svg width="56" height="56" viewBox="0 0 24 24" fill="#9e53ff">175 <path d="M7 7h14l-2 9H9L7 7z"></path>176 <circle cx="10" cy="20" r="2" fill="#9e53ff"></circle>177 <circle cx="18" cy="20" r="2" fill="#9e53ff"></circle>178 <rect x="1" y="4" width="4" height="2" fill="#9e53ff"></rect>179 <rect x="11" y="2" width="2" height="6" fill="#9e53ff"></rect>180 </svg>181 </div>182 </div>183 184 <div class="nav-item">185 <div class="nav-ico">186 <svg width="48" height="48" viewBox="0 0 24 24" fill="#cfd3da">187 <circle cx="12" cy="8" r="4"></circle>188 <rect x="5" y="14" width="14" height="7" rx="3"></rect>189 </svg>190 </div>191 </div>192 </div>193 194 <!-- Home indicator -->195 <div class="home-indicator"></div>196 197</div>198</body>199</html>