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

78 lines
3.9 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>
Appease crawlers and embbeders `<meta>` tags have been added to relay information for websites trying to pull information from the page (like discord) as well as web crawlers to index the page.
2022-01-30 17:46:59 +01:00
<meta name="description" content="Simple, free and open source way to host polls for people to vote on. Create your own polls and share them with others!">
<meta property="og:type" content="website" />
<meta property="og:title" content="{{ TITLE }}" />
<meta property="og:description" content="Simple, free and open source way to host polls for people to vote on. Create your own polls and share them with others!" />
<meta property="og:url" content="{{ CANONICAL_HOST }}" />
Implement favicon and embbed icon Thanks to Shydale for lending me their OC checkbox. She a cute.
2022-02-02 21:42:18 +01:00
<meta property="og:image" content="{{ HOST }}/static/img/icon.png" />
Appease crawlers and embbeders `<meta>` tags have been added to relay information for websites trying to pull information from the page (like discord) as well as web crawlers to index the page.
2022-01-30 17:46:59 +01:00
<meta property="og:site_name" content="Poll.Horse" />
<meta content="#FFD756" data-react-helmet="true" name="theme-color" />
<link rel="canonical" href="{{ CANONICAL_HOST }}" />
<meta name=”robots” content=”index,nofollow”>
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 header based safety features Using the `helmet` package, a certain set of security critical headers are set to prevent XSS attacks and the like.
2022-01-30 16:59:11 +01:00
<script nonce="{{ CORS_SCRIPT_NONCE }}" type="text/javascript">
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
const MAX_POLL_OPTIONS = "{{ MAX_POLL_OPTIONS }}";
const MAX_CHARACTER_LENGTH = "{{ MAX_CHARACTER_LENGTH }}";
</script>
Implement header based safety features Using the `helmet` package, a certain set of security critical headers are set to prevent XSS attacks and the like.
2022-01-30 16:59:11 +01:00
<script nonce="{{ CORS_SCRIPT_NONCE }}" type="text/javascript" src="/static/js/index.js" defer="true" async="true"></script>
Implement favicon and embbed icon Thanks to Shydale for lending me their OC checkbox. She a cute.
2022-02-02 21:42:18 +01:00
<!-- FAVICON_MARKER -->
<!-- /FAVICON_MARKER -->
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>
Appease crawlers and embbeders `<meta>` tags have been added to relay information for websites trying to pull information from the page (like discord) as well as web crawlers to index the page.
2022-01-30 17:46:59 +01:00
<h2>Make voting on things simpler</h2>
Begin designing the UI
2021-12-29 19:22:38 +01:00
</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>
Use git commit hash instead of version for dev This way people can go straight to the commit that has caused the dev page to be built and it is clear what version the site is based on.
2022-01-30 19:24:54 +01:00
<div class="copyright">{{ GIT_URL }} {{ 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