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>Books UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    font-family: "Roboto", "Segoe UI", Arial, sans-serif;16    color: #ffffff;17  }18 19  /* Status bar */20  .status-bar {21    height: 110px;22    padding: 0 40px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #ffffff;27    font-size: 42px;28    letter-spacing: 0.5px;29  }30  .status-right {31    display: flex;32    align-items: center;33    gap: 28px;34  }35  .status-icon svg { display: block; }36 37  /* App bar */38  .app-bar {39    height: 140px;40    background: #8a8600;41    display: flex;42    align-items: center;43    padding: 0 32px;44    color: #ffffff;45  }46  .app-left {47    display: flex;48    align-items: center;49    gap: 24px;50    font-size: 56px;51    font-weight: 500;52  }53  .app-right {54    margin-left: auto;55    display: flex;56    align-items: center;57    gap: 40px;58  }59  .icon-btn svg { display: block; }60 61  /* Content area with ruled lines */62  .content {63    position: absolute;64    left: 0;65    right: 0;66    top: 250px; /* status (110) + app (140) */67    bottom: 0;68    background-image: repeating-linear-gradient(69      to bottom,70      rgba(154,147,0,0.35) 0px,71      rgba(154,147,0,0.35) 2px,72      transparent 2px,73      transparent 150px74    );75  }76  .content-inner {77    position: absolute;78    inset: 0;79    padding: 36px 40px;80  }81  .meta-row {82    display: flex;83    align-items: center;84    justify-content: space-between;85    color: #b9b9b9;86    font-size: 38px;87    margin-bottom: 24px;88  }89  .title {90    font-size: 88px;91    font-weight: 500;92    color: #f0f0f0;93    margin-top: 12px;94  }95 96  /* Toast */97  .toast {98    position: absolute;99    left: 50%;100    bottom: 320px;101    transform: translateX(-50%);102    background: #3b3b3b;103    color: #ffffff;104    border-radius: 90px;105    height: 120px;106    padding: 0 40px 0 24px;107    display: inline-flex;108    align-items: center;109    gap: 24px;110    box-shadow: 0 6px 16px rgba(0,0,0,0.45);111    font-size: 44px;112  }113  .note-icon {114    width: 96px;115    height: 96px;116    border-radius: 20px;117    overflow: hidden;118    display: inline-flex;119    align-items: center;120    justify-content: center;121    background: #f2d34f;122  }123  .note-icon svg { display: block; }124 125  /* Home indicator */126  .home-indicator {127    position: absolute;128    left: 50%;129    transform: translateX(-50%);130    bottom: 70px;131    width: 240px;132    height: 12px;133    background: #e6e6e6;134    border-radius: 8px;135    opacity: 0.9;136  }137</style>138</head>139<body>140<div id="render-target">141 142  <!-- Status Bar -->143  <div class="status-bar">144    <div>11:38</div>145    <div class="status-right">146      <!-- WiFi -->147      <div class="status-icon">148        <svg width="48" height="48" viewBox="0 0 48 48">149          <path d="M4 18c9-8 31-8 40 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>150          <path d="M10 26c7-6 21-6 28 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>151          <path d="M18 34c4-3 8-3 12 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>152          <circle cx="24" cy="38" r="2.8" fill="#fff"/>153        </svg>154      </div>155      <!-- Battery -->156      <div class="status-icon">157        <svg width="54" height="48" viewBox="0 0 54 48">158          <rect x="4" y="12" width="40" height="24" rx="4" stroke="#fff" stroke-width="4" fill="none"/>159          <rect x="8" y="16" width="32" height="16" rx="2" fill="#ffffff"/>160          <rect x="46" y="18" width="6" height="12" rx="2" fill="#ffffff"/>161        </svg>162      </div>163    </div>164  </div>165 166  <!-- App Bar -->167  <div class="app-bar">168    <div class="app-left">169      <svg width="64" height="64" viewBox="0 0 48 48">170        <path d="M30 8 L14 24 L30 40" stroke="#ffffff" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>171      </svg>172      <div>Books</div>173    </div>174    <div class="app-right">175      <!-- Edit/Pencil -->176      <div class="icon-btn">177        <svg width="64" height="64" viewBox="0 0 48 48">178          <path d="M10 34 L14 38 L38 14 L34 10 Z" fill="#ffffff"/>179          <path d="M10 34 L8 40 L14 38 Z" fill="#ffffff"/>180        </svg>181      </div>182      <!-- More/Kebab -->183      <div class="icon-btn">184        <svg width="64" height="64" viewBox="0 0 48 48">185          <circle cx="24" cy="12" r="4" fill="#ffffff"/>186          <circle cx="24" cy="24" r="4" fill="#ffffff"/>187          <circle cx="24" cy="36" r="4" fill="#ffffff"/>188        </svg>189      </div>190    </div>191  </div>192 193  <!-- Content with ruled lines -->194  <div class="content">195    <div class="content-inner">196      <div class="meta-row">197        <div>0 sec. ago</div>198        <div>8/9/23 11:38 AM</div>199      </div>200      <div class="title">Bhagavad Geeta</div>201    </div>202  </div>203 204  <!-- Saved Toast -->205  <div class="toast">206    <div class="note-icon">207      <!-- Simple sticky note icon -->208      <svg width="84" height="84" viewBox="0 0 48 48">209        <rect x="6" y="6" width="30" height="30" rx="3" fill="#ffd960"/>210        <path d="M24 36 L42 36 L42 18" fill="#f4c948"/>211        <path d="M10 14 L26 14" stroke="#d6a62e" stroke-width="2"/>212        <path d="M10 19 L22 19" stroke="#d6a62e" stroke-width="2"/>213        <path d="M34 18 L42 18 L34 10 Z" fill="#ffe788"/>214      </svg>215    </div>216    <div>Saved</div>217  </div>218 219  <!-- Home indicator -->220  <div class="home-indicator"></div>221 222</div>223</body>224</html>