Huge update.

resource/template/home.html

@@ -1,63 +1,27 @@
 {% extends 'base.html' %}
-{% block title %}Home{% endblock %}
+{% block title %}Echo | Home{% endblock %}
 {% block content %}
     <h1>Hello, hello, hello...</h1>
     <p>Yeah, it's early.</p>
+
+    <h3>Firstly, name:</h3>
     <div class="room-join-box">
         <input type="text" id="username-input" class="room-input" placeholder="Your name">
     </div>
 
+    <h3>Join an Existing Room?</h3>
     <div class="room-join-box">
         <input type="text" id="room-code-input" class="room-input" placeholder="Enter Room Code" maxlength="10">
         <button class="room-button" id="join-button">Join</button>
     </div>
 
+
+    <h3>Create a New Room?</h3>
     <div class="room-join-box">
         <button class="room-button" id="create-button">Create New Room</button>
     </div>
 
 
-    <script>
-function getUsername() {
-    const username = document.getElementById('username-input').value.trim();
-    if (!username) {
-        alert("Please enter your name.");
-        throw new Error("Username required");
-    }
-    localStorage.setItem('username', username);
-    return username;
-}
 
-document.getElementById('join-button').addEventListener('click', () => {
-    try {
-        getUsername();
-        const code = document.getElementById('room-code-input').value.trim();
-        if (code) {
-            window.location.href = `/room/${code}`;
-        } else {
-            alert("Enter a room code.");
-        }
-    } catch (_) {}
-});
-
-document.getElementById('create-button').addEventListener('click', async () => {
-    try {
-        getUsername();
-        const res = await fetch('/api/room', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({})
-        });
-        const data = await res.json();
-        if (data.code) {
-            window.location.href = `/room/${data.code}`;
-        } else {
-            alert("Failed to create room.");
-        }
-    } catch (_) {}
-});
-</script>
-
-
-    </script>
-{% endblock %}
+    <script src="{{ url_for('static', filename='js/home.js') }}"></script>
+{% endblock %}