Files
FemScoreboard/views/index.pug

543 lines
21 KiB
Plaintext
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
doctype html
html
head
title FemScoreboard
meta(name="viewport" content="width=device-width, initial-scale=1.0")
link(rel="preconnect" href="https://fonts.googleapis.com")
link(rel="preconnect" href="https://fonts.gstatic.com" crossorigin)
link(href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet")
style.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
min-height: 100vh;
color: #e4e4e4;
padding: 40px 20px;
}
.container {
max-width: 1800px;
margin: 0 auto;
}
h1 {
text-align: center;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 40px;
background: linear-gradient(90deg, #e94560, #ff6b6b, #feca57);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.users-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
margin-bottom: 60px;
}
@media (max-width: 1400px) {
.users-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 900px) {
.users-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.users-grid {
grid-template-columns: 1fr;
}
}
.card {
background: rgba(255, 255, 255, 0.05);
border-radius: 16px;
padding: 16px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.user-table {
width: 100%;
border-collapse: collapse;
}
.user-table th {
text-align: left;
padding: 12px;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #888;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.user-table td {
padding: 12px 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.user-table tr:last-child td {
border-bottom: none;
}
.user-table tr:hover td {
background: rgba(255, 255, 255, 0.02);
}
.user-info {
display: flex;
align-items: center;
gap: 12px;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(255, 255, 255, 0.1);
}
.username {
font-weight: 500;
color: #fff;
font-size: 0.9rem;
}
.score {
font-weight: 700;
font-size: 1.1rem;
color: #e94560;
}
.rank {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
font-size: 0.75rem;
font-weight: 600;
}
.rank-1 { background: linear-gradient(135deg, #ffd700, #ffed4e); color: #1a1a2e; }
.rank-2 { background: linear-gradient(135deg, #c0c0c0, #e8e8e8); color: #1a1a2e; }
.rank-3 { background: linear-gradient(135deg, #cd7f32, #e09856); color: #1a1a2e; }
.messages-section {
margin-bottom: 60px;
}
.messages-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
@media (max-width: 1400px) {
.messages-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 900px) {
.messages-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.messages-grid {
grid-template-columns: 1fr;
}
}
.message-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 16px;
padding: 20px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.message-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.message-item {
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
padding: 16px;
transition: background 0.2s ease;
}
.message-item:hover {
background: rgba(255, 255, 255, 0.06);
}
.message-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.message-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(255, 255, 255, 0.1);
}
.message-content {
color: #ccc;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 12px;
word-break: break-word;
}
.message-content i {
color: #888;
}
.message-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.message-link {
color: #e94560;
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
transition: color 0.2s ease;
}
.message-link:hover {
color: #ff6b6b;
text-decoration: underline;
}
.message-reaction {
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
font-size: 0.9rem;
}
.best-section {
margin-top: 60px;
}
.best-card {
background: linear-gradient(135deg, rgba(233, 69, 96, 0.1), rgba(255, 107, 107, 0.1));
border: 1px solid rgba(233, 69, 96, 0.3);
}
.best-reactions {
display: flex;
gap: 12px;
font-size: 0.85rem;
}
.best-reaction {
display: flex;
align-items: center;
gap: 4px;
background: rgba(255, 255, 255, 0.1);
padding: 4px 10px;
border-radius: 20px;
}
@media (max-width: 768px) {
h1 {
font-size: 1.75rem;
}
.users-grid,
.messages-grid {
grid-template-columns: 1fr;
}
body {
padding: 20px 12px;
}
}
</style>
body
.container
h1 FemScoreboard
h2.section-title
span 🏆 Top Users
.users-grid
.card
h3.section-title 💀 Funniest MFs
table.user-table
thead
tr
th Rank
th User
th Score
tbody
each row, idx in funniest
tr
td
span.rank(class="rank-" + (idx + 1))= idx + 1
td
.user-info
img.user-avatar(src="/avatars/" + row.id + ".webp", alt=row.username)
span.username= row.username
td
span.score= row.reaction_1_total
.card
h3.section-title 💯 Realest MFs
table.user-table
thead
tr
th Rank
th User
th Score
tbody
each row, idx in realest
tr
td
span.rank(class="rank-" + (idx + 1))= idx + 1
td
.user-info
img.user-avatar(src="/avatars/" + row.id + ".webp", alt=row.username)
span.username= row.username
td
span.score= row.reaction_2_total
.card
h3.section-title 😭 Cunniest MFs
table.user-table
thead
tr
th Rank
th User
th Score
tbody
each row, idx in cunniest
tr
td
span.rank(class="rank-" + (idx + 1))= idx + 1
td
.user-info
img.user-avatar(src="/avatars/" + row.id + ".webp", alt=row.username)
span.username= row.username
td
span.score= row.reaction_3_total
.card
h3.section-title 🅱ased MFs
table.user-table
thead
tr
th Rank
th User
th Score
tbody
each row, idx in based
tr
td
span.rank(class="rank-" + (idx + 1))= idx + 1
td
.user-info
img.user-avatar(src="/avatars/" + row.id + ".webp", alt=row.username)
span.username= row.username
td
span.score= row.reaction_4_total
.card
h3.section-title ⬆️ Agreeable MFs
table.user-table
thead
tr
th Rank
th User
th Score
tbody
each row, idx in agreeable
tr
td
span.rank(class="rank-" + (idx + 1))= idx + 1
td
.user-info
img.user-avatar(src="/avatars/" + row.id + ".webp", alt=row.username)
span.username= row.username
td
span.score= row.reaction_5_total
.messages-section
h2.section-title
span 💬 Top Messages
.messages-grid
.message-card
h3.section-title 💀 Funniest
.message-list
each row in msg1
.message-item
.message-header
img.message-avatar(src="/avatars/" + row.author + ".webp", alt="Avatar")
.message-content
if row.content
= row.content
else
i (media)
.message-footer
a.message-link(href="https://discord.com/channels/" + row.guild + "/" + row.channel + "/" + row.id) View Message
.message-reaction
span 💀
span= row.reaction_1_count
.message-card
h3.section-title 💯 Realest
.message-list
each row in msg2
.message-item
.message-header
img.message-avatar(src="/avatars/" + row.author + ".webp", alt="Avatar")
.message-content
if row.content
= row.content
else
i (media)
.message-footer
a.message-link(href="https://discord.com/channels/" + row.guild + "/" + row.channel + "/" + row.id) View Message
.message-reaction
span 💯
span= row.reaction_2_count
.message-card
h3.section-title 😭 Cunniest
.message-list
each row in msg3
.message-item
.message-header
img.message-avatar(src="/avatars/" + row.author + ".webp", alt="Avatar")
.message-content
if row.content
= row.content
else
i (media)
.message-footer
a.message-link(href="https://discord.com/channels/" + row.guild + "/" + row.channel + "/" + row.id) View Message
.message-reaction
span 😭
span= row.reaction_3_count
.message-card
h3.section-title 🔥 Based
.message-list
each row in msg4
.message-item
.message-header
img.message-avatar(src="/avatars/" + row.author + ".webp", alt="Avatar")
.message-content
if row.content
= row.content
else
i (media)
.message-footer
a.message-link(href="https://discord.com/channels/" + row.guild + "/" + row.channel + "/" + row.id) View Message
.message-reaction
span 🔥
span= row.reaction_4_count
.message-card
h3.section-title ⬆️ This
.message-list
each row in msg5
.message-item
.message-header
img.message-avatar(src="/avatars/" + row.author + ".webp", alt="Avatar")
.message-content
if row.content
= row.content
else
i (media)
.message-footer
a.message-link(href="https://discord.com/channels/" + row.guild + "/" + row.channel + "/" + row.id) View Message
.message-reaction
span ⬆️
span= row.reaction_5_count
.best-section
h2.section-title
span ⭐ Best Overall Messages
.message-card.best-card
.message-list
each row in bestMsg
.message-item
.message-header
img.message-avatar(src="/avatars/" + row.author + ".webp", alt="Avatar")
.message-content
if row.content
= row.content
else
i (media)
.message-footer
a.message-link(href="https://discord.com/channels/" + row.guild + "/" + row.channel + "/" + row.id) View Message
.best-reactions
if row.reaction_1_count
.best-reaction
span 💀
span= row.reaction_1_count
if row.reaction_2_count
.best-reaction
span 💯
span= row.reaction_2_count
if row.reaction_3_count
.best-reaction
span 😭
span= row.reaction_3_count
if row.reaction_4_count
.best-reaction
span 🔥
span= row.reaction_4_count
if row.reaction_5_count
.best-reaction
span ⬆️
span= row.reaction_5_count