GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Weekdays Schedule Note</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: #eef6e6;13 }14 15 /* Top system + editor bar */16 .topbar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 180px;22 background: #9da2a6;23 color: #fff;24 }25 .status-line {26 position: absolute;27 top: 12px;28 left: 20px;29 right: 20px;30 height: 60px;31 display: flex;32 align-items: center;33 justify-content: space-between;34 opacity: 0.95;35 font-size: 30px;36 }37 .editor-line {38 position: absolute;39 bottom: 10px;40 left: 20px;41 right: 20px;42 height: 90px;43 display: flex;44 align-items: center;45 }46 .editor-btn {47 color: #fff;48 font-size: 40px;49 margin-right: 30px;50 }51 .page-indicator {52 margin-left: auto;53 margin-right: 20px;54 width: 64px;55 height: 64px;56 border: 2px solid #eaeaea;57 color: #1a1a1a;58 background: #ffffff;59 display: flex;60 align-items: center;61 justify-content: center;62 font-weight: 600;63 border-radius: 8px;64 }65 .x-close {66 width: 64px;67 height: 64px;68 display: flex;69 align-items: center;70 justify-content: center;71 margin-right: 6px;72 }73 .icon {74 width: 54px;75 height: 54px;76 fill: none;77 stroke: #ffffff;78 stroke-width: 3;79 }80 .icon-filled { fill: #ffffff; stroke: none; }81 82 /* Note paper area */83 .note-area {84 position: absolute;85 top: 180px;86 left: 0;87 right: 0;88 bottom: 170px;89 background: #f7fde9;90 }91 /* decorative soft floral impression using gradients */92 .note-area:before,93 .note-area:after {94 content: "";95 position: absolute;96 left: 0; right: 0;97 height: 130px;98 background: linear-gradient(to right, rgba(154,205,50,0.12), rgba(255,255,255,0)) , linear-gradient(to left, rgba(255,182,193,0.16), rgba(255,255,255,0));99 }100 .note-area:before { top: 0; }101 .note-area:after { bottom: 0; }102 103 .note-content {104 position: absolute;105 top: 30px;106 left: 40px;107 right: 40px;108 bottom: 0;109 padding: 40px 40px 200px 40px;110 overflow: hidden;111 }112 .title {113 display: inline-block;114 background: #fff59d;115 padding: 10px 18px;116 border-radius: 6px;117 font-weight: 800;118 font-size: 64px;119 color: #1f1f1f;120 margin: 16px 0 30px 0;121 }122 ul.schedule {123 list-style-type: disc;124 padding-left: 40px;125 margin: 0;126 }127 ul.schedule li {128 font-size: 44px;129 color: #1f1f1f;130 line-height: 1.9;131 margin: 10px 0;132 }133 134 /* Image placeholder with resize handles */135 .image-block {136 position: relative;137 width: 760px;138 height: 430px;139 margin: 26px 0 0 10px;140 }141 .img-ph {142 position: absolute;143 width: 100%;144 height: 100%;145 background: #E0E0E0;146 border: 1px solid #BDBDBD;147 display: flex;148 align-items: center;149 justify-content: center;150 color: #757575;151 font-size: 30px;152 text-align: center;153 }154 .handle {155 position: absolute;156 width: 44px;157 height: 44px;158 background: #6e6a6f;159 border-radius: 50%;160 box-shadow: 0 0 0 6px #f7fde9 inset;161 }162 .h-tl { top: -22px; left: -22px; }163 .h-tr { top: -22px; right: -22px; }164 .h-bl { bottom: -22px; left: -22px; }165 .h-br { bottom: -22px; right: -22px; }166 .h-lm { top: 50%; left: -22px; transform: translateY(-50%); }167 .h-rm { top: 50%; right: -22px; transform: translateY(-50%); }168 .h-tm { top: -22px; left: 50%; transform: translateX(-50%); }169 .h-bm { bottom: -22px; left: 50%; transform: translateX(-50%); }170 171 /* Bottom action bar */172 .bottom-bar {173 position: absolute;174 bottom: 0;175 left: 0;176 width: 1080px;177 height: 170px;178 background: #ffffff;179 border-top: 1px solid #ddd;180 display: flex;181 align-items: center;182 padding: 0 30px;183 gap: 34px;184 }185 .mini-note {186 position: absolute;187 left: 40px;188 bottom: 190px;189 color: #7f7f7f;190 background: rgba(255,255,255,0.7);191 padding: 8px 14px;192 border-radius: 12px;193 font-size: 32px;194 }195 .tool {196 display: flex;197 align-items: center;198 gap: 14px;199 color: #2a2a2a;200 font-size: 40px;201 padding: 10px 18px;202 border-radius: 12px;203 }204 .tool svg { width: 56px; height: 56px; stroke: #4a4a4a; fill: none; stroke-width: 3; }205 .spacer { flex: 1; }206 .purple { color: #7b61ff; }207</style>208</head>209<body>210<div id="render-target">211 212 <!-- Top bar -->213 <div class="topbar">214 <div class="status-line">215 <div>11:59</div>216 <div style="display:flex; gap:16px; align-items:center;">217 <!-- simple wifi, cell, battery indicators -->218 <svg class="icon" viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0"/><path d="M5 11c3-3 11-3 14 0"/><path d="M8 14c2-2 6-2 8 0"/><circle cx="12" cy="18" r="1.6" fill="#fff"/></svg>219 <svg class="icon" viewBox="0 0 24 24"><rect x="2" y="8" width="14" height="10" rx="2" /><path d="M18 11v4" /></svg>220 </div>221 </div>222 <div class="editor-line">223 <div class="editor-btn" style="margin-left:10px;">Done</div>224 <!-- cloud icon -->225 <svg class="icon" viewBox="0 0 24 24" style="margin-left:20px;">226 <path d="M7 17h9a4 4 0 0 0 0-8 5 5 0 0 0-9-1 3.5 3.5 0 0 0 0 7z"></path>227 </svg>228 <!-- undo -->229 <svg class="icon" viewBox="0 0 24 24" style="margin-left:26px;">230 <path d="M9 7H5v-4"/><path d="M5 7c8 0 12 3 12 9"/></svg>231 <!-- redo -->232 <svg class="icon" viewBox="0 0 24 24" style="margin-left:18px;">233 <path d="M15 7h4v-4"/><path d="M19 7c-8 0-12 3-12 9"/></svg>234 235 <div class="page-indicator">1</div>236 <div class="x-close">237 <svg class="icon" viewBox="0 0 24 24">238 <path d="M4 4l16 16M20 4L4 20"/>239 </svg>240 </div>241 </div>242 </div>243 244 <!-- Note paper -->245 <div class="note-area">246 <div class="note-content">247 <div class="title">Weekdays schedule</div>248 249 <ul class="schedule">250 <li>7:00 AM- wake up</li>251 <li>8:00 AM- work</li>252 <li>12:00 PM- lunch</li>253 <li>5:00 PM- finish work</li>254 <li>6:00 PM- exercise</li>255 <li>7:00 PM- dinner</li>256 <li>8:00 PM- me time</li>257 <li>10:00PM- bedtime</li>258 </ul>259 260 <div class="image-block">261 <div class="img-ph">[IMG: Black and white city buildings along canal]</div>262 <div class="handle h-tl"></div>263 <div class="handle h-tr"></div>264 <div class="handle h-bl"></div>265 <div class="handle h-br"></div>266 <div class="handle h-lm"></div>267 <div class="handle h-rm"></div>268 <div class="handle h-tm"></div>269 <div class="handle h-bm"></div>270 </div>271 272 </div>273 </div>274 275 <!-- helper text near bottom -->276 <div class="mini-note">Full text: 153</div>277 278 <!-- Bottom toolbar -->279 <div class="bottom-bar">280 <div class="tool" title="Layout">281 <svg viewBox="0 0 24 24"><rect x="3" y="3" width="8" height="8"/><rect x="13" y="3" width="8" height="8"/><rect x="3" y="13" width="8" height="8"/><rect x="13" y="13" width="8" height="8"/></svg>282 </div>283 <div class="tool" title="Crop">284 <svg viewBox="0 0 24 24"><path d="M7 3v14h14"/><path d="M3 7h14v14"/></svg>285 <div>Crop</div>286 </div>287 <div class="tool" title="Rotate">288 <svg viewBox="0 0 24 24"><path d="M12 6v-4l5 4-5 4V6"/><circle cx="12" cy="14" r="6"/></svg>289 <div>Rotate</div>290 </div>291 <div class="tool" title="Wrap">292 <svg viewBox="0 0 24 24"><path d="M3 6h18M3 10h12"/><path d="M15 10c3 0 6 2 6 5 0 2-2 3-4 3h-4"/><path d="M3 18h8"/></svg>293 <div>Wrap</div>294 </div>295 <div class="spacer"></div>296 <div class="tool" title="Save">297 <svg viewBox="0 0 24 24"><path d="M12 3v12"/><path d="M7 8l5-5 5 5"/><rect x="4" y="13" width="16" height="8" rx="2"/></svg>298 </div>299 <div class="tool purple" title="Stickers">300 <svg viewBox="0 0 24 24" class="icon" style="stroke:#7b61ff;"><circle cx="12" cy="12" r="9"/><circle cx="9" cy="10" r="1.2"/><circle cx="15" cy="10" r="1.2"/><path d="M8 15c2 1.8 6 1.8 8 0"/></svg>301 </div>302 </div>303 304</div>305</body>306</html>