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

62 lines
3 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">
Add non-JS way of adding options A new button has been added (which gets automatically removed by JS) that lets a user add a new option. Also, an XSS exploit has been fixed.
2022-01-11 21:00:44 +01:00
<link rel="stylesheet" href="/static/css/index.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">
Add non-JS way of adding options A new button has been added (which gets automatically removed by JS) that lets a user add a new option. Also, an XSS exploit has been fixed.
2022-01-11 21:00:44 +01:00
<div id="extend-message">Used <span id="options-counter">0</span>/{{ MAX_POLL_OPTIONS }} options.<br>New boxes appear automatically.</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
<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>
Add non-JS way of adding options A new button has been added (which gets automatically removed by JS) that lets a user add a new option. Also, an XSS exploit has been fixed.
2022-01-11 21:00:44 +01:00
<input type="submit" name="submit" value="Create poll" id="submit-button">
<input type="submit" name="submit" value="Add options" formaction="#" formmethod="get" id="add-options-button">
Move closing tag into the right position
2022-01-06 15:36:03 +01:00
</section>
</form>
Begin designing the UI
2021-12-29 19:22:38 +01:00
</section>
</main>
<footer>
<ul>
Serverside render footer This way it's easy to add new links or a changed copyright to the footer on all pages.
2022-01-04 22:11:27 +01:00
{{ FOOTER_LINKS }}
Begin designing the UI
2021-12-29 19:22:38 +01:00
</ul>
Add version of software to footer The version also includes a link to the github repo tag of that version's release build.
2022-01-12 19:53:19 +01:00
<div class="copyright"><a href="https://github.com/Wolvan/poll.horse/releases/tag/v{{ SYSTEM_VERSION }}">v{{ SYSTEM_VERSION }}</a> {{ FOOTER_COPYRIGHT }}</div>
Begin designing the UI
2021-12-29 19:22:38 +01:00
</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