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>Note App Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif; color: #fff; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #0b0b0d;12  }13 14  /* Status bar */15  .status-bar {16    height: 110px;17    padding: 0 36px;18    display: flex; align-items: center; justify-content: space-between;19    color: #eaeaea; font-weight: 600; font-size: 40px;20  }21  .status-right { display: flex; gap: 26px; align-items: center; }22 23  /* Top app bar */24  .topbar {25    display: flex; align-items: center; justify-content: space-between;26    padding: 22px 36px 10px 36px;27  }28  .left-title { display: flex; align-items: center; gap: 28px; }29  .app-title { font-size: 72px; font-weight: 700; letter-spacing: 0.2px; }30 31  .icon-btn {32    width: 120px; height: 120px; border-radius: 28px;33    background: #2b2b2f; display: flex; align-items: center; justify-content: center;34    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);35  }36 37  /* Ad banner */38  .ad-banner {39    margin: 12px 24px 16px 24px;40    background: #1c1c20; border-radius: 24px; padding: 22px;41    display: grid; grid-template-columns: 120px 1fr auto; gap: 22px;42    align-items: center; position: relative;43    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);44  }45  .ad-img {46    width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;47    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; border-radius: 18px;48  }49  .ad-text { line-height: 1.3; }50  .ad-title { font-size: 44px; font-weight: 700; color: #ffffff; }51  .ad-sub { margin-top: 6px; font-size: 34px; color: #c9c9c9; display: flex; align-items: center; gap: 12px; }52  .ad-pill {53    background: #f39a2b; color: #0b0b0d; border-radius: 18px; padding: 6px 12px;54    font-weight: 800; font-size: 26px;55  }56  .ad-cta {57    padding: 28px 38px; background: #f39a2b; color: #0b0b0d; font-weight: 800; font-size: 40px;58    border-radius: 40px;59  }60  .ad-info {61    position: absolute; right: 14px; top: 14px; width: 36px; height: 36px;62    border-radius: 50%; background: #2e2e33; color: #cfd2d6; font-size: 26px;63    display: flex; align-items: center; justify-content: center;64  }65 66  /* Filters row */67  .filters {68    display: flex; align-items: center; justify-content: space-between;69    padding: 10px 24px 6px 24px;70  }71  .chip-row { display: flex; gap: 18px; }72  .chip {73    background: #2b2b2f; color: #ffffff; font-weight: 700; font-size: 40px;74    padding: 18px 26px; border-radius: 22px; display: flex; gap: 16px; align-items: center;75    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);76  }77  .chip.orange { background: #f39a2b; color: #101010; }78  .chip.small { font-size: 36px; padding: 18px 26px; }79 80  /* Notes grid */81  .grid {82    padding: 26px 24px 0 24px;83    display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px;84  }85  .card {86    background: #6b6633; color: #ffffff; border-radius: 30px;87    height: 220px; padding: 26px 30px; position: relative;88    box-shadow: 0 2px 0 rgba(0,0,0,0.2), inset 0 0 0 1px rgba(255,255,255,0.06);89  }90  .card-title { font-size: 56px; font-weight: 800; }91  .card-date { position: absolute; right: 30px; bottom: 24px; color: #efe8d2; font-size: 36px; }92 93  /* Floating Action Button */94  .fab {95    position: absolute; right: 64px; bottom: 160px;96    width: 150px; height: 150px; border-radius: 50%;97    background: #f39a2b; display: flex; align-items: center; justify-content: center;98    box-shadow: 0 22px 40px rgba(27, 118, 69, 0.45), 0 8px 18px rgba(0,0,0,0.6);99  }100  .fab svg { width: 70px; height: 70px; }101 102  /* Home indicator area */103  .home-indicator {104    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);105    width: 380px; height: 10px; background: #d8d8d8; border-radius: 10px; opacity: 0.8;106  }107</style>108</head>109<body>110<div id="render-target">111 112  <!-- Status bar -->113  <div class="status-bar">114    <div>8:50</div>115    <div class="status-right">116      <!-- simple tiny icons -->117      <svg width="38" height="38" viewBox="0 0 24 24" fill="#eaeaea"><path d="M12 2L1 21h22L12 2z"/></svg>118      <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2"><path d="M3 12a9 9 0 0 1 18 0"/><path d="M6 12a6 6 0 0 1 12 0"/><path d="M9 12a3 3 0 0 1 6 0"/></svg>119      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2"><path d="M2 8c3-3 7-3 10 0s7 3 10 0"/><path d="M12 20l5-5H7l5 5z"/></svg>120      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M19 6v12"/></svg>121    </div>122  </div>123 124  <!-- Top App Bar -->125  <div class="topbar">126    <div class="left-title">127      <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.6" stroke-linecap="round">128        <path d="M3 6h18M3 12h14M3 18h10"/>129      </svg>130      <div class="app-title">Note</div>131    </div>132    <div class="icon-btn">133      <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#d9d9d9" stroke-width="2.3">134        <circle cx="11" cy="11" r="7"></circle>135        <path d="M21 21l-4.3-4.3"></path>136      </svg>137    </div>138  </div>139 140  <!-- Ad Banner -->141  <div class="ad-banner">142    <div class="ad-img">[IMG: Ad Icon]</div>143    <div class="ad-text">144      <div class="ad-title">Sell Your Car in Just 1 Day</div>145      <div class="ad-sub">146        <span class="ad-pill">AD</span>147        <span>Get 100% payment before handing ove...</span>148      </div>149    </div>150    <div class="ad-cta">GET QUOTE</div>151    <div class="ad-info">i</div>152  </div>153 154  <!-- Filters -->155  <div class="filters">156    <div class="chip-row">157      <div class="chip">158        <span>Name</span>159        <svg width="32" height="32" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M7 10l5 5 5-5z"/></svg>160      </div>161      <div class="chip orange">162        <span>Date</span>163        <svg width="32" height="32" viewBox="0 0 24 24" fill="#101010"><path d="M7 10l5 5 5-5z"/></svg>164      </div>165    </div>166    <div class="chip small">167      <span>Grid</span>168      <svg width="34" height="34" viewBox="0 0 24 24" fill="#cfcfcf">169        <path d="M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z"/>170      </svg>171    </div>172  </div>173 174  <!-- Notes Grid -->175  <div class="grid">176    <div class="card">177      <div class="card-title">xyz</div>178      <div class="card-date">11 Aug, 2023</div>179    </div>180    <div class="card">181      <div class="card-title">DBW</div>182      <div class="card-date">10 Aug, 2023</div>183    </div>184  </div>185 186  <!-- Large empty scrollable look (visual space) -->187  <div style="height: 1400px;"></div>188 189  <!-- Floating Action Button -->190  <div class="fab">191    <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.8" stroke-linecap="round">192      <path d="M12 5v14M5 12h14"/>193    </svg>194  </div>195 196  <!-- Home indicator -->197  <div class="home-indicator"></div>198 199</div>200</body>201</html>