Route-Tools/index.html at main · MainRoute-Core/Route-Tools · 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<!-- Copyright (c) 2026 MainRoute Core. All Rights Reserved. -->
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Route Tools - Developer Utilities</title>
    <meta name="description" content="Route Tools: Standalone web tools for developers. Client-side Formatters, CSS, Security, and Generators. No-install, privacy-focused utilities.">
    <meta name="author" content="BLGardner">
    <meta name="theme-color" content="#1976d2">

    <link rel="shortcut icon" href="src/favicon.ico" type="image/x-icon">
    <!-- CSS Loading -->
    <link rel="stylesheet" href="css/variables.css">
    <link rel="stylesheet" href="css/index.css">

    <!-- Inline Theme Auto-Sync to prevent FOUC -->
    <script>
        const savedTheme = localStorage.getItem('alloTheme');
        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
            document.documentElement.setAttribute('data-theme', 'dark');
        } else {
            document.documentElement.setAttribute('data-theme', 'light');
        }
    </script>
</head>

<body>
    <nav class="navBar">
        <div class="brandLogo" onclick="window.location.href='index.html'">
            <svg viewBox="0 0 24 24" width="28" height="28">
                <path fill="var(--primaryColor)" d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z" />
            </svg>
            <span>Route Tools</span>
        </div>
        <div class="navRight">
            <a href="./privacy/">Privacy Policy</a><a href="./license/">License</a>
            <div class="searchBox">
                <svg class="searchIcon" viewBox="0 0 24 24">
                    <path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
                </svg>
                <input type="text" id="toolSearch" placeholder="Search tools (Press '/')">
            </div>
            <button id="favTabBtn" class="iconBtn" aria-label="Favorites" title="Favorites">
                <svg viewBox="0 0 24 24" width="20" height="20">
                    <path fill="currentColor" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
                </svg>
            </button>
            <button id="themeToggleBtn" class="iconBtn" aria-label="Toggle Theme"></button>
        </div>
    </nav>

    <header class="heroSection">
        <h1>Every Dev Tool You Need</h1>
        <p>Minimal. Fast. Privacy-focused. Open Source.</p>
        <div class="privacyBadge">
            <svg viewBox="0 0 24 24" width="16" height="16">
                <path fill="currentColor" d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z" />
            </svg>
            Data never leaves your browser
        </div>
    </header>

    <div class="controlsBar">
        <div class="categoryList" id="categoryList">
            <!-- Categories injected by JS -->
        </div>
        <div class="filterActions">
            <div class="viewToggles">
                <button id="gridViewBtn" class="iconBtn active" title="Grid View">
                    <svg viewBox="0 0 24 24" width="18" height="18">
                        <path fill="currentColor" d="M4 4h4v4H4zm6 0h4v4h-4zm6 0h4v4h-4zM4 10h4v4H4zm6 0h4v4h-4zm6 0h4v4h-4zM4 16h4v4H4zm6 0h4v4h-4zm6 0h4v4h-4z" />
                    </svg>
                </button>
                <button id="listViewBtn" class="iconBtn" title="List View">
                    <svg viewBox="0 0 24 24" width="18" height="18">
                        <path fill="currentColor" d="M4 6h2v2H4zm0 5h2v2H4zm0 5h2v2H4zm4-10h12v2H8zm0 5h12v2H8zm0 5h12v2H8z" />
                    </svg>
                </button>
            </div>
            <div class="sortBox">
                <select id="sortSelect" class="materialSelect">
                    <option value="default">Default Sort</option>
                    <option value="az">A-Z</option>
                    <option value="za">Z-A</option>
                    <option value="popular">Most Popular</option>
                    <option value="newest">Newest/Featured</option>
                </select>
            </div>
        </div>
    </div>

    <main class="mainLayout">
        <div class="contentArea">
            <div id="favoritesWrapper" hidden>
                <h2 class="sectionTitle">Favorites</h2>
                <div id="favoritesGrid" class="toolsGrid"></div>
            </div>
            <div>
                <h2 class="sectionTitle" id="categoryTitle">All Tools</h2>
                <div id="toolsGrid" class="toolsGrid">
                    <p style="color:var(--textMuted)">Loading tools...</p>
                </div>
            </div>
        </div>

        <aside class="sideBar">
            <div class="sideBarSection">
                <h3 class="sideBarTitle">Recent</h3>
                <div id="recentToolsList"></div>
            </div>
            <!-- Added Top 5 Tools Stats Section -->
            <div class="sideBarSection" id="topToolsSection">
                <h3 class="sideBarTitle">Top 5 Tools</h3>
                <div id="topToolsList"></div>
            </div>
            <div class="sideBarSection" id="usageStatsBox" style="display: none;">
                <div class="statGroup">
                    <div class="statVal" id="usageCount">0</div>
                    <div class="statLbl">Tools Opened</div>
                </div>
                <div class="statGroup">
                    <div class="statVal" id="totalToolsCount">0</div>
                    <div class="statLbl">Available</div>
                </div>
            </div>
        </aside>
    </main>

    <footer class="siteFooter">
        <p>Built with Material Design for Developers</p>
        <div class="footerLinks">
            <a href="https://github.com/Pro-Bandey/Route Tools" target="_blank">GitHub</a>
            <a href="LICENSE.txt" target="_blank">License</a>
        </div>
    </footer>

    <dialog id="toastDialog" class="toastDialog"></dialog>

    <svg width="0" height="0" style="display: none;">
        <defs id="svgDefs"></defs>
    </svg>

    <dialog id="favoritesDialog" class="favoritesDialog">
        <div class="dialogHeader">
            <h3 style="margin:0; font-size:1.1rem">My Favorites</h3>
            <button id="closeFavBtn" class="iconBtn"><svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></button>
        </div>
        <div id="dialogGrid" class="toolsGrid dialogGrid"></div>
    </dialog>

    <script src="js/index.js" defer></script>
</body>

</html>