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>Offline Explore UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #FFFFFF;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14    color: #333;15  }16 17  /* Status Bar */18  .status-bar {19    height: 120px;20    display: flex; align-items: center;21    padding: 0 40px;22    color: #616161;23    font-size: 42px;24    box-sizing: border-box;25  }26  .status-left { display: flex; align-items: center; gap: 22px; }27  .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }28  .icon-inline { display: inline-flex; align-items: center; justify-content: center; }29 30  /* Search Row */31  .search-row {32    height: 180px;33    display: flex; align-items: center;34    padding: 0 40px;35    box-sizing: border-box;36    gap: 24px;37  }38  .search-field {39    flex: 1;40    height: 110px;41    background: #EDEDED;42    border-radius: 28px;43    display: flex; align-items: center;44    padding: 0 28px;45    box-sizing: border-box;46    color: #9E9E9E;47    font-size: 40px;48    gap: 18px;49  }50  .filter-label {51    color: #BDBDBD;52    font-size: 42px;53  }54 55  /* Offline Banner */56  .offline-banner {57    height: 120px;58    background: #3C4043;59    color: #FFFFFF;60    display: flex; align-items: center; justify-content: space-between;61    padding: 0 40px;62    box-sizing: border-box;63    font-size: 40px;64  }65 66  /* Main Content */67  .main {68    position: absolute;69    left: 0; right: 0;70    top: 420px; /* 120 + 180 + 120 */71    bottom: 320px; /* nav + home indicator area */72    display: flex; align-items: center; justify-content: center;73    text-align: center;74    box-sizing: border-box;75  }76  .main h1 {77    margin: 0 0 20px;78    font-size: 68px; font-weight: 700;79    color: #6B6B6B;80  }81  .main p {82    margin: 0;83    font-size: 36px;84    color: #8D8D8D;85  }86 87  /* Bottom Navigation */88  .bottom-nav {89    position: absolute;90    left: 0; bottom: 120px;91    width: 100%; height: 200px;92    background: #FFFFFF;93    border-top: 1px solid #E0E0E0;94    display: flex; align-items: center; justify-content: space-around;95    box-sizing: border-box;96  }97  .nav-item {98    width: 33.33%;99    text-align: center;100    color: #9E9E9E;101    font-size: 32px;102  }103  .nav-item .icon {104    width: 64px; height: 64px;105    margin: 20px auto 10px;106  }107  .nav-item svg { width: 100%; height: 100%; }108  .nav-item.active { color: #1A73E8; }109  .nav-item.active svg path,110  .nav-item.active svg circle,111  .nav-item.active svg line,112  .nav-item.active svg polygon {113    stroke: #1A73E8;114  }115  .nav-item svg path,116  .nav-item svg circle,117  .nav-item svg line,118  .nav-item svg polygon {119    stroke: #B0B0B0;120    fill: none;121    stroke-width: 8;122    stroke-linecap: round;123    stroke-linejoin: round;124  }125 126  /* Home Indicator Area */127  .home-indicator {128    position: absolute;129    left: 0; bottom: 0;130    width: 100%; height: 120px;131    background: #000000;132    display: flex; align-items: flex-start; justify-content: center;133  }134  .home-indicator .pill {135    width: 240px; height: 14px;136    background: #CFCFCF; border-radius: 14px;137    margin-top: 40px;138  }139</style>140</head>141<body>142<div id="render-target">143 144  <!-- Status bar -->145  <div class="status-bar">146    <div class="status-left">147      <span>8:32</span>148      <span class="icon-inline" style="font-size: 40px; color:#616161;">⚙</span>149      <svg class="icon-inline" width="40" height="40" viewBox="0 0 40 40">150        <path d="M20 6v18"></path>151        <path d="M14 18l6 6 6-6"></path>152        <path d="M8 30h24"></path>153      </svg>154    </div>155    <div class="status-right">156      <svg class="icon-inline" width="64" height="32" viewBox="0 0 64 32">157        <rect x="2" y="6" width="54" height="20" rx="4" ry="4"></rect>158        <rect x="58" y="11" width="4" height="10" rx="1"></rect>159        <path d="M14 22l8-12 6 8" stroke="#616161"></path>160      </svg>161    </div>162  </div>163 164  <!-- Search row -->165  <div class="search-row">166    <div class="search-field">167      <svg width="44" height="44" viewBox="0 0 44 44">168        <circle cx="19" cy="19" r="14" stroke="#9E9E9E" fill="none" stroke-width="4"></circle>169        <line x1="32" y1="32" x2="42" y2="42" stroke="#9E9E9E" stroke-width="4"></line>170      </svg>171      <span>Search</span>172    </div>173    <div class="filter-label">Filter</div>174  </div>175 176  <!-- Offline banner -->177  <div class="offline-banner">178    <span>You're offline.</span>179    <svg width="36" height="36" viewBox="0 0 36 36">180      <line x1="8" y1="8" x2="28" y2="28" stroke="#FFFFFF" stroke-width="4"></line>181      <line x1="28" y1="8" x2="8" y2="28" stroke="#FFFFFF" stroke-width="4"></line>182    </svg>183  </div>184 185  <!-- Main content -->186  <div class="main">187    <div>188      <h1>You're offline.</h1>189      <p>Connect to Wi‑Fi or cellular to go online.</p>190    </div>191  </div>192 193  <!-- Bottom navigation -->194  <div class="bottom-nav">195    <div class="nav-item">196      <div class="icon">197        <svg viewBox="0 0 64 64">198          <polygon points="32,8 48,18 48,38 32,48 16,38 16,18"></polygon>199        </svg>200      </div>201      <div>Home</div>202    </div>203    <div class="nav-item active">204      <div class="icon">205        <svg viewBox="0 0 64 64">206          <circle cx="28" cy="28" r="18"></circle>207          <line x1="42" y1="42" x2="58" y2="58"></line>208        </svg>209      </div>210      <div>Explore</div>211    </div>212    <div class="nav-item">213      <div class="icon">214        <svg viewBox="0 0 64 64">215          <path d="M20 10h24v40l-12-8-12 8z"></path>216        </svg>217      </div>218      <div>Bookmarks</div>219    </div>220  </div>221 222  <!-- Home indicator -->223  <div class="home-indicator">224    <div class="pill"></div>225  </div>226 227</div>228</body>229</html>