PonyMirrors/poll.horse
1
0
Fork 0
mirror of https://github.com/Wolvan/poll.horse.git synced 2024-11-22 21:07:58 +01:00
Code Issues Projects Releases Packages Wiki Activity
poll.horse/frontend/html/index.html

59 lines
2.6 KiB
HTML
Raw Normal View History

Build frontend loader system A custom server-side renderer is used to deliver pages to the client with values defined on load. This makes templating easier.
2021-12-28 23:49:18 +01:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ TITLE }}</title>
Begin designing the UI
2021-12-29 19:22:38 +01:00
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;700&display=swap" rel="stylesheet">
Build frontend loader system A custom server-side renderer is used to deliver pages to the client with values defined on load. This makes templating easier.
2021-12-28 23:49:18 +01:00
<link rel="stylesheet" href="/static/css/main.css">
Implement Form Expansion If more than 3 options are written down, additional inputs will load in to allow more options. The maximum cap of options currently is set to 255 but can be configured in Config.ts. Likewise, the input length can also be controlled from there.
2022-01-01 14:36:25 +01:00
<script type="text/javascript">
const MAX_POLL_OPTIONS = "{{ MAX_POLL_OPTIONS }}";
const MAX_CHARACTER_LENGTH = "{{ MAX_CHARACTER_LENGTH }}";
</script>
<script type="text/javascript" src="/static/js/index.js" defer="true" async="true"></script>
Build frontend loader system A custom server-side renderer is used to deliver pages to the client with values defined on load. This makes templating easier.
2021-12-28 23:49:18 +01:00
</head>
<body>
Begin designing the UI
2021-12-29 19:22:38 +01:00
<header>
<h1>Poll.horse</h1>
<h3>Make voting on things simpler</h3>
</header>
<main>
Implement error message display The error and visibility is set by the frontend server-side renderer.
2022-01-01 13:54:58 +01:00
<section class="error {{ FORM_SUBMISSION_ERROR_SHOWN_CLASS }}">
{{ FORM_SUBMISSION_ERROR }}
</section>
Begin designing the UI
2021-12-29 19:22:38 +01:00
<section class="notepad">
<div class="notepad-border"></div>
Make frontend js-less The frontend should work without having JS enabled. JS will enhance the experience but should under no circumstance be necessary. To achieve this, the entire entry system has been turned into a form that posts its values to a new backend path specifically made to take form responses. Instead of returning an API response, it also redirects the browser to either the voting page on successful creation or the frontpage with a bunch of get parameters that are used to prefill the form in a server-side rendering process. An error parameter is also given but there is no way to display said error for now.
2022-01-01 04:13:24 +01:00
<form action="{{ BACKEND_BASE_PATH }}/_backend/poll-form" method="POST">
<section class="poll-title">
Implement Form Expansion If more than 3 options are written down, additional inputs will load in to allow more options. The maximum cap of options currently is set to 255 but can be configured in Config.ts. Likewise, the input length can also be controlled from there.
2022-01-01 14:36:25 +01:00
<input id="poll-title" name="poll-title" type="text" maxlength="{{ MAX_CHARACTER_LENGTH }}" placeholder="Enter your question here" value="{{ FORM_TITLE }}">
Make frontend js-less The frontend should work without having JS enabled. JS will enhance the experience but should under no circumstance be necessary. To achieve this, the entire entry system has been turned into a form that posts its values to a new backend path specifically made to take form responses. Instead of returning an API response, it also redirects the browser to either the voting page on successful creation or the frontpage with a bunch of get parameters that are used to prefill the form in a server-side rendering process. An error parameter is also given but there is no way to display said error for now.
2022-01-01 04:13:24 +01:00
</section>
<section id="poll-options" class="poll-options">
{{ FORM_OPTION_DIVS }}
</section>
<section class="poll-footer">
<select id="dupe-check" name="dupe-check">
<option value="ip" {{ FORM_DUPECHECK_IP }}>IP-based duplication checking</option>
<option value="cookie" {{ FORM_DUPECHECK_COOKIE }}>Cookie-based duplication checking</option>
<option value="none" {{ FORM_DUPECHECK_NONE }}>No duplication checking</option>
</select>
<br>
<label>
<input type="checkbox" name="multi-select" {{ FORM_MULTI_SELECT }} id="multiple">
Optimize for small screens A sensible min width is sit to avoid cutting off anything and text is shortened to be suitable for small screen sizes without getting line- wrapped.
2022-01-01 13:54:30 +01:00
<span>Multiple Choice</span>
Make frontend js-less The frontend should work without having JS enabled. JS will enhance the experience but should under no circumstance be necessary. To achieve this, the entire entry system has been turned into a form that posts its values to a new backend path specifically made to take form responses. Instead of returning an API response, it also redirects the browser to either the voting page on successful creation or the frontpage with a bunch of get parameters that are used to prefill the form in a server-side rendering process. An error parameter is also given but there is no way to display said error for now.
2022-01-01 04:13:24 +01:00
</label>
<br>
<input type="submit" name="submit" value="Create poll" id="create-poll">
</form>
Continue refining frontend for poll creation
2021-12-29 19:46:47 +01:00
</section>
Begin designing the UI
2021-12-29 19:22:38 +01:00
</section>
</main>
<footer>
<ul>
Add Github Repo to Footer
2022-01-01 14:45:16 +01:00
<li><a href="https://github.com/Wolvan/poll.horse" target="_blank">Github Repo</a></li>
Begin designing the UI
2021-12-29 19:22:38 +01:00
</ul>
<div class="copyright">© 2021 Wolvan</div>
</footer>
Build frontend loader system A custom server-side renderer is used to deliver pages to the client with values defined on load. This makes templating easier.
2021-12-28 23:49:18 +01:00
</body>
</html>
Reference in a new issue Copy permalink