Rewritten to use TailwindCSS and HTMX 🔥
This commit is contained in:
ForeverPyrite
@@ -7,19 +7,23 @@
|
||||
<title>Screw You Bardo</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||
<link rel="icon" type="image/x-icon" href="https://www.foreverpyrite.com/favicon.ico">
|
||||
<script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
|
||||
<script defer src="{{ url_for('static', filename='script.js') }}"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main class="container">
|
||||
<section id="response-section">
|
||||
<pre id="response-area">Response will appear here.</pre>
|
||||
<body class="font-sans flex justify-center items-center h-screen bg-[#1F1F1F] text-white">
|
||||
<main class="flex flex-col w-11/12 h-[90vh] bg-[#2E2E2E] rounded-lg shadow-lg overflow-hidden">
|
||||
<section id="response-section" class="flex-1 p-5 bg-[#1E1E1E] overflow-y-auto text-base leading-relaxed scroll-smooth">
|
||||
<pre id="response-area" class="whitespace-pre-wrap">Response will appear here.</pre>
|
||||
</section>
|
||||
|
||||
<section class="form-section">
|
||||
<form id="url-form">
|
||||
<input type="url" id="url_box" name="url" placeholder="Paste the lecture URL here." required autofocus>
|
||||
<button type="submit" id="submit">Submit</button>
|
||||
<section class="py-4 px-5 bg-[#3A3A3A]">
|
||||
<form id="url-form" hx-post="/process_url" hx-swap="none" class="flex gap-2">
|
||||
<input id="url_box" type="url" name="url" placeholder="Paste the lecture URL here." required autofocus
|
||||
class="flex-1 py-2 px-3 bg-[#4A4A4A] text-white text-base rounded-md focus:outline-none placeholder-[#B0B0B0]">
|
||||
<button type="submit" id="submit" class="py-2 px-5 bg-[#5A5A5A] text-white text-base rounded-md hover:bg-[#7A7A7A] disabled:bg-[#3A3A3A] disabled:cursor-not-allowed">
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@@ -1,88 +1,71 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const responseArea = document.getElementById('response-area');
|
||||
const responseSection = document.getElementById('response-section');
|
||||
const submitButton = document.getElementById('submit');
|
||||
const urlForm = document.getElementById('url-form');
|
||||
const urlBox = document.getElementById('url_box');
|
||||
|
||||
urlForm.addEventListener('submit', function(event) {
|
||||
event.preventDefault(); // Prevent form from submitting the traditional way
|
||||
const url = urlBox.value.trim();
|
||||
|
||||
if (!url) {
|
||||
responseArea.innerText = 'Please enter a URL.';
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear the input and update UI
|
||||
urlBox.value = "";
|
||||
submitButton.disabled = true;
|
||||
responseArea.innerText = 'Processing...';
|
||||
|
||||
// Process the URL
|
||||
fetch('/process_url', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: new URLSearchParams({ url: url })
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then(text => {
|
||||
if (text === "Processing started. Check /stream_output for updates.") {
|
||||
streamOutput(responseArea);
|
||||
} else {
|
||||
responseArea.innerText = text;
|
||||
submitButton.disabled = false;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error processing URL:', error);
|
||||
responseArea.innerText = 'Error processing URL: ' + error.message;
|
||||
submitButton.disabled = false;
|
||||
});
|
||||
});
|
||||
|
||||
function streamOutput(responseArea) {
|
||||
// Fetch the streaming output
|
||||
fetch('/stream_output')
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
const reader = response.body.getReader();
|
||||
const decoder = new TextDecoder("utf-8");
|
||||
|
||||
responseArea.innerHTML = "";
|
||||
|
||||
function readStream() {
|
||||
reader.read().then(({ done, value }) => {
|
||||
if (done) {
|
||||
submitButton.disabled = false;
|
||||
return;
|
||||
}
|
||||
const chunk = decoder.decode(value, { stream: true });
|
||||
responseArea.innerHTML += chunk;
|
||||
responseSection.scrollTop = responseSection.scrollHeight
|
||||
readStream();
|
||||
}).catch(error => {
|
||||
console.error('Error reading stream:', error);
|
||||
responseArea.innerText = 'Error reading stream: ' + error.message;
|
||||
submitButton.disabled = false;
|
||||
});
|
||||
}
|
||||
|
||||
readStream();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching stream:', error);
|
||||
responseArea.innerText = 'Error fetching stream: ' + error.message;
|
||||
submitButton.disabled = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const responseArea = document.getElementById('response-area');
|
||||
const responseSection = document.getElementById('response-section');
|
||||
const submitButton = document.getElementById('submit');
|
||||
const urlBox = document.getElementById('url_box');
|
||||
|
||||
// Before sending HTMX request, prepare UI and handle empty input
|
||||
document.body.addEventListener('htmx:beforeRequest', function(evt) {
|
||||
if (evt.detail.elt.id === 'url-form') {
|
||||
const url = urlBox.value.trim();
|
||||
if (!url) {
|
||||
evt.detail.shouldCancel = true;
|
||||
responseArea.innerText = 'Please enter a URL.';
|
||||
return;
|
||||
}
|
||||
urlBox.value = '';
|
||||
submitButton.disabled = true;
|
||||
responseArea.innerText = 'Processing...';
|
||||
}
|
||||
});
|
||||
|
||||
document.body.addEventListener('htmx:afterRequest', function(evt) {
|
||||
if (evt.detail.elt.id === 'url-form') {
|
||||
const text = evt.detail.xhr.responseText.trim();
|
||||
if (text === "Processing started. Check /stream_output for updates.") {
|
||||
streamOutput(responseArea, responseSection, submitButton);
|
||||
} else {
|
||||
responseArea.innerText = text;
|
||||
submitButton.disabled = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function streamOutput(responseArea, responseSection, submitButton) {
|
||||
// Fetch the streaming output
|
||||
fetch('/stream_output')
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
const reader = response.body.getReader();
|
||||
const decoder = new TextDecoder("utf-8");
|
||||
|
||||
responseArea.innerHTML = "";
|
||||
|
||||
function readStream() {
|
||||
reader.read().then(({ done, value }) => {
|
||||
if (done) {
|
||||
submitButton.disabled = false;
|
||||
return;
|
||||
}
|
||||
const chunk = decoder.decode(value, { stream: true });
|
||||
responseArea.innerHTML += chunk;
|
||||
responseSection.scrollTop = responseSection.scrollHeight;
|
||||
readStream();
|
||||
}).catch(error => {
|
||||
console.error('Error reading stream:', error);
|
||||
responseArea.innerText = 'Error reading stream: ' + error.message;
|
||||
submitButton.disabled = false;
|
||||
});
|
||||
}
|
||||
|
||||
readStream();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching stream:', error);
|
||||
responseArea.innerText = 'Error fetching stream: ' + error.message;
|
||||
submitButton.disabled = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,109 +1,3 @@
|
||||
@font-face {
|
||||
font-family: 'NimbusSansD';
|
||||
src: url('font-files/nimbus-sans-d-ot-light.woff2') format('woff2'),
|
||||
url('font-files/nimbus-sans-d-ot-light.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face{font-display:swap;font-family:NimbusSansD;font-style:normal;font-weight:400;src:url(/static/font/nimbus-sans-d-ot-light.woff2) format("woff2"),url(/static/font/nimbus-sans-d-ot-light.woff) format("woff")}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'NimbusSansD', sans-serif;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background-color: #1F1F1F;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 85vw;
|
||||
height: 90vh;
|
||||
background-color: #2E2E2E;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#response-section {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
background-color: #1E1E1E;
|
||||
overflow-y: auto;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
padding: 15px 20px;
|
||||
background-color: #3A3A3A;
|
||||
}
|
||||
|
||||
#response-area {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
#url-form {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#url_box {
|
||||
flex: 1;
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: #4A4A4A;
|
||||
color: #FFFFFF;
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#url_box::placeholder {
|
||||
color: #B0B0B0;
|
||||
}
|
||||
|
||||
#submit {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: #5A5A5A;
|
||||
color: #FFFFFF;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
#submit:hover {
|
||||
background-color: #7A7A7A;
|
||||
}
|
||||
|
||||
#submit:disabled {
|
||||
background-color: #3A3A3A;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Responsive Adjustments */
|
||||
@media (max-width: 600px) {
|
||||
.container {
|
||||
height: 95vh;
|
||||
}
|
||||
|
||||
#url_box {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#submit {
|
||||
font-size: 0.9rem;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:NimbusSansD,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.static{position:static}.flex{display:flex}.h-\[90vh\]{height:90vh}.h-screen{height:100vh}.w-11\/12{width:91.666667%}.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.scroll-smooth{scroll-behavior:smooth}.whitespace-pre-wrap{white-space:pre-wrap}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.bg-\[\#1E1E1E\]{--tw-bg-opacity:1;background-color:rgb(30 30 30/var(--tw-bg-opacity,1))}.bg-\[\#1F1F1F\]{--tw-bg-opacity:1;background-color:rgb(31 31 31/var(--tw-bg-opacity,1))}.bg-\[\#2E2E2E\]{--tw-bg-opacity:1;background-color:rgb(46 46 46/var(--tw-bg-opacity,1))}.bg-\[\#3A3A3A\]{--tw-bg-opacity:1;background-color:rgb(58 58 58/var(--tw-bg-opacity,1))}.bg-\[\#4A4A4A\]{--tw-bg-opacity:1;background-color:rgb(74 74 74/var(--tw-bg-opacity,1))}.bg-\[\#5A5A5A\]{--tw-bg-opacity:1;background-color:rgb(90 90 90/var(--tw-bg-opacity,1))}.p-5{padding:1.25rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-4{padding-bottom:1rem;padding-top:1rem}.font-sans{font-family:NimbusSansD,sans-serif}.text-base{font-size:1rem;line-height:1.5rem}.leading-relaxed{line-height:1.625}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.placeholder-\[\#B0B0B0\]::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(176 176 176/var(--tw-placeholder-opacity,1))}.placeholder-\[\#B0B0B0\]::placeholder{--tw-placeholder-opacity:1;color:rgb(176 176 176/var(--tw-placeholder-opacity,1))}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:bg-\[\#7A7A7A\]:hover{--tw-bg-opacity:1;background-color:rgb(122 122 122/var(--tw-bg-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-\[\#3A3A3A\]:disabled{--tw-bg-opacity:1;background-color:rgb(58 58 58/var(--tw-bg-opacity,1))}
|
||||
Reference in New Issue
Block a user