tools.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"">
    <meta name=" google-adsense-account" content="ca-pub-7206096948251395">
    <title>Firebase Me</title>
    <meta name="description"
        content="Firebase Me is your go-to resource for comprehensive guides, tutorials, and updates on all things Firebase. Stay informed and enhance your app development with expert insights and community contributions.">
    <meta name="robots" content="index, follow">
    <!-- Open Graph Meta Tags (for Facebook, LinkedIn, etc.) -->
    <meta property="og:title" content="Firebase Me">
    <meta property="og:description"
        content="Firebase Me offers guides, tutorials, and updates on Firebase to help you enhance your app development. Join our community for expert insights.">
    <meta property="og:image" content="https://firebase.me/assets/images/splash.jpg">
    <meta property="og:url" content="https://firebase.me">
    <meta property="og:type" content="website">

    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Firebase Me">
    <meta name="twitter:description"
        content="Firebase Me is your go-to resource for comprehensive guides, tutorials, and updates on all things Firebase. Stay informed and enhance your app development with expert insights and community contributions.">
    <meta name="twitter:image" content="https://firebase.me/assets/images/splash.jpg">
    <meta name="twitter:url" content="https://firebase.me">

    <!-- Other Meta Tags -->
    <meta name="author" content="Firebase Me">
    <meta name="keywords" content="Firebase, Firebase tutorials, Firebase guides, app development, Firebase updates">

    <!-- Canonical Link -->
    <link rel="canonical" href="https://firebase.me">

    <!-- Favicon -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon">

    <link id="main-styles" rel="stylesheet" href="/assets/css/main.css">
    <link id="header-styles" rel="stylesheet" href="/assets/css/header.css">
    <link id="navbar-styles" rel="stylesheet" href="/assets/css/navbar.css">
    <link id="footer-styles" rel="stylesheet" href="/assets/css/footer.css">
    <link id="media-styles" rel="stylesheet" href="/assets/css/media.css">
    <link id="notif-styles" rel="stylesheet" href="/assets/css/notifs.css">
    <link id="markdown-styles" rel="stylesheet" href="/assets/css/markdown.css">
    <link id="theme-link" rel="stylesheet" href="/assets/css/default.css">

    <link
        href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&family=Roboto+Mono:wght@400;700&display=swap"
        rel="stylesheet">

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7206096948251395"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/dracula.min.css">
</head>

<body>
    <header class="header non-selectable">
        <div class="title">
            <img src="/assets/images/icon.png" alt="Icon">
            <h1><a href="index.html" style="color: white;">Firebase Me</a></h1>
        </div>
        <div class="menu-row">
            <div class="categories" id="category-list">
                <!-- Categories will be dynamically loaded here -->
                <button>services</button>
                <button>tutorials</button>
            </div>
            <button class="toggle-nav" onclick="toggleNav()">☰</button>
        </div>
    </header>

    <div class="container">
        <div class="sidebar" id="sidebar">
            <div class="crumbs" id="crumbtray">
                <!-- crumb items for sidebar will be generated here -->
            </div>
            <div class="navbar" id="navbar">
                <!-- navbar content will be generated by JavaScript -->
                 <button onclick="loadContent('generate_data')" >Generate Data</button>
            </div>
            <button class="theme-button non-selectable" onclick="showThemeDialog()">Theme</button>
            <button class="toggle-nav" onclick="toggleNav()">Close X</button>
        </div>

        <main id="content">

            <div id="project-selector">
                <h2>Select Project (feature not implimented yet)</h2>
                <div style="display: flex; align-items: center; gap: 10px;">
                    <select id="project-dropdown">
                        <option value="" disabled selected>No project selected</option>
                    </select>
                    <button id="create-project" onclick="loadContent('addproject')">✨ Create</button>
                    <button id="delete-project">🗑️ Delete</button>
                </div>
            </div>
<!--             
            
            <div id="tools-container">
                <h2>Firestore Query Tool</h2>
                <input type="text" id="firestore-collection" placeholder="Enter Firestore Collection" />
                <button id="run-firestore-query">Run Query</button>
                <div id="firestore-results"></div>
            
                <h2>Realtime Database Query Tool</h2>
                <input type="text" id="realtime-db-path" placeholder="Enter Realtime Database Path" />
                <button id="run-realtime-query">Run Query</button>
                <div id="realtime-results"></div>
            </div>
             -->

            
            <h2 id="document-title" style="margin-bottom: 0px;"></h2>
            <div class="content-body" id="content-body">
                <!-- Markdown content will be loaded here -->
            </div>
        </main>
    </div>
    <footer class="non-selectable">
        <p>Connect with community and official channels from our <a href="#" onclick="goto('contact')">Contact Page</a>
        </p>
        <p><a href="#" onclick="goto('privacy')">Privacy Policy</a></p>
    </footer>
    <!-- Popup dialogs -->
    <!-- Theme selection -->
    <div id="theme-dialog" class="theme-dialog non-selectable">
        <div class="theme-dialog-content">
            <span class="close" onclick="closeThemeDialog()">&times;</span>
            <h2>Select Theme</h2>
            <div id="theme-list" class="theme-list">
                <!-- Theme buttons will be generated here -->
            </div>
        </div>
    </div>
    <!-- Password -->
    <!-- <div id="password-popup" style="display:none;">
        <h2>Password Required</h2>
        <label for="popup-password">Enter Password:</label>
        <input type="password" id="popup-password" />
        <div>
            <button id="confirm-password">Confirm</button>
            <button id="cancel-password">Cancel</button>
        </div>
    </div> -->
    <!-- Notifications -->    
    <div id="notifications-container" style="position: fixed; bottom: 10px; right: 10px; width: 300px; z-index: 1000;"></div>
    
    <script>
        var jsonData = [];
        var category = null;
        var current = null;
    </script>
    <!-- end page content, start scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/3.0.2/marked.min.js"></script>
    
    <!-- Firebase SDKs -->
    <script src="https://www.gstatic.com/firebasejs/10.12.3/firebase-app.js"  type="module"></script>
    <script src="https://www.gstatic.com/firebasejs/10.12.3/firebase-auth.js" type="module"></script>
    <script src="https://www.gstatic.com/firebasejs/10.12.3/firebase-firestore.js" type="module"></script>
    <script src="https://www.gstatic.com/firebasejs/10.12.3/firebase-database.js" type="module"></script>
    
    <!-- Local scripts -->
    <script src="/assets/utils.js"></script>
    <script src="/assets/markparse.js"></script>
    <script src="/assets/navigation.js"></script>
    <script src="/assets/secrets.js"></script>
    <script src="/assets/theme.js"></script>

    
</body>

</html>