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