parent
a3109819bd
commit
8ddc68ac7c
@ -0,0 +1,126 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,900&display=swap');
|
||||
:root
|
||||
{
|
||||
--card-color: rgb(23, 23, 23);
|
||||
}
|
||||
body
|
||||
{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
background-color: #071c24;
|
||||
}
|
||||
|
||||
#userWrapper
|
||||
{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1em;
|
||||
justify-content: center;
|
||||
margin-top:3vh;
|
||||
margin-left: 10%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
height: 15vh;
|
||||
width: 80%;
|
||||
background-color: var(--card-color);
|
||||
border-radius: 10px;
|
||||
border: 1px solid #fffff042;
|
||||
}
|
||||
#avatar
|
||||
{
|
||||
flex-direction: column;
|
||||
background-color: ivory;
|
||||
height: 10vh;
|
||||
width: 10vh;
|
||||
background-size: 10vh 10vh;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.userNameWrapper
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 20vh;
|
||||
max-width: 70%;
|
||||
height: 15vh;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
#userName
|
||||
{
|
||||
margin: 0;
|
||||
position: relative;
|
||||
|
||||
font-size: 2.5em;
|
||||
font-family: 'Lato';
|
||||
font-weight: bolder;
|
||||
white-space: pre-wrap;
|
||||
color: rgb(15, 98, 131);
|
||||
}
|
||||
|
||||
|
||||
#maindisplay
|
||||
{
|
||||
width: 90%;
|
||||
margin-top: 2vh;
|
||||
margin-left: 5%;
|
||||
color:white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.strike
|
||||
{
|
||||
width: 100%;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: var(--card-color);
|
||||
border-radius: 10px;
|
||||
border: 1px solid #fffff042;
|
||||
}
|
||||
.strike-info > h3 > span> img
|
||||
{
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
transform: translateY(0.25em);
|
||||
}
|
||||
.strike-info > h3 > span
|
||||
{
|
||||
background-color: rgb(44, 151, 238);
|
||||
height: 5em;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding-left: 0.2em;
|
||||
padding-right: 0.2em;
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
.strike-info > h3 > span.striked
|
||||
{
|
||||
background-color: rgb(58, 23, 23);
|
||||
}
|
||||
.strike-info {
|
||||
flex: 4;
|
||||
}
|
||||
|
||||
.actions {
|
||||
flex:2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
color:white;
|
||||
cursor: pointer;
|
||||
margin-right: 1em;
|
||||
|
||||
}
|
||||
.actions >div:hover
|
||||
{
|
||||
background-color: darkslategray;
|
||||
border:none;
|
||||
border-radius: 5px;
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
<% strikes.forEach(strike=>{%>
|
||||
<div class="strike">
|
||||
<div class="strike-info">
|
||||
<h3> User:
|
||||
<span class="striked">
|
||||
<% if (strike.strokedAvatar !== 'NOAVATAR') { %>
|
||||
<img src="https://cdn.discordapp.com/avatars/<%= strike.strokedID %>/<%= strike.strokedAvatar %>.jpeg" alt="Striker Avatar">
|
||||
<% } %>
|
||||
<%= strike.strokedName %>
|
||||
</span>
|
||||
was struck
|
||||
</h3>
|
||||
<h3> by:
|
||||
<span>
|
||||
<% if (strike.strikerAvatar !== 'NOAVATAR') { %>
|
||||
<img src="https://cdn.discordapp.com/avatars/<%= strike.strikerID %>/<%= strike.strikerAvatar %>.jpeg" alt="Striker Avatar">
|
||||
<% } %>
|
||||
<%= strike.strikerName %>
|
||||
</span>
|
||||
</h3>
|
||||
<h3> With the reason: <%= strike.reason %> </h3>
|
||||
<h5> Lasting until: <%=new Date(strike.expireAt).toDateString()%> </h5>
|
||||
</div>
|
||||
<% if(!strike.validated){ %>
|
||||
<div class="actions">
|
||||
<div>
|
||||
<h4 hx-put="/strikes/<%= strike.guildID %>/<%= moderator%>/<%= strike._id %>" hx-target="#maindisplay"> Validate ✔</h4>
|
||||
</div>
|
||||
<div>
|
||||
<h4 hx-delete="/strikes/<%= strike.guildID %>/<%= moderator%>/<%= strike._id %>" hx-target="#maindisplay"> Remove ❌</h4>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
|
||||
<% });%>
|
||||
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link rel="shortcut icon" href="/images/favicon.ico"/>
|
||||
<title>Rem-chan at your service</title>
|
||||
<link rel="stylesheet" type="text/css" href="/css/strikesdashboard.css" id="pagesheet"/>
|
||||
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
<div id="userWrapper">
|
||||
<div id="avatar" style="background-image: url(https://cdn.discordapp.com/icons/<%= guild.id %>/<%= guild.icon%>.webp)"></div> <!--it works somehow -->
|
||||
<div class="userNameWrapper">
|
||||
<p id="userName"><%= guild.name%></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="maindisplay">
|
||||
<%- include('strikelist.ejs') %>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Loading…
Reference in new issue