139 lines
3.7 KiB
Plaintext
139 lines
3.7 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="stylesheet" href="/style.css" />
|
|
<title>Home</title>
|
|
<style>
|
|
body {
|
|
max-width: 800px;
|
|
margin: auto;
|
|
padding: 1em;
|
|
}
|
|
.greeting ::selection {
|
|
background-color: #000;
|
|
color: #fff;
|
|
}
|
|
.greeting {
|
|
background-color: var(--accent-color);
|
|
color: #000;
|
|
border-radius: 1.5em;
|
|
padding: 1em;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 1rem;
|
|
}
|
|
.greeting-l {
|
|
flex: 0 0 auto;
|
|
max-width: 100%;
|
|
width: auto;
|
|
height: 100%;
|
|
max-height: 3rem;
|
|
object-fit: contain;
|
|
display: block;
|
|
}
|
|
.greeting-r {
|
|
flex: 1 1 0px;
|
|
min-width: 0;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
.greeting-top {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.greeting-top-left {
|
|
font-size: 1.4rem;
|
|
}
|
|
.greeting-stats {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
gap: 0.5ex;
|
|
}
|
|
.greeting-stats img {
|
|
width: auto;
|
|
height: 1em;
|
|
}
|
|
.greeting a {
|
|
color: #000;
|
|
}
|
|
|
|
@media (max-width: 650px) {
|
|
.greeting-top {
|
|
flex-direction: column;
|
|
gap: 0.2em;
|
|
align-items: start;
|
|
}
|
|
.greeting-bottom {
|
|
text-align: right;
|
|
}
|
|
.greeting-r {
|
|
gap: 0.2em;
|
|
}
|
|
}
|
|
|
|
.favicon {
|
|
margin: auto;
|
|
display: block;
|
|
}
|
|
|
|
.header {
|
|
height: 96px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 1em;
|
|
margin: 1em;
|
|
}
|
|
.header > .greeting {
|
|
flex: 1 1 0px;
|
|
min-width: 0;
|
|
}
|
|
.header > .circle-button {
|
|
flex: 0 0 auto;
|
|
max-width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a href="/"><img src="/favicon.png" width="64" height="auto" class="spinny favicon"></a><br>
|
|
|
|
<div class="header">
|
|
<div class="greeting">
|
|
<img src="https://gdicon.oat.zone/icon.png?type=<%=type_str%>&value=<%=icon_value%>&color1=<%=color1%>&color2=<%=color2%><%=glow ? "&glow=1" : ""%>" width="150" height="150" class="greeting-l">
|
|
<div class="greeting-r">
|
|
<div class="greeting-top">
|
|
<div class="greeting-top-left">
|
|
hewwo, <b><%= username %></b>!
|
|
</div>
|
|
<div class="greeting-stats">
|
|
<%= stars %> <img src="/assets/icons/gd/star.png"> <%= diamonds %> <img src="/assets/icons/gd/diamond.png"> <%= coins %> <img src="/assets/icons/gd/coin.png"> <%= user_coins %> <img src="/assets/icons/gd/silvercoin.png"> <%= demons %> <img src="/assets/icons/gd/demon.png">
|
|
</div>
|
|
</div>
|
|
<div class="greeting-bottom">
|
|
<a href="/accounts/settings">Settings</a> ·
|
|
<form action="/accounts/logout" method="POST" class="inline-post">
|
|
<button type="submit" class="inline-post-button">
|
|
Log out
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a href="/accounts/notifications" title="Notifiations" class="circle-button notifications <%= unread_notifications ? "notifications-unread" : "" %>">
|
|
<%= File.read("public/assets/icons/bell.svg") %>
|
|
</a>
|
|
</div>
|
|
<br><br>
|
|
blablabla lorem ipsum whatever. put stuff here later
|
|
</body>
|
|
</html>
|