mirror of
https://github.com/Wolvan/poll.horse.git
synced 2024-11-30 07:57:59 +01:00
9fa3eabad1
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.
147 lines
No EOL
2.8 KiB
CSS
147 lines
No EOL
2.8 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
background-color: #323232;
|
|
font-family: 'Caveat', cursive;
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
background-color: transparent;
|
|
color: #323232;
|
|
font-size: 1.5em;
|
|
outline: none;
|
|
font-family: 'Caveat', cursive;
|
|
}
|
|
|
|
/* #region Header */
|
|
header {
|
|
width: 100%;
|
|
height: 60px;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
header h1 {
|
|
font-size: 3em;
|
|
}
|
|
/* #endregion Header */
|
|
|
|
/* #region Main */
|
|
main {
|
|
min-height: calc(100% - 60px - 120px - 60px);
|
|
position: relative;
|
|
padding-bottom: 120px;
|
|
}
|
|
/* #region notepad */
|
|
main .notepad {
|
|
position: relative;
|
|
top: 60px;
|
|
width: 40%;
|
|
background-color: #ffd756;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
main .notepad .poll-title {
|
|
height: 70px;
|
|
}
|
|
main .notepad .poll-title input {
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
}
|
|
main .notepad .poll-option {
|
|
height: 50px;
|
|
}
|
|
main .notepad .poll-title,
|
|
main .notepad .poll-option {
|
|
border-bottom: 2px solid #b1b874;
|
|
}
|
|
main .notepad .poll-footer {
|
|
height: 180px;
|
|
padding: 10px;
|
|
padding-bottom: 0;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
main .notepad .poll-title,
|
|
main .notepad .poll-option,
|
|
main .notepad .poll-footer {
|
|
padding-left: 10%;
|
|
padding-right: 5px;
|
|
width: calc(90% - 5px);
|
|
}
|
|
|
|
main .notepad-border {
|
|
position: absolute;
|
|
left: 5%;
|
|
height: 100%;
|
|
width: 5px;
|
|
border-left: 2px solid red;
|
|
border-right: 2px solid red;
|
|
}
|
|
/* #endregion notepad */
|
|
/* #region notepad-footer */
|
|
main .notepad .poll-footer input[type="submit"],
|
|
main .notepad .poll-footer button {
|
|
padding: 0 30px;
|
|
height: 50px;
|
|
border-radius: 10px;
|
|
border: none;
|
|
background-color: #a8a8a8;
|
|
cursor: pointer;
|
|
font-size: 1.25em;
|
|
transition: background-color 0.2s;
|
|
color: #fff;
|
|
margin-right: 5px;
|
|
}
|
|
main .notepad .poll-footer input[type="submit"]:hover,
|
|
main .notepad .poll-footer button:hover {
|
|
background-color: #b6b6b6;
|
|
}
|
|
|
|
#create-poll {
|
|
background-color: #cf2828;
|
|
}
|
|
#create-poll:hover {
|
|
background-color: #e94747;
|
|
}
|
|
main .notepad .poll-footer input[type="checkbox"] {
|
|
margin: 10px 0;
|
|
margin-right: 5px;
|
|
}
|
|
/* #endregion notepad-footer */
|
|
/* #endregion Main */
|
|
/* #region Footer */
|
|
footer {
|
|
background-color: #292929;
|
|
width: 100%;
|
|
height: 60px;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
footer ul {
|
|
text-align: center;
|
|
list-style-type: none;
|
|
}
|
|
footer ul li {
|
|
display: inline-block;
|
|
padding: 10px;
|
|
}
|
|
footer ul li a {
|
|
color: #a9a9a9;
|
|
text-decoration: none;
|
|
}
|
|
footer ul li a:hover {
|
|
color: #c3c3c3;
|
|
}
|
|
footer .copyright {
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
/* #endregion Footer */ |