hehe

Sleeping

App Files Files Community

Reality123b commited on Feb 7

Commit

8e3eda3

verified ·

1 Parent(s): a116387

Update application/templates/index.html

Browse files

Files changed (1) hide show

application/templates/index.html +446 -419

application/templates/index.html CHANGED Viewed

@@ -1,412 +1,455 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css">
     <style>
-      ::-webkit-scrollbar {
-    width: 12px;
-}
-::-webkit-scrollbar-track {
-    background: transparent;
-}
-::-webkit-scrollbar-thumb {
-    background: rgb(43, 43, 43);
-    border-radius: 6px;
-}
-::-webkit-scrollbar-thumb:hover {
-    background: rgb(119, 119, 119);
-}
-html,body{
-    padding: 0;
-    margin: 0;
-    background-color: rgb(2,2,8);
-    width: 100vw;
-    height: 100vh;
-    overflow: hidden;
-    scrollbar-width: thin;
-    scrollbar-color: rgb(41, 41, 41) transparent;
-    font-family: 'Inter';
-}
-nav{
-    position: fixed;
-    width: 100vw;
-    height: 8vh;
-    z-index: 100;
-    display: flex;
-}
-.hamburger{
-    display: flex;
-    flex-direction: column;
-    gap: 1.5vh;
-    width: 20vh;
-    color: white;
-    margin: 1vw;
-    cursor: pointer;
-    position: absolute;
-    z-index: 101;
-    margin: 10px;
-}
-.line1{
-    background-color: rgb(122, 122, 122);
-    width: 6vh;
-    height: 0.5vh;
-}
-.line2{
-    background-color: rgb(104, 104, 104);
-    width: 3vh;
-    height: 0.5vh;
-}
-.hamburger:hover .line1{
-    transform: translateX(-30px);
-    transition: transform 1s ease;
-}
-.hamburger:hover .line2{
-    transform: translateX(30px);
-    transition: transform 1s ease;
-}
-.menu{
-    height: 100vh;
-    width: 0px;
-    background-color: rgba(20, 20, 20,0.5);
-    border-radius: 10px;
-    position: fixed;
-    top: 0;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-}
-.newChat{
-    margin-top: 8vh;
-    margin-left: 1vw;
-    color: gray;
-    font-size: large;
-    cursor: pointer;
-    font-weight: 400;
-    position: relative;
-    font-size: large;
-}
-.newChat:hover{
-    transform: scale(0.95);
-    transition: transform 0.7s ease;
-}
-.prevChatsCont{
-    color: rgb(172, 171, 171);
-    margin-left: 1vw;
-    font-weight: 300;
-    display: flex;
-    flex-direction: column;
-    gap: 1vh;
-    position: relative;
-    font-size: medium;
-}
-.prevChat{
-    min-height: 5vh;
-    cursor: pointer;
-    width: 90%;
-    display: flex;
-    align-items: center;
-    padding-left: 5%;
-    border-radius: 10px;
-    overflow: hidden;
-    padding-top: 1%;
-    padding-bottom: 1%;
-    position: relative;
-}
-.prevChat:hover{
-    background-color: rgba(70,70, 70,1);
-    transform: translateY(5px);
-    transition: transform 0.8s ease;
-}
-.chatsTxt{
-    color: #fdffdf;
-    margin-left: 1vw;
-    font-size: 14px;
-    margin-top: 4vh;
-    margin-bottom: 3vh;
-    z-index: 100;
-    overflow: hidden;
-    min-height: 5vh;
-    display: flex;
-    align-items: center;
-}
-.container {
-    width: 99.5%;
-    max-width: 99.5%;
-    height: 90%;
-    position: absolute;
-    z-index: 50;
-    top: 8vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    z-index: 1;
-}
-.inputs {
-    width: 70%;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    background-color: rgba(51, 51, 51, 0.4);
-    padding: 10px;
-    border-top-right-radius: 50px;
-    border-bottom-left-radius: 20px;
-    border-top-left-radius: 20px;
-    border-bottom-right-radius: 50px;
-    font-size: large;
-    position: relative;
-    margin-top: auto;
-    align-self: center;
-}
-.textBox{
-    width: 90%;
-    background: none;
-    outline: none;
-    border: none;
-    color: rgb(161, 161, 161);
-    padding: 7px;
-}
-.sendBtn{
-    background-color: white;
-    border: none;
-    color: black;
-    font-size: x-large;
-    cursor: pointer;
-    border-radius: 50%;
-    width: 6vh;
-    height: 6vh;
-}
-.messages {
-    overflow-y: auto;
-    color: white;
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-}
-.user{
-    margin-left: auto;
-    max-width: 60%;
-    background-color: rgba(51, 51, 51, 0.4);
-    padding: 0.5vh 1.5vh 0.5vh 1.5vh;
-    text-align: left;
-    font-weight: 300;
-    border-radius: 10px;
-    line-height: 130%;
-}
-.user p{
-    color: #b4b4b4;
-    padding: 0;
-    opacity: 0.9;
-}
-.ai{
-    text-align: left;
-    width: 70%;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 2vh;
-}
-.ai p {
-    opacity: 0.9;
-    font-weight: 300;
-    font-size: medium;
-    line-height: 1.6;
-    color: #c5c5c5;
-    background-color: rgba(28, 28, 28, 0.5);
-    padding: 20px;
-    border-radius: 10px;
-    border: 2px solid rgba(255,255,255,0.1);
-    font-family: 'Inter';
-}
-.subHeading,.heading{
-    padding: 1vh;
-    border-radius: 10px;
-    display: inline-block;
-    margin-bottom: 2vh;
-    margin-top: 2vh;
-}
-.subHeading{
-    background-color: rgba(59, 59, 59, 0.5);
-    border: 1px solid rgba(255,255,255,0.1)
-}
-.heading{
-    background-color: rgba(119, 16, 238, 0.55);
-    box-shadow: 6px 6px rgba(0, 0, 0, 0.5) ;
-}
-code{
-    border-radius: 15px;
-}
-.models{
-    position: relative;
-    margin: auto;
-    padding: 10px   ;
-    outline: none;
-    background-color: rgb(43, 43, 43);
-    color: rgb(177, 177, 177);
-    border: none;
-    border-radius: 10px;
-}
-.models:hover{
-    background-color: #383838;
-}
-.models option{
-    background-color: rgb(34, 34, 34);
-    color: #afafaf;
-    padding: 10px;
-}
-.alert{
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%,-50%);
-    width: 320px;
-    height: 320px;
-    display: flex;
-    flex-direction: column;
-    gap: 0px;
-    color: #d8d8d8;
-    background-color: #222222;
-    box-shadow: 6px 6px rgb(41, 41, 41) ;
-    justify-content: center;
-    z-index: 100;
-}
-.alert p{
-    float: left;
-    font-family: 'Inter';
-    font-weight: 300;
-    font-size: 15px;
-    color: #cfcfcf;
-    opacity: 0.9;
-    padding-left: 10px;
-}
-.closeAlert{
-    margin-left: auto;
-    margin-right: 10px;
-    margin-top: 10px;
-    background-color: rgb(247, 102, 102);
-    padding: 10px;
-    cursor: pointer;
-    border-radius: 10px;
-    color: #ffffff;
-}
-.discord {
-    margin: 10px;
-    text-decoration: none;
-    color: rgb(211, 211, 211);
-    padding: 7.5px;
-    border-radius: 10px;
-    background: linear-gradient(to right, #4A148C, #9c18e3);
-    cursor: pointer;
-    display: inline-block;
-    font-size: 13px;
-    max-width: 77px;
-}
-.note{
-    text-align: center;
-    background-color: rgba(119, 16, 238, 0.55);
-    box-shadow: 6px 6px rgb(32, 32, 32) ;
-    margin: auto;
-    width: 70px;
-    padding: 10px;
-}
-.webSearch{
-    color: rgb(233, 233, 233);
-    background: transparent;
-    cursor: pointer;
-    border: none;
-    font-size: x-large;
-}
-@media screen and (max-width: 780px){
-    .menu{
-    background-color: rgba(20, 20, 20);
-    }
-    .inputs{
-        width: 85%;
-    }
-    .ai{
-        width: 90%;
-    }
-    .user{
-        max-width: 90%;
-    }
-}
-        /* New styles for thinking section */
-        .thinking-container {
-            background: rgba(30, 30, 30, 0.7);
-            border-radius: 8px;
-            margin: 10px 0;
             overflow: hidden;
-            border: 1px solid rgba(255, 255, 255, 0.1);
         }
-        .thinking-header {
             display: flex;
             align-items: center;
-            padding: 10px 15px;
             cursor: pointer;
-            background: rgba(119, 16, 238, 0.2);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
-        .thinking-header:hover {
-            background: rgba(119, 16, 238, 0.3);
         }
-        .thinking-title {
             color: #fdffdf;
             font-size: 14px;
-            margin-right: 10px;
         }
-        .thinking-arrow {
             margin-left: auto;
-            transition: transform 0.3s ease;
         }
-        .thinking-arrow.open {
-            transform: rotate(180deg);
         }
-        .thinking-content {
-            padding: 15px;
             color: #c5c5c5;
-            font-size: 14px;
-            line-height: 1.5;
-            max-height: 0;
-            overflow: hidden;
-            transition: max-height 0.3s ease-out;
         }
-        .thinking-content.open {
-            max-height: 500px;
-            transition: max-height 0.5s ease-in;
         }
     </style>
-    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
-    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
-    <title>Chat Completion Demo</title>
 </head>
 <body>
     <nav>
@@ -425,59 +468,43 @@ code{
     </nav>
     <div class="container" id="container">
         <div class="messages" id="messages">
-            <!-- Messages will be inserted here -->
         </div>
         <div class="inputs">
-            <button id="webSearch" class="webSearch"><i class="fa-solid fa-globe"></i></button>
             <textarea name="" id="textBox" class="textBox" placeholder="Enter your message..."></textarea>
             <button id="sendBtn" class="sendBtn"><i class="fa-solid fa-arrow-up"></i></button>
         </div>
     </div>
     <script>
-        // Add this to your existing JavaScript or create a new script
-        function createThinkingElement(thinkingContent) {
-            const container = document.createElement('div');
-            container.className = 'thinking-container';
-            const header = document.createElement('div');
-            header.className = 'thinking-header';
-            const title = document.createElement('span');
-            title.className = 'thinking-title';
-            title.textContent = 'Reasoning about it';
-            const arrow = document.createElement('i');
-            arrow.className = 'fa-solid fa-chevron-down thinking-arrow';
-            const content = document.createElement('div');
-            content.className = 'thinking-content';
-            content.textContent = thinkingContent;
-            header.appendChild(title);
-            header.appendChild(arrow);
-            container.appendChild(header);
-            container.appendChild(content);
-            header.addEventListener('click', () => {
-                arrow.classList.toggle('open');
-                content.classList.toggle('open');
-            });
-            return container;
-        }
-        // Example usage in your message processing logic:
-        function processMessage(message) {
-            const thinkMatch = message.match(/<think>(.*?)<\/think>/s);
-            if (thinkMatch) {
-                const thinkingContent = thinkMatch[1].trim();
-                const thinkingElement = createThinkingElement(thinkingContent);
-                // Insert the thinking element into your message container
-                document.getElementById('messages').appendChild(thinkingElement);
             }
-        }
     </script>
-    <script src="{{ url_for('static', filename='js/script.js') }}" type="module"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css">
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <title>Chat Completion Demo</title>
     <style>
+        ::-webkit-scrollbar {
+            width: 12px;
+        }
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: rgb(43, 43, 43);
+            border-radius: 6px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgb(119, 119, 119);
+        }
+        html, body {
+            padding: 0;
+            margin: 0;
+            background-color: rgb(2, 2, 8);
+            width: 100vw;
+            height: 100vh;
             overflow: hidden;
+            scrollbar-width: thin;
+            scrollbar-color: rgb(41, 41, 41) transparent;
+            font-family: 'Inter';
         }
+        nav {
+            position: fixed;
+            width: 100vw;
+            height: 8vh;
+            z-index: 100;
             display: flex;
+            justify-content: space-between;
             align-items: center;
+            background-color: rgba(20, 20, 20, 0.8);
+            backdrop-filter: blur(10px);
+        }
+        .hamburger {
+            display: flex;
+            flex-direction: column;
+            gap: 1.5vh;
+            width: 20vh;
+            color: white;
+            margin: 1vw;
+            cursor: pointer;
+            position: absolute;
+            z-index: 101;
+            margin: 10px;
+        }
+        .line1, .line2 {
+            background-color: rgb(122, 122, 122);
+            width: 6vh;
+            height: 0.5vh;
+            transition: transform 0.3s ease;
+        }
+        .hamburger:hover .line1 {
+            transform: translateX(-30px);
+        }
+        .hamburger:hover .line2 {
+            transform: translateX(30px);
+        }
+        .menu {
+            height: 100vh;
+            width: 0;
+            background-color: rgba(20, 20, 20, 0.8);
+            backdrop-filter: blur(10px);
+            border-radius: 10px;
+            position: fixed;
+            top: 0;
+            left: 0;
+            display: flex;
+            flex-direction: column;
+            overflow-y: auto;
+            transition: width 0.3s ease;
+        }
+        .menu.open {
+            width: 250px;
+        }
+        .newChat {
+            margin-top: 8vh;
+            margin-left: 1vw;
+            color: gray;
+            font-size: large;
             cursor: pointer;
+            font-weight: 400;
+            position: relative;
+            font-size: large;
+            transition: transform 0.3s ease;
+        }
+        .newChat:hover {
+            transform: scale(0.95);
         }
+        .prevChatsCont {
+            color: rgb(172, 171, 171);
+            margin-left: 1vw;
+            font-weight: 300;
+            display: flex;
+            flex-direction: column;
+            gap: 1vh;
+            position: relative;
+            font-size: medium;
         }
+        .prevChat {
+            min-height: 5vh;
+            cursor: pointer;
+            width: 90%;
+            display: flex;
+            align-items: center;
+            padding-left: 5%;
+            border-radius: 10px;
+            overflow: hidden;
+            padding-top: 1%;
+            padding-bottom: 1%;
+            position: relative;
+            transition: background-color 0.3s ease, transform 0.3s ease;
+        }
+        .prevChat:hover {
+            background-color: rgba(70, 70, 70, 1);
+            transform: translateY(5px);
+        }
+        .chatsTxt {
             color: #fdffdf;
+            margin-left: 1vw;
             font-size: 14px;
+            margin-top: 4vh;
+            margin-bottom: 3vh;
+            z-index: 100;
+            overflow: hidden;
+            min-height: 5vh;
+            display: flex;
+            align-items: center;
+        }
+        .container {
+            width: 99.5%;
+            max-width: 99.5%;
+            height: 90%;
+            position: absolute;
+            z-index: 50;
+            top: 8vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+            z-index: 1;
         }
+        .inputs {
+            width: 70%;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            background-color: rgba(51, 51, 51, 0.4);
+            padding: 10px;
+            border-top-right-radius: 50px;
+            border-bottom-left-radius: 20px;
+            border-top-left-radius: 20px;
+            border-bottom-right-radius: 50px;
+            font-size: large;
+            position: relative;
+            margin-top: auto;
+            align-self: center;
+            transition: width 0.3s ease;
+        }
+        .inputs.expanded {
+            width: 90%;
+        }
+        .textBox {
+            width: 90%;
+            background: none;
+            outline: none;
+            border: none;
+            color: rgb(161, 161, 161);
+            padding: 7px;
+            font-family: 'Inter';
+            resize: none;
+        }
+        .sendBtn {
+            background-color: white;
+            border: none;
+            color: black;
+            font-size: x-large;
+            cursor: pointer;
+            border-radius: 50%;
+            width: 6vh;
+            height: 6vh;
+            transition: background-color 0.3s ease;
+        }
+        .sendBtn:hover {
+            background-color: #e0e0e0;
+        }
+        .messages {
+            overflow-y: auto;
+            color: white;
+            padding: 10px;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+        }
+        .user {
             margin-left: auto;
+            max-width: 60%;
+            background-color: rgba(51, 51, 51, 0.4);
+            padding: 0.5vh 1.5vh 0.5vh 1.5vh;
+            text-align: left;
+            font-weight: 300;
+            border-radius: 10px;
+            line-height: 130%;
+            margin-bottom: 10px;
+        }
+        .user p {
+            color: #b4b4b4;
+            padding: 0;
+            opacity: 0.9;
         }
+        .ai {
+            text-align: left;
+            width: 70%;
+            margin-left: auto;
+            margin-right: auto;
+            margin-top: 2vh;
         }
+        .ai p {
+            opacity: 0.9;
+            font-weight: 300;
+            font-size: medium;
+            line-height: 1.6;
             color: #c5c5c5;
+            background-color: rgba(28, 28, 28, 0.5);
+            padding: 20px;
+            border-radius: 10px;
+            border: 2px solid rgba(255, 255, 255, 0.1);
+            font-family: 'Inter';
+            margin-bottom: 10px;
+        }
+        .subHeading, .heading {
+            padding: 1vh;
+            border-radius: 10px;
+            display: inline-block;
+            margin-bottom: 2vh;
+            margin-top: 2vh;
+        }
+        .subHeading {
+            background-color: rgba(59, 59, 59, 0.5);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .heading {
+            background-color: rgba(119, 16, 238, 0.55);
+            box-shadow: 6px 6px rgba(0, 0, 0, 0.5);
+        }
+        code {
+            border-radius: 15px;
+            background-color: #282a36;
+            color: #f8f8f2;
+            padding: 5px;
+            font-family: 'Fira Code', monospace;
+        }
+        pre {
+            background-color: #282a36;
+            color: #f8f8f2;
+            padding: 10px;
+            border-radius: 15px;
+            overflow-x: auto;
+            font-family: 'Fira Code', monospace;
+        }
+        .models {
+            position: relative;
+            margin: auto;
+            padding: 10px;
+            outline: none;
+            background-color: rgb(43, 43, 43);
+            color: rgb(177, 177, 177);
+            border: none;
+            border-radius: 10px;
+            transition: background-color 0.3s ease;
         }
+        .models:hover {
+            background-color: #383838;
+        }
+        .models option {
+            background-color: rgb(34, 34, 34);
+            color: #afafaf;
+            padding: 10px;
+        }
+        .alert {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 320px;
+            height: 320px;
+            display: flex;
+            flex-direction: column;
+            gap: 0px;
+            color: #d8d8d8;
+            background-color: #222222;
+            box-shadow: 6px 6px rgb(41, 41, 41);
+            justify-content: center;
+            z-index: 100;
+            border-radius: 15px;
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translate(-50%, -60%); }
+            to { opacity: 1; transform: translate(-50%, -50%); }
+        }
+        .alert p {
+            float: left;
+            font-family: 'Inter';
+            font-weight: 300;
+            font-size: 15px;
+            color: #cfcfcf;
+            opacity: 0.9;
+            padding-left: 10px;
+        }
+        .closeAlert {
+            margin-left: auto;
+            margin-right: 10px;
+            margin-top: 10px;
+            background-color: rgb(247, 102, 102);
+            padding: 10px;
+            cursor: pointer;
+            border-radius: 10px;
+            color: #ffffff;
+            transition: background-color 0.3s ease;
+        }
+        .closeAlert:hover {
+            background-color: #ff5757;
+        }
+        .discord {
+            margin: 10px;
+            text-decoration: none;
+            color: rgb(211, 211, 211);
+            padding: 7.5px;
+            border-radius: 10px;
+            background: linear-gradient(to right, #4A148C, #9c18e3);
+            cursor: pointer;
+            display: inline-block;
+            font-size: 13px;
+            max-width: 77px;
+            transition: background 0.3s ease;
+        }
+        .discord:hover {
+            background: linear-gradient(to right, #9c18e3, #4A148C);
+        }
+        .note {
+            text-align: center;
+            background-color: rgba(119, 16, 238, 0.55);
+            box-shadow: 6px 6px rgb(32, 32, 32);
+            margin: auto;
+            width: 70px;
+            padding: 10px;
+            border-radius: 10px;
+        }
+        .webSearch {
+            color: rgb(233, 233, 233);
+            background: transparent;
+            cursor: pointer;
+            border: none;
+            font-size: x-large;
+            transition: color 0.3s ease;
+        }
+        .webSearch:hover {
+            color: #ffcc00;
+        }
+        .generated-image {
+            margin-top: 20px;
+            text-align: center;
+        }
+        .generated-image img {
+            max-width: 80%;
+            height: auto;
+            border-radius: 10px;
+            border: 2px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        }
+        @media screen and (max-width: 780px) {
+            .menu {
+                background-color: rgba(20, 20, 20);
+            }
+            .inputs {
+                width: 85%;
+            }
+            .ai {
+                width: 90%;
+            }
+            .user {
+                max-width: 90%;
+            }
         }
     </style>
 </head>
 <body>
     <nav>
     </nav>
     <div class="container" id="container">
         <div class="messages" id="messages">
         </div>
         <div class="inputs">
+            <button id="imageGenBtn" class="webSearch"><i class="fa-solid fa-image"></i></button>
             <textarea name="" id="textBox" class="textBox" placeholder="Enter your message..."></textarea>
             <button id="sendBtn" class="sendBtn"><i class="fa-solid fa-arrow-up"></i></button>
         </div>
     </div>
+    <div class="alert" id="alert">
+        <div class="closeAlert" id="closeAlert">X</div>
+        <p class="note">Note</p>
+        <p>Welcome to Xylaria!</p>
+    </div>
+    <div class="textCustomization">
+        <div class="colors"></div>
+        <div class="fontSize"></div>
+        <div class="background"></div>
+    </div>
     <script>
+        document.getElementById('hamburger').addEventListener('click', function() {
+            document.getElementById('menu').classList.toggle('open');
+        });
+        document.getElementById('closeAlert').addEventListener('click', function() {
+            document.getElementById('alert').style.display = 'none';
+        });
+        document.getElementById('textBox').addEventListener('focus', function() {
+            document.querySelector('.inputs').classList.add('expanded');
+        });
+        document.getElementById('textBox').addEventListener('blur', function() {
+            if (!this.value) {
+                document.querySelector('.inputs').classList.remove('expanded');
             }
+        });
     </script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
+    <script>hljs.highlightAll();</script>
 </body>
 </html>