You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

90 lines
2.3 KiB

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Need a webpage?</title>
<meta name="description" content="A configurable webpage generator to quickly bootstrap your online presence">
<link rel="stylesheet" href="/engine/bases/default.css" />
body {
text-align: center;
form {
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
padding: 2rem;
margin: 0 auto;
max-width: 600px;
form label {
text-align: right;
.button {
display: inline-block;
padding: 1rem;
border: 1px solid blue;
border-radius: 4px;
font-weight: bold;
margin: 1rem;
text-decoration: none;
transition: all 250ms ease-in-out;
.button:focus {
color: white;
background: blue;
<header id="header">
<h1>Webpage Generator</h1>
<aside id="aside">
<main id="main">
Out of respect for your preferences, the engine has pre-compiled an example output file based on the default configuration options. To unlock the full customization engine, you'll need to enable JavaScript.
If you'd first like to peruse the source code for this website, it's <a href="">available in full here</a>. You can also view-source, since nothing is minified or obfuscated.
<legend>Customization Options</legend>
<form id="customization-form">
<label for="layout">
<select id="layout"></select>
<label for="palette">
<select id="palette"></select>
<label for="skin">
<select id="skin"></select>
<a class="button" href="/default.html" id="customizer-demo">
<footer id="footer">
<script type="module" src="browser.js"></script>