<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link id="theme-link" rel="stylesheet" type="text/css" href="dark-style.css">
    <link rel="shortcut icon" href="images/streamhive logo.png" type="favicon">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"/>
    <title>Browse - StreamHive</title>
</head>
<body>
    <nav class="navbar">
        <img id="logo" src="images/streamhive logo.png" alt="">
        <div class="left_nav">
                <a href="index"><h1 class="all_text">StreamHive</h1></a>
                <a id="browse_clicked" class="all_text" href="browse"><h1>Browse</h1></a>
            </div>
            <div class="middle_nav">
                <div class="search_bar">
                    <input aria-label="Searchtext" type="search" placeholder="Search" autocapitalize="off" autocorrect="off" maxlength="150" spellcheck="false">
                    <button aria-label="Searchbutton" disabled><span class="material-symbols-outlined close">search</span></button>
                </div>
            </div>
            <div class="right_nav">
            </div>
            <div class="icons_container">
                <button>
                <svg width="100%" height="100%" viewBox="0 0 20 20" class="default-icon"><path fill-rule="evenodd" d="M4 3h12l2 4v10H2V7l2-4zm.236 4H8v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V7h3.764l-1-2H5.236l-1 2zM16 9h-2.17A3.001 3.001 0 0 1 11 11H9a3.001 3.001 0 0 1-2.83-2H4v6h12V9z" clip-rule="evenodd"></path></svg>
                </button>
                <div class="hidebutton">    
                    <button><svg width="100%" height="100%" viewBox="0 0 20 20" class="default-icon"><path fill-rule="evenodd" d="M7.828 13 10 15.172 12.172 13H15V5H5v8h2.828zM10 18l-3-3H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2l-3 3z" clip-rule="evenodd"></path></svg></button>
                </div>
                <button class="bits_button">
                    <div class="icon-and-text">
                        <svg width="100%" height="100%" viewBox="0 0 20 20" class="default-icon"><path fill-rule="evenodd" d="m3 12 7-10 7 10-7 6-7-6zm2.678-.338L10 5.487l4.322 6.173-.85.728L10 11l-3.473 1.39-.849-.729z" clip-rule="evenodd"></path></svg>
                        <h5>Get bits</h5>
                    </div>
                </button>
                <div class="icons_container default-icon">
                    <svg width="100%" height="100%" viewBox="0 0 20 20" id="icon" class="default-icon"><path fill-rule="evenodd" d="M5 7a5 5 0 1 1 6.192 4.857A2 2 0 0 0 13 13h1a3 3 0 0 1 3 3v2h-2v-2a1 1 0 0 0-1-1h-1a3.99 3.99 0 0 1-3-1.354A3.99 3.99 0 0 1 7 15H6a1 1 0 0 0-1 1v2H3v-2a3 3 0 0 1 3-3h1a2 2 0 0 0 1.808-1.143A5.002 5.002 0 0 1 5 7zm5 3a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" clip-rule="evenodd"></path></svg>
                    <div id="dropdown-content">
                        <div id="dark_theme">
                            <svg width="100%" height="100%" version="1.1" viewBox="0 0 20 20" x="0px" y="0px" class="ScIconSVG-sc-1q25cff-1 dSicFr"><g><path fill-rule="evenodd" d="M8.614 2.134a8.001 8.001 0 001.388 15.879 8.003 8.003 0 007.884-6.635 6.947 6.947 0 01-2.884.62 7.004 7.004 0 01-6.388-9.864zM6.017 5.529a5.989 5.989 0 00-2.015 4.484c0 3.311 2.69 6 6 6a5.99 5.99 0 004.495-2.028 9.006 9.006 0 01-8.48-8.456z" clip-rule="evenodd"></path></g></svg>
                            <label for="" class="dark_theme_label">Dark Theme</label>
                            <hr>
                            <svg width="100%" height="100%" version="1.1" viewBox="0 0 20 20" x="0px" y="0px" class="ScIconSVG-sc-1q25cff-1 dSicFr"><g><path d="M16 18h-4a2 2 0 0 1-1.964-1.622L12 14.414V16h4V4h-4v1.586l-1.964-1.964A2 2 0 0 1 12 2h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2Z"></path><path d="M7.5 6.5 9 5l5 5-5 5-1.5-1.5L10 11H2V9h8L7.5 6.5Z"></path></g></svg>
                            <div class="login">Log in</div>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    <h1>adfsdf</h1>
    <script src="browse.js"></script>
    <script src="client.js"></script>
</body>
</html>