Continue refining frontend for poll creation

This commit is contained in:
Wolvan 2021-12-29 19:46:47 +01:00
parent 2f41df7264
commit 5f9f2efee7
2 changed files with 46 additions and 3 deletions

View file

@ -18,9 +18,9 @@
<section class="notepad"> <section class="notepad">
<div class="notepad-border"></div> <div class="notepad-border"></div>
<section class="poll-title"> <section class="poll-title">
<input type="text" maxlength="300" placeholder="Enter your question here"> <input id="poll-title" type="text" maxlength="300" placeholder="Enter your question here">
</section> </section>
<section class="poll-options"> <section id="poll-options" class="poll-options">
<div class="poll-option"> <div class="poll-option">
<input type="text" maxlength="300" placeholder="Enter your option here"> <input type="text" maxlength="300" placeholder="Enter your option here">
</div> </div>
@ -31,7 +31,20 @@
<input type="text" maxlength="300" placeholder="Enter your option here"> <input type="text" maxlength="300" placeholder="Enter your option here">
</div> </div>
</section> </section>
<section class="poll-footer"></section> <section class="poll-footer">
<select id="dupe-check">
<option value="ip" selected>IP-based duplication checking</option>
<option value="cookie">Cookie-based duplication checking</option>
<option value="none">No duplication checking</option>
</select>
<br>
<label>
<input type="checkbox" id="multiple">
<span>Allow multiple answers to be selected</span>
</label>
<br>
<button id="create-poll">Create poll</button>
</section>
</section> </section>
</main> </main>
<footer> <footer>

View file

@ -66,6 +66,9 @@ main .notepad .poll-option {
} }
main .notepad .poll-footer { main .notepad .poll-footer {
height: 180px; height: 180px;
padding: 10px;
padding-bottom: 0;
font-family: Arial, sans-serif;
} }
main .notepad .poll-title, main .notepad .poll-title,
main .notepad .poll-option, main .notepad .poll-option,
@ -84,7 +87,34 @@ main .notepad-border {
border-right: 2px solid red; border-right: 2px solid red;
} }
/* #endregion notepad */ /* #endregion notepad */
/* #region notepad-footer */
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 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 */ /* #endregion Main */
/* #region Footer */ /* #region Footer */
footer { footer {