1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>LINE CRM</title> 7
7<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
7 8 <style> 9 * { margin: 0; padding: 0; box-sizing: border-box; } 10 body { 11 font-family: 'Hiragino Sans', 'Yu Gothic', system-ui, sans-serif; 12 background: #f5f5f5; 13 color: #333; 14 display: flex; 15 justify-content: center; 16 align-items: center; 17 min-height: 100vh; 18 } 19 #app { 20 max-width: 480px; 21 width: 100%; 22 padding: 24px 16px; 23 } 24 .card { 25 background: #fff; 26 border-radius: 12px; 27 padding: 32px 24px; 28 box-shadow: 0 1px 3px rgba(0,0,0,0.08); 29 text-align: center; 30 } 31 .card h2 { 32 font-size: 18px; 33 margin-bottom: 16px; 34 color: #06C755; 35 } 36 .check-icon { 37 width: 56px; 38 height: 56px; 39 border-radius: 50%; 40 background: #06C755; 41 color: #fff; 42 font-size: 28px; 43 line-height: 56px; 44 margin: 0 auto 16px; 45 } 46 .profile { 47 display: flex; 48 align-items: center; 49 justify-content: center; 50 gap: 12px; 51 margin: 16px 0; 52 } 53 .profile img { 54 width: 48px; 55 height: 48px; 56 border-radius: 50%; 57 } 58 .profile .name { 59 font-size: 16px; 60 font-weight: 600; 61 } 62 .message { 63 font-size: 14px; 64 color: #666; 65 line-height: 1.6; 66 margin-top: 12px; 67 } 68 .error { 69 font-size: 14px; 70 color: #e53e3e; 71 } 72 .add-friend-btn { 73 display: block; 74 margin: 20px auto 12px; 75 padding: 14px 24px; 76 background: #06C755; 77 color: #fff; 78 font-size: 16px; 79 font-weight: 700; 80 border-radius: 8px; 81 text-decoration: none; 82 text-align: center; 83 transition: opacity 0.15s; 84 } 85 .add-friend-btn:active { 86 opacity: 0.85; 87 } 88 .sub-message { 89 font-size: 12px; 90 color: #999; 91 margin-top: 4px; 92 } 93 .ref-badge { 94 display: inline-block; 95 margin-top: 12px; 96 padding: 4px 12px; 97 background: #f0f0f0; 98 border-radius: 12px; 99 font-size: 11px; 100 color: #999; 101 } 102 .loading-spinner { 103 width: 32px; 104 height: 32px; 105 border: 3px solid #e0e0e0; 106 border-top-color: #06C755; 107 border-radius: 50%; 108 animation: spin 0.8s linear infinite; 109 margin: 0 auto 16px; 110 } 111 @keyframes spin { to { transform: rotate(360deg); } } 112 113 /* ========== Booking Page ========== */ 114 .booking-page { 115 animation: fadeIn 0.3s ease; 116 } 117 @keyframes fadeIn { 118 from { opacity: 0; transform: translateY(8px); } 119 to { opacity: 1; transform: translateY(0); } 120 } 121 .booking-header { 122 text-align: center; 123 margin-bottom: 20px; 124 } 125 .booking-header h1 { 126 font-size: 22px; 127 color: #333; 128 margin-bottom: 4px; 129 } 130 .booking-header p { 131 font-size: 13px; 132 color: #999; 133 } 134 135 /* Calendar */ 136 .booking-calendar { 137 background: #fff; 138 border-radius: 12px; 139 padding: 16px; 140 box-shadow: 0 1px 3px rgba(0,0,0,0.08); 141 margin-bottom: 16px; 142 } 143 .calendar-header { 144 display: flex; 145 align-items: center; 146 justify-content: space-between; 147 margin-bottom: 12px; 148 } 149 .cal-title { 150 font-size: 16px; 151 font-weight: 700; 152 color: #333; 153 } 154 .cal-nav { 155 width: 36px; 156 height: 36px; 157 border: none; 158 background: #f5f5f5; 159 border-radius: 50%; 160 font-size: 16px; 161 color: #333; 162 cursor: pointer; 163 display: flex; 164 align-items: center; 165 justify-content: center; 166 transition: background 0.15s; 167 } 168 .cal-nav:active { 169 background: #e0e0e0; 170 } 171 .cal-weekdays { 172 display: grid; 173 grid-template-columns: repeat(7, 1fr); 174 text-align: center; 175 margin-bottom: 4px; 176 } 177 .cal-weekdays span { 178 font-size: 11px; 179 font-weight: 600; 180 color: #999; 181 padding: 4px 0; 182 } 183 .cal-weekdays .sun { color: #e53e3e; } 184 .cal-weekdays .sat { color: #3b82f6; } 185 .cal-days { 186 display: grid; 187 grid-template-columns: repeat(7, 1fr); 188 gap: 2px; 189 text-align: center; 190 } 191 .cal-day { 192 display: flex; 193 align-items: center; 194 justify-content: center; 195 width: 100%; 196 aspect-ratio: 1; 197 border-radius: 50%; 198 font-size: 14px; 199 cursor: default; 200 transition: all 0.15s; 201 } 202 .cal-day.empty { 203 visibility: hidden; 204 } 205 .cal-day.past { 206 color: #ccc; 207 } 208 .cal-day.active { 209 cursor: pointer; 210 color: #333; 211 } 212 .cal-day.active:active { 213 background: #e8faf0; 214 } 215 .cal-day.sun { color: #e53e3e; } 216 .cal-day.sat { color: #3b82f6; } 217 .cal-day.past.sun, .cal-day.past.sat { opacity: 0.4; } 218 .cal-day.today { 219 font-weight: 700; 220 position: relative; 221 } 222 .cal-day.today::after { 223 content: ''; 224 position: absolute; 225 bottom: 2px; 226 width: 4px; 227 height: 4px; 228 border-radius: 50%; 229 background: #06C755; 230 } 231 .cal-day.selected { 232 background: #06C755 !important; 233 color: #fff !important; 234 font-weight: 700; 235 } 236 237 /* Slots */ 238 .slots-section { 239 background: #fff; 240 border-radius: 12px; 241 padding: 16px; 242 box-shadow: 0 1px 3px rgba(0,0,0,0.08); 243 margin-bottom: 16px; 244 animation: fadeIn 0.3s ease; 245 } 246 .slots-section h3 { 247 font-size: 14px; 248 font-weight: 700; 249 color: #333; 250 margin-bottom: 12px; 251 } 252 .slots-loading { 253 text-align: center; 254 padding: 16px 0; 255 } 256 .slots-loading p { 257 font-size: 13px; 258 color: #999; 259 margin-top: 8px; 260 } 261 .no-slots { 262 font-size: 13px; 263 color: #999; 264 text-align: center; 265 padding: 16px 0; 266 } 267 .slots-grid { 268 display: grid; 269 grid-template-columns: repeat(2, 1fr); 270 gap: 8px; 271 } 272 .slot-btn { 273 padding: 12px 8px; 274 border: none; 275 border-radius: 8px; 276 font-size: 14px; 277 font-weight: 600; 278 cursor: pointer; 279 transition: all 0.15s; 280 font-family: inherit; 281 } 282 .slot-btn.available { 283 background: #e8faf0; 284 color: #06C755; 285 border: 1.5px solid #06C755; 286 } 287 .slot-btn.available:active { 288 background: #06C755; 289 color: #fff; 290 } 291 .slot-btn.selected { 292 background: #06C755; 293 color: #fff; 294 border: 1.5px solid #06C755; 295 transform: scale(1.03); 296 } 297 .slot-btn.full { 298 background: #f5f5f5; 299 color: #bbb;
300 cursor: not-allowed; 301 border: 1.5px solid transparent; 302 } 303 304 /* Confirm */ 305 .confirm-section { 306 animation: slideUp 0.3s ease; 307 } 308 @keyframes slideUp { 309 from { opacity: 0; transform: translateY(16px); } 310 to { opacity: 1; transform: translateY(0); } 311 } 312 .confirm-card { 313 background: #fff; 314 border-radius: 12px; 315 padding: 20px 16px; 316 box-shadow: 0 1px 3px rgba(0,0,0,0.08); 317 } 318 .confirm-card h3 { 319 font-size: 15px; 320 font-weight: 700; 321 color: #333; 322 margin-bottom: 16px; 323 text-align: center; 324 } 325 .confirm-details { 326 margin-bottom: 20px; 327 } 328 .confirm-row { 329 display: flex; 330 justify-content: space-between; 331 padding: 10px 0; 332 border-bottom: 1px solid #f0f0f0; 333 font-size: 14px; 334 } 335 .confirm-row:last-child { 336 border-bottom: none; 337 } 338 .confirm-label { 339 color: #999; 340 } 341 .confirm-value { 342 font-weight: 600; 343 color: #333; 344 } 345 .book-btn { 346 width: 100%; 347 padding: 14px; 348 border: none; 349 border-radius: 8px; 350 background: #06C755; 351 color: #fff; 352 font-size: 16px; 353 font-weight: 700; 354 cursor: pointer; 355 transition: opacity 0.15s; 356 font-family: inherit; 357 } 358 .book-btn:active { 359 opacity: 0.85; 360 } 361 .book-btn:disabled { 362 background: #bbb; 363 cursor: not-allowed; 364 } 365 366 /* Success */ 367 .success-card { 368 background: #fff; 369 border-radius: 12px; 370 padding: 32px 24px; 371 box-shadow: 0 1px 3px rgba(0,0,0,0.08); 372 text-align: center; 373 animation: fadeIn 0.3s ease; 374 } 375 .success-icon { 376 width: 64px; 377 height: 64px; 378 border-radius: 50%; 379 background: #06C755; 380 color: #fff; 381 font-size: 32px; 382 line-height: 64px; 383 margin: 0 auto 16px; 384 } 385 .success-card h2 { 386 font-size: 18px; 387 color: #06C755; 388 margin-bottom: 16px; 389 } 390 .success-message { 391 font-size: 14px; 392 color: #666; 393 line-height: 1.6; 394 margin-top: 16px; 395 } 396 .close-btn { 397 margin-top: 24px; 398 width: 100%; 399 padding: 14px; 400 border: 1.5px solid #06C755; 401 border-radius: 8px; 402 background: #fff; 403 color: #06C755; 404 font-size: 16px; 405 font-weight: 700; 406 cursor: pointer; 407 transition: all 0.15s; 408 font-family: inherit; 409 } 410 .close-btn:active { 411 background: #e8faf0; 412 } 413 </style> 414
414<script type="module" crossorigin src="/assets/index-BUp0btYA.js"></script>
414 415</head> 416<body> 417 <div id="app"> 418 <div class="card"> 419 <div class="loading-spinner"></div> 420 <p class="message">èªã¿è¾¼ã¿ä¸...</p> 421 </div> 422 </div>� 423</body> 424</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.