index_new.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
    <title>Break Escape Game</title>
    
    <!-- Google Fonts - Press Start 2P, VT323 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
    
    <!-- Web Font Loader script to ensure fonts load properly -->
    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    <script>
      WebFont.load({
        google: {
          families: ['Press Start 2P', 'VT323']
        },
        active: function() {
          console.log('Fonts loaded successfully');
        }
      });
    </script>

    <!-- CSS Files -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/utilities.css">
    <link rel="stylesheet" href="css/notifications.css">
    <link rel="stylesheet" href="css/panels.css">
    <link rel="stylesheet" href="css/inventory.css">
    <link rel="stylesheet" href="css/minigames-framework.css">
    <link rel="stylesheet" href="css/modals.css">
    <link rel="stylesheet" href="css/notes.css">
    
    <!-- External JavaScript libraries -->
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/easystarjs@0.4.4/bin/easystar-0.4.4.js"></script>
</head>
<body>
    <div id="game-container">
        <div id="loading">Loading...</div>
    </div>

    <!-- Notification System -->
    <div id="notification-container"></div>

    <!-- Notes Panel -->
    <div id="notes-panel">
        <div id="notes-header">
            <div id="notes-title">Notes & Information</div>
            <div id="notes-close">×</div>
        </div>
        <div id="notes-search-container">
            <input type="text" id="notes-search" placeholder="Search notes...">
        </div>
        <div id="notes-categories">
            <div class="notes-category active" data-category="all">All</div>
            <div class="notes-category" data-category="important">Important</div>
            <div class="notes-category" data-category="unread">Unread</div>
        </div>
        <div id="notes-content"></div>
    </div>
    
    <!-- Toggle Buttons Container -->
    <div id="toggle-buttons-container">
        <div id="notes-toggle">
            <img src="assets/objects/notes.png" alt="Notes">
            <div id="notes-count">0</div>
        </div>
        <div id="bluetooth-toggle" style="display: none;">
            <img src="assets/objects/bluetooth_scanner.png" alt="Bluetooth">
            <div id="bluetooth-count">0</div>
        </div>
        <div id="biometrics-toggle" style="display: none;">
            <img src="assets/objects/fingerprint.png" alt="Biometrics">
            <div id="biometrics-count">0</div>
        </div>
    </div>

    <!-- Bluetooth Scanner Panel -->
    <div id="bluetooth-panel">
        <div id="bluetooth-header">
            <div id="bluetooth-title">Bluetooth Scanner</div>
            <div id="bluetooth-close">×</div>
        </div>
        <div id="bluetooth-search-container">
            <input type="text" id="bluetooth-search" placeholder="Search devices...">
        </div>
        <div id="bluetooth-categories">
            <div class="bluetooth-category active" data-category="all">All</div>
            <div class="bluetooth-category" data-category="nearby">Nearby</div>
            <div class="bluetooth-category" data-category="saved">Saved</div>
        </div>
        <div id="bluetooth-content"></div>
    </div>
    
    <!-- Biometrics Panel -->
    <div id="biometrics-panel">
        <div id="biometrics-header">
            <div id="biometrics-title">Biometric Samples</div>
            <div id="biometrics-close">×</div>
        </div>
        <div id="biometrics-search-container">
            <input type="text" id="biometrics-search" placeholder="Search samples...">
        </div>
        <div id="biometrics-categories">
            <div class="biometrics-category active" data-category="all">All</div>
            <div class="biometrics-category" data-category="fingerprint">Fingerprints</div>
        </div>
        <div id="biometrics-content"></div>
    </div>

    <!-- Inventory Container -->
    <div id="inventory-container"></div>

    <!-- Laptop Popup -->
    <div id="laptop-popup">
        <div class="laptop-frame">
            <div class="laptop-screen">
                <div class="title-bar">
                    <span>Crypto Workstation</span>
                    <button class="close-btn" onclick="closeLaptop()">×</button>
                </div>
                <div id="cyberchef-container">
                    <iframe id="cyberchef-frame" src=""></iframe>
                </div>
            </div>
        </div>
    </div>

    <!-- Password Modal -->
    <div id="password-modal">
        <div class="password-modal-content">
            <div class="password-modal-title">
                Enter Password
            </div>
            <input id="password-modal-input" type="password" autocomplete="off" autofocus>
            <div class="password-modal-checkbox-container">
                <input type="checkbox" id="password-modal-show">
                <label for="password-modal-show" class="password-modal-checkbox-label">Show password</label>
            </div>
            <div class="password-modal-buttons">
                <button id="password-modal-ok" class="password-modal-button">OK</button>
                <button id="password-modal-cancel" class="password-modal-button">Cancel</button>
            </div>
        </div>
    </div>

    <!-- Popup Overlay -->
    <div class="popup-overlay"></div>

    <!-- Main Game JavaScript Module -->
    <script type="module" src="js/main.js?v=33"></script>
    
    <!-- Mobile touch handling -->
    <script>
        // Allow zooming on mobile devices
        document.addEventListener('DOMContentLoaded', function() {
            // Prevent Phaser from capturing touch events that should be used for zooming
            const gameContainer = document.getElementById('game-container');
            
            // Allow zooming on the document level
            document.addEventListener('gesturestart', function(e) {
                e.preventDefault();
            });
            
            document.addEventListener('gesturechange', function(e) {
                e.preventDefault();
            });
            
            // Prevent default touch behavior only within the game container
            gameContainer.addEventListener('touchmove', function(e) {
                // Only prevent default if it's not a multi-touch gesture (like pinch-to-zoom)
                if (e.touches.length <= 1) {
                    e.preventDefault();
                }
            }, { passive: false });
        });
    </script>

</body>
</html>