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>Inspiration Loading</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #f6f4ee;15    border-radius: 28px;16  }17 18  /* Header */19  .header {20    position: relative;21    width: 100%;22    height: 380px;23    background: #ffffff;24    box-shadow: 0 1px 0 rgba(0,0,0,0.06);25  }26  .top-row {27    display: flex;28    align-items: center;29    gap: 28px;30    padding: 58px 36px 12px 36px;31  }32  .brand-icon {33    width: 96px;34    height: 96px;35    border-radius: 50%;36    background: #e6862e;37    display: flex;38    align-items: center;39    justify-content: center;40  }41  .brand-icon svg { width: 64px; height: 64px; }42  .search-bar {43    flex: 1;44    height: 100px;45    background: #ece8e3;46    border-radius: 26px;47    display: flex;48    align-items: center;49    padding: 0 28px;50    color: #9f9b95;51    font-size: 40px;52  }53  .search-bar svg { margin-right: 20px; }54  .chat-btn {55    width: 88px;56    height: 88px;57    border-radius: 22px;58    display: flex;59    align-items: center;60    justify-content: center;61    color: #5f5b56;62  }63  .chat-btn svg { width: 48px; height: 48px; }64 65  .tabs {66    display: flex;67    align-items: flex-end;68    padding: 16px 36px 0 36px;69    gap: 80px;70  }71  .tab {72    font-size: 48px;73    font-weight: 700;74    color: #c1bbb3;75    padding-bottom: 22px;76  }77  .tab.active {78    color: #2f2e2c;79  }80  .tab-underline {81    height: 6px;82    width: 560px;83    background: #e28b39;84    margin: 0 0 0 520px; /* aligns under "Inspiration" */85    border-radius: 3px;86  }87 88  /* Content */89  .content {90    padding: 64px 36px 260px 36px;91  }92  .loading-row {93    display: flex;94    align-items: center;95    gap: 28px;96    margin-top: 40px;97    margin-left: 210px;98  }99  .spinner {100    width: 120px;101    height: 120px;102    border-radius: 50%;103    border: 12px solid #e28b39;104    border-left-color: transparent;105    border-bottom-color: transparent;106    animation: spin 1.2s linear infinite;107  }108  @keyframes spin {109    to { transform: rotate(360deg); }110  }111  .loading-text {112    font-size: 46px;113    color: #8e8a84;114  }115 116  /* Bottom navigation */117  .bottom-nav {118    position: absolute;119    left: 0;120    right: 0;121    bottom: 70px;122    height: 170px;123    background: #ffffff;124    border-top: 1px solid #e5e1db;125    display: flex;126    justify-content: space-around;127    align-items: center;128    padding: 0 40px;129  }130  .nav-item {131    width: 120px;132    height: 120px;133    display: flex;134    align-items: center;135    justify-content: center;136  }137  .nav-item svg { width: 72px; height: 72px; }138  .home svg { stroke: #e6862e; }139  .inactive svg { stroke: #9e9a94; }140  .plus-box {141    width: 92px; height: 92px; border: 6px solid #bfbab2; border-radius: 20px;142    display:flex; align-items:center; justify-content:center; color:#7f7b75; font-size:60px; font-weight:700;143  }144  .bookmark {145    position: relative;146    width: 92px; height: 100px;147  }148  .bookmark svg { width: 92px; height: 100px; }149  .bookmark .p {150    position: absolute; top: 22px; left: 0; width: 92px; text-align: center;151    font-size: 52px; color: #7f7b75; font-weight: 700;152  }153  .profile {154    width: 88px; height: 88px; border-radius: 50%; background: #8a6b5b;155    display:flex; align-items:center; justify-content:center; color:#ffffff; font-size:48px; font-weight:700;156  }157 158  /* Home indicator */159  .home-indicator {160    position: absolute;161    bottom: 20px;162    left: 50%;163    transform: translateX(-50%);164    width: 240px;165    height: 12px;166    background: #1f1f1f;167    border-radius: 12px;168  }169</style>170</head>171<body>172<div id="render-target">173  <!-- Header -->174  <div class="header">175    <div class="top-row">176      <div class="brand-icon">177        <!-- Simple chef-hat icon -->178        <svg viewBox="0 0 100 100">179          <path d="M30 68h40v9H30z" fill="#ffffff"/>180          <path d="M25 48c0-10 8-18 18-18h14c10 0 18 8 18 18-5-4-9-6-14-6-5 0-9 2-11 5-2-3-6-5-11-5-5 0-9 2-14 6z" fill="#ffffff"/>181        </svg>182      </div>183      <div class="search-bar">184        <svg viewBox="0 0 24 24" fill="none" stroke="#9e9a94" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">185          <circle cx="11" cy="11" r="7"></circle>186          <line x1="16.5" y1="16.5" x2="22" y2="22"></line>187        </svg>188        <span>Type ingredients...</span>189      </div>190      <div class="chat-btn">191        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">192          <path d="M4 5h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4v-4H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z"></path>193        </svg>194      </div>195    </div>196    <div class="tabs">197      <div class="tab">Your Network</div>198      <div class="tab active">Inspiration</div>199    </div>200    <div class="tab-underline"></div>201  </div>202 203  <!-- Content -->204  <div class="content">205    <div class="loading-row">206      <div class="spinner"></div>207      <div class="loading-text">Loading ...</div>208    </div>209 210    <!-- Example placeholder where feed cards would appear -->211    <div style="margin-top: 80px; width: 100%; height: 1200px; background: transparent;"></div>212  </div>213 214  <!-- Bottom navigation -->215  <div class="bottom-nav">216    <div class="nav-item home">217      <svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">218        <path d="M3 10.5l9-7 9 7"></path>219        <path d="M5 10v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-9"></path>220      </svg>221    </div>222    <div class="nav-item inactive">223      <svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">224        <circle cx="11" cy="11" r="7"></circle>225        <line x1="16.5" y1="16.5" x2="22" y2="22"></line>226      </svg>227    </div>228    <div class="nav-item">229      <div class="plus-box">+</div>230    </div>231    <div class="nav-item bookmark">232      <svg viewBox="0 0 24 24" fill="none" stroke="#9e9a94" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">233        <path d="M6 3h12a2 2 0 0 1 2 2v16l-8-4-8 4V5a2 2 0 0 1 2-2z"></path>234      </svg>235      <div class="p">P</div>236    </div>237    <div class="nav-item">238      <div class="profile">C</div>239    </div>240  </div>241 242  <div class="home-indicator"></div>243</div>244</body>245</html>