GD-ML/AndroidCode

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>Martino'z Pizza - Menu</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;11    position: relative; overflow: hidden;12    background: #ffffff;13  }14  .status-bar {15    height: 90px;16    padding: 24px 32px 0 32px;17    color: #5f5f5f; font-size: 32px;18  }19  .header {20    display: flex; align-items: center;21    padding: 16px 48px 0 48px;22  }23  .brand-logo {24    width: 120px; height: 120px; border-radius: 60px;25    background: #E0E0E0; border: 1px solid #BDBDBD;26    display: flex; align-items: center; justify-content: center;27    color: #757575; font-size: 26px; margin-right: 28px;28  }29  .brand-title {30    flex: 1;31  }32  .brand-title .main {33    font-weight: 800; font-size: 56px; letter-spacing: 1px; color: #2e2e2e;34  }35  .brand-title .sub {36    font-size: 26px; color: #2e2e2e; letter-spacing: 6px;37  }38  .brand-title .divider {39    display: inline-block; width: 120px; height: 2px; background: #8c8c8c; margin: 0 12px;40  }41  .location-row {42    display: flex; align-items: center; justify-content: space-between;43    padding: 12px 48px 0 48px;44  }45  .location-left { display: flex; align-items: flex-start; }46  .store-icon { width: 48px; height: 48px; margin-right: 20px; }47  .location-text .city { color: #8a8a8a; font-size: 32px; }48  .location-text .branch { font-size: 40px; font-weight: 700; color: #222; display: inline-flex; align-items: center; }49  .dropdown {50    width: 28px; height: 28px; margin-left: 12px;51  }52  .call-btn {53    border: 2px solid #2f6a39; color: #2f6a39; background: #f6fff7;54    padding: 20px 32px; border-radius: 16px; font-size: 36px; font-weight: 700;55    display: inline-flex; align-items: center; gap: 16px;56    box-shadow: 0 4px 0 #2f6a39;57  }58  .call-btn svg { width: 40px; height: 40px; }59  .tabs {60    display: flex; gap: 20px; padding: 24px 48px;61  }62  .tab {63    flex: 1; text-align: center; padding: 28px 0; border-radius: 16px;64    font-size: 38px; font-weight: 800;65  }66  .tab.active { background: #3E6E3B; color: #fff; }67  .tab.inactive { background: #eaeaea; color: #8d8d8d; }68  .banner {69    margin: 8px 48px 24px 48px; border-radius: 24px; overflow: hidden;70    height: 300px;71  }72  .banner .img {73    width: 100%; height: 100%;74    background: #E0E0E0; border: 1px solid #BDBDBD;75    display: flex; align-items: center; justify-content: center;76    color: #757575; font-size: 36px;77  }78  .menu-header {79    display: flex; align-items: center; justify-content: space-between;80    padding: 12px 48px 20px 48px;81  }82  .menu-title {83    font-size: 54px; font-weight: 800; color: #333;84  }85  .search-pill {86    display: inline-flex; align-items: center; gap: 12px;87    background: #efefef; color: #5b5b5b; border-radius: 18px;88    padding: 16px 24px; font-size: 36px; font-weight: 700;89  }90  .search-pill svg { width: 44px; height: 44px; }91  .cards {92    display: grid; grid-template-columns: 1fr 1fr; gap: 28px;93    padding: 0 48px 180px 48px;94  }95  .card {96    position: relative; height: 480px; border-radius: 24px; overflow: hidden;97  }98  .card .img {99    width: 100%; height: 100%;100    background: #E0E0E0; border: 1px solid #BDBDBD;101    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px;102  }103  .card .label {104    position: absolute; left: 24px; bottom: 24px; color: #fff;105    text-shadow: 0 2px 2px rgba(0,0,0,0.4);106  }107  .card .label .title { font-size: 52px; font-weight: 900; letter-spacing: 1px; }108  .card .label .subtitle { font-size: 30px; font-weight: 700; }109  /* Bottom navigation */110  .bottom-bar {111    position: absolute; left: 24px; right: 24px; bottom: 110px;112    height: 160px; background: #ffffff; border-radius: 36px;113    box-shadow: 0 8px 24px rgba(0,0,0,0.12);114    display: flex; align-items: center; justify-content: space-around;115    padding: 0 16px;116  }117  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }118  .nav-item .icon { width: 56px; height: 56px; }119  .nav-item .label { font-size: 30px; color: #6d6d6d; font-weight: 700; }120  .nav-item.active .label { color: #3E6E3B; }121  .nav-item.active svg path { fill: #3E6E3B; }122  .home-handle {123    position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);124    width: 340px; height: 16px; background: #000; opacity: 0.15; border-radius: 12px;125  }126</style>127</head>128<body>129<div id="render-target">130 131  <div class="status-bar">132    2:02 • • •133  </div>134 135  <div class="header">136    <div class="brand-logo">[IMG: Pizza Logo]</div>137    <div class="brand-title">138      <div class="main">MARTINO’Z</div>139      <div class="sub"><span class="divider"></span>PIZZA<span class="divider"></span></div>140    </div>141  </div>142 143  <div class="location-row">144    <div class="location-left">145      <svg class="store-icon" viewBox="0 0 24 24">146        <path d="M3 9l2-3h14l2 3v1h-2v9H5v-9H3V9zm4 2h10v7H7v-7zm1-5l-1.5 2h11L16 6H8z" fill="#333"/>147      </svg>148      <div class="location-text">149        <div class="city">Indore</div>150        <div class="branch">Indore (Bhawarkua)151          <svg class="dropdown" viewBox="0 0 24 24">152            <path d="M7 10l5 5 5-5" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>153          </svg>154        </div>155      </div>156    </div>157    <div class="call-btn">158      <svg viewBox="0 0 24 24">159        <path d="M6 2l4 2-2 3c1 2 3 4 5 5l3-2 2 4-3 2c-6-2-11-7-13-13L6 2z" fill="#2f6a39"/>160      </svg>161      CALL OUTLET162    </div>163  </div>164 165  <div class="tabs">166    <div class="tab active">DELIVERY</div>167    <div class="tab inactive">PICK UP</div>168    <div class="tab inactive">DINE-IN</div>169  </div>170 171  <div class="banner">172    <div class="img">[IMG: Food Banner - "Look On The Bright Side"]</div>173  </div>174 175  <div class="menu-header">176    <div class="menu-title">MENU</div>177    <div class="search-pill">178      <svg viewBox="0 0 24 24">179        <circle cx="10" cy="10" r="6" stroke="#666" stroke-width="2" fill="none"/>180        <path d="M14.5 14.5L20 20" stroke="#666" stroke-width="2" stroke-linecap="round"/>181      </svg>182      Search183    </div>184  </div>185 186  <div class="cards">187    <div class="card">188      <div class="img">[IMG: Two Pizzas Top View]</div>189      <div class="label">190        <div class="title">BOGO</div>191        <div class="subtitle">29 Varieties Available</div>192      </div>193    </div>194    <div class="card">195      <div class="img">[IMG: Cheese Pizza]</div>196      <div class="label">197        <div class="title">PIZZA</div>198        <div class="subtitle">38 Varieties Available</div>199      </div>200    </div>201    <div class="card">202      <div class="img">[IMG: Garlic Breads]</div>203      <div class="label">204        <div class="title">GARLIC BREADS</div>205        <div class="subtitle">11 Varieties Available</div>206      </div>207    </div>208    <div class="card">209      <div class="img">[IMG: Bruschetta]</div>210      <div class="label">211        <div class="title">BRUSCHETTA</div>212        <div class="subtitle">9 Varieties Available</div>213      </div>214    </div>215  </div>216 217  <div class="bottom-bar">218    <div class="nav-item active">219      <svg class="icon" viewBox="0 0 24 24">220        <path d="M12 3l9 8h-3v8H6v-8H3l9-8z" fill="#9e9e9e"/>221      </svg>222      <div class="label">Home</div>223    </div>224    <div class="nav-item">225      <svg class="icon" viewBox="0 0 24 24">226        <path d="M12 8a4 4 0 110 8 4 4 0 010-8zm0-6l2 3-2 1-2-1 2-3zm9 9l-3 2 1 2 3-2-1-2zM3 11l1 2-3 2 1-3 1-1z" fill="#9e9e9e"/>227      </svg>228      <div class="label">Offers</div>229    </div>230    <div class="nav-item">231      <svg class="icon" viewBox="0 0 24 24">232        <path d="M6 7h12l-2 12H8L6 7zm3-3h6v3H9V4z" fill="#9e9e9e"/>233      </svg>234      <div class="label">Cart</div>235    </div>236    <div class="nav-item">237      <svg class="icon" viewBox="0 0 24 24">238        <path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 3-9 6v2h18v-2c0-3-4-6-9-6z" fill="#9e9e9e"/>239      </svg>240      <div class="label">Account</div>241    </div>242  </div>243 244  <div class="home-handle"></div>245 246</div>247</body>248</html>