Websites/liljudd-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity

feat: added styling to config page

Browse source
This commit is contained in:
moonleay 2024-01-06 03:30:33 +01:00 committed by aronmal
parent 1d4f7e6fc6
commit 712affc83d
Signed by: aronmal
GPG key ID: 816B7707426FC612
2 changed files with 89 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
src/routes/config.tsx
View file

@ -1,63 +1,40 @@
import "../styles/pages/config.scss";
function config() {
return (
<>
<h1>Configure li&apos;l Judd</h1>
<div>
<h3 class={"centered"}>Configure li&apos;l Judd in</h3>
<div class={"config"}>
<div>
<img src="" alt="Server pfp" />
<label>
<select>
<option value="">--Please choose a server--</option>
<option value="server id">Server 1</option>
<option value="server id">Server 2</option>
<option value="server id">Server 3</option>
<option value="server id">Server 4</option>
<option value="server id">Server 5</option>
</select>
</label>
<div class={"horizontal centered"}>
<img class={"guildpfp"} src="https://cdn.discordapp.com/icons/1040502664506646548/bb5a51c4659cf47bdd942bb11e974da7.webp?size=240" alt="Server pfp" />
<h1>li'l Judds home base</h1>
</div>
</div>
<article>
<h2>Timezone</h2>
<p>Set the timezone for your server.</p>
<label>
<select>
<option value="-11">UTC-11:00</option>
<option value="-10">UTC-10:00</option>
<option value="-9">UTC-09:00</option>
<option value="-8">UTC-08:00</option>
<option value="-7">UTC-07:00</option>
<option value="-6">UTC-06:00</option>
<option value="-5">UTC-05:00</option>
<option value="-4">UTC-04:00</option>
<option value="-3">UTC-03:00</option>
<option value="-2">UTC-02:00</option>
<option value="-1">UTC-01:00</option>
<option value="0">UTC+00:00</option>
<option value="1">UTC+01:00</option>
<option value="2">UTC+02:00</option>
<option value="3">UTC+03:00</option>
<option value="4">UTC+04:00</option>
<option value="5">UTC+05:00</option>
<option value="6">UTC+06:00</option>
<option value="7">UTC+07:00</option>
<option value="8">UTC+08:00</option>
<option value="9">UTC+09:00</option>
<option value="10">UTC+10:00</option>
<option value="11">UTC+11:00</option>
<option value="12">UTC+12:00</option>
<option value="-1">UTC-1:00</option>
<option value="0">UTC+0:00</option>
<option value="1">UTC+1:00</option>
</select>
</label>
</article>
<section>
<div class={"centered"}>
<h2>Features</h2>
<p>Configure the features of the bot</p>
</div>
<article>
<div class={"horizontal"}>
<h3>Time Planning</h3>
<input type="checkbox" id="timeplanning" />
<p>Make the bot send a planner into a channel</p>
<p>Select </p>
<label>
<input type="checkbox" id="time planning" />
</div>
<label class={"horizontal"}>
<p class={"marg_right_5px"}>Target channel:</p>
<select>
<option value="id">Channel 1</option>
<option value="id">Channel 2</option>
@ -65,20 +42,15 @@ function config() {
<option value="id">Channel 4</option>
</select>
</label>
</article>
<article>
<h3>Planning Roles</h3>
<input type="checkbox" id="planningroles" />
<p>Add roles to the "Time Planning" feature.</p>
<p>
This feature is bound to the "Time Planning" feature. It will be
activated in the same channel.
</p>
<div class={"horizontal"}>
<h4>Enable pingable Roles</h4>
<input type="checkbox" id="pingableroles" />
</div>
</article>
</section>
<button>Apply</button>
</div>
</>
</div>
);
}

38
src/styles/pages/config.scss Normal file
View file

@ -0,0 +1,38 @@
.guildpfp {
width: 50px;
height: 50px;
border-radius: 100%;
}
.horizontal {
display: flex;
flex-direction: row;
h1 {
margin-left: 10px;
}
p, h3, h4 {
margin-right: 10px;
}
}
.marg_right_5px {
margin-right: 10px;
}
.centered {
text-align: center;
justify-content: center;
align-items: center;
}
.config {
article {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 4px;
padding: 1rem;
max-width: 1100px;
margin: 1rem auto;
width: 100%;
}
}