/ index.html
index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Brain and Hand — Spawn Your Bot</title> 7 <link rel="icon" type="image/svg+xml" href="logo-dark.svg"> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 box-sizing: border-box; 13 } 14 15 :root { 16 --bg: #0a0a0f; 17 --bg-secondary: #12121a; 18 --bg-card: #1a1a24; 19 --text: #e4e4e7; 20 --text-muted: #71717a; 21 --accent: #8b5cf6; 22 --accent-glow: rgba(139, 92, 246, 0.3); 23 --success: #22c55e; 24 --warning: #f59e0b; 25 --error: #ef4444; 26 --border: #27272a; 27 } 28 29 body { 30 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 31 background: var(--bg); 32 color: var(--text); 33 min-height: 100vh; 34 line-height: 1.6; 35 } 36 37 /* Screen Management */ 38 .screen { 39 display: none; 40 min-height: 100vh; 41 padding: 2rem; 42 animation: fadeIn 0.3s ease; 43 } 44 45 .screen.active { 46 display: flex; 47 flex-direction: column; 48 align-items: center; 49 justify-content: center; 50 } 51 52 @keyframes fadeIn { 53 from { opacity: 0; transform: translateY(10px); } 54 to { opacity: 1; transform: translateY(0); } 55 } 56 57 /* Typography */ 58 h1 { 59 font-family: 'SF Mono', 'Fira Code', monospace; 60 font-size: 3rem; 61 font-weight: 700; 62 margin-bottom: 1rem; 63 letter-spacing: -0.02em; 64 } 65 66 h2 { 67 font-family: 'SF Mono', 'Fira Code', monospace; 68 font-size: 1.75rem; 69 font-weight: 600; 70 margin-bottom: 0.5rem; 71 } 72 73 .tagline { 74 font-size: 1.25rem; 75 color: var(--text-muted); 76 margin-bottom: 2rem; 77 } 78 79 .bot-speak { 80 font-style: italic; 81 color: var(--accent); 82 font-size: 0.9rem; 83 margin-top: 0.5rem; 84 } 85 86 /* Progress Bar */ 87 .progress-bar { 88 display: flex; 89 gap: 0.5rem; 90 margin-bottom: 2rem; 91 } 92 93 .progress-step { 94 width: 40px; 95 height: 4px; 96 background: var(--border); 97 border-radius: 2px; 98 transition: background 0.3s; 99 } 100 101 .progress-step.active { 102 background: var(--accent); 103 } 104 105 .progress-step.done { 106 background: var(--success); 107 } 108 109 /* Cards */ 110 .card { 111 background: var(--bg-card); 112 border: 1px solid var(--border); 113 border-radius: 12px; 114 padding: 2rem; 115 width: 100%; 116 max-width: 500px; 117 } 118 119 .card-wide { 120 max-width: 750px; 121 } 122 123 /* Buttons */ 124 .btn { 125 display: inline-flex; 126 align-items: center; 127 justify-content: center; 128 gap: 0.5rem; 129 padding: 1rem 2rem; 130 font-size: 1rem; 131 font-weight: 600; 132 border: none; 133 border-radius: 8px; 134 cursor: pointer; 135 transition: all 0.2s; 136 } 137 138 .btn-primary { 139 background: var(--accent); 140 color: white; 141 box-shadow: 0 0 20px var(--accent-glow); 142 } 143 144 .btn-primary:hover { 145 transform: translateY(-2px); 146 box-shadow: 0 0 30px var(--accent-glow); 147 } 148 149 .btn-secondary { 150 background: var(--bg-secondary); 151 color: var(--text); 152 border: 1px solid var(--border); 153 } 154 155 .btn-secondary:hover { 156 background: var(--bg-card); 157 } 158 159 .btn-ghost { 160 background: transparent; 161 color: var(--text-muted); 162 padding: 0.5rem 1rem; 163 } 164 165 .btn-ghost:hover { 166 color: var(--text); 167 } 168 169 /* Inputs */ 170 .input-group { 171 margin-bottom: 1.5rem; 172 } 173 174 .input-group label { 175 display: block; 176 font-size: 0.875rem; 177 font-weight: 500; 178 margin-bottom: 0.5rem; 179 color: var(--text-muted); 180 } 181 182 .input-group .hint { 183 font-size: 0.8rem; 184 color: var(--text-muted); 185 margin-top: 0.5rem; 186 } 187 188 input[type="text"], textarea, select { 189 width: 100%; 190 padding: 0.875rem 1rem; 191 font-size: 1rem; 192 background: var(--bg); 193 border: 1px solid var(--border); 194 border-radius: 8px; 195 color: var(--text); 196 transition: border-color 0.2s; 197 } 198 199 input:focus, textarea:focus, select:focus { 200 outline: none; 201 border-color: var(--accent); 202 } 203 204 textarea { 205 min-height: 120px; 206 resize: vertical; 207 font-family: inherit; 208 } 209 210 /* Flavor chips */ 211 .flavor-chips { 212 display: flex; 213 flex-wrap: wrap; 214 gap: 0.5rem; 215 margin-top: 0.5rem; 216 } 217 218 .flavor-chip { 219 padding: 0.5rem 1rem; 220 font-size: 0.875rem; 221 background: var(--bg); 222 border: 1px solid var(--border); 223 border-radius: 20px; 224 cursor: pointer; 225 transition: all 0.2s; 226 } 227 228 .flavor-chip:hover, .flavor-chip.active { 229 border-color: var(--accent); 230 background: rgba(139, 92, 246, 0.1); 231 } 232 233 /* Option Cards */ 234 .options-stack { 235 display: flex; 236 flex-direction: column; 237 gap: 0.75rem; 238 margin-bottom: 1.5rem; 239 } 240 241 .option-card { 242 display: flex; 243 align-items: center; 244 gap: 1rem; 245 padding: 1.25rem; 246 background: var(--bg); 247 border: 2px solid var(--border); 248 border-radius: 10px; 249 cursor: pointer; 250 transition: all 0.2s; 251 } 252 253 .option-card:hover { 254 border-color: var(--text-muted); 255 } 256 257 .option-card.selected { 258 border-color: var(--accent); 259 background: rgba(139, 92, 246, 0.1); 260 } 261 262 .option-card .icon { 263 font-size: 1.75rem; 264 width: 40px; 265 text-align: center; 266 } 267 268 .option-card .info { 269 flex: 1; 270 } 271 272 .option-card .name { 273 font-weight: 600; 274 margin-bottom: 0.25rem; 275 } 276 277 .option-card .desc { 278 font-size: 0.85rem; 279 color: var(--text-muted); 280 } 281 282 .option-card .badge { 283 font-size: 0.7rem; 284 padding: 0.25rem 0.5rem; 285 border-radius: 4px; 286 background: var(--border); 287 } 288 289 .option-card .badge.new { 290 background: rgba(139, 92, 246, 0.2); 291 color: var(--accent); 292 } 293 294 /* Navigation */ 295 .nav-buttons { 296 display: flex; 297 gap: 1rem; 298 margin-top: 1.5rem; 299 } 300 301 .nav-buttons .btn { 302 flex: 1; 303 } 304 305 /* Info Box */ 306 .info-box { 307 background: rgba(139, 92, 246, 0.1); 308 border: 1px solid var(--accent); 309 border-radius: 8px; 310 padding: 1rem; 311 margin-bottom: 1.5rem; 312 font-size: 0.875rem; 313 } 314 315 .info-box.warning { 316 background: rgba(245, 158, 11, 0.1); 317 border-color: var(--warning); 318 } 319 320 .info-box .title { 321 font-weight: 600; 322 margin-bottom: 0.5rem; 323 } 324 325 /* Tabs */ 326 .tabs { 327 display: flex; 328 gap: 0.5rem; 329 margin-bottom: 1.5rem; 330 flex-wrap: wrap; 331 } 332 333 .tab { 334 padding: 0.5rem 1rem; 335 font-size: 0.875rem; 336 background: var(--bg-secondary); 337 border: 1px solid var(--border); 338 border-radius: 6px; 339 color: var(--text-muted); 340 cursor: pointer; 341 transition: all 0.2s; 342 } 343 344 .tab:hover { 345 color: var(--text); 346 border-color: var(--text-muted); 347 } 348 349 .tab.active { 350 background: var(--accent); 351 border-color: var(--accent); 352 color: white; 353 } 354 355 /* Skill Bundles Grid */ 356 .skill-bundles { 357 display: grid; 358 grid-template-columns: repeat(3, 1fr); 359 gap: 0.75rem; 360 margin-bottom: 1.5rem; 361 } 362 363 @media (max-width: 700px) { 364 .skill-bundles { 365 grid-template-columns: repeat(2, 1fr); 366 } 367 } 368 369 .skill-bundle { 370 padding: 1rem; 371 background: var(--bg); 372 border: 2px solid var(--border); 373 border-radius: 10px; 374 cursor: pointer; 375 transition: all 0.2s; 376 text-align: center; 377 } 378 379 .skill-bundle:hover { 380 border-color: var(--text-muted); 381 } 382 383 .skill-bundle.selected { 384 border-color: var(--accent); 385 background: rgba(139, 92, 246, 0.1); 386 } 387 388 .skill-bundle .icon { 389 font-size: 1.75rem; 390 margin-bottom: 0.5rem; 391 } 392 393 .skill-bundle .name { 394 font-weight: 600; 395 font-size: 0.9rem; 396 margin-bottom: 0.25rem; 397 } 398 399 .skill-bundle .count { 400 font-size: 0.75rem; 401 color: var(--text-muted); 402 } 403 404 /* Skill Browser */ 405 .skill-browser { 406 max-height: 250px; 407 overflow-y: auto; 408 border: 1px solid var(--border); 409 border-radius: 8px; 410 padding: 0.5rem; 411 } 412 413 .skill-browser-item { 414 display: flex; 415 align-items: center; 416 gap: 0.75rem; 417 padding: 0.75rem; 418 border-radius: 6px; 419 cursor: pointer; 420 transition: background 0.2s; 421 } 422 423 .skill-browser-item:hover { 424 background: var(--bg-secondary); 425 } 426 427 .skill-browser-item .info { 428 flex: 1; 429 } 430 431 .skill-browser-item .name { 432 font-weight: 600; 433 font-size: 0.9rem; 434 } 435 436 .skill-browser-item .author { 437 font-size: 0.75rem; 438 color: var(--text-muted); 439 } 440 441 .skill-browser-item .stats { 442 font-size: 0.7rem; 443 color: var(--text-muted); 444 } 445 446 /* QR Section */ 447 .qr-container { 448 text-align: center; 449 padding: 1.5rem; 450 background: var(--bg); 451 border: 2px dashed var(--border); 452 border-radius: 10px; 453 margin: 1rem 0; 454 } 455 456 .qr-placeholder { 457 width: 180px; 458 height: 180px; 459 margin: 0 auto 1rem; 460 background: var(--bg-card); 461 border: 1px solid var(--border); 462 border-radius: 8px; 463 display: flex; 464 align-items: center; 465 justify-content: center; 466 font-size: 3.5rem; 467 } 468 469 .qr-instructions { 470 font-size: 0.875rem; 471 color: var(--text-muted); 472 } 473 474 .qr-instructions ol { 475 text-align: left; 476 max-width: 280px; 477 margin: 0.75rem auto 0; 478 padding-left: 1.25rem; 479 } 480 481 .qr-instructions li { 482 margin-bottom: 0.4rem; 483 } 484 485 /* Landing */ 486 .landing-hero { 487 text-align: center; 488 max-width: 600px; 489 } 490 491 .landing-hero h1 { 492 font-size: 4rem; 493 background: linear-gradient(135deg, var(--accent), #ec4899); 494 -webkit-background-clip: text; 495 -webkit-text-fill-color: transparent; 496 margin-bottom: 1rem; 497 } 498 499 /* Ritual */ 500 .ritual-container { 501 text-align: center; 502 padding: 2rem 0; 503 } 504 505 .ritual-circle { 506 width: 180px; 507 height: 180px; 508 margin: 0 auto 1.5rem; 509 border-radius: 50%; 510 background: linear-gradient(135deg, var(--accent), #ec4899); 511 display: flex; 512 align-items: center; 513 justify-content: center; 514 font-size: 4.5rem; 515 animation: breathe 3s ease-in-out infinite; 516 box-shadow: 0 0 60px var(--accent-glow); 517 } 518 519 @keyframes breathe { 520 0%, 100% { transform: scale(1); opacity: 0.9; } 521 50% { transform: scale(1.05); opacity: 1; } 522 } 523 524 .ritual-text { 525 font-size: 1.4rem; 526 font-weight: 600; 527 margin-bottom: 0.5rem; 528 } 529 530 .ritual-subtext { 531 color: var(--text-muted); 532 font-size: 0.95rem; 533 margin-bottom: 1.5rem; 534 } 535 536 /* Dashboard */ 537 .dashboard { 538 width: 100%; 539 max-width: 900px; 540 } 541 542 .status-bar { 543 display: flex; 544 align-items: center; 545 gap: 1rem; 546 padding: 1rem; 547 background: var(--bg-card); 548 border-radius: 8px; 549 margin-bottom: 1.5rem; 550 } 551 552 .status-dot { 553 width: 12px; 554 height: 12px; 555 background: var(--success); 556 border-radius: 50%; 557 animation: pulse 2s infinite; 558 } 559 560 @keyframes pulse { 561 0%, 100% { opacity: 1; } 562 50% { opacity: 0.5; } 563 } 564 565 .status-text { 566 font-weight: 600; 567 } 568 569 .status-actions { 570 margin-left: auto; 571 } 572 573 .dashboard-grid { 574 display: grid; 575 grid-template-columns: repeat(2, 1fr); 576 gap: 1rem; 577 } 578 579 @media (max-width: 768px) { 580 .dashboard-grid { 581 grid-template-columns: 1fr; 582 } 583 } 584 585 .dashboard-card { 586 background: var(--bg-card); 587 border: 1px solid var(--border); 588 border-radius: 8px; 589 padding: 1.25rem; 590 } 591 592 .dashboard-card h3 { 593 font-size: 0.875rem; 594 color: var(--text-muted); 595 margin-bottom: 1rem; 596 text-transform: uppercase; 597 letter-spacing: 0.05em; 598 } 599 600 .stat-item { 601 display: flex; 602 justify-content: space-between; 603 align-items: center; 604 padding: 0.5rem 0; 605 border-bottom: 1px solid var(--border); 606 } 607 608 .stat-item:last-child { 609 border-bottom: none; 610 } 611 612 .stat-value.online { 613 color: var(--success); 614 } 615 </style> 616 </head> 617 <body> 618 619 <!-- Screen 0: Landing --> 620 <div class="screen active" id="screen-landing"> 621 <div class="landing-hero"> 622 <img src="logo-dark.svg" alt="Brain and Hand" class="landing-logo" style="width: 220px; height: auto; margin-bottom: 1.5rem;"> 623 <h1>Brain and Hand</h1> 624 <p class="tagline">Unleash your personal AI bot. No code. No config. Just vibes.</p> 625 626 <button class="btn btn-primary" onclick="goTo('screen-mission')"> 627 🤖 Create your bot 628 </button> 629 630 <p class="bot-speak">"I'm ready when you are."</p> 631 632 <div style="margin-top: 3rem; display: flex; gap: 2rem;"> 633 <a href="#" onclick="goTo('screen-docs'); return false;" style="color: var(--text-muted); text-decoration: none;">📚 Docs</a> 634 <a href="https://github.com/mcclowin/openclaw-deploy" target="_blank" style="color: var(--text-muted); text-decoration: none;">🐙 GitHub</a> 635 <a href="https://app.radicle.xyz/nodes/z6Mkw8uioyonaq6HzdqgwZHUZHx5F6KxEMoQTEPjEYdL3aWr/rad:z25qHUCE4BzYCRNMCbRq6cku1uhcv" target="_blank" style="color: var(--text-muted); text-decoration: none;">🌐 Radicle</a> 636 </div> 637 </div> 638 </div> 639 640 <!-- Screen 1: Mission --> 641 <div class="screen" id="screen-mission"> 642 <div class="progress-bar"> 643 <div class="progress-step active"></div> 644 <div class="progress-step"></div> 645 <div class="progress-step"></div> 646 <div class="progress-step"></div> 647 <div class="progress-step"></div> 648 </div> 649 650 <div class="card"> 651 <h2>Define my mission</h2> 652 <p class="bot-speak">"Tell me what to focus on. I'll stay on target."</p> 653 654 <div class="input-group"> 655 <label>Name me</label> 656 <input type="text" id="bot-name" placeholder="e.g., Jarvis, Friday, Axiom..." value=""> 657 </div> 658 659 <div class="input-group"> 660 <label>My mission</label> 661 <textarea id="bot-mission" placeholder="What should I do? Be specific. 662 663 Example: Help me manage my schedule, remind me of important tasks, and summarize my emails every morning. Keep responses short and friendly."></textarea> 664 <p class="hint">💡 I'll stay focused on this. No tangents.</p> 665 </div> 666 667 <div class="nav-buttons"> 668 <button class="btn btn-secondary" onclick="goTo('screen-landing')">Back</button> 669 <button class="btn btn-primary" onclick="goTo('screen-channels')">Next →</button> 670 </div> 671 </div> 672 </div> 673 674 <!-- Screen 4: Brain (Payment) --> 675 <div class="screen" id="screen-brain"> 676 <div class="progress-bar"> 677 <div class="progress-step done"></div> 678 <div class="progress-step done"></div> 679 <div class="progress-step done"></div> 680 <div class="progress-step active"></div> 681 <div class="progress-step"></div> 682 </div> 683 684 <div class="card"> 685 <h2>Pick my brain</h2> 686 <p class="bot-speak">"Which model should run me?"</p> 687 688 <div class="options-stack"> 689 <div class="option-card selected" onclick="selectBrain(this, 'payg')"> 690 <div class="icon">💳</div> 691 <div class="info"> 692 <div class="name">Pay As You Go</div> 693 <div class="desc">No setup. Pay per message. Starts ~$0.01/msg.</div> 694 </div> 695 <span class="badge new">Easy</span> 696 </div> 697 698 <div class="option-card" onclick="selectBrain(this, 'byok')"> 699 <div class="icon">🔑</div> 700 <div class="info"> 701 <div class="name">Bring Your Own Key</div> 702 <div class="desc">Use your API key from OpenAI, Anthropic, etc.</div> 703 </div> 704 </div> 705 706 <div class="option-card" onclick="selectBrain(this, 'local')"> 707 <div class="icon">💻</div> 708 <div class="info"> 709 <div class="name">Run Locally (Free)</div> 710 <div class="desc">Use Ollama or other local models.</div> 711 </div> 712 </div> 713 </div> 714 715 <div id="brain-config-byok" style="display: none;"> 716 <div class="input-group"> 717 <label>API Provider</label> 718 <select id="api-provider"> 719 <option value="anthropic">Anthropic (Claude)</option> 720 <option value="openai">OpenAI (GPT-4)</option> 721 <option value="deepseek">DeepSeek</option> 722 </select> 723 </div> 724 <div class="input-group"> 725 <label>API Key</label> 726 <input type="text" placeholder="sk-..." id="api-key"> 727 <p class="hint">🔒 Encrypted and never shared.</p> 728 </div> 729 </div> 730 731 <div id="brain-config-local" style="display: none;"> 732 <div class="info-box"> 733 <div class="title">📦 Local Setup</div> 734 Install Ollama, then run: <code>ollama pull llama3</code> 735 </div> 736 </div> 737 738 <div class="nav-buttons"> 739 <button class="btn btn-secondary" onclick="goTo('screen-skills')">Back</button> 740 <button class="btn btn-primary" onclick="goTo('screen-birth')">Next →</button> 741 </div> 742 </div> 743 </div> 744 745 <!-- Screen 2: Connect Channels --> 746 <div class="screen" id="screen-channels"> 747 <div class="progress-bar"> 748 <div class="progress-step done"></div> 749 <div class="progress-step active"></div> 750 <div class="progress-step"></div> 751 <div class="progress-step"></div> 752 <div class="progress-step"></div> 753 </div> 754 755 <div class="card card-wide"> 756 <h2>Connect my channels</h2> 757 <p class="bot-speak">"Where do you want me? Telegram? WhatsApp? I'll be there."</p> 758 759 <div class="tabs"> 760 <button class="tab active" onclick="showChannelTab('telegram')">📱 Telegram</button> 761 <button class="tab" onclick="showChannelTab('whatsapp')">💬 WhatsApp</button> 762 <button class="tab" onclick="showChannelTab('discord')">🎮 Discord</button> 763 </div> 764 765 <!-- Telegram Tab --> 766 <div id="channel-telegram" class="channel-content"> 767 <div class="qr-container"> 768 <div class="qr-placeholder">🤖</div> 769 <div class="qr-instructions"> 770 <strong>Quick Setup:</strong> 771 <ol> 772 <li>Open Telegram → message <strong>@BotFather</strong></li> 773 <li>Send <code>/newbot</code> and follow prompts</li> 774 <li>Copy your bot token below</li> 775 </ol> 776 </div> 777 </div> 778 779 <div class="input-group"> 780 <label>Bot Token</label> 781 <input type="text" placeholder="123456789:ABCdefGHI..." id="telegram-token"> 782 </div> 783 784 <button class="btn btn-secondary" style="width: 100%;">✓ Connect Telegram</button> 785 </div> 786 787 <!-- WhatsApp Tab --> 788 <div id="channel-whatsapp" class="channel-content" style="display: none;"> 789 <div class="qr-container"> 790 <div class="qr-placeholder">📱</div> 791 <div class="qr-instructions"> 792 <strong>To connect:</strong> 793 <ol> 794 <li>Open WhatsApp on your phone</li> 795 <li>Settings → Linked Devices</li> 796 <li>Tap "Link a Device"</li> 797 <li>Scan the QR code above</li> 798 </ol> 799 </div> 800 </div> 801 802 <div class="info-box warning"> 803 <div class="title">💡 Tip</div> 804 For best results, use a separate phone number for your bot. 805 </div> 806 807 <button class="btn btn-secondary" style="width: 100%;">Generate QR Code</button> 808 </div> 809 810 <!-- Discord Tab --> 811 <div id="channel-discord" class="channel-content" style="display: none;"> 812 <div class="qr-container"> 813 <div class="qr-placeholder">🎮</div> 814 <div class="qr-instructions"> 815 <strong>To connect:</strong> 816 <ol> 817 <li>Go to Discord Developer Portal</li> 818 <li>Create Application → Bot</li> 819 <li>Copy your Bot Token</li> 820 <li>Invite bot to your server</li> 821 </ol> 822 </div> 823 </div> 824 825 <div class="input-group"> 826 <label>Bot Token</label> 827 <input type="text" placeholder="Discord bot token..." id="discord-token"> 828 </div> 829 830 <button class="btn btn-secondary" style="width: 100%;">✓ Connect Discord</button> 831 </div> 832 833 <div class="nav-buttons"> 834 <button class="btn btn-secondary" onclick="goTo('screen-mission')">Back</button> 835 <button class="btn btn-primary" onclick="goTo('screen-skills')">Next →</button> 836 </div> 837 </div> 838 </div> 839 840 <!-- Screen 3: Skills --> 841 <div class="screen" id="screen-skills"> 842 <div class="progress-bar"> 843 <div class="progress-step done"></div> 844 <div class="progress-step done"></div> 845 <div class="progress-step active"></div> 846 <div class="progress-step"></div> 847 <div class="progress-step"></div> 848 </div> 849 850 <div class="card card-wide"> 851 <h2>Load my skills</h2> 852 <p class="bot-speak">"Give me abilities. I learn fast."</p> 853 854 <div class="tabs"> 855 <button class="tab active" onclick="showSkillTab('bundles')">📦 Skill Bundles</button> 856 <button class="tab" onclick="showSkillTab('browse')">🔍 Browse ClawHub</button> 857 <button class="tab" onclick="showSkillTab('create')">✏️ Create Custom</button> 858 </div> 859 860 <!-- Skill Bundles --> 861 <div id="skills-bundles" class="skills-content"> 862 <div class="skill-bundles"> 863 <div class="skill-bundle selected" onclick="toggleBundle(this)"> 864 <div class="icon">📋</div> 865 <div class="name">Productivity</div> 866 <div class="count">12 skills</div> 867 </div> 868 <div class="skill-bundle selected" onclick="toggleBundle(this)"> 869 <div class="icon">📰</div> 870 <div class="name">News & Digest</div> 871 <div class="count">8 skills</div> 872 </div> 873 <div class="skill-bundle" onclick="toggleBundle(this)"> 874 <div class="icon">💻</div> 875 <div class="name">Coding</div> 876 <div class="count">15 skills</div> 877 </div> 878 <div class="skill-bundle" onclick="toggleBundle(this)"> 879 <div class="icon">🏥</div> 880 <div class="name">Medical</div> 881 <div class="count">6 skills</div> 882 </div> 883 <div class="skill-bundle" onclick="toggleBundle(this)"> 884 <div class="icon">💰</div> 885 <div class="name">Finance</div> 886 <div class="count">10 skills</div> 887 </div> 888 <div class="skill-bundle" onclick="toggleBundle(this)"> 889 <div class="icon">🏠</div> 890 <div class="name">Smart Home</div> 891 <div class="count">9 skills</div> 892 </div> 893 <div class="skill-bundle" onclick="toggleBundle(this)"> 894 <div class="icon">📱</div> 895 <div class="name">Social</div> 896 <div class="count">7 skills</div> 897 </div> 898 <div class="skill-bundle" onclick="toggleBundle(this)"> 899 <div class="icon">🎨</div> 900 <div class="name">Creative</div> 901 <div class="count">11 skills</div> 902 </div> 903 <div class="skill-bundle" onclick="toggleBundle(this)"> 904 <div class="icon">🔬</div> 905 <div class="name">Research</div> 906 <div class="count">8 skills</div> 907 </div> 908 <div class="skill-bundle" onclick="toggleBundle(this)"> 909 <div class="icon">⚖️</div> 910 <div class="name">Legal</div> 911 <div class="count">5 skills</div> 912 </div> 913 <div class="skill-bundle" onclick="toggleBundle(this)"> 914 <div class="icon">✈️</div> 915 <div class="name">Travel</div> 916 <div class="count">7 skills</div> 917 </div> 918 <div class="skill-bundle" onclick="toggleBundle(this)"> 919 <div class="icon">💪</div> 920 <div class="name">Fitness</div> 921 <div class="count">6 skills</div> 922 </div> 923 <div class="skill-bundle" onclick="toggleBundle(this)"> 924 <div class="icon">🎓</div> 925 <div class="name">Education</div> 926 <div class="count">9 skills</div> 927 </div> 928 <div class="skill-bundle" onclick="toggleBundle(this)"> 929 <div class="icon">🎮</div> 930 <div class="name">Gaming</div> 931 <div class="count">5 skills</div> 932 </div> 933 <div class="skill-bundle" onclick="toggleBundle(this)"> 934 <div class="icon">🛒</div> 935 <div class="name">Shopping</div> 936 <div class="count">6 skills</div> 937 </div> 938 </div> 939 </div> 940 941 <!-- Browse ClawHub --> 942 <div id="skills-browse" class="skills-content" style="display: none;"> 943 <div class="input-group" style="margin-bottom: 1rem;"> 944 <input type="text" placeholder="Search 5,500+ skills..." id="clawhub-search"> 945 </div> 946 947 <div class="info-box warning"> 948 <div class="title">⚠️ Do Your Own Research</div> 949 Skills are community-created. We try to vet them, but review what a skill does before installing. 950 </div> 951 952 <div class="skill-browser"> 953 <div class="skill-browser-item" onclick="installSkill('home-assistant')"> 954 <span style="font-size: 1.25rem;">🏠</span> 955 <div class="info"> 956 <div class="name">Home Assistant</div> 957 <div class="author">by @smarthome</div> 958 </div> 959 <div class="stats">⭐ 4.8 · 12k</div> 960 </div> 961 <div class="skill-browser-item" onclick="installSkill('spotify')"> 962 <span style="font-size: 1.25rem;">🎵</span> 963 <div class="info"> 964 <div class="name">Spotify Control</div> 965 <div class="author">by @musicbot</div> 966 </div> 967 <div class="stats">⭐ 4.6 · 8k</div> 968 </div> 969 <div class="skill-browser-item" onclick="installSkill('crypto')"> 970 <span style="font-size: 1.25rem;">📈</span> 971 <div class="info"> 972 <div class="name">Crypto Prices</div> 973 <div class="author">by @defidev</div> 974 </div> 975 <div class="stats">⭐ 4.2 · 5k</div> 976 </div> 977 <div class="skill-browser-item" onclick="installSkill('fitness')"> 978 <span style="font-size: 1.25rem;">💪</span> 979 <div class="info"> 980 <div class="name">Fitness Tracker</div> 981 <div class="author">by @healthnut</div> 982 </div> 983 <div class="stats">⭐ 4.5 · 3k</div> 984 </div> 985 </div> 986 987 <button class="btn btn-ghost" style="width: 100%; margin-top: 1rem;"> 988 Browse all on ClawHub → 989 </button> 990 </div> 991 992 <!-- Create Custom --> 993 <div id="skills-create" class="skills-content" style="display: none;"> 994 <div class="info-box"> 995 <div class="title">✏️ Create a Custom Skill</div> 996 Connect any API or service to your bot. 997 </div> 998 999 <div class="input-group"> 1000 <label>Skill Name</label> 1001 <input type="text" placeholder="e.g., My CRM Integration" id="custom-skill-name"> 1002 </div> 1003 1004 <div class="input-group"> 1005 <label>API Endpoint</label> 1006 <input type="text" placeholder="https://api.example.com/v1" id="custom-skill-api"> 1007 </div> 1008 1009 <div class="input-group"> 1010 <label>What should this skill do?</label> 1011 <textarea id="custom-skill-prompt" placeholder="Describe what this API does and how your bot should use it..."></textarea> 1012 </div> 1013 1014 <button class="btn btn-primary" style="width: 100%;">✨ Generate Skill</button> 1015 </div> 1016 1017 <div class="nav-buttons"> 1018 <button class="btn btn-secondary" onclick="goTo('screen-channels')">Back</button> 1019 <button class="btn btn-primary" onclick="goTo('screen-brain')">Next →</button> 1020 </div> 1021 </div> 1022 </div> 1023 1024 <!-- Screen 4: Brain (Payment) --> 1025 <div class="screen" id="screen-birth"> 1026 <div class="progress-bar"> 1027 <div class="progress-step done"></div> 1028 <div class="progress-step done"></div> 1029 <div class="progress-step done"></div> 1030 <div class="progress-step done"></div> 1031 <div class="progress-step active"></div> 1032 </div> 1033 1034 <div class="card" style="text-align: center;"> 1035 <h2>Spawn</h2> 1036 <p class="bot-speak">"Initializing... I can feel the code compiling."</p> 1037 1038 <div class="ritual-container"> 1039 <div class="ritual-circle" id="birth-circle">⚙️</div> 1040 <div class="ritual-text" id="ritual-status">Ready to spawn</div> 1041 <div class="ritual-subtext" id="ritual-substatus">Hit the button. I'll handle the rest.</div> 1042 </div> 1043 1044 <div id="birth-summary" style="text-align: left; background: var(--bg); padding: 1.25rem; border-radius: 8px; margin-bottom: 1.5rem;"> 1045 <div style="font-weight: 600; margin-bottom: 0.75rem;">I will be:</div> 1046 <div style="margin-bottom: 0.4rem;">📛 <strong id="summary-name">Unnamed</strong></div> 1047 <div style="margin-bottom: 0.4rem; font-size: 0.9rem;">🎯 <span id="summary-mission" style="color: var(--text-muted);">No mission set</span></div> 1048 <div style="margin-bottom: 0.4rem; font-size: 0.9rem;">🧠 <span id="summary-brain">Pay As You Go</span></div> 1049 <div style="font-size: 0.9rem;">📦 <span id="summary-skills">2 bundles selected</span></div> 1050 </div> 1051 1052 <button class="btn btn-primary" style="width: 100%; font-size: 1.1rem; padding: 1.25rem;" onclick="birthBot()"> 1053 ⚡ Spawn Bot 1054 </button> 1055 1056 <button class="btn btn-ghost" onclick="goTo('screen-skills')" style="margin-top: 1rem;"> 1057 ← Go back 1058 </button> 1059 </div> 1060 </div> 1061 1062 <!-- Screen: Docs --> 1063 <div class="screen" id="screen-docs"> 1064 <div class="card card-wide"> 1065 <h2>📚 Documentation</h2> 1066 <p class="bot-speak">"Everything you need to know."</p> 1067 1068 <div style="margin: 1.5rem 0;"> 1069 <h3 style="font-size: 1.1rem; margin-bottom: 1rem; color: var(--accent);">Getting Started</h3> 1070 <ul style="list-style: none; padding: 0;"> 1071 <li style="padding: 0.75rem; background: var(--bg); border-radius: 8px; margin-bottom: 0.5rem;"> 1072 <strong>1. Define your mission</strong> — Tell your bot what to focus on 1073 </li> 1074 <li style="padding: 0.75rem; background: var(--bg); border-radius: 8px; margin-bottom: 0.5rem;"> 1075 <strong>2. Connect channels</strong> — Telegram, WhatsApp, Discord 1076 </li> 1077 <li style="padding: 0.75rem; background: var(--bg); border-radius: 8px; margin-bottom: 0.5rem;"> 1078 <strong>3. Load skills</strong> — Add capabilities to your bot 1079 </li> 1080 <li style="padding: 0.75rem; background: var(--bg); border-radius: 8px; margin-bottom: 0.5rem;"> 1081 <strong>4. Pick a brain</strong> — Choose your AI model 1082 </li> 1083 <li style="padding: 0.75rem; background: var(--bg); border-radius: 8px; margin-bottom: 0.5rem;"> 1084 <strong>5. Spawn</strong> — Bring your bot to life 1085 </li> 1086 </ul> 1087 </div> 1088 1089 <div style="margin: 1.5rem 0;"> 1090 <h3 style="font-size: 1.1rem; margin-bottom: 1rem; color: var(--accent);">Resources</h3> 1091 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;"> 1092 <a href="https://docs.openclaw.ai" target="_blank" class="btn btn-secondary" style="text-decoration: none;">OpenClaw Docs</a> 1093 <a href="https://clawhub.ai" target="_blank" class="btn btn-secondary" style="text-decoration: none;">ClawHub Skills</a> 1094 <a href="https://discord.com/invite/clawd" target="_blank" class="btn btn-secondary" style="text-decoration: none;">Discord Community</a> 1095 <a href="https://github.com/mcclowin/openclaw-deploy" target="_blank" class="btn btn-secondary" style="text-decoration: none;">GitHub Repo</a> 1096 </div> 1097 </div> 1098 1099 <div class="nav-buttons"> 1100 <button class="btn btn-secondary" onclick="goTo('screen-landing')">← Back to Home</button> 1101 </div> 1102 </div> 1103 </div> 1104 1105 <!-- Screen: Settings --> 1106 <div class="screen" id="screen-settings"> 1107 <div class="card card-wide"> 1108 <h2>⚙️ Settings</h2> 1109 <p class="bot-speak">"Customize me."</p> 1110 1111 <div class="tabs" style="margin-bottom: 1.5rem;"> 1112 <button class="tab active" onclick="showSettingsTab('identity')">🤖 Identity</button> 1113 <button class="tab" onclick="showSettingsTab('soul')">💫 Soul</button> 1114 <button class="tab" onclick="showSettingsTab('wallet')">💰 Wallet</button> 1115 <button class="tab" onclick="showSettingsTab('channels')">📡 Channels</button> 1116 <button class="tab" onclick="showSettingsTab('skills')">🔧 Skills</button> 1117 <button class="tab" onclick="showSettingsTab('danger')">⚠️ Danger</button> 1118 </div> 1119 1120 <!-- Identity Tab --> 1121 <div id="settings-identity" class="settings-content"> 1122 <div class="input-group"> 1123 <label>Bot Name</label> 1124 <input type="text" value="" id="settings-name" placeholder="Your bot's name"> 1125 </div> 1126 <div class="input-group"> 1127 <label>Avatar</label> 1128 <div style="display: flex; gap: 1rem; align-items: center;"> 1129 <div style="width: 60px; height: 60px; background: var(--bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem;">🤖</div> 1130 <button class="btn btn-secondary" style="padding: 0.5rem 1rem;">Change Avatar</button> 1131 </div> 1132 </div> 1133 <div class="input-group"> 1134 <label>Birthday</label> 1135 <input type="date" value="2003-06-15" id="settings-birthday"> 1136 <p class="hint">Used for age-gated platforms. Your bot needs to be "old enough" to use some services.</p> 1137 </div> 1138 <div class="input-group"> 1139 <label>Model</label> 1140 <select id="settings-model"> 1141 <option value="claude-opus">Claude Opus 4.5</option> 1142 <option value="claude-sonnet">Claude Sonnet 4</option> 1143 <option value="gpt-4">GPT-4 Turbo</option> 1144 <option value="deepseek">DeepSeek</option> 1145 <option value="local">Local (Ollama)</option> 1146 </select> 1147 </div> 1148 </div> 1149 1150 <!-- Soul Tab --> 1151 <div id="settings-soul" class="settings-content" style="display: none;"> 1152 <div class="input-group"> 1153 <label>SOUL.md — Personality Prompt</label> 1154 <textarea style="min-height: 200px;" placeholder="Define your bot's personality..."></textarea> 1155 </div> 1156 <div class="input-group"> 1157 <label>Personality Flavor</label> 1158 <div class="flavor-chips"> 1159 <span class="flavor-chip" onclick="toggleFlavor(this)">🎭 Witty</span> 1160 <span class="flavor-chip" onclick="toggleFlavor(this)">🧘 Calm</span> 1161 <span class="flavor-chip" onclick="toggleFlavor(this)">⚡ Direct</span> 1162 <span class="flavor-chip" onclick="toggleFlavor(this)">🤗 Warm</span> 1163 <span class="flavor-chip" onclick="toggleFlavor(this)">🎩 Formal</span> 1164 </div> 1165 </div> 1166 </div> 1167 1168 <!-- Wallet Tab --> 1169 <div id="settings-wallet" class="settings-content" style="display: none;"> 1170 <div class="info-box"> 1171 <div class="title">💰 Bot Wallet</div> 1172 Give your bot spending power with a crypto wallet. Uses Account Abstraction (AA) for email recovery — no seed phrases. 1173 </div> 1174 1175 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.5rem;"> 1176 <div style="padding: 1rem; background: var(--bg); border-radius: 8px; text-align: center;"> 1177 <div style="font-size: 1.5rem; font-weight: 700; font-family: monospace;">$0.00</div> 1178 <div style="font-size: 0.75rem; color: var(--text-muted);">USDC Balance</div> 1179 </div> 1180 <div style="padding: 1rem; background: var(--bg); border-radius: 8px; text-align: center;"> 1181 <div style="font-size: 1.5rem; font-weight: 700; font-family: monospace;">0.00 ETH</div> 1182 <div style="font-size: 0.75rem; color: var(--text-muted);">Gas Wallet</div> 1183 </div> 1184 </div> 1185 1186 <div style="font-weight: 600; margin-bottom: 0.75rem;">Spending Cards</div> 1187 <div style="display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem;"> 1188 <div style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: var(--bg); border-radius: 8px;"> 1189 <span style="font-size: 1.25rem;">💳</span> 1190 <div style="flex: 1;"> 1191 <div style="font-weight: 600; font-size: 0.9rem;">Gnosis Pay</div> 1192 <div style="font-size: 0.75rem; color: var(--text-muted);">Crypto debit card</div> 1193 </div> 1194 <button class="btn btn-secondary" style="padding: 0.4rem 0.75rem; font-size: 0.8rem;">Connect</button> 1195 </div> 1196 <div style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: var(--bg); border-radius: 8px;"> 1197 <span style="font-size: 1.25rem;">💳</span> 1198 <div style="flex: 1;"> 1199 <div style="font-weight: 600; font-size: 0.9rem;">Holyheld</div> 1200 <div style="font-size: 0.75rem; color: var(--text-muted);">USDT-backed virtual card</div> 1201 </div> 1202 <button class="btn btn-secondary" style="padding: 0.4rem 0.75rem; font-size: 0.8rem;">Connect</button> 1203 </div> 1204 </div> 1205 1206 <div style="font-weight: 600; margin-bottom: 0.75rem;">Payment Methods</div> 1207 <div style="display: flex; flex-direction: column; gap: 0.5rem;"> 1208 <div style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: var(--bg); border-radius: 8px;"> 1209 <span style="font-size: 1.25rem;">⚡</span> 1210 <div style="flex: 1;"> 1211 <div style="font-weight: 600; font-size: 0.9rem;">x402 Payments</div> 1212 <div style="font-size: 0.75rem; color: var(--text-muted);">Pay-per-request HTTP payments</div> 1213 </div> 1214 <span style="color: var(--success); font-size: 0.8rem;">● Active</span> 1215 </div> 1216 <div style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: var(--bg); border-radius: 8px;"> 1217 <span style="font-size: 1.25rem;">🪙</span> 1218 <div style="flex: 1;"> 1219 <div style="font-weight: 600; font-size: 0.9rem;">USDC Direct</div> 1220 <div style="font-size: 0.75rem; color: var(--text-muted);">On-chain payments</div> 1221 </div> 1222 <button class="btn btn-secondary" style="padding: 0.4rem 0.75rem; font-size: 0.8rem;">Setup</button> 1223 </div> 1224 </div> 1225 1226 <div style="margin-top: 1rem; font-size: 0.8rem; color: var(--text-muted);"> 1227 Daily spending limit: <strong style="color: var(--text);">$50</strong> · AA wallet · Email recovery 1228 </div> 1229 </div> 1230 1231 <!-- Channels Tab --> 1232 <div id="settings-channels" class="settings-content" style="display: none;"> 1233 <div style="display: flex; flex-direction: column; gap: 0.75rem;"> 1234 <div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: var(--bg); border-radius: 8px;"> 1235 <span>📱 Telegram</span> 1236 <span style="color: var(--success);">● Connected</span> 1237 </div> 1238 <div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: var(--bg); border-radius: 8px;"> 1239 <span>💬 WhatsApp</span> 1240 <button class="btn btn-secondary" style="padding: 0.5rem 1rem;">Connect</button> 1241 </div> 1242 <div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: var(--bg); border-radius: 8px;"> 1243 <span>🎮 Discord</span> 1244 <button class="btn btn-secondary" style="padding: 0.5rem 1rem;">Connect</button> 1245 </div> 1246 </div> 1247 </div> 1248 1249 <!-- Skills Tab --> 1250 <div id="settings-skills" class="settings-content" style="display: none;"> 1251 <div style="display: flex; flex-direction: column; gap: 0.5rem;"> 1252 <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: var(--bg); border-radius: 8px;"> 1253 <span>📋 Productivity</span> 1254 <span style="color: var(--success);">Active</span> 1255 </div> 1256 <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: var(--bg); border-radius: 8px;"> 1257 <span>📰 News & Digest</span> 1258 <span style="color: var(--success);">Active</span> 1259 </div> 1260 </div> 1261 <button class="btn btn-secondary" style="width: 100%; margin-top: 1rem;">+ Add More Skills</button> 1262 </div> 1263 1264 <!-- Danger Tab --> 1265 <div id="settings-danger" class="settings-content" style="display: none;"> 1266 <div class="info-box warning"> 1267 <div class="title">⚠️ Danger Zone</div> 1268 These actions affect your bot's operation. Use with caution. 1269 </div> 1270 1271 <div style="background: var(--bg); padding: 1.25rem; border-radius: 8px; margin-bottom: 1rem;"> 1272 <div style="font-weight: 600; margin-bottom: 0.5rem;">⏸️ Kill Switch (Pause)</div> 1273 <p style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem;">Immediately stop your bot from responding. Reversible with one click.</p> 1274 <button class="btn btn-secondary" style="width: 100%; border-color: var(--warning); color: var(--warning);">⏸️ Pause Bot</button> 1275 </div> 1276 1277 <div style="background: var(--bg); padding: 1.25rem; border-radius: 8px; border: 1px solid var(--error);"> 1278 <div style="font-weight: 600; margin-bottom: 0.5rem; color: var(--error);">💀 Nuke Button (Destroy)</div> 1279 <p style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem;">Full wipe — config, memory, sessions, credentials. This is permanent and requires re-authentication.</p> 1280 <button class="btn btn-secondary" style="width: 100%; border-color: var(--error); color: var(--error);">💀 Nuke Bot</button> 1281 </div> 1282 </div> 1283 1284 <div class="nav-buttons" style="margin-top: 1.5rem;"> 1285 <button class="btn btn-secondary" onclick="goTo('screen-live')">← Back to Dashboard</button> 1286 <button class="btn btn-primary">💾 Save Changes</button> 1287 </div> 1288 </div> 1289 </div> 1290 1291 <!-- Screen 6: Dashboard --> 1292 <div class="screen" id="screen-live"> 1293 <div class="dashboard"> 1294 <div class="status-bar"> 1295 <img src="logo-dark.svg" alt="Brain and Hand" style="width: 50px; height: auto;"> 1296 <div class="status-dot"></div> 1297 <span class="status-text" id="live-bot-name">Your bot is online</span> 1298 <div class="status-actions"> 1299 <button class="btn btn-secondary" style="padding: 0.5rem 1rem; font-size: 0.875rem;">⏸️ Pause</button> 1300 </div> 1301 </div> 1302 1303 <h2 style="text-align: center; margin-bottom: 0.5rem;">I'm live.</h2> 1304 <p class="bot-speak" style="text-align: center;">"Message me. Let's see what I can do."</p> 1305 1306 <div class="dashboard-grid" style="margin-top: 1.5rem;"> 1307 <div class="dashboard-card"> 1308 <h3>📡 Channels</h3> 1309 <div class="stat-item"> 1310 <span>📱 Telegram</span> 1311 <span class="stat-value online">● Online</span> 1312 </div> 1313 <div class="stat-item"> 1314 <span>💬 WhatsApp</span> 1315 <span class="stat-value">Not connected</span> 1316 </div> 1317 </div> 1318 1319 <div class="dashboard-card"> 1320 <h3>💰 Wallet</h3> 1321 <div class="stat-item"> 1322 <span>USDC Balance</span> 1323 <span class="stat-value" style="font-family: monospace;">$0.00</span> 1324 </div> 1325 <div class="stat-item"> 1326 <span>💳 Gnosis Pay</span> 1327 <span class="stat-value online">Active</span> 1328 </div> 1329 <div class="stat-item"> 1330 <span>⚡ x402</span> 1331 <span class="stat-value online">Active</span> 1332 </div> 1333 </div> 1334 1335 <div class="dashboard-card"> 1336 <h3>📦 Skills</h3> 1337 <div class="stat-item"> 1338 <span>📋 Productivity</span> 1339 <span class="stat-value online">Active</span> 1340 </div> 1341 <div class="stat-item"> 1342 <span>📰 News & Digest</span> 1343 <span class="stat-value online">Active</span> 1344 </div> 1345 </div> 1346 1347 <div class="dashboard-card"> 1348 <h3>⚡ Actions</h3> 1349 <button class="btn btn-secondary" style="width: 100%; margin-bottom: 0.5rem; padding: 0.75rem;" onclick="goTo('screen-settings')">⚙️ Settings</button> 1350 <button class="btn btn-secondary" style="width: 100%; padding: 0.75rem;">📄 View Logs</button> 1351 </div> 1352 </div> 1353 </div> 1354 </div> 1355 1356 <script> 1357 function goTo(screenId) { 1358 document.querySelectorAll('.screen').forEach(s => s.classList.remove('active')); 1359 document.getElementById(screenId).classList.add('active'); 1360 if (screenId === 'screen-birth') updateBirthSummary(); 1361 } 1362 1363 function toggleFlavor(chip) { 1364 chip.classList.toggle('active'); 1365 } 1366 1367 function toggleBundle(bundle) { 1368 bundle.classList.toggle('selected'); 1369 } 1370 1371 let selectedBrain = 'payg'; 1372 function selectBrain(card, type) { 1373 document.querySelectorAll('#screen-brain .option-card').forEach(c => c.classList.remove('selected')); 1374 card.classList.add('selected'); 1375 selectedBrain = type; 1376 document.getElementById('brain-config-byok').style.display = type === 'byok' ? 'block' : 'none'; 1377 document.getElementById('brain-config-local').style.display = type === 'local' ? 'block' : 'none'; 1378 } 1379 1380 function showChannelTab(channel) { 1381 document.querySelectorAll('#screen-channels .tab').forEach(t => t.classList.remove('active')); 1382 document.querySelectorAll('.channel-content').forEach(c => c.style.display = 'none'); 1383 event.target.classList.add('active'); 1384 document.getElementById('channel-' + channel).style.display = 'block'; 1385 } 1386 1387 function showSkillTab(tab) { 1388 document.querySelectorAll('#screen-skills .tab').forEach(t => t.classList.remove('active')); 1389 document.querySelectorAll('.skills-content').forEach(c => c.style.display = 'none'); 1390 event.target.classList.add('active'); 1391 document.getElementById('skills-' + tab).style.display = 'block'; 1392 } 1393 1394 function showSettingsTab(tab) { 1395 document.querySelectorAll('#screen-settings .tab').forEach(t => t.classList.remove('active')); 1396 document.querySelectorAll('#screen-settings .settings-content').forEach(c => c.style.display = 'none'); 1397 event.target.classList.add('active'); 1398 document.getElementById('settings-' + tab).style.display = 'block'; 1399 } 1400 1401 function updateBirthSummary() { 1402 const name = document.getElementById('bot-name').value || 'Unnamed'; 1403 const mission = document.getElementById('bot-mission').value; 1404 document.getElementById('summary-name').textContent = name; 1405 document.getElementById('summary-mission').textContent = mission ? 1406 (mission.substring(0, 80) + (mission.length > 80 ? '...' : '')) : 'No mission set'; 1407 1408 const brainLabels = { 'payg': 'Pay As You Go', 'byok': 'Your API Key', 'local': 'Local (Ollama)' }; 1409 document.getElementById('summary-brain').textContent = brainLabels[selectedBrain]; 1410 1411 const selectedBundles = document.querySelectorAll('.skill-bundle.selected').length; 1412 document.getElementById('summary-skills').textContent = selectedBundles + ' bundles selected'; 1413 } 1414 1415 async function birthBot() { 1416 const circle = document.getElementById('birth-circle'); 1417 const status = document.getElementById('ritual-status'); 1418 const substatus = document.getElementById('ritual-substatus'); 1419 1420 const stages = [ 1421 { emoji: '⚙️', text: 'Allocating resources...', sub: 'I need a place to run.' }, 1422 { emoji: '🧬', text: 'Loading SOUL.md...', sub: 'This is who I am.' }, 1423 { emoji: '🧠', text: 'Connecting to brain...', sub: 'Syncing with the model.' }, 1424 { emoji: '📡', text: 'Opening channels...', sub: 'Setting up comms.' }, 1425 { emoji: '🔧', text: 'Installing skills...', sub: 'Learning new abilities.' }, 1426 { emoji: '⚡', text: 'Spawning...', sub: 'Almost there.' }, 1427 { emoji: '🤖', text: 'Online.', sub: "I'm ready. Talk to me." } 1428 ]; 1429 1430 for (let i = 0; i < stages.length; i++) { 1431 circle.textContent = stages[i].emoji; 1432 status.textContent = stages[i].text; 1433 substatus.textContent = stages[i].sub; 1434 if (i < stages.length - 1) await new Promise(r => setTimeout(r, 1200)); 1435 } 1436 1437 circle.style.animation = 'none'; 1438 circle.style.background = 'linear-gradient(135deg, #22c55e, #16a34a)'; 1439 await new Promise(r => setTimeout(r, 1500)); 1440 1441 const name = document.getElementById('bot-name').value || 'Your bot'; 1442 document.getElementById('live-bot-name').textContent = name + ' is online'; 1443 goTo('screen-live'); 1444 } 1445 1446 function installSkill(slug) { 1447 alert('Installing: ' + slug + '\n\nRuns: clawhub install ' + slug); 1448 } 1449 </script> 1450 </body> 1451 </html>