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>Swimming Class Note UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14    border-radius: 0;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 32px;28    color: #2f2f2f;29    font-size: 34px;30    box-sizing: border-box;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 26px;36  }37  .status-icon svg { width: 34px; height: 34px; fill: none; stroke: #2f2f2f; stroke-width: 2.5; }38 39  /* App bar */40  .app-bar {41    position: absolute;42    top: 110px;43    left: 0;44    width: 1080px;45    height: 120px;46    display: flex;47    align-items: center;48    justify-content: space-between;49    padding: 0 28px 0 20px;50    box-sizing: border-box;51    color: #424242;52  }53  .left-actions, .right-actions {54    display: flex;55    align-items: center;56    gap: 28px;57  }58  .icon-btn {59    width: 72px;60    height: 72px;61    display: flex;62    justify-content: center;63    align-items: center;64  }65  .icon-btn svg {66    width: 48px;67    height: 48px;68    fill: none;69    stroke: #424242;70    stroke-width: 2.5;71  }72  .dots svg { stroke: none; fill: #424242; }73 74  /* Title and content */75  .title {76    position: absolute;77    top: 250px;78    left: 40px;79    right: 40px;80    font-size: 56px;81    font-weight: 700;82    color: #1f1f1f;83  }84  .date {85    position: absolute;86    top: 360px;87    left: 40px;88    font-size: 34px;89    color: #6f6f6f;90  }91  .note {92    position: absolute;93    top: 460px;94    left: 40px;95    right: 40px;96    font-size: 40px;97    line-height: 1.5;98    color: #2a2a2a;99  }100 101  /* Bottom gesture bar */102  .gesture-bar {103    position: absolute;104    bottom: 44px;105    left: 50%;106    transform: translateX(-50%);107    width: 300px;108    height: 12px;109    background: #D9D9D9;110    border-radius: 8px;111  }112</style>113</head>114<body>115<div id="render-target">116 117  <!-- Status Bar -->118  <div class="status-bar">119    <div class="status-left">8:32</div>120    <div class="status-right">121      <!-- Signal -->122      <div class="status-icon">123        <svg viewBox="0 0 24 24">124          <path d="M3 18h3M3 14h6M3 10h9M3 6h12" />125        </svg>126      </div>127      <!-- Wi-Fi -->128      <div class="status-icon">129        <svg viewBox="0 0 24 24">130          <path d="M2 8c5-5 15-5 20 0M5 12c3-3 11-3 14 0M8 16c2-2 6-2 8 0" />131          <circle cx="12" cy="19" r="1.8" fill="#2f2f2f" stroke="none"></circle>132        </svg>133      </div>134      <!-- Battery -->135      <div class="status-icon">136        <svg viewBox="0 0 24 24">137          <rect x="2" y="6" width="18" height="12" rx="2"></rect>138          <rect x="21" y="10" width="2" height="4" rx="1"></rect>139          <rect x="4" y="8" width="12" height="8" rx="1" fill="#2f2f2f" stroke="none"></rect>140        </svg>141      </div>142    </div>143  </div>144 145  <!-- App Bar with back & actions -->146  <div class="app-bar">147    <div class="left-actions">148      <!-- Back Arrow -->149      <div class="icon-btn">150        <svg viewBox="0 0 24 24">151          <path d="M15 5L7 12l8 7" />152        </svg>153      </div>154    </div>155    <div class="right-actions">156      <!-- Pin -->157      <div class="icon-btn">158        <svg viewBox="0 0 24 24">159          <path d="M12 2v6l4 2-4 2v8" />160          <path d="M8 10h8" />161        </svg>162      </div>163      <!-- Share -->164      <div class="icon-btn">165        <svg viewBox="0 0 24 24">166          <circle cx="18" cy="5" r="2.2" />167          <circle cx="6" cy="12" r="2.2" />168          <circle cx="18" cy="19" r="2.2" />169          <path d="M7.8 11l8-5M7.8 13l8 5" />170        </svg>171      </div>172      <!-- More dots -->173      <div class="icon-btn dots">174        <svg viewBox="0 0 24 24">175          <circle cx="12" cy="5" r="2.2" />176          <circle cx="12" cy="12" r="2.2" />177          <circle cx="12" cy="19" r="2.2" />178        </svg>179      </div>180    </div>181  </div>182 183  <!-- Title -->184  <div class="title">Swimming Class</div>185 186  <!-- Date -->187  <div class="date">Tue 8 Aug 2023</div>188 189  <!-- Note Content -->190  <div class="note">191    the swimming class is scheduled on 10 august<br>192    at 11 am. Se193  </div>194 195  <!-- Bottom gesture pill -->196  <div class="gesture-bar"></div>197</div>198</body>199</html>