Merge pull request #2 from ProjectSegfault/form-update

WIP: Forms UI rework.
This commit is contained in:
Midou36O 2022-09-14 13:35:17 +00:00 committed by GitHub
commit a18f76d206
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 109 additions and 4 deletions

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
data/config.toml

View File

@ -11,6 +11,107 @@
color: #fff; color: #fff;
font-family: 'JetBrains Mono', 'JetBrainsMono Nerd Font', monospace font-family: 'JetBrains Mono', 'JetBrainsMono Nerd Font', monospace
} }
.container {
width: 100%;
max-width: 400px;
margin: 0 auto;
position: relative;
}
#contact input[type="token"],
#contact input[type="link"],
#contact textarea,
#contact select,
#contact button[type="submit"] {
font: 500 15px/16px "Roboto", sans-serif;
}
.container h1 {
text-align: center;
margin: 0;
padding: 0;
font-size: 2rem;
}
#contact textarea {
text-align: center;
border-radius: 5px;
margin-top: 10px;
width: 100%;
border: none;
color: #FFF;
background: #3b3b3b;
margin: 0 0 5px;
padding: 10px;
height: 100px;
max-width: 100%;
resize: none;
}
#contact input, select {
text-align: center;
border-radius: 5px;
color: #FFF;
width: 100%;
border: none;
background: #3b3b3b;
margin: 0 0 5px;
padding: 10px;
max-width: 100%;
}
#contact select {
width: 105%;
max-width: 105%;
}
#contact button[type="submit"] {
cursor: pointer;
width: 105%;
border: none;
background: #00d4aa;
color: #252525;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
border-radius: 5px;
}
#contact button[type="submit"]:hover {
background: #00a484;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact button[type="delete"] {
cursor: pointer;
width: 105%;
border: none;
background: #d10006;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
border-radius: 5px;
}
#contact button[type="delete"]:hover {
background: #990005;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact button[type="delete"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
a { a {
color: #00d4aa; color: #00d4aa;
@ -22,8 +123,10 @@
</style> </style>
</head> </head>
<body> <body>
<div class="container">
<h1>Post Announcement</h1> <h1>Post Announcement</h1>
<form <form
id="contact"
action="/api/announcements/post" action="/api/announcements/post"
method="POST" method="POST"
target="_blank" target="_blank"
@ -45,7 +148,6 @@
</select> </select>
</div> </div>
<textarea <textarea
id="title"
name="title" name="title"
rows="4" rows="4"
cols="25" cols="25"
@ -58,10 +160,11 @@
placeholder="Your link for more details" placeholder="Your link for more details"
/> />
<br /> <br />
<input type="submit" value="Submit" /> <button type="submit" />Submit</button>
</form> </form>
<h1>Delete Announcement</h1> <h1 style="margin-top: 20px;">Delete Announcement</h1>
<form <form
id="contact"
action="/api/announcements/delete" action="/api/announcements/delete"
method="POST" method="POST"
target="_blank" target="_blank"
@ -75,7 +178,8 @@
/> />
<br /> <br />
</div> </div>
<input type="submit" value="Submit" /> <button type="delete"/>Delete</button>
</form> </form>
</div>
</body> </body>
</html> </html>