A Pen by Lxi Inc. | LolloGamer on CodePen.
Created
July 5, 2018 01:33
-
-
Save LolloDev5123/e5b94c46cdc55dc4fa50557165f2f2a2 to your computer and use it in GitHub Desktop.
WyBRZa
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class=""> | |
</div> | |
<div class="discord-widget"> | |
<div class="discord-header"> | |
<div class="discord-jrn-logo"></div> | |
<div id="members-count"></div> | |
</div> | |
<div class="discord-body"> | |
<div class="scroll-placeholder"></div> | |
<!--<div class="discord-list-bot-shadow">--> | |
<div class="discord-list"> | |
<div class="discord-list-status"> | |
<div class="discord-list-label"></div> | |
</div> | |
<table id="members-list"></table> | |
</div> | |
<!--</div>--> | |
<a onclick="javascript:window.open('https://discord.gg/WQHdqmw'); return false;"><button class="discord-cta"></button></a> | |
</div> | |
</a> | |
</div> | |
</div> | |
<!-- | |
<div style="position: fixed; left: 340px; top: 130px;"> | |
<button style="float: left; width: 150px; height: 150px;" onclick="showMembersCount()">Show member count</button> | |
<button style="float: left;width: 150px; height: 150px;" onclick="showMembers()">Show members</button> | |
</div> | |
--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var xhReq = new XMLHttpRequest(); | |
xhReq.open( | |
"GET", | |
"https://discordapp.com/api/guilds/452515837593518090/widget.json", | |
false | |
); | |
xhReq.send(null); | |
var discordjson = JSON.parse(xhReq.responseText); | |
if (discordjson != null) { | |
function showMembersCount() { | |
var membersCount = discordjson.members.length; | |
var countElem = (document.getElementById("members-count").innerHTML = | |
membersCount + "<span class='member-label'> Users Online<span>"); | |
} | |
function showMembers() { | |
discordjson.members.reverse().forEach(function(members) { | |
var td = document.createElement("td"); | |
var label = document.createElement("label"); | |
label.innerHTML = members.username; | |
var img = document.createElement("img"); | |
img.src = members.avatar_url; | |
var table = document.getElementById("members-list"); | |
var row = table.insertRow(0); | |
var td1 = row.insertCell(0); | |
var td2 = row.insertCell(1); | |
td1.className = "member-avatar"; | |
td2.className = "member-name"; | |
td1.appendChild(img); | |
td2.appendChild(label); | |
}); | |
} | |
} | |
setTimeout(function() { | |
showMembersCount(); | |
showMembers(); | |
}, 500); | |
/* workaround to display regular table instead of liquid table plugin */ | |
/* the plugin sets the regular table to display:none, this fixes it */ | |
setTimeout(function() { | |
document.getElementById("members-list").style.display = "block"; | |
}, 2000); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* The commented css style looks better here | |
* in codepen, but not so great on JRN */ | |
body { | |
font-family: arial; | |
color: #fff; | |
} | |
button, | |
a:hover { | |
cursor: pointer; | |
} | |
a, | |
a:visited, | |
a:focus, | |
a:hover, | |
a:active { | |
color: #fff; | |
text-decoration: none; | |
} | |
.discord-widget { | |
height: 340px; | |
width: 300px; | |
margin: 0 auto; | |
box-shadow: 0px 0px 15px -1px rgba(0, 0, 0, 0.5); | |
background-color: #3366cc; | |
border-top-right-radius: 6px; | |
border-top-left-radius: 6px; | |
border-bottom-right-radius: 5px; | |
border-bottom-left-radius: 5px; | |
padding-bottom: 65px; | |
/* padding-bottom: 40px; */ | |
} | |
.discord-header { | |
position: relative; | |
/* height: 40px; */ | |
height: 0px; | |
padding: 15px 10px; | |
background-color: #336600; | |
border-top-right-radius: 5px; | |
border-top-left-radius: 5px; | |
} | |
.discord-body { | |
padding-left: 30px; | |
padding-right: 20px; | |
height: 100%; | |
position: relative; | |
} | |
.discord-jrn-logo { | |
background-image: url("https://wwwr.jrocknews.com/wp-content/uploads/2015/05/jrocknews-x-discord-widget-logo.png"); | |
height: 40px; | |
width: 140px; | |
background-repeat: no-repeat; | |
background-size: cover; | |
transform-origin: left; | |
filter: contrast(1.1); | |
float: left; | |
margin-bottom: 10px; | |
} | |
.discord-list { | |
position: relative; | |
width: 100%; | |
height: 65%; | |
max-height: 210px; | |
display: inline-block; | |
overflow: auto; | |
margin-top: 10px; | |
overflow: hidden; | |
} | |
.discord-list-botshadow:hover + .discord-list, .discord-list:hover { | |
overflow: auto; | |
} | |
.discord-list-botshadow { | |
width: 80%; | |
height: 65%; | |
max-height: 250px; | |
position: absolute; | |
top: 10px; | |
left: 0; | |
z-index: 1; | |
box-shadow: inset 0px -24px 40px -11px rgba(30, 33, 36, 1), | |
inset 0px -21px 40px -11px rgba(30, 33, 36, 1); | |
pointer-events: none; | |
} | |
.discord-list-bot-shadow:after { | |
content: ' '; | |
background-image: linear-gradient(to bottom, transparent 0%, #1d1f20 100%); | |
bottom: 118px; | |
display: block; | |
height: 50px; | |
left: 0; | |
position: absolute; | |
width: calc(100% - 13.5px); | |
z-index: 1; | |
} | |
.discord-list-status, | |
.discord-list-label { | |
display: inline-block; | |
margin-bottom: 2px; | |
} | |
.discord-list-status:before { | |
content: " \25C9"; | |
color: #89ff00; | |
margin-right: 5px; | |
-webkit-animation: pulse 2s infinite ease-in-out; | |
-moz-animation: pulse 2s infinite ease-in-out; | |
-o-animation: pulse 2s infinite ease-in-out; | |
animation: pulse 2s infinite ease-in-out; | |
} | |
.discord-list-label:before { | |
content: "Members online:"; | |
} | |
.scroll-placeholder { | |
position: absolute; | |
top: 15px; | |
right: 20px; | |
width: 7px; | |
height: calc(65% - 10px); | |
max-height: 250px; | |
background-color: rgba(226, 34, 127, 0.18); | |
border-radius: 4px; | |
} | |
#members-count { | |
font-size: 14px; | |
font-weight: 800; | |
display: inline-block; | |
position: absolute; | |
top: calc(50% - 10px); | |
right: 10px; | |
} | |
.member-label { | |
font-weight: normal; | |
position: relative; | |
top: 50%; | |
transform: perspective(1px) translateY(-50%); | |
} | |
#members-list img { | |
width: 15px; | |
} | |
.member-avatar { | |
padding-right: 7px; | |
} | |
#members-list td.member-name { | |
font-size: 14px; | |
max-width: 180px; | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
table { | |
table-layout: fixed; | |
} | |
/* Workaround, if page has colliding rules */ | |
.discord-widget * > tr { | |
background-color: transparent !important; | |
} | |
.discord-cta { | |
border-bottom: 3px solid #b90e62; | |
border-top: none; | |
border-left: none; | |
border-right: none; | |
background-color: #e22180; | |
padding: 12px 25px; | |
color: #fff; | |
border-radius: 4px; | |
font-size: 16px; | |
text-transform: uppercase; | |
font-weight: bold; | |
text-align: center; | |
width: 100%; | |
max-height: 45px; | |
transition: .3s; | |
} | |
.discord-cta:hover { | |
background-color: #c52b77; | |
border-bottom: 3px solid #ac145e; | |
font-size: 17px; | |
transition: .3s; | |
} | |
.discord-learn-more { | |
float: right; | |
text-align: center; | |
opacity: 0.4; | |
margin: 5px 0; | |
font-size: 13px; | |
transition: .2s; | |
} | |
.discord-learn-more:after { | |
content: "Learn more"; | |
} | |
.discord-learn-more:hover { | |
opacity: 0.8; | |
transition: .2s; | |
} | |
.discord-cta:after { | |
content: "Connect to Chat.io"; | |
} | |
@-webkit-keyframes pulse { | |
0% { opacity: .3;} | |
50% { opacity: 1;} | |
100% { opacity: .3;} | |
} | |
@-moz-keyframes pulse { | |
0% { opacity: .3;} | |
50% { opacity: 1;} | |
100% { opacity: .3;} | |
} | |
@-o-keyframes pulse { | |
0% { opacity: .3;} | |
50% { opacity: 1;} | |
100% { opacity: .3;} | |
} | |
@keyframes pulse { | |
0% { opacity: .3;} | |
50% { opacity: 1;} | |
100% { opacity: .3;} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment