The SRA Website https://socialistra.org
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.
 
 
 
 
 

203 lines
6.9 KiB

<?php
// Copyright (C) 2021 Socialist Rifle Association
//
// This file is part of SRA Website.
//
// website is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// website is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with website. If not, see <http://www.gnu.org/licenses/>.
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Socialist Rifle Association</title>
<link rel="icon" href="../img/favicon.png">
<link rel="stylesheet" type="text/css" href="https://srastatic.nyc3.cdn.digitaloceanspaces.com/web/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://srastatic.nyc3.cdn.digitaloceanspaces.com/web/js/lib/jquery.min.js" type="text/javascript"></script>
<script src="https://srastatic.nyc3.cdn.digitaloceanspaces.com/web/js/lib/raphael.js"></script>
<script src="https://srastatic.nyc3.cdn.digitaloceanspaces.com/web/js/jquery-plugins/color.jquery.js"></script>
<script src="https://srastatic.nyc3.cdn.digitaloceanspaces.com/web/js/jquery-plugins/jquery.usmap.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script>
// Handler for when a state is clicked
$(document).ready(function() {
$('#map').usmap({
'stateStyles': {fill: '#df0000', stroke: 'white'},
showLabels: true,
'click' : function(event, data) {
$("#map > svg > path").each(function() {
$(this).css('fill', '');
});
$('#' + data.name).css('fill', '#1C1C1C');
$('.chapter-details').hide();
$('#list-' + data.name).show();
},
});
$( "svg" ).attr("viewBox", "0 0 500.66444 291.33102");
});
</script>
</head>
<style type="text/css">
h1 {
font-size: 1.5em;
}
img.bio {
border-radius: 10px;
width: 20%;
display: inline-block;
vertical-align: middle;
}
#biodesk {
width: 65%;
margin: auto auto;
display: inline-block;
vertical-align: middle;
padding-left: 2em;
}
#biodesk p {
font-weight: 200;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
h5 {
font-weight: 200;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-style: italic;
}
#chaplist {
display: inline-block;
padding: 0.5em;
margin: 0.5em;
}
#chaplist h3 {
display: inline-block;
padding: 10px;
}
#map {
width: 80% !important;
margin: auto;
display: block;
height: 550px !important;
}
#map svg {
display: block;
width: 80%;
height: 500px !important;
text-align: center;
margin: auto auto;
}
.map-center {
margin: auto auto;
text-align: center;
}
.chapter-details {
z-index: 2;
}
@media screen and (max-width: 1080px) {
#map {
height: 450px !important;
text-align: center;
}
}
@media screen and (max-width: 1024px) {
#map {
height: 350px !important;
text-align: center;
}
}
@media screen and (max-width: 768px) {
#map {
height: 350px !important;
text-align: center;
}
}
@media screen and (max-width: 736px) {
#first img {
display: inline-block;
}
#chaplist {
width: 80%;
}
#map {
height: 300px !important;
text-align: center;
width: 90%;
margin: auto auto;
}
#map svg {
height: 200px !important;
width: 325px;
text-align: center;
margin: auto auto;
}
}
</style>
<body>
<?php include("../res/php/top.php") ?>
<div id="section-title">Local Chapters</div>
<hr>
<div class="map-center"><div id="map" style="width: auto; height: 630px;"></div></div>
<div style="text-align: center;"><h2 id="instructions">Click on a state above to view local chapters</h2></div>
<hr>
<div>
<?php
// Load JSON info
$chapters = json_decode(file_get_contents("chapters.json"), true);
// Build state list
foreach ($chapters as $state => $list) {
echo("<div id=\"list-$state\" class=\"chapter-details\" style=\"display: none\">");
// Build chapters
foreach ($list as $chapter) {
$logo = $chapter["logo"];
$name = $chapter["name"];
echo("<div id=\"biotext\">");
if ($logo == "default") {
echo("<img src=\"https://srastatic.nyc3.cdn.digitaloceanspaces.com/web/img/logo/default.png\" class=\"bio\">"); }
else {
echo("<img src=\"https://srastatic.nyc3.cdn.digitaloceanspaces.com/web/img/logo/$logo\" class=\"bio\">"); }
echo("
<div id=\"biodesk\">
<div id=\"chaplist\">
<h1>$name</h1>
");
foreach ($chapter["social"] as $platform => $username) {
// Build social media links
switch ($platform) {
case "twitter":
echo("<h3><a href=\"https://twitter.com/$username\"><i class=\"fab fa-twitter\"></i></a></h3>");
break;
case "facebook":
echo("<h3><a href=\"https://www.facebook.com/$username/\"><i class=\"fab fa-facebook-f\"></i></a></h3>");
break;
case "instagram":
echo("<h3><a href=\"https://instagram.com/$username\"><i class=\"fab fa-instagram\"></i></a></h3>");
break;
case "email":
echo("<h3><a href=\"mailto:$username\"><i class=\"fas fa-envelope\"></i></a></h3>");
break;
case "website":
echo("<h3><a href=\"$username\"><i class=\"fas fa-link\"></i></a></h3>");
break;
case "phone":
echo('<h3><a href="tel:' . $username . '"><i class="fas fa-phone"></i></a></h3>');
break;
}
}
echo("</div></div></div><hr>");
}
echo("</div>");
}
?>
</div>
<?php include("../res/php/bottom.php") ?>
</body>
</html>