Skip to content

Instantly share code, notes, and snippets.

@json-bateman

json-bateman/index.html

Forked from Eaglefeather1/index.html
Last active April 2, 2023 18:40
Show Gist options
  • Save json-bateman/824e71a2ff3583fe9426cdf2a83ea6e5 to your computer and use it in GitHub Desktop.
Save json-bateman/824e71a2ff3583fe9426cdf2a83ea6e5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="myData"></div>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
function appendDiv(classes, container, divId) {
let div = document.createElement("div");
div.setAttribute("class", classes);
if (divId != undefined) {
div.setAttribute("id", divId);
}
container.appendChild(div);
return div;
}
function appendImg(container, img) {
if (img == undefined) {
let defaultImg = new Image();
defaultImg.src = "https://picsum.photos/300"
container.appendChild(defaultImg);
} else {
let newImg = new Image();
newImg.src = `images/${img}`;
container.appendChild(newImg);
}
}
function appendText(textVal, container, textTag, classes) {
let text = document.createElement(textTag);
if (classes != undefined) {
text.setAttribute("class", classes);
}
text.innerHTML = textVal;
container.appendChild(text);
}
function createRegionSection(regionName, regionData) {
const section = document.createElement("section");
section.setAttribute("class", "region");
//create Title
const headerDiv = appendDiv("headerDiv", section);
const regionHeader = appendText(regionName, headerDiv, "h1", "header");
//create Cards
const groupsDiv = appendDiv("groupsDiv", section);
regionData.forEach((group) => {
groupsDiv.appendChild(createGroupCard(group));
});
return section;
}
function createGroupCard(group){
const {groupName, period, location, size, desc, img, links, status} = group;
const groupCard = document.createElement("div");
groupCard.setAttribute('class', 'groupCard');
appendImg(groupCard, img);
appendText(groupName, groupCard, "h2", "textCenter");
appendText(`<i>${period}</i>`, groupCard, "p", "textCenter lessHeight");
appendText(`${location}<br><b>Member Count: </b>${size}<br>${desc}`, groupCard, "p");
let linksLoc = links;
appendDiv("links", groupCard, "links");
for (var e = 0; e < linksLoc.length/2; e++) {
appendText(`<a href=${linksLoc[2*e+1]}>${linksLoc[e*2]}</a> `, groupCard.lastChild, "span", linksLoc[e*2]);
}
appendDiv(`${status} activityDiv`, groupCard)
appendText(`<b>${status.toUpperCase()}</b>`, groupCard.lastChild, "p");
return groupCard;
}
fetch('worldstuck.json')
.then(function(response) {
return response.json();
})
.then(function(data) {
const mainContainer = document.getElementById("myData");
for (const [regionName, regionData] of Object.entries(data)) {
regionData.sort((a,b) => a.groupName.localeCompare(b.groupName))
const section = createRegionSection(regionName, regionData)
mainContainer.appendChild(section);
}
})
.catch(function(err) {
console.log('error: ' + err);
});
Raw
style.css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Zanabazar+Square&display=swap');
html {
height: 100%;
width: 100%;
}
body {
background-color: #404258;
color: white;
font-family: Open Sans, Helvetica, sans-serif;
}
h1 {
font-family: Noto Sans Zanabazar Square;
}
.textCenter {
text-align: center;
}
img {
width: 95%;
margin-top: 15px;
display: block;
margin-left: auto;
margin-right: auto;
}
span {
border: 2px solid white;
border-radius: 25px;
padding: 3px;
padding-left: 6px;
margin: 3px;
line-height: 35px;
}
a {
color: white;
}
a:link,visited,hover,active {
text-decoration: none;
}
.links {
margin-bottom: 10px;
}
.region {
border-radius: 10px;
margin: 5px;
padding-left: 15px;
padding-right: 15px;
background-color: #474E68;
}
.groupsDiv {
-webkit-column-width: 10em;
-webkit-column-gap: 1em;
-webkit-column-count: 5;
-moz-column-width: 20em;
-moz-column-gap: 2em;
-moz-column-count: 2;
-ms-column-width: 20em;
-ms-column-gap: 2em;
-ms-column-count: 5;
column-width: 20em;
column-gap: 2em;
column-count: 5;
padding-bottom: 15px;
}
.groupCard {
border: 2px solid black;
border-radius: 25px;
padding: 10px;
background-color: #50577A;
/* COLUMNS */
break-inside: avoid-column;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
width: 100%;
box-sizing:border-box;
}
.groupCard:not(:first-of-type) {
margin: 20px 0;
}
/* ACTIVITY BANNER */
.activityDiv {
font-size: 30px;
padding: 10px 5px;
margin: 10px -10px -10px -10px;
border-radius: 0% 0% 23px 23px;
text-align: center;
}
.activityDiv * {
margin-top: auto;
margin-bottom: auto;
}
.Active {
background-color: #7cd992;
}
.Inactive {
background-color: #f7e463;
}
.Dead {
background-color: #eb6060;
}
.Unknown {
background-color: #a8a8a8;
}
/* END ACTIVITY BANNER */
/* LINK COLORS */
.Instagram {
background-image: linear-gradient(to bottom right, #d62976, #962fbf);
border-color: #000000;
}
.Discord {
background-color: #7289da;
border-color: #23272a;
}
.Tumblr {
background-color: #001935;
border-color: #00B8FF;
}
.TikTok {
background-image: linear-gradient(to bottom right, #00f2ea, #ff0050);
border-color: black;
}
.YouTube {
background-color: #FF0000;
border-color: #282828;
}
.Linktree {
background-color: #4d6d17;
border-color: black;
}
.Facebook {
background-color: #4292FF;
border-color: #18191A;
}
/* END LINK COLORS */
Raw
worldstuck.json
{
"Template": [
{
"img": "",
"groupName": "",
"location": "",
"size": "",
"desc": "",
"period": "",
"links": [],
"status": ""
}
],
"California": [
{
"img": "CaliborniaHomestucks.jpg",
"groupName": "Calibornia Homestucks",
"location": "California",
"size": "215",
"desc": "Calibornia Homestucks is a California-wide Homestuck group founded at FanimeCon 2022. They are very active in online spaces, particularly their Discord, and host gatherings and/or panels at most major California conventions. They have a 15+ age limit.",
"period": "2022-present",
"links": ["Discord", "https://discord.gg/calibornia", "Instagram", "https://instagram.com/caliborniahomestucks", "Tumblr", "https://tumblr.com/caliborniastuck", "TikTok", "https://tiktok.com/@calibornia.stuck", "YouTube", "https://youtube.com/channel/UC77y1UjGT_TKFNG6XkMAfcQ", "Linktree", "https://linktr.ee/calibornia"],
"status": "Active"
},
{
"groupName": "SoCal Homestuck 18 and Over Group",
"location": "Southern California",
"size": "32",
"desc": "A Facebook group for adult Homestuck cosplayers located in Southern California. Had a very short and inactive lifespan.",
"period": "2014-2017",
"links": ["Facebook", "https://www.facebook.com/groups/666498250112498/"],
"status": "Dead"
},
{
"img": "SoCalStuck.jpg",
"groupName": "SoCalStuck",
"location": "Southern California",
"size": "Unknown",
"desc": "A Tumblr page dedicated to tracking Homestuck meetups and groups in Southern California. While mostly dedicated to reporting on the activity of other, seperate SoCal groups, it did host multiple meetups of its own.",
"period": "2012-2013",
"links": ["Tumblr", "https://socalstuck.tumblr.com/"],
"status": "Dead"
},
{
"img": "SanDiegoStuck.jpg",
"groupName": "SanDiegoStuck",
"location": "San Diego",
"size": "81",
"desc": "A San Diego Homestuck group that at one point hosted bi-monthly meetups. The group seems to have amassed a pretty significant following at one point and had initially formed from a meetup at a local convention. It seems as though the group eventually morphed into a general San Diego cosplay group judging by the Facebook page.",
"period": "2012-2018",
"links": ["Tumblr", "https://sandiegostuck.tumblr.com/", "Facebook", "https://www.facebook.com/groups/282144831811932/"],
"status": "Dead"
},
{
"groupName": "Orange County Homestuck Team",
"location": "Orange County",
"size": "170",
"desc": "All information on the page is wiped with only the note \"This group is now inactive. Sorry about that!\". No more information can be found.",
"period": "2011-Unknown",
"links": ["Facebook", "https://www.facebook.com/groups/208196309218508/"],
"status": "Dead"
},
{
"groupName": "SoCal Homestuck Cosplay Group",
"location": "Southern California",
"size": "236",
"desc": "The Facebook page is locked to members only. Judging by the member count, they amassed a significant following in their peak. The group is most likely dead.",
"period": "2012-Unknown",
"links": ["Facebook", "https://www.facebook.com/groups/243886025731762/"],
"status": "Unknown"
},
{
"groupName": "Southern? California Homestuck Meetup",
"location": "California",
"size": "134",
"desc": "The Facebook page is locked to members only. It can be inferred from the title and member count that this was once a thriving Homestuck group spanning Southern California and at least part of Northern California. Latest activity is unknown, but can be safely assumed to be dead.",
"period": "2012-Unknown",
"links": ["Facebook", "https://www.facebook.com/groups/383399895048609/"],
"status": "Unknown"
},
{
"img": "SouthernCaliforniaHomestucks.jpg",
"groupName": "Southern California Homestucks",
"location": "Southern California",
"size": "165",
"desc": "A Homestuck group based in Southern California that seems to have been active for a longer period of time than most. Some members do appear to be active on Facebook still, although there hasn't been any significant activity in the group since 2018.",
"period": "2013-2018",
"links": ["Facebook", "https://www.facebook.com/groups/515355595200162/"],
"status": "Dead"
}
],
"Oregon": [
{
"img": "MSPA_Logo.gif",
"groupName": "Targetstuck",
"location": "San Jose",
"size": "100",
"desc": "Lots of cool cats and hip chicks",
"period": "2010-2011",
"links": ["Instagram", "https://instagram.com/battleblockb0ss", "Google", "https://google.com", "test", "test"],
"status": "Active"
},
{
"img": "Homestuck.jpg",
"groupName": "the Simpsons",
"location": "San Jose",
"size": "100",
"desc": "Lots of cool cats and hip chicks",
"period": "2010-2011",
"links": ["Instagram", "https://instagram.com/battleblockb0ss", "Google", "https://google.com", "test", "test"],
"status": "Active"
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment