<!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">
    <meta name="description" content="Login | Crispy - Open Source Chat">
    <meta name="keywords" content="online, chat, app, open-source. crispy">
    <meta property="og:site_name" content="App | Crispy">
    <link rel="icon" href="https://tallerthanshort.github.io/ut3.ggpht/icons/crispy.png" type="image/png">
    <meta property="og:title" content="App | Crispy">
    <meta property="og:image" content="https://tallerthanshort.github.io/ut3.ggpht/icons/crispy.png">
    <meta property="og:description" content="Login | Crispy - Open Source Chat">
    <link rel="icon" type="image/x-icon" href="https://tallerthanshort.github.io/ut3.ggpht/icons/crispy.png">
    <title>App | Crispy</title>
    <link rel="stylesheet" href="/css/crispychicken.css">
    <meta name="theme-color" content="rgba(33, 33, 33, 0.98)">
</head>
<body>
    <div class="appContainer">
        <div class="appPanel">
            <div class="notPanel">
                <div class="application">
                    <div class="app-primary">
                        <div class="custom-background"></div>
                        <div class="layer1">
                            <div class="layer2">
                                <div class="container">
                                    <nav class="guildNav">
                                        <ul class="unorderedList1">
                                            <div class="scroller" style="overflow: hidden scroll;">
                                                <div id="logoContainer">
                                                    <div class="guildItem" onclick="location.href='/app/'" title="Home Screen" style="cursor: pointer;">
                                                        <div>
                                                            <div class="wrapper">
                                                                <img src="https://tallerthanshort.github.io/ut3.ggpht/icons/crispy.png" style="width: 48px; height: 48px; border-radius: 14px;">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div id="servers" style="overflow: visible scroll; padding-right: 0px; width: 100%; position: relative;">
                                                    <% for (const guild of guildData) { %>
                                                        <div class="guildItem" onclick="location.href='/app/<%= guild.uid %>'" title="<%= guild.title %>">
                                                            <div>
                                                                <div class="wrapper">
                                                                    <div class="guildImageContainer">
                                                                        <div class="guildImage">
                                                                            <img src="<%= guild.img %>" alt="<%= guild.title %> icon" style="width: 48px; height: 48px; border-radius: 14px;">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    <% } %>
                                                </div>
                                                <hr>
                                                <div>
                                                    <div class="guildItem" onclick="location.href='/settings/'" title="Settings" style="cursor: pointer;">
                                                        <div>
                                                            <div class="wrapper">
                                                                <img src="https://tallerthanshort.github.io/ut3.ggpht/icons/settings.png" style="width: 48px; height: 48px; border-radius: 14px;">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </ul>
                                    </nav>
                                    <div class="basecont">
                                        <div class="content2">
                                            <div class="header">
                                                <div class="headerWrapper">
                                                    <div class="iconWrapper" onclick="toggleMenu()" title="Toggle Nav Bar Visibility">
                                                        <svg viewBox="0 0 24 24" height="24" width="24" aria-hidden="true" focusable="false" class="backarrowtang" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"></path>
                                                        </svg>
                                                    </div>
                                                    <div class="titleWrapper">
                                                        <h3 class="eligible">Home</h3>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="homeScreen">
                                                <b class="eligible" style="margin: 20px 0; font-size: 24px; text-align: center;">Welcome to Crispy!</b>
                                                <div class="shortcuts">
                                                    <a style="background-color: black; border: 1px solid white; text-decoration: none; padding: 12px; text-align: center;" href="/app/#create">Create a Guild</a>
                                                    <a style="background-color: black; border: 1px solid white; text-decoration: none; padding: 12px; text-align: center;" href="/invite/commoncodes">Join the Official Support Guild</a>
                                                    <a style="background-color: black; border: 1px solid white; text-decoration: none; padding: 12px; text-align: center;" href="https://rvlt.gg/gY5yJNJR">Join our Revolt to give feedback</a>
                                                    <a style="background-color: black; border: 1px solid white; text-decoration: none; padding: 12px; text-align: center;" href="https://ko-fi.com/commoncodes">Support us via Ko-Fi</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function toggleMenu(){
            const navTag = document.querySelector('.guildNav');
            const arrow = document.querySelector(".backarrowtang");
            if(navTag.style.display === 'flex'){
                navTag.style.display = 'none';
                arrow.innerHTML = '<path d="M10.707 17.707 16.414 12l-5.707-5.707-1.414 1.414L13.586 12l-4.293 4.293z"></path>'
            } else {
                navTag.style.display = 'flex'
                arrow.innerHTML = '<path d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"></path>'
            }
        }
    </script>
</body>
</html>