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 { FastifyInstance } from "fastify";
import { engineList } from "../handlers/main"; 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) { export default async function parseRoute(fastify: FastifyInstance) {
fastify.get("/start", async (_, reply) => { 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> <!DOCTYPE html>
<html> <html>
<head> <head>
@ -6,32 +7,74 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="<%= desc %>"> <meta name="description" content="<%= desc %>">
<title>txt. main page</title> <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> </head>
<body> <body>
<form action="/"> <main>
<label for="url">URL</label> <header>
<input type="text" name="url"> <h1>txt.</h1>
<p> <p><%= desc %></p>
<label for="engine">Engine</label> </header>
<select name="engine"> <form action="/" method="get" class="input-grid">
<option selected value>Standard</option> <div class="input">
<% engineList.forEach((engine)=>{ <input type="text" name="url" id="url" placeholder="URL">
%> </div>
<option value="<%= engine %>"> <div class="input">
<%= engine %> <input type="submit" id="submit" value="Parse">
</option> </div>
<% }) %> <div class="input-row">
</select> <div class="input">
</p> <label for="engine">Engine</label>
<p> <select name="engine">
<label for="format">Format</label> <option value="" selected>Default</option>
<select name="format"> <% engineList.forEach((engine) => { %>
<option selected value>Standard</option> <option value="<%= engine %>">
<option value="html">HTML</option> <%= engine %>
<option value="text">Text</option> </option>
</select> <% }) %>
</p> </select>
<input type="submit"> </div>
</form> <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> </body>
</html> </html>