64 lines
1.7 KiB
HTML
64 lines
1.7 KiB
HTML
{% 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 %} |