You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
2.3 KiB
72 lines
2.3 KiB
const basicCard = document.createElement('basic-card'); |
|
basicCard.innerHTML = ` |
|
<style> |
|
p { |
|
text-align: center; |
|
} |
|
a { |
|
text-align: center; |
|
color: white; |
|
} |
|
.card { |
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.137); |
|
border-radius: 3%; |
|
transition: 0.3s; |
|
position: relative; |
|
width: 250px; |
|
height: 200px; |
|
padding: 5px; |
|
background-color: #282c34; |
|
color: #FFFFFF; |
|
} |
|
.card:hover { |
|
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.795); |
|
} |
|
.container { |
|
padding: 6px 16px; |
|
} |
|
</style> |
|
<div id="card-container" class="container"> |
|
<div class="card"> |
|
<h4><p><slot name="username" /></p></h4> |
|
<div> |
|
<p><slot name="join-date" /></p> |
|
<p><slot id="discord-id" name="discord-id" /></p> |
|
<p><slot id="pic-link" name="pic-link" /></p> |
|
</div> |
|
</div> |
|
</div> |
|
`; |
|
|
|
|
|
class UserCard extends HTMLElement { |
|
constructor() { |
|
super(); |
|
this.attachShadow({ mode: 'open' }); |
|
this.shadowRoot.appendChild(basicCard.cloneNode(true)); |
|
} |
|
connectedCallback() { |
|
this.shadowRoot.querySelector('#card-container').addEventListener('click', () => this.showModal()); |
|
} |
|
|
|
showModal() { |
|
const userID = this.shadowRoot.querySelector('#discord-id').assignedNodes()[0].textContent; |
|
const userPic = this.shadowRoot.querySelector("#pic-link").assignedNodes()[0].querySelector("a").getAttribute("href"); |
|
fetch('https://thanos.nightmare.haus/api/user?userID=' + userID) |
|
.then(response => response.json()) |
|
.then(data => { |
|
if (data === undefined || data === null) { |
|
alert("User not found."); |
|
return; |
|
} |
|
document.querySelector("#myModal").style.display = "block"; |
|
document.querySelector('#modal-join').textContent = new Date(data.joined_at).toLocaleString(); |
|
document.querySelector('#modal-userID').textContent = data.user.username; |
|
document.querySelector('#modal-avatar').src = `https://cdn.discordapp.com/avatars/${data.user.id}/${data.user.avatar}.png?size=256`; |
|
document.querySelector('#modal-verification').src = userPic; |
|
document.querySelector('#modal-verification').style = "max-height: 500px;"; |
|
}); |
|
} |
|
|
|
} |
|
window.customElements.define('user-card', UserCard);
|
|
|