keyboard shortcut opens Monica's sidebar panel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>keyboard shortcut opens the Monica desktop application on Windows? (Copy) - Interactive Tutorial</title>
    <style>
        :root {
            --bg-color: #0f172a;
            --text-color: #f8fafc;
            --accent-1: #8b5cf6;
            --accent-2: #3b82f6;
            --accent-3: #10b981;
            --glass-bg: rgba(255, 255, 255, 0.05);
            --glass-border: rgba(255, 255, 255, 0.1);
        }

        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* Glassmorphism Classes */
        .glass-panel {
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            border-radius: 16px;
            padding: 2rem;
            margin: 2rem auto;
            max-width: 800px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .glass-panel:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 40px rgba(139, 92, 246, 0.2);
        }

        /* Hero Header */
        header {
            text-align: center;
            padding: 4rem 1rem;
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.2));
            border-bottom: 1px solid var(--glass-border);
        }

        h1 {
            font-size: 3rem;
            margin: 0;
            background: linear-gradient(to right, var(--accent-1), var(--accent-2), var(--accent-3));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: pulse 2s infinite alternate;
        }

        @keyframes pulse {
            0% { opacity: 0.8; transform: scale(0.98); }
            100% { opacity: 1; transform: scale(1.02); }
        }

        /* Typography & Layout */
        h2 {
            color: var(--accent-2);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .container {
            padding: 2rem;
            max-width: 1000px;
            margin: 0 auto;
        }

        /* Keys */
        .key {
            display: inline-block;
            background: linear-gradient(180deg, #334155, #1e293b);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            font-family: monospace;
            font-size: 1.2rem;
            font-weight: bold;
            box-shadow: 0 4px 0 #0f172a, 0 5px 10px rgba(0,0,0,0.5);
            border: 1px solid #475569;
            margin: 0 5px;
            position: relative;
            top: 0;
            transition: all 0.1s ease;
        }
        
        .key:active, .key.pressed {
            top: 4px;
            box-shadow: 0 0px 0 #0f172a, 0 1px 5px rgba(0,0,0,0.5);
        }

        /* Interactive Demo */
        .demo-container {
            position: relative;
            height: 300px;
            background: #1e293b;
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid var(--glass-border);
        }

        .monica-sidebar {
            position: absolute;
            right: -300px;
            top: 0;
            width: 280px;
            height: 100%;
            background: rgba(139, 92, 246, 0.15);
            backdrop-filter: blur(15px);
            border-left: 1px solid var(--accent-1);
            transition: right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            padding: 1rem;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .monica-sidebar.active {
            right: 0;
        }

        .btn {
            background: linear-gradient(45deg, var(--accent-1), var(--accent-2));
            color: white;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 8px;
            font-size: 1rem;
            cursor: pointer;
            font-weight: bold;
            transition: opacity 0.3s, transform 0.2s;
        }

        .btn:hover {
            opacity: 0.9;
            transform: scale(1.05);
        }

        /* Accordion */
        .accordion {
            background: var(--glass-bg);
            color: var(--text-color);
            cursor: pointer;
            padding: 1rem;
            width: 100%;
            text-align: left;
            border: 1px solid var(--glass-border);
            outline: none;
            transition: 0.4s;
            border-radius: 8px;
            margin-bottom: 0.5rem;
            font-size: 1.1rem;
            font-weight: bold;
        }

        .accordion:hover, .accordion.active {
            background: rgba(255, 255, 255, 0.1);
            border-color: var(--accent-2);
        }

        .panel {
            padding: 0 1rem;
            background: transparent;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
            margin-bottom: 1rem;
        }

        /* Quiz */
        .quiz-option {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            padding: 10px 15px;
            margin: 10px 0;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .quiz-option:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: var(--accent-2);
        }
        
        .quiz-option.correct {
            background: rgba(16, 185, 129, 0.2);
            border-color: var(--accent-3);
        }

        .quiz-option.wrong {
            background: rgba(239, 68, 68, 0.2);
            border-color: #ef4444;
        }

        /* Footer */
        footer {
            text-align: center;
            padding: 2rem;
            border-top: 1px solid var(--glass-border);
            margin-top: 3rem;
            color: #94a3b8;
        }

        /* Tooltip */
        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted var(--accent-2);
            cursor: help;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 200px;
            background-color: #334155;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -100px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 0.9rem;
            font-weight: normal;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body>

    <header>
        <h1>✨ Master the Shortcut! ✨</h1>
        <p style="font-size: 1.2rem; color: #cbd5e1; margin-top: 1rem;">Unlock Monica AI instantly with <span class="key">Ctrl</span> + <span class="key">M</span></p>
    </header>

    <div class="container">

        <!-- What Is It? -->
        <section class="glass-panel" id="what">
            <h2>🤔 What Is It?</h2>
            <p>The phrase <strong><code>Ctrl + M --> To open Monica's sidebar, panel</code></strong> is a universal keyboard command. It tells your computer to instantly overlay the <span class="tooltip">Monica AI assistant<span class="tooltiptext">An AI copilot that lives in your browser or desktop!</span></span> sidebar onto your screen, no matter what application you are currently using.</p>
        </section>

        <!-- Why Use It? -->
        <section class="glass-panel" id="why">
            <h2>💡 Why Use It?</h2>
            <ul>
                <li>🚀 <strong>Speed:</strong> Faster than moving your mouse to find the app icon.</li>
                <li>🧠 <strong>Focus:</strong> Keeps your hands on the keyboard and your mind in the "flow state".</li>
                <li>🌍 <strong>Global Access:</strong> Works whether you are typing an email, reading an article, or writing code.</li>
            </ul>
        </section>

        <!-- How Does It Work? -->
        <section class="glass-panel" id="how">
            <h2>🛠️ How Does It Work?</h2>
            <button class="accordion">Step 1: Locate the Keys</button>
            <div class="panel">
                <p>Find the <strong>Ctrl</strong> (Control) key on the bottom left corner of your keyboard, and the <strong>M</strong> key in the bottom row of letters.</p>
            </div>

            <button class="accordion">Step 2: The Execution</button>
            <div class="panel">
                <p>Press and <em>hold down</em> the <strong>Ctrl</strong> key. While holding it, tap the <strong>M</strong> key once. Then release both.</p>
            </div>
        </section>

        <!-- Live Demo -->
        <section class="glass-panel" id="demo">
            <h2>🎮 Live Demo</h2>
            <p>Try it out! Press <kbd>Ctrl + M</kbd> on your keyboard right now, or click the button below to see what happens!</p>
            <div class="demo-container">
                <button class="btn" id="demoBtn">Simulate Ctrl + M</button>
                <div class="monica-sidebar" id="sidebar">
                    <h3 style="margin-top: 0; color: var(--accent-1);">🤖 Monica AI</h3>
                    <p style="text-align: center; font-size: 0.9rem;">How can I help you today?</p>
                    <div style="width: 80%; height: 30px; background: rgba(255,255,255,0.1); border-radius: 4px; margin-top: 20px;"></div>
                    <div style="width: 60%; height: 10px; background: rgba(255,255,255,0.1); border-radius: 4px; margin-top: 10px;"></div>
                </div>
            </div>
        </section>

        <!-- Code Breakdown -->
        <section class="glass-panel" id="code">
            <h2>🧩 Code Breakdown</h2>
            <div style="display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 2rem 0;">
                <div style="text-align: center;">
                    <div class="key" id="keyCtrl">Ctrl</div>
                    <p style="font-size: 0.8rem; color: #94a3b8;">The Modifier</p>
                </div>
                <div style="font-size: 1.5rem;">+</div>
                <div style="text-align: center;">
                    <div class="key" id="keyM">M</div>
                    <p style="font-size: 0.8rem; color: #94a3b8;">The Trigger (Monica)</p>
                </div>
            </div>
        </section>

        <!-- Mistakes & Tips -->
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
            <section class="glass-panel">
                <h2 style="color: #ef4444;">⚠️ Common Mistakes</h2>
                <ul>
                    <li>Pressing them sequentially instead of together.</li>
                    <li>Accidentally pressing <code>Alt + M</code> instead.</li>
                    <li>Having another app open that already uses Ctrl+M (shortcut conflict).</li>
                </ul>
            </section>

            <section class="glass-panel">
                <h2 style="color: var(--accent-3);">🌟 Pro Tips</h2>
                <ul>
                    <li>You can usually customize this shortcut in Monica's settings if you prefer <code>Alt + Space</code> or something else!</li>
                    <li>Pressing <code>Ctrl + M</code> again usually closes or minimizes the panel.</li>
                </ul>
            </section>
        </div>

        <!-- Practice Quiz -->
        <section class="glass-panel" id="quiz">
            <h2>🎯 Practice Quiz</h2>
            <p id="quiz-status">Test your knowledge!</p>
            
            <div id="q1">
                <p><strong>1. What happens when you press Ctrl + M?</strong></p>
                <div class="quiz-option" onclick="checkAnswer(this, false)">A) It mutes your computer audio</div>
                <div class="quiz-option" onclick="checkAnswer(this, true)">B) It opens Monica's sidebar panel</div>
                <div class="quiz-option" onclick="checkAnswer(this, false)">C) It creates a new folder</div>
            </div>
        </section>

        <!-- Summary Card -->
        <section class="glass-panel" id="summary" style="background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(59, 130, 246, 0.1)); text-align: center;">
            <h2>📋 Quick Summary Cheat Sheet</h2>
            <p style="font-size: 1.2rem;"><strong>Action:</strong> Open Monica AI Assistant</p>
            <p style="font-size: 1.2rem;"><strong>Shortcut:</strong> <span class="key">Ctrl</span> + <span class="key">M</span></p>
            <button class="btn" style="margin-top: 1rem;" onclick="copyShortcut()">📋 Copy Shortcut Text</button>
        </section>

    </div>

    <footer>
        <p>Created with ✨ AI magic ✨ | Generated by AI Prompt Dictionary</p>
    </footer>

    <script>
        // Accordion Logic
        var acc = document.getElementsByClassName("accordion");
        for (var i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function() {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.maxHeight) {
                    panel.style.maxHeight = null;
                } else {
                    panel.style.maxHeight = panel.scrollHeight + "px";
                }
            });
        }

        // Demo Logic (Button & Keyboard)
        const sidebar = document.getElementById('sidebar');
        const demoBtn = document.getElementById('demoBtn');
        const keyCtrl = document.getElementById('keyCtrl');
        const keyM = document.getElementById('keyM');

        function toggleSidebar() {
            sidebar.classList.toggle('active');
            if(sidebar.classList.contains('active')) {
                demoBtn.innerText = "Close Sidebar";
            } else {
                demoBtn.innerText = "Simulate Ctrl + M";
            }
        }

        demoBtn.addEventListener('click', toggleSidebar);

        document.addEventListener('keydown', function(event) {
            if (event.key === 'Control') {
                keyCtrl.classList.add('pressed');
            }
            if (event.key.toLowerCase() === 'm') {
                keyM.classList.add('pressed');
            }
            
            // Prevent default browser behavior for Ctrl+M just for this demo page
            if (event.ctrlKey && event.key.toLowerCase() === 'm') {
                event.preventDefault();
                toggleSidebar();
            }
        });

        document.addEventListener('keyup', function(event) {
            if (event.key === 'Control') {
                keyCtrl.classList.remove('pressed');
            }
            if (event.key.toLowerCase() === 'm') {
                keyM.classList.remove('pressed');
            }
        });

        // Quiz Logic
        function checkAnswer(element, isCorrect) {
            const options = element.parentElement.querySelectorAll('.quiz-option');
            options.forEach(opt => {
                opt.style.pointerEvents = 'none'; // Disable after click
                opt.classList.remove('correct', 'wrong');
            });

            if (isCorrect) {
                element.classList.add('correct');
                document.getElementById('quiz-status').innerHTML = "🎉 Correct! You're a shortcut master! 🎉";
                document.getElementById('quiz-status').style.color = "var(--accent-3)";
                createConfetti();
            } else {
                element.classList.add('wrong');
                document.getElementById('quiz-status').innerHTML = "Oops! Try again! (Hint: It opens an AI panel)";
                document.getElementById('quiz-status').style.color = "#ef4444";
                // Re-enable for retry
                setTimeout(() => {
                    options.forEach(opt => opt.style.pointerEvents = 'auto');
                    element.classList.remove('wrong');
                }, 1500);
            }
        }

        // Copy logic
        function copyShortcut() {
            navigator.clipboard.writeText("ctrl + M --> To open Monica's sidebar, panel");
            alert("Copied to clipboard! 📋");
        }

        // Simple Confetti
        function createConfetti() {
            for(let i=0; i<30; i++) {
                let conf = document.createElement('div');
                conf.style.position = 'fixed';
                conf.style.left = Math.random() * 100 + 'vw';
                conf.style.top = '-10px';
                conf.style.width = '10px';
                conf.style.height = '10px';
                conf.style.backgroundColor = ['#8b5cf6', '#3b82f6', '#10b981', '#f59e0b'][Math.floor(Math.random()*4)];
                conf.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
                conf.style.zIndex = '9999';
                document.body.appendChild(conf);

                let duration = Math.random() * 3 + 2;
                conf.animate([
                    { transform: 'translate3d(0,0,0) rotateX(0) rotateY(0)' },
                    { transform: `translate3d(${Math.random()*100 - 50}px, 100vh, 0) rotateX(360deg) rotateY(360deg)` }
                ], {
                    duration: duration * 1000,
                    easing: 'cubic-bezier(.37,0,.63,1)'
                });

                setTimeout(() => conf.remove(), duration * 1000);
            }
        }
    </script>
</body>
</html>