Megumin-Suite/example.html at main · LukaTheHero/Megumin-Suite · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<div id="prompt-slot-fixed-btn" title="Megumin Suite">
    <i class="fa-solid fa-wand-magic-sparkles"></i>
</div>

<div id="prompt-slot-modal-overlay">
    <div class="ps-modern-modal app-container">

        <!-- The Floating Glass Dock -->
        <div class="dock" id="ps_dynamic_dots">
            <!-- Icons injected via JavaScript -->
        </div>

        <div class="main-wrapper">
            <!-- The Full-Width Hero Banner -->
            <div class="hero-banner" id="ps_hero_banner">
                <div class="hero-overlay"></div>

                <!-- Action Buttons (Top Right) -->
                <div class="top-app-bar">
                    <div class="app-actions">

                        <!-- NEW: Live Token Counter Badge (Placed safely in the button row) -->
                        <div id="ps_live_token_count" title="Estimated Payload Tokens" style="font-size: 0.8rem; font-weight: 700; color: var(--text-muted); background: rgba(0,0,0,0.5); padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border-color); backdrop-filter: blur(4px); transition: color 0.3s ease; margin-right: 10px; display: flex; align-items: center; gap: 6px; cursor: default;">
                            <i class="fa-solid fa-microchip"></i> ~0
                        </div>

                        <button id="btn_apply_tab_all" class="ps-modern-btn secondary" title="Apply the settings on this specific tab to EVERY character and group." style="color: var(--gold); border-color: rgba(245,158,11,0.3);"><i class="fa-solid fa-earth-americas"></i> Sync Tab Globally</button>
                        <button id="ps_btn_reset" class="ps-modern-btn secondary" style="color: #ef4444; border-color: rgba(239, 68, 68, 0.3);"><i class="fa-solid fa-rotate-left"></i> Reset</button>
                        <button id="ps_btn_dev_mode" class="ps-modern-btn secondary" style="color: #a855f7; border-color: rgba(168, 85, 247, 0.3);"><i class="fa-solid fa-code"></i> Dev</button>
                        <div id="ps_save_indicator" style="display: none; color: #10b981; font-weight: bold; font-size: 0.85rem;"><i class="fa-solid fa-check"></i> Saved</div>
                        <button id="ps_btn_save_close" class="ps-modern-btn primary" style="background: #10b981; color: #fff;"><i class="fa-solid fa-floppy-disk"></i> Save & Close</button>
                    </div>
                </div>

                <!-- Profile Info (Bottom Left) -->
                <div class="hero-content">
                    <div class="status" id="ps_rule_status_main">Global Default</div>
                    <h2 class="name" id="ps_char_rule_label">Tavern Profile</h2>
                </div>
            </div>

            <!-- Main Content Area -->
            <div class="main-content" id="ps_stage_content">
                <!-- Settings injected via JavaScript -->
            </div>
        </div>

    </div>
</div>