GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Add Second Item</title>7<style>8 :root{9 --green:#2E7D32;10 --green-dark:#1f5d24;11 --text:#222;12 --muted:#777;13 --line:#e9ecef;14 --card:#ffffff;15 --shadow:0 6px 18px rgba(0,0,0,0.12);16 }17 body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color:var(--text);}18 #render-target{19 width:1080px; height:2400px; position:relative; overflow:hidden;20 background:#fff;21 }22 23 .page{ padding: 40px 48px 160px 48px;}24 /* Header */25 .topbar{ display:flex; align-items:center; justify-content:space-between; }26 .topbar .left{ display:flex; align-items:center; gap:24px;}27 .icon-btn{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:16px; }28 .title-wrap{ margin-top:12px; }29 .title{ font-size:58px; font-weight:800; letter-spacing:0.4px; }30 .subtitle{ margin-top:8px; font-size:30px; color:var(--muted); }31 32 /* Sections */33 .section{ margin-top:56px; }34 .section-title{ font-size:48px; font-weight:800; letter-spacing:1px; }35 .underline{ width:200px; height:8px; background:var(--green); border-radius:8px; margin:14px 0 10px 0; }36 37 /* Item row */38 .item{ display:flex; justify-content:space-between; align-items:flex-start; padding: 18px 0 50px 0; border-bottom:1px solid transparent; }39 .item + .item{ border-top: 24px solid transparent; }40 .details{ max-width:600px; }41 .veg-row{ display:flex; align-items:center; gap:16px; margin:16px 0; }42 .name{ font-size:46px; font-weight:700; margin:6px 0; }43 .price{ font-size:44px; font-weight:800; margin:6px 0 18px 0; }44 .tag{ display:flex; align-items:center; gap:12px; color:#5d5d5d; font-weight:700; margin-bottom:18px; }45 .tag .j{ width:34px; height:34px; border-radius:50%; background:#FFC107; color:#222; display:flex; align-items:center; justify-content:center; font-weight:800; }46 .desc{ font-size:32px; color:#7a7a7a; line-height:1.35; }47 48 .thumb-col{ width:360px; display:flex; flex-direction:column; align-items:flex-end; gap:18px; }49 .img-ph{50 width:320px; height:320px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:50%;51 display:flex; align-items:center; justify-content:center; color:#757575; text-align:center; padding:18px;52 }53 .add-btn{54 width:320px; height:96px; border-radius:18px; border:2px solid var(--green);55 background:#EEF5EE; color:var(--green); font-size:40px; font-weight:800; letter-spacing:0.5px;56 display:flex; align-items:center; justify-content:center; box-shadow: 0 2px 0 rgba(0,0,0,0.2);57 }58 .customize-note{ font-size:28px; color:#7a7a7a; }59 60 /* Bottom sheet */61 .bottom-sheet{62 position:absolute; left:24px; right:24px; bottom:84px;63 background:#e7f0e7; border-radius:22px; padding:22px; box-shadow: var(--shadow);64 }65 .sheet-top{ display:flex; gap:22px; }66 .selected-card{67 flex:1; background:#fff; border-radius:18px; padding:24px; box-shadow: 0 3px 10px rgba(0,0,0,0.08);68 }69 .sel-row{ display:flex; align-items:center; gap:16px; margin-bottom:12px;}70 .sel-name{ font-size:36px; font-weight:800; color:#2b2b2b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }71 .sel-price{ font-size:34px; font-weight:800; margin:6px 0; }72 .sel-sub{ font-size:28px; color:#8a8a8a; }73 .placeholder-card{74 flex:1; border:3px solid var(--green); background:#f5faf5; border-radius:18px;75 display:flex; align-items:center; justify-content:center; color:#9aa39a; font-size:40px; font-weight:700;76 }77 .sheet-actions{78 margin-top:18px; background:var(--green); border-radius:14px; display:flex; align-items:center; justify-content:space-between; padding:22px 24px; color:#fff;79 }80 .clear{ font-size:34px; font-weight:800; letter-spacing:1px; }81 .continue{82 background:#fff; color:var(--green); padding:26px 42px; border-radius:14px; font-size:36px; font-weight:800; letter-spacing:0.5px;83 display:flex; align-items:center; gap:18px;84 }85 86 /* Simple SVG helpers */87 .svg{ width:42px; height:42px; }88 .search{ width:56px; height:56px; }89</style>90</head>91<body>92<div id="render-target">93 <div class="page">94 <div class="topbar">95 <div class="left">96 <div class="icon-btn" aria-label="Back">97 <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">98 <path d="M15 18l-6-6 6-6"/>99 </svg>100 </div>101 <div class="title-wrap">102 <div class="title">ADD SECOND ITEM</div>103 <div class="subtitle">At just 50% of its original price.</div>104 </div>105 </div>106 <div class="icon-btn" aria-label="Search">107 <svg class="search" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">108 <circle cx="11" cy="11" r="7"></circle>109 <path d="M20 20l-3.5-3.5"></path>110 </svg>111 </div>112 </div>113 114 <div class="section">115 <div class="section-title">SIMPLE</div>116 <div class="underline"></div>117 118 <div class="item">119 <div class="details">120 <div class="veg-row">121 <svg class="svg" viewBox="0 0 24 24">122 <rect x="3" y="3" width="18" height="18" rx="3" ry="3" fill="none" stroke="#2E7D32" stroke-width="2"></rect>123 <circle cx="12" cy="12" r="4" fill="none" stroke="#2E7D32" stroke-width="2"></circle>124 </svg>125 </div>126 <div class="name">Margherita Pizza</div>127 <div class="price">₹465</div>128 <div class="tag"><span class="j">J</span> Jain Available</div>129 <div class="desc">Enjoy 100% Real Mozzarella Cheese Over A Zesty Gravy</div>130 </div>131 <div class="thumb-col">132 <div class="img-ph">[IMG: Plain Cheese Pizza]</div>133 <div class="add-btn">ADD +</div>134 <div class="customize-note">Customizable</div>135 </div>136 </div>137 </div>138 139 <div class="section">140 <div class="section-title">STYLISH</div>141 <div class="underline" style="width:180px"></div>142 143 <div class="item">144 <div class="details">145 <div class="veg-row">146 <svg class="svg" viewBox="0 0 24 24">147 <rect x="3" y="3" width="18" height="18" rx="3" ry="3" fill="none" stroke="#2E7D32" stroke-width="2"></rect>148 <circle cx="12" cy="12" r="4" fill="none" stroke="#2E7D32" stroke-width="2"></circle>149 </svg>150 </div>151 <div class="name">Mac O Mac</div>152 <div class="price">₹495</div>153 <div class="desc">Cheesey macaroni with storm of jalapeno dips & mozzarella cheddar cheese</div>154 </div>155 <div class="thumb-col">156 <div class="img-ph">[IMG: Mac O Mac Pizza]</div>157 <div class="add-btn">ADD +</div>158 <div class="customize-note">Customizable</div>159 </div>160 </div>161 </div>162 </div>163 164 <!-- Bottom floating sheet -->165 <div class="bottom-sheet">166 <div class="sheet-top">167 <div class="selected-card">168 <div class="sel-row">169 <svg class="svg" viewBox="0 0 24 24">170 <rect x="3" y="3" width="18" height="18" rx="3" ry="3" fill="none" stroke="#2E7D32" stroke-width="2"></rect>171 <circle cx="12" cy="12" r="4" fill="none" stroke="#2E7D32" stroke-width="2"></circle>172 </svg>173 <div class="sel-name">Awesome Blosso...</div>174 </div>175 <div class="sel-price">₹645</div>176 <div class="sel-sub">customized</div>177 </div>178 <div class="placeholder-card">SECOND ITEM HERE</div>179 </div>180 <div class="sheet-actions">181 <div class="clear">CLEAR</div>182 <div class="continue">CONTINUE WITH ONE ITEM183 <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="#2E7D32" stroke-width="3" style="margin-left:6px;">184 <path d="M8 4l8 8-8 8"></path>185 </svg>186 </div>187 </div>188 </div>189</div>190</body>191</html>