GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Notally Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FAFAFA;14    font-family: Arial, Helvetica, sans-serif;15    color: #222;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 96px;25    background: #FFFFFF;26    display: flex;27    align-items: center;28    padding: 0 32px;29    box-sizing: border-box;30  }31  .status-time {32    font-size: 34px;33    color: #555;34  }35  .status-icons {36    margin-left: auto;37    display: flex;38    align-items: center;39    gap: 22px;40  }41  .dot { width: 10px; height: 10px; background:#777; border-radius:50%; }42  .battery {43    width: 44px; height: 22px; border: 2px solid #555; border-radius: 4px; position: relative;44  }45  .battery::after {46    content: ""; position: absolute; right: -6px; top: 6px; width: 6px; height: 10px; background: #555; border-radius: 1px;47  }48  .battery-level { position:absolute; left:2px; top:2px; bottom:2px; right:10px; background:#76C043; }49 50  /* App bar */51  .app-bar {52    position: absolute;53    top: 96px;54    left: 0;55    width: 1080px;56    height: 152px;57    background: #FFFFFF;58    border-bottom: 1px solid #E6E6E6;59    display: flex;60    align-items: center;61    padding: 0 32px;62    box-sizing: border-box;63  }64  .app-title {65    font-size: 58px;66    font-weight: 700;67    margin-left: 24px;68    color: #222;69  }70  .spacer { flex: 1; }71 72  /* Note card */73  .content {74    position: absolute;75    top: 96px + 152px;76    top: 248px; /* explicit */77    left: 0;78    right: 0;79    padding: 24px;80    box-sizing: border-box;81  }82  .card {83    width: calc(100% - 32px);84    margin: 24px auto 0;85    background: #FFFFFF;86    border-radius: 16px;87    box-shadow: 0 2px 6px rgba(0,0,0,0.12);88    padding: 36px 32px 40px;89    box-sizing: border-box;90    border: 1px solid #E9E9E9;91  }92  .note-title {93    font-size: 52px;94    font-weight: 700;95    margin: 0 0 18px 0;96  }97  .note-meta {98    font-size: 32px;99    color: #8C8C8C;100    margin-bottom: 28px;101  }102  .note-preview {103    font-size: 36px;104    line-height: 1.5;105    color: #444;106  }107 108  /* Floating Action Button */109  .fab {110    position: absolute;111    right: 48px;112    bottom: 160px;113    width: 152px;114    height: 152px;115    border-radius: 50%;116    background: #42A5F5;117    box-shadow: 0 10px 22px rgba(0,0,0,0.25);118    display: flex;119    align-items: center;120    justify-content: center;121  }122 123  /* Gesture bar */124  .gesture {125    position: absolute;126    bottom: 42px;127    left: 50%;128    transform: translateX(-50%);129    width: 480px;130    height: 12px;131    background: #CFCFCF;132    border-radius: 8px;133  }134 135  /* Icon buttons */136  .icon-btn {137    width: 64px;138    height: 64px;139    display: flex;140    align-items: center;141    justify-content: center;142    border-radius: 50%;143  }144  .icon-btn svg { width: 44px; height: 44px; fill: #444; }145  .search svg { width: 48px; height: 48px; }146  .fab svg { width: 72px; height: 72px; fill: #fff; }147</style>148</head>149<body>150<div id="render-target">151 152  <!-- Status Bar -->153  <div class="status-bar">154    <div class="status-time">8:31</div>155    <div class="status-icons">156      <div class="dot"></div>157      <div class="dot"></div>158      <div class="dot"></div>159      <div style="width:26px;height:26px;border:2px solid #555;border-radius:50%"></div>160      <div class="battery">161        <div class="battery-level"></div>162      </div>163    </div>164  </div>165 166  <!-- App Bar -->167  <div class="app-bar">168    <div class="icon-btn">169      <!-- Hamburger Menu -->170      <svg viewBox="0 0 24 24">171        <path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z"></path>172      </svg>173    </div>174    <div class="app-title">Notally</div>175    <div class="spacer"></div>176    <div class="icon-btn search">177      <!-- Search Icon -->178      <svg viewBox="0 0 24 24">179        <path d="M15.5 14h.79l4.21 4.21-1.29 1.29L15 15.29v-.79l-.27-.28A6.471 6.471 0 0 1 9.5 16 6.5 6.5 0 1 1 16 9.5c0 1.61-.59 3.09-1.57 4.23l.27.27zM9.5 14c2.49 0 4.5-2.01 4.5-4.5S11.99 5 9.5 5 5 7.01 5 9.5 7.01 14 9.5 14z"></path>180      </svg>181    </div>182  </div>183 184  <!-- Content -->185  <div class="content">186    <div class="card">187      <div class="note-title">Swimming Class</div>188      <div class="note-meta">2 days ago</div>189      <div class="note-preview">190        the swimming class is scheduled on 10 august at 11 am. Se191      </div>192    </div>193  </div>194 195  <!-- Floating Action Button -->196  <div class="fab">197    <svg viewBox="0 0 24 24">198      <path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2h6z"></path>199    </svg>200  </div>201 202  <!-- Gesture Bar -->203  <div class="gesture"></div>204</div>205</body>206</html>