Basic HTML + CSS; description moved to template

This commit is contained in:
DarkCat09 2023-08-15 15:55:18 +04:00
parent f688304c07
commit 4dbc4fc8a0
No known key found for this signature in database
GPG Key ID: 4785B6FB1C50A540
2 changed files with 69 additions and 31 deletions

View File

@ -1,13 +1,8 @@
import { FastifyInstance } from "fastify";
import { engineList } from "../handlers/main";
const desc = (
"txtdot is a HTTP proxy that parses text, links and pictures " +
"from pages reducing internet traffic, removing ads and heavy scripts"
);
export default async function parseRoute(fastify: FastifyInstance) {
fastify.get("/start", async (_, reply) => {
return reply.view("/templates/start.ejs", { desc, engineList });
return reply.view("/templates/start.ejs", { engineList });
});
}

View File

@ -1,3 +1,4 @@
<% const desc = "txtdot is a HTTP proxy that parses text, links and pictures from pages reducing internet traffic, removing ads and heavy scripts" %>
<!DOCTYPE html>
<html>
<head>
@ -6,32 +7,74 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="<%= desc %>">
<title>txt. main page</title>
<!-- CSS must be moved to a separate file later -->
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-size: 1.1rem;
}
main {
max-width: 50rem;
width: fit-content;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.input-grid {
display: grid;
grid-template-columns: auto min-content;
width: fit-content;
}
.input-row {
display: flex;
flex-direction: row;
align-items: center;
}
#url {
width: 100%;
}
</style>
</head>
<body>
<form action="/">
<label for="url">URL</label>
<input type="text" name="url">
<p>
<label for="engine">Engine</label>
<select name="engine">
<option selected value>Standard</option>
<% engineList.forEach((engine)=>{
%>
<option value="<%= engine %>">
<%= engine %>
</option>
<% }) %>
</select>
</p>
<p>
<label for="format">Format</label>
<select name="format">
<option selected value>Standard</option>
<option value="html">HTML</option>
<option value="text">Text</option>
</select>
</p>
<input type="submit">
</form>
<main>
<header>
<h1>txt.</h1>
<p><%= desc %></p>
</header>
<form action="/" method="get" class="input-grid">
<div class="input">
<input type="text" name="url" id="url" placeholder="URL">
</div>
<div class="input">
<input type="submit" id="submit" value="Parse">
</div>
<div class="input-row">
<div class="input">
<label for="engine">Engine</label>
<select name="engine">
<option value="" selected>Default</option>
<% engineList.forEach((engine) => { %>
<option value="<%= engine %>">
<%= engine %>
</option>
<% }) %>
</select>
</div>
<div class="input">
<label for="format">Format</label>
<select name="format">
<option value="html" selected>HTML</option>
<option value="text">Text</option>
</select>
</div>
</div>
</form>
</main>
</body>
</html>