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>All Notes - 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;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #E7E7E7;15    color: #212121;16  }17 18  /* Top bars */19  .top-area { position: absolute; top: 0; left: 0; right: 0; background: #1976D2; }20  .status-bar {21    height: 88px;22    display: flex;23    align-items: center;24    padding: 0 28px;25    color: #fff;26    font-size: 34px;27    letter-spacing: 0.5px;28  }29  .status-right {30    margin-left: auto;31    display: flex;32    align-items: center;33    gap: 18px;34  }35  .sb-icon svg { width: 36px; height: 36px; fill: #fff; }36 37  .app-bar {38    height: 140px;39    display: flex;40    align-items: center;41    padding: 0 24px 0 16px;42    color: #fff;43  }44  .app-title {45    font-size: 56px;46    font-weight: 700;47    margin-left: 24px;48  }49  .app-actions {50    margin-left: auto;51    display: flex;52    align-items: center;53    gap: 24px;54  }55  .icon-btn svg { width: 56px; height: 56px; fill: #fff; }56 57  /* Notes grid */58  .content {59    position: absolute;60    top: 228px; /* 88 + 140 */61    left: 0;62    right: 0;63    bottom: 230px; /* room for ad + gesture */64    padding: 24px 24px 0 24px;65    overflow: hidden;66  }67  .notes-grid {68    display: flex;69    flex-wrap: wrap;70    gap: 36px;71    padding: 8px;72  }73  .note-card {74    width: calc(50% - 36px);75    min-height: 380px;76    background: #fff;77    border-radius: 14px;78    box-shadow: 0 3px 8px rgba(0,0,0,0.18);79    padding: 28px;80  }81  .note-title {82    font-size: 34px;83    font-weight: 700;84    margin-bottom: 12px;85    color: #1F1F1F;86  }87  .note-body {88    font-size: 28px;89    line-height: 1.35;90    color: #424242;91  }92 93  /* Ad banner placeholder */94  .ad-banner {95    position: absolute;96    left: 0;97    right: 0;98    bottom: 112px;99    height: 150px;100    background: #E0E0E0;101    border-top: 1px solid #BDBDBD;102    border-bottom: 1px solid #BDBDBD;103    display: flex;104    align-items: center;105    justify-content: center;106    color: #616161;107    font-size: 30px;108    letter-spacing: 0.5px;109  }110 111  /* Floating Action Button */112  .fab {113    position: absolute;114    right: 64px;115    bottom: 292px; /* above ad */116    width: 150px;117    height: 150px;118    border-radius: 50%;119    background: #1E88E5;120    box-shadow: 0 10px 20px rgba(0,0,0,0.3);121    display: flex;122    align-items: center;123    justify-content: center;124  }125  .fab svg { width: 80px; height: 80px; fill: #fff; }126 127  /* Gesture bar */128  .gesture {129    position: absolute;130    bottom: 22px;131    left: 50%;132    transform: translateX(-50%);133    width: 320px;134    height: 14px;135    background: #BDBDBD;136    border-radius: 10px;137  }138</style>139</head>140<body>141<div id="render-target">142 143  <div class="top-area">144    <!-- Status bar -->145    <div class="status-bar">146      <div>11:46</div>147      <div class="status-right">148        <div class="sb-icon" title="Wi‑Fi">149          <svg viewBox="0 0 24 24"><path d="M12 18.5l2.5 2.5L12 24l-2.5-3zM2 9c5.5-4.7 14.5-4.7 20 0l-2 2C16 7.7 8 7.7 4 11L2 9zm4 4c4-3.1 12-3.1 16 0l-2 2c-3-2.1-9-2.1-12 0l-2-2z"/></svg>150        </div>151        <div class="sb-icon" title="Signal">152          <svg viewBox="0 0 24 24"><path d="M2 22h3V11H2v11zm5 0h3V7H7v15zm5 0h3V3h-3v19zm5 0h3V14h-3v8z" /></svg>153        </div>154        <div class="sb-icon" title="Battery">155          <svg viewBox="0 0 24 24"><path d="M17 6V4h-2V2H9v2H7v2H3v14h18V6h-4zM5 18V8h14v10H5z"/></svg>156        </div>157      </div>158    </div>159 160    <!-- App bar -->161    <div class="app-bar">162      <div class="icon-btn" aria-label="Menu">163        <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>164      </div>165      <div class="app-title">All Notes</div>166      <div class="app-actions">167        <div class="icon-btn" aria-label="Search">168          <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 16 16.5l.3.3v.8l5 4.9L21.4 22l-4.9-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>169        </div>170        <div class="icon-btn" aria-label="Sort/Filter">171          <svg viewBox="0 0 24 24"><path d="M3 7h10v2H3V7zm0 5h7v2H3v-2zm0 5h13v2H3v-2zm15-8h3v2h-3V9zm-2 5h5v2h-5v-2z"/></svg>172        </div>173        <div class="icon-btn" aria-label="More">174          <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2"/><circle cx="12" cy="12" r="2.2"/><circle cx="12" cy="19" r="2.2"/></svg>175        </div>176      </div>177    </div>178  </div>179 180  <!-- Notes area -->181  <div class="content">182    <div class="notes-grid">183      <div class="note-card">184        <div class="note-title">About Pixel Phone</div>185        <div class="note-body">186          Pixel phone 6 is good for the official use to store the data and restore the data it is basically very useful to store message nd pic in the drive .187        </div>188      </div>189      <div class="note-card">190        <div class="note-title">Social Media</div>191        <div class="note-body">192          Social media is a collective term for websites and applications that focus on communication,193          community-based input, interaction, content-sharing and collaboration. People use social media to stay in touch and interact with friends, family and various communities.194        </div>195      </div>196    </div>197  </div>198 199  <!-- Floating Action Button -->200  <div class="fab" aria-label="Add">201    <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>202  </div>203 204  <!-- Ad banner placeholder -->205  <div class="ad-banner">[IMG: Ad Banner]</div>206 207  <!-- Gesture bar -->208  <div class="gesture"></div>209 210</div>211</body>212</html>