GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Swimming Class Note UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #f0f0f0;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 120px;22    background: #8B8B8B;23    color: white;24    display: flex;25    align-items: center;26    padding: 0 28px;27    box-sizing: border-box;28  }29  .status-left { font-weight: 600; font-size: 40px; letter-spacing: 0.5px; }30  .status-right {31    margin-left: auto;32    display: flex;33    align-items: center;34    gap: 22px;35  }36  .status-icon {37    width: 34px;38    height: 34px;39    background: rgba(255,255,255,0.85);40    border-radius: 6px;41  }42 43  /* Banner ad */44  .banner {45    position: absolute;46    top: 120px;47    left: 0;48    width: 1080px;49    height: 190px;50    display: flex;51    justify-content: center;52    align-items: center;53    background: #E0E0E0;54    border-top: 1px solid #BDBDBD;55    border-bottom: 1px solid #BDBDBD;56    color: #555;57    font-weight: 600;58    letter-spacing: 0.4px;59  }60 61  /* Header / App bar */62  .appbar {63    position: absolute;64    top: 310px;65    left: 0;66    width: 1080px;67    height: 180px;68    background: #E7A34A;69    color: #fff;70    box-sizing: border-box;71    padding: 0 30px;72    display: flex;73    align-items: center;74  }75  .back-btn {76    width: 66px;77    height: 66px;78    margin-right: 22px;79  }80  .title {81    font-size: 56px;82    font-weight: 700;83    flex: 1;84  }85  .app-actions {86    display: flex;87    align-items: center;88    gap: 24px;89  }90  .icon-btn {91    width: 64px;92    height: 64px;93  }94  .menu-dots {95    width: 16px;96    height: 64px;97    display: flex;98    flex-direction: column;99    justify-content: center;100    gap: 10px;101    align-items: center;102  }103  .menu-dots span {104    width: 12px;105    height: 12px;106    background: #fff;107    border-radius: 50%;108    display: block;109  }110 111  /* Note content area */112  .note-area {113    position: absolute;114    top: 490px;115    left: 0;116    width: 1080px;117    height: 1770px;118    background: #F6E8D6;119    box-sizing: border-box;120    padding: 40px 46px;121    /* lined paper effect */122    background-image: repeating-linear-gradient(123      to bottom,124      #F6E8D6 0px,125      #F6E8D6 84px,126      #E5C69F 85px,127      #F6E8D6 86px128    );129  }130  .note-text {131    font-size: 42px;132    color: #202020;133    line-height: 86px;134  }135 136  /* Character counter badge */137  .counter-badge {138    position: absolute;139    right: 36px;140    bottom: 190px;141    background: rgba(0,0,0,0.15);142    color: #343434;143    font-size: 34px;144    padding: 18px 26px;145    border-radius: 24px;146  }147 148  /* Bottom toolbar */149  .toolbar {150    position: absolute;151    bottom: 0;152    left: 0;153    width: 1080px;154    height: 140px;155    background: #ffffff;156    box-shadow: 0 -6px 16px rgba(0,0,0,0.12);157    display: flex;158    align-items: center;159    padding: 0 30px;160    box-sizing: border-box;161    gap: 34px;162  }163 164  .palette {165    width: 66px;166    height: 66px;167  }168  .red-dot {169    position: absolute;170    left: 72px;171    bottom: 116px;172    width: 18px;173    height: 18px;174    background: #E53935;175    border-radius: 50%;176    border: 2px solid #fff;177  }178 179  .tool-letter {180    width: 70px;181    height: 70px;182    border-radius: 12px;183    border: 2px solid #cfcfcf;184    display: flex;185    align-items: center;186    justify-content: center;187    font-size: 46px;188    color: #444;189    background: #fafafa;190  }191 192  .underline { text-decoration: underline; }193  .italic { font-style: italic; }194 195  .font-box {196    width: 86px;197    height: 86px;198    border-radius: 12px;199    border: 2px solid #cfcfcf;200    display: flex;201    align-items: center;202    justify-content: center;203    font-size: 48px;204    color: #444;205    background: #f1f1f1;206  }207 208  .color-ring {209    width: 86px;210    height: 86px;211    border-radius: 50%;212    border: 6px solid #6A5ACD;213    box-shadow: inset 0 0 0 22px #121212;214  }215 216  .size-select {217    margin-left: auto;218    width: 150px;219    height: 76px;220    border: 2px solid #cfcfcf;221    border-radius: 16px;222    display: flex;223    align-items: center;224    justify-content: center;225    font-size: 38px;226    color: #444;227    background: #f7f7f7;228  }229</style>230</head>231<body>232<div id="render-target">233 234  <!-- Status Bar -->235  <div class="status-bar">236    <div class="status-left">8:30</div>237    <div class="status-right">238      <div class="status-icon" title="Signal"></div>239      <div class="status-icon" title="Wi-Fi"></div>240      <div class="status-icon" title="Notifications"></div>241      <div class="status-icon" title="Battery"></div>242      <div class="status-icon" title="Camera"></div>243    </div>244  </div>245 246  <!-- Banner Ad Placeholder -->247  <div class="banner">[IMG: Banner Ad - Motorbike “WICKED”]</div>248 249  <!-- App Bar -->250  <div class="appbar">251    <!-- Back Arrow -->252    <svg class="back-btn" viewBox="0 0 24 24">253      <path d="M15 18l-6-6 6-6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>254    </svg>255 256    <div class="title">Swimming Class</div>257 258    <div class="app-actions">259      <!-- Pencil/Edit Icon -->260      <svg class="icon-btn" viewBox="0 0 24 24">261        <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z" fill="#fff"></path>262        <path d="M20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#fff"></path>263      </svg>264      <!-- Menu Dots -->265      <div class="menu-dots">266        <span></span><span></span><span></span>267      </div>268    </div>269  </div>270 271  <!-- Note Content Area -->272  <div class="note-area">273    <div class="note-text">274      enter The swimming class is scheduled on 10 august at 11 am275    </div>276  </div>277 278  <!-- Character counter badge -->279  <div class="counter-badge">59/5000</div>280 281  <!-- Bottom Toolbar -->282  <div class="toolbar">283    <!-- Palette Icon (approx) -->284    <svg class="palette" viewBox="0 0 24 24">285      <path d="M12 3a9 9 0 0 0 0 18c3.5 0 3-2.7 5.6-2.7 1.9 0 2.4-1.9 2.4-3.1A9 9 0 0 0 12 3z" fill="#f0f0f0" stroke="#777" stroke-width="1.5"/>286      <circle cx="7.5" cy="9" r="1.5" fill="#FF5252"/>287      <circle cx="10.5" cy="7.5" r="1.5" fill="#FFCA28"/>288      <circle cx="13.5" cy="8.5" r="1.5" fill="#66BB6A"/>289      <circle cx="15.5" cy="11" r="1.5" fill="#42A5F5"/>290    </svg>291 292    <div class="tool-letter" style="font-weight: 800;">B</div>293    <div class="tool-letter italic">I</div>294    <div class="tool-letter underline">U</div>295 296    <div class="font-box">A</div>297    <div class="color-ring"></div>298 299    <div class="size-select">14 ▼</div>300  </div>301 302  <!-- Small red notification dot near palette icon -->303  <div class="red-dot"></div>304 305</div>306</body>307</html>