diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 264 |
1 files changed, 264 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..5573e60 --- /dev/null +++ b/index.html @@ -0,0 +1,264 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>SEARCH</title> + <!-- FAVICON --> + <link + rel="icon" + href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 fill=%22black%22/><text x=%2250%22 y=%2250%22 fill=%22white%22 font-family=%22monospace%22 font-size=%2280%22 text-anchor=%22middle%22 dy=%22.35em%22>%3E</text></svg>" + > + <link rel="stylesheet" href="style.css"> + </head> + <body> + <!-- HERO SEARCH --> + <section class="hero" id="hero"> + <div class="logo-large">SEARCH</div> + <div class="tagline">Universal Search Engine</div> + + <div class="search-container"> + <div class="search-box"> + <div class="search-prefix">→</div> + <input + type="text" + id="search-input" + placeholder="SEARCH, $TICKER, !N NEWS..." + autofocus + spellcheck="false" + > + <div class="search-actions"> + <button class="action-btn" id="voice-btn" title="VOICE">◉</button> + <button class="action-btn" id="clear-btn" title="CLEAR">×</button> + </div> + </div> + </div> + + <div class="shortcuts"> + <span class="shortcut" onclick="insertBang('!n')">!N NEWS</span> + <span class="shortcut" onclick="searchFor('$TSLA')">$TSLA</span> + <span class="shortcut" onclick="insertBang('!w')">!W WIKI</span> + <span class="shortcut" onclick="insertBang('!g')">!G GITHUB</span> + <span class="shortcut" onclick="insertBang('!r')">!R REDDIT</span> + <span class="shortcut" onclick="toolUUID()">UUID</span> + <span class="shortcut" onclick="toolTimer()">TIMER</span> + </div> + </section> + + <!-- STATS --> + <div class="stats-bar" id="stats-bar"> + <div class="stat-item"> + <span>RESULTS</span> + <span class="stat-value" id="stat-results">0</span> + </div> + <div class="stat-item"> + <span>SOURCES</span> + <span class="stat-value" id="stat-sources">0</span> + </div> + <div class="stat-item"> + <span>LATENCY</span> + <span class="stat-value" id="stat-time">0MS</span> + </div> + </div> + + <!-- MAIN --> + <main class="main" id="main-content" style="display:none;"> + <!-- LEFT SIDEBAR --> + <aside class="sidebar-left"> + <!-- SOURCES --> + <div class="widget" id="widget-sources"> + <div class="widget-header" onclick="toggleWidget('widget-sources')"> + <span class="widget-title">Sources</span> + <span class="widget-toggle">+</span> + </div> + <div class="widget-body"> + <div class="sources-list" id="sources-list"></div> + </div> + </div> + + <!-- TOOLS --> + <div class="widget" id="widget-tools"> + <div class="widget-header" onclick="toggleWidget('widget-tools')"> + <span class="widget-title">Tools</span> + <span class="widget-toggle">+</span> + </div> + <div class="widget-body"> + <div class="tools-grid"> + <button class="tool-btn" onclick="toolUUID()"> + <span class="icon">◈</span>UUID + </button> + <button class="tool-btn" onclick="toolTimer()"> + <span class="icon">◷</span>TIMER + </button> + <button class="tool-btn" onclick="toolBase64()"> + <span class="icon">◐</span>BASE64 + </button> + <button class="tool-btn" onclick="toolJSON()"> + <span class="icon">{ }</span>JSON + </button> + <button class="tool-btn" onclick="toolHash()"> + <span class="icon">#</span>HASH + </button> + <button class="tool-btn" onclick="toolColor()"> + <span class="icon">◼</span>COLOR + </button> + <button class="tool-btn" onclick="toolPassword()"> + <span class="icon">※</span>PASSWORD + </button> + <button class="tool-btn" onclick="toolLoremIpsum()"> + <span class="icon">¶</span>LOREM + </button> + </div> + </div> + </div> + + <!-- BANGS --> + <div class="widget" id="widget-bangs"> + <div class="widget-header" onclick="toggleWidget('widget-bangs')"> + <span class="widget-title">Bangs</span> + <span class="widget-toggle">+</span> + </div> + <div class="widget-body"> + <div class="bangs-grid"> + <span class="bang" onclick="insertBang('!n')">!N NEWS</span> + <span class="bang" onclick="insertBang('!w')">!W WIKI</span> + <span class="bang" onclick="insertBang('!g')">!G GITHUB</span> + <span class="bang" onclick="insertBang('!r')">!R REDDIT</span> + <span class="bang" onclick="insertBang('!hn')">!HN NEWS</span> + <span class="bang" onclick="insertBang('!so')">!SO STACK</span> + <span class="bang" onclick="insertBang('!npm')">!NPM</span> + <span class="bang" onclick="insertBang('!d')">!D DICT</span> + <span class="bang" onclick="insertBang('!b')">!B BOOKS</span> + <span class="bang" onclick="insertBang('$')">$ STOCK</span> + </div> + </div> + </div> + + <!-- HISTORY --> + <div class="widget" id="widget-history"> + <div class="widget-header" onclick="toggleWidget('widget-history')"> + <span class="widget-title">History</span> + <span class="widget-toggle">+</span> + </div> + <div class="widget-body"> + <div id="history-list"> + <div style="color:var(--gray);font-size:11px;">NO HISTORY</div> + </div> + </div> + </div> + </aside> + + <!-- RESULTS --> + <section class="results-section"> + <div class="results-header"> + <span id="results-label">READY</span> + <span id="results-info"></span> + </div> + <div class="results-container" id="results"></div> + </section> + + <!-- RIGHT SIDEBAR --> + <aside class="sidebar-right"> + <!-- CALCULATOR --> + <div class="widget" id="widget-calc"> + <div class="widget-header" onclick="toggleWidget('widget-calc')"> + <span class="widget-title">Calculator</span> + <span class="widget-toggle">+</span> + </div> + <div class="widget-body"> + <div class="calc-display"> + <div class="calc-expr" id="calc-expr"></div> + <div class="calc-result" id="calc-result">0</div> + </div> + <div class="calc-grid"> + <button class="calc-btn" data-v="C">C</button> + <button class="calc-btn" data-v="(">(</button> + <button class="calc-btn" data-v=")">)</button> + <button class="calc-btn op" data-v="/">÷</button> + <button class="calc-btn" data-v="7">7</button> + <button class="calc-btn" data-v="8">8</button> + <button class="calc-btn" data-v="9">9</button> + <button class="calc-btn op" data-v="*">×</button> + <button class="calc-btn" data-v="4">4</button> + <button class="calc-btn" data-v="5">5</button> + <button class="calc-btn" data-v="6">6</button> + <button class="calc-btn op" data-v="-">−</button> + <button class="calc-btn" data-v="1">1</button> + <button class="calc-btn" data-v="2">2</button> + <button class="calc-btn" data-v="3">3</button> + <button class="calc-btn op" data-v="+">+</button> + <button class="calc-btn" data-v="0">0</button> + <button class="calc-btn" data-v=".">.</button> + <button class="calc-btn" data-v="^">^</button> + <button class="calc-btn op" data-v="=">=</button> + </div> + </div> + </div> + + <!-- WORLD CLOCKS --> + <div class="widget" id="widget-clocks"> + <div class="widget-header" onclick="toggleWidget('widget-clocks')"> + <span class="widget-title">World Time</span> + <span class="widget-toggle">+</span> + </div> + <div class="widget-body"> + <div class="clocks-grid" id="world-clocks"></div> + </div> + </div> + + <!-- STOCKS WATCHLIST (EDITABLE) --> + <div class="widget" id="widget-watchlist"> + <div class="widget-header" onclick="toggleWidget('widget-watchlist')"> + <span class="widget-title">Watchlist</span> + <span class="widget-toggle">+</span> + </div> + <div class="widget-body"> + <div class="watchlist-input-row"> + <input type="text" id="watchlist-input" placeholder="ADD TICKER..."> + <button id="watchlist-add-btn">+</button> + </div> + <div class="sources-list" id="watchlist-container"> + <!-- Items rendered via JS --> + </div> + </div> + </div> + + <!-- KEYBOARD --> + <div class="widget" id="widget-keyboard"> + <div class="widget-header" onclick="toggleWidget('widget-keyboard')"> + <span class="widget-title">Shortcuts</span> + <span class="widget-toggle">+</span> + </div> + <div class="widget-body" style="font-size:11px;color:var(--gray);line-height:2;"> + <div> + <span style="color:var(--fg)">/</span>Focus search + </div> + <div> + <span style="color:var(--fg)">ESC</span>Clear + </div> + <div> + <span style="color:var(--fg)">$XXX</span>Stock ticker + </div> + <div> + <span style="color:var(--fg)">=</span>Calculator + </div> + <div> + <span style="color:var(--fg)">!bang</span>Direct search + </div> + </div> + </div> + </aside> + </main> + + <footer class="footer"> + <button class="theme-btn" onclick="toggleTheme()">◐ Theme</button> + <span>NO TRACKING</span> + <span id="clock">00:00:00</span> + </footer> + + <!-- TOAST --> + <div class="toast-container" id="toast-container"></div> + + <script defer src="main.js"></script> + </body> +</html> |