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: #ffffff;13    border: 1px solid #dcdcdc;14    border-radius: 24px;15  }16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    background: #ffffff;24    color: #000;25    font-size: 34px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 32px;30    box-sizing: border-box;31    border-bottom: 1px solid #efefef;32  }33  .status-right {34    display: flex;35    align-items: center;36    gap: 24px;37    color: #333;38  }39  .icon {40    width: 54px;41    height: 54px;42    fill: #333333;43  }44 45  /* App toolbar with back + actions */46  .toolbar {47    position: absolute;48    top: 110px;49    left: 0;50    width: 1080px;51    height: 120px;52    display: flex;53    align-items: center;54    justify-content: space-between;55    padding: 0 24px;56    box-sizing: border-box;57    background: #ffffff;58  }59  .toolbar-left {60    display: flex;61    align-items: center;62    gap: 16px;63  }64  .toolbar-actions {65    display: flex;66    align-items: center;67    gap: 36px;68  }69 70  /* Title and meta */71  .title {72    position: absolute;73    top: 250px;74    left: 40px;75    font-size: 64px;76    font-weight: 700;77    color: #1a1a1a;78  }79  .date {80    position: absolute;81    top: 350px;82    left: 40px;83    font-size: 34px;84    color: #6f6f6f;85  }86 87  /* Content body */88  .content {89    position: absolute;90    top: 460px;91    left: 40px;92    right: 40px;93    font-size: 40px;94    line-height: 1.6;95    color: #1f1f1f;96  }97 98  /* Bottom gesture bar */99  .gesture-bar {100    position: absolute;101    bottom: 32px;102    left: 50%;103    transform: translateX(-50%);104    width: 420px;105    height: 16px;106    background: #d0d0d0;107    border-radius: 12px;108  }109</style>110</head>111<body>112<div id="render-target">113  <!-- Android-like status bar -->114  <div class="status-bar">115    <div class="status-left">8:37</div>116    <div class="status-right">117      <!-- simple signal icon -->118      <svg class="icon" viewBox="0 0 24 24">119        <rect x="3" y="14" width="3" height="7"></rect>120        <rect x="8" y="10" width="3" height="11"></rect>121        <rect x="13" y="6" width="3" height="15"></rect>122        <rect x="18" y="2" width="3" height="19"></rect>123      </svg>124      <!-- wifi icon -->125      <svg class="icon" viewBox="0 0 24 24">126        <path d="M12 18a2 2 0 1 0 0.001 0z"></path>127        <path d="M2 9c5.5-4.7 14.5-4.7 20 0" stroke="#333" stroke-width="2" fill="none"></path>128        <path d="M5 12c4-3.2 10-3.2 14 0" stroke="#333" stroke-width="2" fill="none"></path>129        <circle cx="12" cy="18" r="2"></circle>130      </svg>131      <!-- battery icon -->132      <svg class="icon" viewBox="0 0 24 24">133        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#333" stroke-width="2" fill="none"></rect>134        <rect x="4" y="8" width="12" height="8" fill="#333"></rect>135        <rect x="20" y="10" width="2" height="4" fill="#333"></rect>136      </svg>137    </div>138  </div>139 140  <!-- Toolbar -->141  <div class="toolbar">142    <div class="toolbar-left">143      <!-- Back arrow -->144      <svg class="icon" viewBox="0 0 24 24">145        <path d="M15 4L7 12l8 8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>146      </svg>147    </div>148    <div class="toolbar-actions">149      <!-- Pin icon -->150      <svg class="icon" viewBox="0 0 24 24">151        <path d="M12 22v-8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"></path>152        <path d="M7 4l10 0-2 6H9L7 4z" fill="#333"></path>153      </svg>154      <!-- Share icon -->155      <svg class="icon" viewBox="0 0 24 24">156        <circle cx="6" cy="12" r="3" fill="#333"></circle>157        <circle cx="18" cy="6" r="3" fill="#333"></circle>158        <circle cx="18" cy="18" r="3" fill="#333"></circle>159        <path d="M8.8 11.1L15.2 7.2M8.8 12.9L15.2 16.8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"></path>160      </svg>161      <!-- More vertical dots -->162      <svg class="icon" viewBox="0 0 24 24">163        <circle cx="12" cy="5" r="2" fill="#333"></circle>164        <circle cx="12" cy="12" r="2" fill="#333"></circle>165        <circle cx="12" cy="19" r="2" fill="#333"></circle>166      </svg>167    </div>168  </div>169 170  <!-- Title -->171  <div class="title">Swimming Class</div>172 173  <!-- Date -->174  <div class="date">Tue 8 Aug 2023</div>175 176  <!-- Note content -->177  <div class="content">178    the swimming class is scheduled on 10 august at 11 am. Se179  </div>180 181  <!-- Bottom gesture bar -->182  <div class="gesture-bar"></div>183</div>184</body>185</html>