GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Mobile UI Mock</title>7<style>8  body { margin:0; padding:0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#ffffff; color:#202124;12  }13 14  /* Status bar */15  .status-bar {16    height:100px;17    padding:24px 32px 8px 32px;18    box-sizing:border-box;19    display:flex; align-items:center; justify-content:space-between;20    font-size:40px; color:#5f6368;21  }22  .status-icons { display:flex; align-items:center; gap:24px; }23  .icon-small { width:40px; height:40px; opacity:0.8; }24 25  /* Search bar */26  .search-wrap { padding: 16px 32px 0 32px; }27  .search-bar {28    height:120px; border-radius:60px; background:#F1F3F4; border:1px solid #E5E7E9;29    display:flex; align-items:center; padding:0 28px; box-sizing:border-box;30    gap:22px;31  }32  .search-input { color:#5f6368; font-size:44px; flex:1; }33  .chip { width:84px; height:84px; border-radius:42px; background:#D9D9D9; display:flex; align-items:center; justify-content:center; font-weight:700; color:#6b6b6b; border:1px solid #cfcfcf; }34 35  /* Section title */36  .section-title { font-size:64px; padding:36px 36px 16px 36px; font-weight:600; }37 38  /* Horizontal categories */39  .h-scroll { padding:12px 24px 28px 24px; overflow: hidden; }40  .cards-row { display:flex; gap:28px; }41  .cat-card {42    width:300px; height:260px; border-radius:36px; overflow:hidden; position:relative;43    background:#E0E0E0; border:1px solid #BDBDBD;44  }45  .cat-card::after {46    content:""; position:absolute; inset:0; pointer-events:none;47    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.05) 55%);48  }49  .cat-label {50    position:absolute; left:22px; bottom:18px; color:#fff; font-size:42px; font-weight:700; line-height:1.1; width:250px;51    text-shadow:0 2px 6px rgba(0,0,0,0.35);52  }53  .divider { height:18px; background:#F1F3F4; margin:8px 0 0 0; border-top:1px solid #ECECEC; }54 55  /* Feed card */56  .feed { padding: 24px 24px 0 24px; }57  .feed-card { background:#fff; border-radius:28px; }58  .feed-header { display:flex; align-items:center; justify-content:space-between; padding: 28px 6px 8px 6px; }59  .feed-h-left { display:flex; align-items:flex-start; gap:18px; }60  .brand {61    width:72px; height:72px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:12px;62    display:flex; align-items:center; justify-content:center; color:#757575; font-size:22px;63  }64  .feed-title { font-size:44px; font-weight:600; }65  .follow { color:#1a73e8; font-weight:600; font-size:40px; padding:6px 10px; }66  .subinfo { display:flex; align-items:center; gap:16px; color:#5f6368; font-size:36px; margin: 8px 0 18px 96px; }67  .tiny-icon { width:40px; height:40px; }68  .feed-photo {69    margin: 0 6px; border-radius:36px; overflow:hidden; border:1px solid #D8D8D8; height:620px;70    display:flex; align-items:center; justify-content:center; background:#E0E0E0; color:#757575;71    font-size:42px; letter-spacing:0.2px;72  }73  .feed-text { font-size:44px; line-height:1.25; padding:22px 12px 10px 12px; }74  .meta-row { display:flex; align-items:center; justify-content:space-between; color:#6b6b6b; font-size:36px; padding: 6px 12px 18px 12px; }75  .icon-ellipsis { width:56px; height:56px; }76 77  /* Bottom nav */78  .home-indicator {79    position:absolute; bottom:188px; left:50%; transform:translateX(-50%);80    width:240px; height:12px; border-radius:6px; background:#cfcfcf;81  }82  .bottom-nav {83    position:absolute; bottom:0; left:0; right:0; height:188px; background:#fff;84    border-top:1px solid #E6E6E6; box-shadow:0 -2px 12px rgba(0,0,0,0.06);85    display:flex; align-items:center; justify-content:space-around;86  }87  .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; font-size:32px; color:#5f6368; }88  .nav-item .active { color:#1a73e8; }89  .nav-icon { width:64px; height:64px; }90  .active-dot {91    width:56px; height:56px; border-radius:28px; background:#E8F0FE; display:flex; align-items:center; justify-content:center;92  }93 94  /* Simple utility icon styles */95  .svg { display:block; }96</style>97</head>98<body>99<div id="render-target">100 101  <!-- Status Bar -->102  <div class="status-bar">103    <div style="display:flex; align-items:center; gap:16px;">104      <span style="font-weight:500; color:#3c4043;">8:24</span>105      <svg class="icon-small" viewBox="0 0 24 24"><path fill="#9aa0a6" d="M7 18h10l-5-12z"/></svg>106      <svg class="icon-small" viewBox="0 0 24 24"><path fill="#9aa0a6" d="M6 19c0-3.3 2.7-6 6-6s6 2.7 6 6h-2c0-2.2-1.8-4-4-4s-4 1.8-4 4H6zm6-8c1.7 0 3-1.3 3-3S13.7 5 12 5 9 6.3 9 8s1.3 3 3 3z"/></svg>107    </div>108    <div class="status-icons">109      <svg class="icon-small" viewBox="0 0 24 24"><path fill="#9aa0a6" d="M12 2C8 2 5 5 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-4-3-7-7-7zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 6.5 12 6.5s2.5 1.1 2.5 2.5S13.4 11.5 12 11.5z"/></svg>110      <svg class="icon-small" viewBox="0 0 24 24"><path fill="#9aa0a6" d="M12 4a8 8 0 100 16 8 8 0 000-16zm1 4v5l4 2-.7 1.3L11 14V8h2z"/></svg>111      <svg class="icon-small" viewBox="0 0 24 24"><path fill="#9aa0a6" d="M16 4h-1V3a2 2 0 00-2-2h-2a2 2 0 00-2 2v1H8a2 2 0 00-2 2v14a2 2 0 002 2h8a2 2 0 002-2V6a2 2 0 00-2-2zm-6-1h4v2h-4V3z"/></svg>112    </div>113  </div>114 115  <!-- Search -->116  <div class="search-wrap">117    <div class="search-bar">118      <!-- Maps pin logo simplified -->119      <svg width="72" height="72" viewBox="0 0 24 24" class="svg">120        <path d="M12 2C8.7 2 6 4.7 6 8c0 4.5 6 12 6 12s6-7.5 6-12c0-3.3-2.7-6-6-6z" fill="#34A853"/>121        <circle cx="12" cy="8.5" r="3.5" fill="#FBBC05"/>122        <path d="M12 2c3.3 0 6 2.7 6 6 0 .6-.1 1.2-.3 1.8L12 8V2z" fill="#4285F4"/>123        <path d="M6 8c0 1.3.4 2.5 1 3.6L12 8H6z" fill="#EA4335"/>124      </svg>125      <div class="search-input">Search here</div>126      <svg width="64" height="64" viewBox="0 0 24 24" class="svg"><path fill="#5f6368" d="M12 3a3 3 0 00-3 3v5a3 3 0 006 0V6a3 3 0 00-3-3zm5 8a5 5 0 01-10 0H5a7 7 0 0014 0h-2z"/></svg>127      <div class="chip">C</div>128    </div>129  </div>130 131  <!-- Latest section -->132  <div class="section-title">Latest in E Block</div>133  <div class="h-scroll">134    <div class="cards-row">135      <div class="cat-card">136        <div class="cat-label">Cake shops</div>137      </div>138      <div class="cat-card" style="background:#c74a4a;">139        <div class="cat-label">Restaurants<br/>with live<br/>music</div>140      </div>141      <div class="cat-card">142        <div class="cat-label">Pizza restaurants</div>143      </div>144      <div class="cat-card">145        <div class="cat-label">Beauty & more</div>146      </div>147    </div>148  </div>149  <div class="divider"></div>150 151  <!-- Feed card -->152  <div class="feed">153    <div class="feed-card">154      <div class="feed-header">155        <div class="feed-h-left">156          <div class="brand">[Logo]</div>157          <div>158            <div class="feed-title">Aegis Insurance Financial Services</div>159          </div>160        </div>161        <div class="follow">Follow</div>162      </div>163      <div class="subinfo">164        <svg class="tiny-icon" viewBox="0 0 24 24"><path fill="#5f6368" d="M3 21V8l9-5 9 5v13h-7v-6H10v6H3z"/></svg>165        <span>32 reviews in Noida</span>166      </div>167 168      <div class="feed-photo">169        [IMG: Gym interior]170      </div>171 172      <div class="feed-text">173        The secret to this gym is the guru .. shiv sir ... No frills but pure results 👍174      </div>175 176      <div class="meta-row">177        <div>a week ago</div>178        <svg class="icon-ellipsis" viewBox="0 0 24 24"><path fill="#5f6368" d="M6 12a2 2 0 114 0 2 2 0 01-4 0zm4 0a2 2 0 114 0 2 2 0 01-4 0zm8 0a2 2 0 11-4 0 2 2 0 014 0z"/></svg>179      </div>180    </div>181  </div>182 183  <!-- Home indicator -->184  <div class="home-indicator"></div>185 186  <!-- Bottom Navigation -->187  <div class="bottom-nav">188    <div class="nav-item">189      <div class="active-dot">190        <svg class="nav-icon" viewBox="0 0 24 24">191          <path fill="#1a73e8" d="M12 2C8.7 2 6 4.7 6 8c0 4.5 6 12 6 12s6-7.5 6-12c0-3.3-2.7-6-6-6zm0 9.5A3.5 3.5 0 1112 4a3.5 3.5 0 010 7z"/>192        </svg>193      </div>194      <div class="active">Explore</div>195    </div>196    <div class="nav-item">197      <svg class="nav-icon" viewBox="0 0 24 24"><path fill="#5f6368" d="M4 17l2-6h10l2 6H4zm4-10l2-3h4l2 3H8z"/></svg>198      <div>Go</div>199    </div>200    <div class="nav-item">201      <svg class="nav-icon" viewBox="0 0 24 24"><path fill="#5f6368" d="M6 2h12v20l-6-4-6 4V2z"/></svg>202      <div>Saved</div>203    </div>204    <div class="nav-item">205      <svg class="nav-icon" viewBox="0 0 24 24"><path fill="#5f6368" d="M12 22a2 2 0 002-2H10a2 2 0 002 2zm6-6v-5a6 6 0 10-12 0v5l-2 2v1h16v-1l-2-2z"/></svg>206      <div>Updates</div>207    </div>208  </div>209 210</div>211</body>212</html>