DiplomGenerator/index.html

61 lines
1.9 KiB
HTML
Raw Normal View History

2023-10-16 17:07:43 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Diplom Generator</title>
<link rel="stylesheet" href="https://decicus-cdn.b-cdn.net/water.css/v2.1.1/dark.min.css" integrity="sha384-cJBdsSYaB37lARFjqUmJVoGdRQaQndlSkVAOB0QSVMzFhBAQ6Aymcu3PIkS8CkWl" crossorigin="anonymous">
<style type="text/css">
body {
max-width: 85%;
}
.hidden {
display: none;
}
</style>
</head>
<h1>Diplom Generator</h1>
<form id="form">
<input type="hidden" name="template" value="diplom-1.png">
2023-10-16 17:28:09 +02:00
<label for="top">TilDelT:</label>
2023-10-16 17:07:43 +02:00
<input type="text" name="top" placeholder="Name">
2023-10-16 17:28:09 +02:00
<label for="bottom">gRUnNLAG:</label>
2023-10-16 17:07:43 +02:00
<input type="text" name="bottom" placeholder="Text">
2024-06-19 21:52:42 +02:00
<label for="bottomSecond">gRUnNLAG #2 (Valgfritt):</label>
<input type="text" name="bottomSecond" placeholder="Text">
2023-10-16 17:07:43 +02:00
<button type="submit" id="submit">Generate</button>
</form>
<img class="hidden" id="preview" src="">
2023-10-16 17:28:09 +02:00
<br />
<a href="https://git.je/Alex/DiplomGenerator">Code can be found here</a>
2023-10-16 17:07:43 +02:00
<script>
const form = document.getElementById('form');
form.addEventListener('submit', function(e) {
e.preventDefault();
});
const submit = document.getElementById('submit');
const preview = document.getElementById('preview');
submit.addEventListener('click', function() {
const url = new URL(window.location.href);
url.pathname = 'generate.php';
url.searchParams.set('template', form.elements.template.value);
url.searchParams.set('top', form.elements.top.value);
url.searchParams.set('bottom', form.elements.bottom.value);
2024-06-19 21:52:42 +02:00
url.searchParams.set('bottomSecond', form.elements.bottomSecond.value);
2023-10-16 17:07:43 +02:00
preview.src = url.href;
preview.classList.remove('hidden');
});
</script>
</html>