update

app/templates/noise_letter.html

@@ -0,0 +1,64 @@
+{% extends "base.html" %}
+
+{% block title %}Noise Letter{% endblock %}
+
+{% block css %}
+<style>
+    .noise-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        min-height: 80vh;
+        background-color: white;
+        color: black;
+        font-family: monospace;
+        padding: 20px;
+        margin-top: 20px;
+    }
+
+    #controls {
+        margin-bottom: 20px;
+        display: flex;
+        gap: 10px;
+        width: 100%;
+        max-width: 600px;
+        justify-content: center;
+    }
+
+    #container {
+        width: 100%;
+        max-width: 1200px;
+        height: 400px;
+        border: 1px solid #ccc;
+        background-color: white;
+    }
+
+    canvas {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="noise-wrapper rounded-lg">
+    <div id="controls">
+        <input type="text" id="textInput" maxlength="12" placeholder="ENTER TEXT (MAX 12)"
+            class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 placeholder-gray-400">
+        <button id="renderBtn"
+            class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
+            RENDER
+        </button>
+    </div>
+    <div id="container">
+        <canvas id="glcanvas"></canvas>
+    </div>
+    <p class="mt-4 text-gray-600 text-sm">Visualizing text as noise signal</p>
+</div>
+{% endblock %}
+
+{% block js %}
+<script src="{{ url_for('static', path='js/noise_letter.js') }}"></script>
+{% endblock %}