Website redesign 💃

- New navbar
- Made everything responsive
- Made everything, overall, look a lot cooler
This commit is contained in:
awex
2021-06-05 10:38:34 -04:00
parent 99bbf5adf1
commit 1f73421727
9 changed files with 764 additions and 123 deletions
+107 -28
View File
@@ -1,31 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<title>About - awexx</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About >> Awex</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="assets/css/style-new.css">
<link rel="stylesheet" href="assets/css/footer.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="shortcut icon" type="image/png" href="assets/img/logo.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta content="awex" property="og:title">
<meta content="Name's awex / Alex. I'm the main web developer for the PlagueCraft Network, as well as one of the owners." property="og:description">
<script src="assets/js/medalclips.js"></script>
<!-- Metadata -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="https://awexxx.xyz/assets/img/logo.png"/>
<meta content="Awexxx" property="og:title">
<meta content="Name's awex / Alex. I'm the main web developer for the PlagueCraft Network, as well as one of the owners." property="og:description">
<meta content="https://awexxx.xyz/about" property="og:url">
<meta content="assets/img/logo.png" property="og:image">
<meta content="https://awexxx.xyz/assets/img/logo.png" property="og:image">
<meta content="#9c2d1c" data-react-helmet="true" name="theme-color">
</head>
<body>
<h3 style="padding-top:20px;">Awexx</h3>
<br>
<ul id="navbar">
<li><a href="https://awexxx.xyz/">HOME</a></li>
<li><a href="#">ABOUT ME</a></li>
<li><a href="https://awexxx.xyz/hivemc">HIVEMC STATS LOOKUP</a></li>
</ul>
</nav>
<hr>
<div id="rc_logo">
<a href="#" title="Logo">AWEX</a>
</div>
<div class="rc_nav" id="centered_nav">
<a href="https://awexxx.xyz/" title="Home">Home</a>
<a href="#" title="About">About</a>
<a href="https://awexxx.xyz/hivemc" title="HiveMC">HiveMC Lookup</a>
<a href="https://awexxx.xyz/mcw?type=embed" title="MCW">MCW</a>
<a href="javascript:void(0);" title="Menu" style="font-size:18px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>
<section class="home" style="background-image: url('assets/img/mcw-code.png');">
</section>
<div>
<br />
<h2>Awex is a web designer/developer for the PlagueCraft Network.</h2>
<hr>
@@ -33,18 +46,84 @@
<p>As of 2021, Awex has contributed to multiple projects, many such as the MedalSMP, ForestGroveSMP, and more!<br>
Awex initially started learning HTML and CSS in late 2020 and picked it up fairly quickly! He now manages web stability & services at <a href="https://plaguecraft.xyz" target="_blank">the PlagueCraft Network!</a></p>
<p>Awex is currently learning Game Development, Electron/Node, and more! You can always view his projects by taking a glance at his <a href="https://github.com/awexxx" target="_blank">GitHub</a> page.</p>
<p>Awex is currently learning Game Development, Electron/Node, and more! You can always view his projects by taking a glance at his <a href="https://github.com/awexxx" target="_blank">GitHub</a> page.<br>
<i>By the way, both the home and about page (this page lol) has a different snip of my code! Check all of 'em out ^^^</i></p>
<img style="padding-bottom:20px;" id="center" src="https://plaguecraft.xyz/storage/assets/img/logo.png">
<div class="footer-basic">
<div class="footer-basic">
<footer>
<div class="social"><a href="https://github.com/awexxx" target="_blank"><i class="icon ion-social-github"></i></a><a href="https://twitter.com/_awexx" target="_blank"><i class="icon ion-social-twitter"></i></a></div>
<ul class="list-inline">
<li class="list-inline-item"><a href="mailto:alex@plaguecraft.xyz">Contact</a></li>
<div class="social"><a href="https://instagram.com/_awexx"><i class="icon ion-social-instagram"></i></a><a href="https://twitter.com/_awexxx"><i class="icon ion-social-twitter"></i></a><a href="https://github.com/awexx/"><i class="icon ion-social-github"></i></a></div>
<ul class="list-inline">
<li class="list-inline-item"><a href="mailto:alex@plaguecraft.xyz">Contact Me</a></li>
<li class="list-inline-item"><a href="https://awexxx.xyz/mcw">Medal Clip Webhook</a></li>
</ul>
<p class="copyright">awexx <i class="fa fa-copyright"></i> 2021<br>
<p class="copyright">Awexxx © 2021<br>
<div id="quote"></div>
<script>
var quoteArray = ['You forget a thousand things every day, you make sure this is one of em.', 'THE DAMN SEMI COLON', `console.log('go away')`, `if else if else if else if else if else if else if elsfi fisafhjdskflsdf`,
`HELP PLEASE IM STUFK IN THE FOOTER CHOSOING THESE RESPONSES PLEASDSJAIF DSAF`]
var rand = quoteArray[Math.random() * quoteArray.length | 0]
document.querySelector("#quote").innerHTML = "<p>" + rand + "</p>"
if(rand === `console.log('go away')`) {
console.log(`go away (no, this isn't a mistake, i actually hard coded this in lmao)\nYou found the easter egg :)`)
}
</script>
</footer>
</div>
</body>
</html>
</body>
</html>
<style>
.home {
width: 100%;
height: 102vh;
background-position: center top;
background-size:cover;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
body {
background-color:#a3a3a3;
text-align:center;
}
body{
background-color:#878787;
text-align:center;
}
a{
color:black;
}
a:hover {
color:white;
}
i{
font-size:20px;
}
body p{
text-align:center;
color:#d4d4d4;
font-size:20px;
}
</style>
<script>
function myFunction() {
var x = document.getElementById("centered_nav");
if (x.className === "rc_nav") {
x.className += " responsive";
} else {
x.className = "rc_nav";
}
}
</script>
+65
View File
@@ -0,0 +1,65 @@
.footer-basic {
padding:35px 0;
background-color:#4a4a4a;
color:#4b4c4d;
}
.footer-basic ul {
padding:0;
list-style:none;
text-align:center;
font-size:18px;
line-height:1.6;
margin-bottom:0;
}
.footer-basic li {
padding:0 10px;
}
.footer-basic ul a {
color:white;
text-decoration:none;
opacity:0.8;
}
.footer-basic ul a:hover {
opacity:1;
}
.footer-basic .social {
text-align:center;
padding-bottom:25px;
}
.footer-basic .social > a {
font-size:24px;
width:40px;
height:40px;
line-height:40px;
display:inline-block;
text-align:center;
border-radius:50%;
border:1px solid white;
margin:0 8px;
color:white;
opacity:0.75;
}
.footer-basic .social > a:hover {
opacity:0.9;
}
.footer-basic .copyright {
margin-top:15px;
text-align:center;
font-size:13px;
color:white;
margin-bottom:0;
}
#quote p{
text-align:center;
font-size:15px;
color:white;
}
+336
View File
@@ -0,0 +1,336 @@
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700');
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Quicksand", sans-serif;
font-size: 62.5%;
font-size: 10px;
background-color:#a3a3a3;
}
#panel {
margin: 50px auto;
width: 300px;
padding: 30px 25px;
background: white;
border-radius: 25px;
display:none;
}
#panel a {
color:black;
}
a{
color:#ababab;
}
a:hover {
color:white;
}
hr{
border-color:white;
width:50%;
}
/* Navbar section */
#rc_logo {
left: 30px;
padding: 22px;
padding-left:2px;
position: absolute;
color: #fff;
font-size: 19px;
text-decoration: none;
}
#rc_logo a {
color: inherit;
text-decoration: none;
}
.rc_nav {
overflow: hidden;
background-color: #363841;
text-align: center;
z-index: 6;
}
.rc_nav a {
display: inline-block;
margin-right: -4px; /* inline-block gap fix */
color: #fff;
padding: 22px 22px;
text-decoration: none;
font-size: 18px;
-webkit-transition: background 0.3s linear;
-moz-transition: background 0.3s linear;
-ms-transition: background 0.3s linear;
-o-transition: background 0.3s linear;
transition: background 0.3s linear;
z-index: 9;
}
.rc_nav a:hover {
color: gray;
}
.rc_nav .icon {
display: none;
}
.rc_content {
text-align: center;
padding-left:14px;
margin-top: 100px;
color: #8e909b;
}
@media screen and (max-width: 820px) {
.rc_nav a {display: none;}
.rc_nav a.icon {
float: right;
display: block;
width: 60px;
}
}
@media screen and (max-width: 820px) {
.rc_nav responsive {position: relative; top: 73px;}
.rc_nav .icon {
position: fixed;
right: 0;
top: 0;
border-radius: 20%;
}
.rc_nav.responsive a {
float: none;
display: block;
text-align: center;
}
#rc_logo {
position: fixed;
}
}
/* Animation */
/* Inspiration taken from Dicson https://codemyui.com/simple-hamburger-menu-x-mark-animation/ */
.navTrigger {
cursor: pointer;
width: 30px;
height: 25px;
margin: auto;
position: absolute;
right: 30px;
top: 0;
bottom: 0;
}
.navTrigger i {
background-color: #fff;
border-radius: 2px;
content: '';
display: block;
width: 100%;
height: 4px;
}
.navTrigger i:nth-child(1) {
-webkit-animation: outT 0.8s backwards;
animation: outT 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger i:nth-child(2) {
margin: 5px 0;
-webkit-animation: outM 0.8s backwards;
animation: outM 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger i:nth-child(3) {
-webkit-animation: outBtm 0.8s backwards;
animation: outBtm 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger.active i:nth-child(1) {
-webkit-animation: inT 0.8s forwards;
animation: inT 0.8s forwards;
}
.navTrigger.active i:nth-child(2) {
-webkit-animation: inM 0.8s forwards;
animation: inM 0.8s forwards;
}
.navTrigger.active i:nth-child(3) {
-webkit-animation: inBtm 0.8s forwards;
animation: inBtm 0.8s forwards;
}
@-webkit-keyframes inM {
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}
@keyframes inM {
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
@-webkit-keyframes outM {
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}
@keyframes outM {
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
@-webkit-keyframes inT {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(9px) rotate(135deg);
}
}
@keyframes inT {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(9px) rotate(0deg);
}
100% {
transform: translateY(9px) rotate(135deg);
}
}
@-webkit-keyframes outT {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(9px) rotate(135deg);
}
}
@keyframes outT {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(9px) rotate(0deg);
}
100% {
transform: translateY(9px) rotate(135deg);
}
}
@-webkit-keyframes inBtm {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(-9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(-9px) rotate(135deg);
}
}
@keyframes inBtm {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-9px) rotate(0deg);
}
100% {
transform: translateY(-9px) rotate(135deg);
}
}
@-webkit-keyframes outBtm {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(-9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(-9px) rotate(135deg);
}
}
@keyframes outBtm {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-9px) rotate(0deg);
}
100% {
transform: translateY(-9px) rotate(135deg);
}
}
.affix {
padding: 0;
background-color: #111;
}
.myH2 {
text-align:center;
font-size: 4rem;
}
.myP {
text-align: justify;
padding-left:15%;
padding-right:15%;
font-size: 20px;
}
@media all and (max-width:700px){
.myP {
padding:2%;
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

+4 -2
View File
@@ -5,8 +5,9 @@
console.log(`Initiated the Hive Lookup Script`);
const avatarURL = 'https://minotar.net/avatar/'
const playerName = document.getElementById("inputBox").value;
async function getGamesData() {
const playerName = document.getElementById("inputBox").value;
if (document.getElementById("gameBox").value === 'sg' || document.getElementById("gameBox").value === 'Survival Games' ) {
const apiURL = `https://api.hivemc.com/v1/player/${playerName}/sg`;
const data = await fetch(apiURL).then(response => response.json());
@@ -254,4 +255,5 @@ const playerName = document.getElementById("inputBox").value;
document.querySelector("#link").innerHTML = "<a href=" + apiURL + ">Raw JSON Link"
var link = document.getElementById("link");
link.style.display = "block";
}
}
}
+111 -30
View File
@@ -1,38 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<title>HiveMC | Java - awexx</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="hive,hivemc,hivemc stats,hivemc shutdown,awexxx,RoboTic,itsawex,hivemc down,hivemc bedrock,minecraft java, minecraft bedrock, minecraft, hivemc stats lookup">
<title>HiveMC >> Awex</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="assets/css/style-new.css">
<link rel="stylesheet" href="assets/css/footer.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/plaguecraft-team/pcn-web/storage/assets/css/form.css">
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<script src="assets/js/newHiveLookup.js"></script>
<script src="assets/js/hiveLookup.js"></script>
<script src="https://cdn.jsdelivr.net/gh/awexxx/awexxx.github.io/assets/js/hidePanel.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/plaguecraft-team/pcn-web/storage/assets/css/form.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="shortcut icon" type="image/png" href="assets/img/logo.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta content="HiveMC Stats Lookup" property="og:title">
<meta content="A tool to look up your 'long lost' HiveMC stats until their API shuts down in 2022." property="og:description">
<!-- Metadata -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="https://awexxx.xyz/assets/img/logo.png"/>
<meta content="Awexxx" property="og:title">
<meta content="Name's awex / Alex. I'm the main web developer for the PlagueCraft Network, as well as one of the owners." property="og:description">
<meta content="https://awexxx.xyz/hivemc" property="og:url">
<meta content="assets/img/logo.png" property="og:image">
<meta content="https://awexxx.xyz/assets/img/logo.png" property="og:image">
<meta content="#9c2d1c" data-react-helmet="true" name="theme-color">
</head>
<body>
<h3 style="padding-top:20px;">Awexx</h3>
<br>
<ul id="navbar">
<li><a href="https://awexxx.xyz/">HOME</a></li>
<li><a href="https://awexxx.xyz/about">ABOUT ME</a></li>
<li><a href="#">HIVEMC STATS LOOKUP</a></li>
</ul>
</nav>
<hr>
<div id="rc_logo">
<a href="#" title="Logo">AWEX</a>
</div>
<div class="rc_nav" id="centered_nav">
<a href="https://awexxx.xyz/" title="Home">Home</a>
<a href="https://awexxx.xyz/about" title="About">About</a>
<a href="#" title="HiveMC">HiveMC Lookup</a>
<a href="https://awexxx.xyz/mcw?type=embed" title="MCW">MCW</a>
<a href="javascript:void(0);" title="Menu" style="font-size:18px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>
<h2>HiveMC Stats Lookup</h2>
<section class="home" style="background-image: url('assets/img/mcw-code.png');">
</section>
<div>
<br />
<h2>HiveMC Stats Lookup</h2>
<h3>What happened?</h3>
<p>On April 15th, 2021 at 5pm EST // 10pm BST, the HiveMC shut down their Java Edition servers. Their API is up until sometime in 2022, which still has accessible player data.<br>
This is complicated for most users, so I decided to make something that can look up this data.<br>
@@ -89,15 +99,86 @@ Survive the Night<br>
Explosive Eggs<br>
Snow Wars</p>
<div class="footer-basic">
<footer>
<div class="social"><a href="https://github.com/awexxx" target="_blank"><i class="icon ion-social-github"></i></a><a href="https://twitter.com/_awexx" target="_blank"><i class="icon ion-social-twitter"></i></a></div>
<ul class="list-inline">
<li class="list-inline-item"><a href="mailto:alex@plaguecraft.xyz">Contact</a></li>
<div class="social"><a href="https://instagram.com/_awexx"><i class="icon ion-social-instagram"></i></a><a href="https://twitter.com/_awexxx"><i class="icon ion-social-twitter"></i></a><a href="https://github.com/awexx/"><i class="icon ion-social-github"></i></a></div>
<ul class="list-inline">
<li class="list-inline-item"><a href="mailto:alex@plaguecraft.xyz">Contact Me</a></li>
<li class="list-inline-item"><a href="#">Medal Clip Webhook</a></li>
</ul>
<p class="copyright">awexx <i class="fa fa-copyright"></i> 2021<br>
<p class="copyright">Awexxx © 2021<br>
<div id="quote"></div>
<script>
var quoteArray = ['You forget a thousand things every day, you make sure this is one of em.', 'THE DAMN SEMI COLON', `console.log('go away')`, `if else if else if else if else if else if else if elsfi fisafhjdskflsdf`,
`HELP PLEASE IM STUFK IN THE FOOTER CHOSOING THESE RESPONSES PLEASDSJAIF DSAF`]
var rand = quoteArray[Math.random() * quoteArray.length | 0]
document.querySelector("#quote").innerHTML = "<p>" + rand + "</p>"
if(rand === `console.log('go away')`) {
console.log(`go away (no, this isn't a mistake, i actually hard coded this in lmao)\nYou found the easter egg :)`)
}
</script>
</footer>
</div>
</body>
</html>
</body>
</html>
<style>
.home {
width: 100%;
height: 30vh;
background-position: center top;
background-size:cover;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
body {
background-color:#a3a3a3;
text-align:center;
font-size:20px
}
body{
background-color:#878787;
text-align:center;
}
a{
color:black;
}
a:hover {
color:white;
}
i{
font-size:20px;
}
body p{
text-align:center;
color:#d4d4d4;
font-size:20px;
}
panel h3{
font-size:10px;
}
</style>
<script>
function myFunction() {
var x = document.getElementById("centered_nav");
if (x.className === "rc_nav") {
x.className += " responsive";
} else {
x.className = "rc_nav";
}
}
</script>
+135 -59
View File
@@ -1,81 +1,157 @@
<!DOCTYPE html>
<html>
<head>
<title>Home - awexx</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home >> Awex</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="assets/css/style-new.css">
<link rel="stylesheet" href="assets/css/footer.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- <script src="https://cdn.jsdelivr.net/gh/awexxx/awexxx.github.io/assets/js/medalclips.js"></script> -->
<script src="http://lab.lepture.com/github-cards/widget.js"></script>
<script src="assets/js/medalclips.js"></script>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="shortcut icon" type="image/png" href="assets/img/logo.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta content="awex" property="og:title">
<meta content="Name's awex / Alex. I'm the main web developer for the PlagueCraft Network, as well as one of the owners." property="og:description">
<!-- Metadata -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="https://awexxx.xyz/assets/img/logo.png"/>
<meta content="Awexxx" property="og:title">
<meta content="Name's awex / Alex. I'm the main web developer for the PlagueCraft Network, as well as one of the owners." property="og:description">
<meta content="https://awexxx.xyz/" property="og:url">
<meta content="assets/img/logo.png" property="og:image">
<meta content="https://awexxx.xyz/assets/img/logo.png" property="og:image">
<meta content="#9c2d1c" data-react-helmet="true" name="theme-color">
</head>
<body onload="loadClip()">
<h3 style="padding-top:20px;">Awexx</h3>
<br>
<ul id="navbar">
<li><a href="#">HOME</a></li>
<li><a href="https://awexxx.xyz/about">ABOUT ME</a></li>
<li><a href="https://awexxx.xyz/hivemc">HIVEMC STATS LOOKUP</a></li>
</ul>
</nav>
<hr>
<div id="rc_logo">
<a href="#" title="Logo">AWEX</a>
</div>
<div class="rc_nav" id="centered_nav">
<a href="#" title="Home">Home</a>
<a href="https://awexxx.xyz/about" title="Services">About</a>
<a href="#about" title="About">About</a>
<a href="#contact" title="Contact">Contact</a>
<a href="javascript:void(0);" title="Menu" style="font-size:18px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>
<section class="home" style="background-image: url('assets/img/code.png');">
</section>
<div>
<br />
<section id="welcome">
<h2>Welcome to my website!</h2>
<p>Name's awex / Alex. I'm the main web developer for the <a href="https://plaguecraft.xyz" target="_blank">PlagueCraft Network</a>, as well as one of the <a href="https://plaguecraft.xyz/team" target="_blank">owners</a>.</p>
</section>
<!--The good stuff. My Projects! -->
<section id="pcn">
<h1 style="padding-top:10px;">Projects</h1>
<hr>
<h2><a href="mcw">Medal Clip Webhook</a></h2>
<p>Being a Medal user, I've seen some Guilded or even Slack users want Medal clip sharing for their platform.<br> While using it directly from the app is easier, I decided to make an app that can send a webhook message to either platform with a clip link.<br>
This can be <a href="https://github.com/awexxx/medal-clip-webhook/wiki">Self Hosted</a>, but you'll need some HTML and Javascript experience most likely (depending on what you want to do with it).</p>
<h2>Contact Me</h2>
<p>My email is alex@plaguecraft.xyz, feel free to <a href="mailto:alex@plaguecraft.xyz">email me</a> there!</p>
<section id="socials">
<h3>Follow me on my socials!</h3>
<h2>Welcome to my website!</h2>
<p>Name's awex / Alex. I'm the main web developer for the <a href="https://plaguecraft.xyz" target="_blank">PlagueCraft Network</a>, as well as one of the <a href="https://plaguecraft.xyz/team" target="_blank">owners</a>.</p>
</section>
<!--The good stuff. My Projects! -->
<section id="pcn">
<h1 style="padding-top:10px;">Projects</h1>
<hr>
<h2><a href="mcw">Medal Clip Webhook</a></h2>
<p>Being a Medal user, I've seen some Guilded or even Slack users want Medal clip sharing for their platform.<br> While using it directly from the app is easier, I decided to make an app that can send a webhook message to either platform with a clip link.<br>
This can be <a href="https://github.com/awexxx/medal-clip-webhook/wiki">Self Hosted</a>, but you'll need some HTML and Javascript experience most likely (depending on what you want to do with it).</p>
<h2>Contact Me</h2>
<p>My email is alex@plaguecraft.xyz, feel free to <a href="mailto:alex@plaguecraft.xyz">email me</a> there!</p>
<section id="socials">
<h3>Follow me on my socials!</h3>
<hr>
<h2>Check out my <a href="https://github.com/awexxx" target="_blank">GitHub</a> page!</h2>
<a href="https://github.com/awexxx/awexxx.github.io"><img src="https://gh-card.dev/repos/awexxx/awexxx.github.io.svg"></a>
<h2 id="twitter">Follow me on <span style="color:blue;"><a href="https://twitter.com/_awexx" target="_blank">Twitter!</a></span></h2>
<div style="text-align:center;">
<blockquote class="twitter-tweet tw-align-center"><p lang="nl" dir="ltr">cheesborbger</p>&mdash; Alex // awexx (@_awexx) <a href="https://twitter.com/_awexx/status/1400755782409412608?ref_src=twsrc%5Etfw">June 4, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<h2 id="medal">Follow me on <span style="color:orange;"><a href="https://medal.tv/itsawexx" target="_blank">Medal!</a></span></h2>
<div id="clip"></div>
<span id="title"></span><br /><br />
</section>
<h2>Check out my <a href="https://github.com/awexxx" target="_blank">GitHub</a> page!</h2>
<a href="https://github.com/awexxx/awexxx.github.io"><img src="https://gh-card.dev/repos/awexxx/awexxx.github.io.svg"></a>
<div class="footer-basic">
<footer>
<div class="social"><a href="https://instagram.com/_awexx"><i class="icon ion-social-instagram"></i></a><a href="https://twitter.com/_awexxx"><i class="icon ion-social-twitter"></i></a><a href="https://github.com/awexx/"><i class="icon ion-social-github"></i></a></div>
<ul class="list-inline">
<li class="list-inline-item"><a href="mailto:alex@plaguecraft.xyz">Contact Me</a></li>
<li class="list-inline-item"><a href="https://awexxx.xyz/mcw">Medal Clip Webhook</a></li>
</ul>
<p class="copyright">Awexxx © 2021<br>
<div id="quote"></div>
<script>
var quoteArray = ['You forget a thousand things every day, you make sure this is one of em.', 'THE DAMN SEMI COLON', `console.log('go away')`, `if else if else if else if else if else if else if elsfi fisafhjdskflsdf`,
`HELP PLEASE IM STUFK IN THE FOOTER CHOSOING THESE RESPONSES PLEASDSJAIF DSAF`]
var rand = quoteArray[Math.random() * quoteArray.length | 0]
document.querySelector("#quote").innerHTML = "<p>" + rand + "</p>"
if(rand === `console.log('go away')`) {
console.log(`go away (no, this isn't a mistake, i actually hard coded this in lmao)\nYou found the easter egg :)`)
}
</script>
</footer>
</div>
<h2 id="twitter">Follow me on <span style="color:blue;"><a href="https://twitter.com/_awexx" target="_blank">Twitter!</a></span></h2>
<div style="text-align:center;">
<blockquote class="twitter-tweet tw-align-center"><p lang="nl" dir="ltr">cheesborbger</p>&mdash; Alex // awexx (@_awexx) <a href="https://twitter.com/_awexx/status/1400755782409412608?ref_src=twsrc%5Etfw">June 4, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</body>
</html>
<h2 id="medal">Follow me on <span style="color:orange;"><a href="https://medal.tv/itsawexx" target="_blank">Medal!</a></span></h2>
<style>
.home {
width: 100%;
height: 102vh;
background-position: center top;
background-size:cover;
<div id="clip"></div>
<span id="title"></span><br /><br />
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
body {
background-color:#a3a3a3;
text-align:center;
}
body{
background-color:#878787;
text-align:center;
}
a{
color:black;
}
a:hover {
color:white;
}
i{
font-size:20px;
}
</section>
body p{
text-align:center;
color:#d4d4d4;
font-size:20px;
}
</style>
<div class="footer-basic">
<footer>
<div class="social"><a href="https://github.com/awexxx" target="_blank"><i class="icon ion-social-github"></i></a><a href="https://twitter.com/_awexx" target="_blank"><i class="icon ion-social-twitter"></i></a></div>
<ul class="list-inline">
<li class="list-inline-item"><a href="mailto:alex@plaguecraft.xyz">Contact</a></li>
</ul>
<p class="copyright">awexx <i class="fa fa-copyright"></i> 2021<br>
</footer>
</div>
</body>
</html>
<script>
function myFunction() {
var x = document.getElementById("centered_nav");
if (x.className === "rc_nav") {
x.className += " responsive";
} else {
x.className = "rc_nav";
}
}
</script>
+6 -4
View File
@@ -1,11 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Medal.tv Clip Webhook Test</title>
<title>MCW >> Awex</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="https://cdn.jsdelivr.net/gh/awexxx/medal-clip-webhook/assets/images/icons/favicon.ico"/>
<link rel="shortcut icon" type="image/png" href="https://awexxx.xyz/assets/img/logo.png"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/awexxx/medal-clip-webhook/assets/vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
@@ -39,7 +39,8 @@
<span class="login100-form-title p-b-34 p-t-27">
Medal.tv Clip Webhook<br>
Embed - <a href="https://awexxx.xyz/mcw?type=pt">Go to Plaintext</a>
Embed - <a style="color:white;" href="https://awexxx.xyz/mcw?type=pt">Go to Plaintext</a><br>
<a style="color:white;" href="#" onclick="history.back()">Head Back</a>
</span>
<div class="wrap-input100 validate-input">
@@ -84,7 +85,8 @@
<span class="login100-form-title p-b-34 p-t-27">
Medal.tv Clip Webhook<br>
Plaintext - <a href="https://awexxx.xyz/mcw?type=embed">Go to Embed</a>
Plaintext - <a href="https://awexxx.xyz/mcw?type=embed">Go to Embed</a><br>
<a style="color:white;" href="#" onclick="history.back()">Head Back</a>
</span>
<div class="wrap-input100 validate-input">