A bit of an overhaul

- Built in the MCW
- Updated some links to direct to awexxx.xyz
- Changed around the CSS

.gitignore

@@ -0,0 +1 @@
+assets/js/newHiveLookup.js

about.html

@@ -20,9 +20,9 @@
     <h3 style="padding-top:20px;">Awexx</h3>
    <br>
    <ul id="navbar">
-      <li><a href="https://awexxx.github.io/">HOME</a></li>
+      <li><a href="https://awexxx.xyz/">HOME</a></li>
       <li><a href="#">ABOUT ME</a></li>
-      <li><a href="https://awexxx.github.io/hivemc">HIVEMC STATS LOOKUP</a></li>
+      <li><a href="https://awexxx.xyz/hivemc">HIVEMC STATS LOOKUP</a></li>
    </ul>
 </nav>
 <hr>

assets/css/style.css

@@ -1,36 +1,34 @@
-/*Universal*/
+/* Univ Attributes */
-
 #logo{
     float:center;
-}
+  }
   
-hr{
+  hr{
     width:100px;
     border-color:black;
   
-}
+  }
   
-.center {
+  .center {
     display:block;
     margin:0 auto;
     margin-left: auto;
     margin-right: auto;
     width:20%;
     padding-top:20px;
-}
+  }
   
-#center {
+  #center {
     display:block;
     margin:0 auto;
     margin-left: auto;
     margin-right: auto;
     width:30%;
-}
+  }
   
-body{
+  body{
-  background-color:#e0e0e0;
     text-align:center;
-}
+  }
   
     h1{
       text-align:center;
@@ -55,135 +53,120 @@ body{
     text-align:center;
     color:#6b6b6b;
     font-size:20px;
-}
+  }
   
-a{
+  a{
     color:black;
-}
+  }
   
-a:hover{
+  a:hover{
-  color:white;
+    color:gray;
-}
+  }
 
-#panel {
+/* Home Page Attribs */
-  margin: 50px auto;
-  width: 300px;
-  padding: 30px 25px;
-  background: white;
-  border-radius: 25px;
-  display:none;
-}
-
-#link {
-  display:none;
-}
-
-/*Home*/
 #welcome{
     background-color:#474747;
     padding-top:20px;
     padding-bottom:15px;
-}
+  }
   
-#welcome h2{
+  #welcome h2{
     color:#c2c2c2;
-}
+  }
   
-#welcome p{
+  #welcome p{
     color:#c2c2c2;
-}
+  }
   
-/*Socials Color Changing*/
+  /*Socials Color Changing*/
-#medal a{
+  #medal a{
     color:orange;
     text-decoration:none;
     font-size:28px;
     padding-right:15px;
     text-align:center;
-}
+  }
   
-#medal a:hover{
+  #medal a:hover{
     color:white;
-}
+  }
   
-#twitter a{
+  #twitter a{
     color:#467175;
     text-decoration:none;
     font-size:28px;
     padding-right:15px;
     padding-bottom:20px;
     text-align:center;
-}
+  }
   
-#twitter a:hover{
+  #twitter a:hover{
     color:white;
-}
+  }
 
-/*Navbar Attributes*/
+  /* Navigation Bar Styling */
-#navbar{
+  #navbar{
-  background-color:#e0e0e0;
     color:#333;
-}
+  }
   
-#navbar ul{
+  #navbar ul{
     padding:0px;
     list-style:none;
     text-align:center;
-}
+  }
   
-#navbar li{
+  #navbar li{
     display:inline;
     text-align:center;
-}
+  }
   
-#navbar a{
+  #navbar a{
     color:#333;
     text-decoration:none;
     font-size:18px;
     padding-right:15px;
     text-align:center;
-}
+  }
 
-
+  /* Footer Styling */
-/*Footer Attributes*/
+  .footer-p{
-.footer-p{
     color:white;
-}
+  }
-.footer-basic {
+  .footer-basic {
     padding:40px 0;
-  background-color:#bfbfbf;
+    background-color:#454545;
-  color:#4b4c4d;
+    color:white;
-}
+  }
   
-.footer-basic ul {
+  .footer-basic ul {
     padding:0;
     list-style:none;
     text-align:center;
     font-size:18px;
     line-height:1.6;
     margin-bottom:0;
-}
+  }
   
-.footer-basic li {
+  .footer-basic li {
     padding:0 10px;
-}
+  }
   
-.footer-basic ul a {
+  .footer-basic ul a {
     color:inherit;
     text-decoration:none;
     opacity:0.8;
-}
+  }
   
-.footer-basic ul a:hover {
+  .footer-basic ul a:hover {
     opacity:1;
-}
+  }
   
-.footer-basic .social {
+  .footer-basic .social {
     text-align:center;
     padding-bottom:25px;
-}
+  }
   
-.footer-basic .social > a {
+  .footer-basic .social > a {
     font-size:24px;
     width:40px;
     height:40px;
@@ -191,20 +174,20 @@ a:hover{
     display:inline-block;
     text-align:center;
     border-radius:50%;
-  border:1px solid #ccc;
+    border:1px solid white;
     margin:0 8px;
     color:inherit;
     opacity:0.75;
-}
+  }
   
-.footer-basic .social > a:hover {
+  .footer-basic .social > a:hover {
     opacity:0.9;
-}
+  }
   
-.footer-basic .copyright {
+  .footer-basic .copyright {
     margin-top:15px;
     text-align:center;
     font-size:13px;
-  color:black;
+    color:white;
     margin-bottom:0;
-}
+  }

assets/js/hiveLookup.js

@@ -3,11 +3,10 @@
 //  Dvlpr. Awexx  //
 ////////////////////
 
-const avatarURL = 'https://minotar.net/avatar/'
 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());
@@ -256,4 +255,3 @@ console.log(`Initiated the Hive Lookup Script`);
             var link = document.getElementById("link");
             link.style.display = "block"; 
         }
-    }

assets/js/medalclips.js

@@ -6,10 +6,12 @@
 const medalapi = 'https://developers.medal.tv/v1/latest?userId=215577&limit=1'
 
     async function medalClips() {
+        window.addEventListener('load', function () {
         const { contentObjects } = await fetch(medalapi, {
             method: 'GET',
             headers: { 'Authorization': 'pub_x9mjeQnqk07tEK1ge7w2xHYxTpTEbKwN', 'Content-Type': 'application/json' }
         }).then(response => response.json())
 
         document.querySelector("#clip").innerHTML = contentObjects[0].embedIframeCode
+        })
     }

assets/js/q.js

@@ -0,0 +1,20 @@
+function checkparam() {
+    const params = new URLSearchParams(window.location.search)
+    // console.log(params) Only uncomment this for testing purposes.
+
+    if (params.get('type') === 'pt') {
+        const pt = document.getElementById("pt");
+        pt.style.display = "block";
+        const embed = document.getElementById("embed");
+        embed.style.display = "none";
+    }
+
+    if (params.get('status') === 'success') {
+        const pt = document.getElementById("pt");
+        pt.style.display = "none";
+        const embed = document.getElementById("embed");
+        embed.style.display = "none";
+        const success = document.getElementById("success");
+        success.style.display = "block";
+    }
+}

hivemc.html

@@ -8,7 +8,7 @@
     <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/hiveLookup.js"></script>
+    <script src="assets/js/newHiveLookup.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">
@@ -25,8 +25,8 @@
     <h3 style="padding-top:20px;">Awexx</h3>
    <br>
    <ul id="navbar">
-      <li><a href="https://awexxx.github.io/">HOME</a></li>
+      <li><a href="https://awexxx.xyz/">HOME</a></li>
-      <li><a href="about">ABOUT ME</a></li>
+      <li><a href="https://awexxx.xyz/about">ABOUT ME</a></li>
       <li><a href="#">HIVEMC STATS LOOKUP</a></li>
    </ul>
 </nav>
@@ -42,9 +42,8 @@
                 <label style="font-size:20px; text-align:center;" for="fname">In-Game Name</label><br />
                     <input style="font-size:20px;" type="text" id="inputBox" name="playerName" placeholder="Your IGN.." required><br />
                     <input style="font-size:20px;" type="text" id="gameBox" name="gameMode" placeholder="Gamemode (check key below)" required><br />
-
+                    <label style="font-size:20px; text-align:center;">Achievements?</label><br />
-                    <!-- <label style="font-size:20px;">Bridges</label><br />
+                        <input id="checkBox" type="checkbox"><br /><br />
-                    <input style="font-size:20px;" type="checkbox" id="bridgeBox" name="bridgeBox" value="Bridges"><br /><br /> -->
                     <button type="button" onclick="getGamesData()" style="font-size:20px;" class="submit" id="submitBtn">Submit</button><br /><br />
                   </form>
               <section>

index.html

@@ -7,9 +7,6 @@
     <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/plaguecraft-team/pcn-web/storage/assets/js/playersBackend.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/plaguecraft-team/pcn-web/storage/assets/js/hidePanel.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/plaguecraft-team/pcn-web/storage/assets/css/form.css">
     <script src="https://cdn.jsdelivr.net/gh/awexxx/awexxx.github.io/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"/>
@@ -43,37 +40,10 @@
   <section id="pcn">
 <h1 style="padding-top:10px;">Projects</h1>
     <hr>
-    <h2>Medal Clip Webhook</h2>
+    <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">Self Hosted</a>, but you'll need some Node.js experience most likely.</p>
 
-      <h2>PCN Player Lookup & API</h2>
-        <p>I am in charge of all of the updates that go to both the <a href="https://plaguecraft.xyz">PCN Website and API!</a><br>
-        Both of which are open source, you can check out the <a href="https://github.com/plaguecraft-team/pcn-web">website</a> and <a href="https://github.com/awexxx/pcnapi">API</a> at these links.<br>
-      Here's an example of what I've built!</p>
-      
-      <form onsubmit="return false">
-        <label style="font-size:20px; text-align:center;" for="fname">In-Game Name</label><br />
-            <input style="font-size:20px;" type="text" id="inputBox" name="playerName" placeholder="Put 'babyawex' here!" required><br />
-            <hr style="width:60px";>
-            <div id="radioBtns">
-            <label style="font-size:20px; display:inline;">Economy</label><br />
-            <input style="font-size:20px; display:inline;" type="radio" id="econBox" name="box" value="econBox" required><br />
-            <label style="font-size:20px; display:inline;">Skills</label><br />
-            <input style="font-size:20px; display:inline;" type="radio" id="skillsBox" name="box" value="Box" required><br />
-            <label style="font-size:20px; display:inline;">SkyWars</label><br />
-            <input style="font-size:20px; display:inline;" type="radio" id="swBox" name="box" value="Box" required><br /><br />
-        </div>
-            <!-- <label style="font-size:20px;">Bridges</label><br />
-            <input style="font-size:20px;" type="checkbox" id="bridgeBox" name="bridgeBox" value="Bridges"><br /><br /> -->
-            <button type="button" onclick="checkBoxes()" style="font-size:20px"; id="submitBtn">Submit</button><br /><br />
-      
-      
-      <div id="panel"></div>
-
-      <button type="button" onclick="hidePanel()" style="font-size:20px"; id="submitBtn">Hide the panel</button><br /><br />
-    </form>
-
     <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>
 
@@ -88,8 +58,8 @@
 
         <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><br />
+          <div id="clip"></div>
-          <i>Thanks to the Medal API, this stays up to date!</i><br />     
+          <i>My latest Medal clip ^</i><br /><br />     
   
         </section>
 

mcw.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>Medal.tv Clip Webhook Test</title>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+<!--===============================================================================================-->  
+<link rel="icon" type="image/png" href="https://awexxx.github.io/medal-clip-webhook/assets/images/icons/favicon.ico"/>
+<!--===============================================================================================-->
+  <link rel="stylesheet" type="text/css" href="https://awexxx.github.io/medal-clip-webhook/assets/vendor/bootstrap/css/bootstrap.min.css">
+<!--===============================================================================================-->
+  <link rel="stylesheet" type="text/css" href="https://awexxx.github.io/medal-clip-webhook/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
+<!--===============================================================================================-->
+  <link rel="stylesheet" type="text/css" href="https://awexxx.github.io/medal-clip-webhook/assets/fonts/iconic/css/material-design-iconic-font.min.css">
+<!--===============================================================================================-->
+  <link rel="stylesheet" type="text/css" href="https://awexxx.github.io/medal-clip-webhook/assets/vendor/animate/animate.css">
+<!--===============================================================================================-->  
+  <link rel="stylesheet" type="text/css" href="https://awexxx.github.io/medal-clip-webhook/assets/vendor/css-hamburgers/hamburgers.min.css">
+<!--===============================================================================================-->
+  <link rel="stylesheet" type="text/css" href="https://awexxx.github.io/medal-clip-webhook/assets/vendor/animsition/css/animsition.min.css">
+<!--===============================================================================================-->
+  <link rel="stylesheet" type="text/css" href="https://awexxx.github.io/medal-clip-webhook/assets/vendor/select2/select2.min.css">
+<!--===============================================================================================-->  
+  <link rel="stylesheet" type="text/css" href="https://awexxx.github.io/medal-clip-webhook/assets/vendor/daterangepicker/daterangepicker.css">
+<!--===============================================================================================-->
+  <link rel="stylesheet" type="text/css" href="https://awexxx.github.io/medal-clip-webhook/assets/css/util.css">
+  <link rel="stylesheet" type="text/css" href="https://awexxx.github.io/medal-clip-webhook/assets/css/main.css">
+<!--===============================================================================================-->
+</head>
+<body>
+<div id="embed"></div>
+	<div class="limiter">
+		<div class="container-login100" style="background-image: url('https://awexxx.github.io/medal-clip-webhook/assets/images/bg-01.jpg');">
+			<div class="wrap-login100">
+				<form onsubmit="return false" class="login100-form validate-form">
+					<span class="login100-form-logo">
+						<i class="zmdi zmdi-fullscreen"></i>
+					</span>
+
+					<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>
+					</span>
+
+					<div class="wrap-input100 validate-input">
+						<input class="input100" type="url" name="webhookURL" id="webhookURL" placeholder="Discord">
+						<span class="focus-input100" data-placeholder="&#xf191;"></span>
+					</div>
+
+					<div class="wrap-input100 validate-input">
+						<input class="input100" type="url" id="cliplink" name="clipLink" placeholder="Clip Link">
+						<span class="focus-input100" data-placeholder="&#xf18e;"></span>
+					</div>
+					<div class="wrap-input100 validate-input">
+						<input class="input100" type="text" name="medalUsername" id="medalUsername" placeholder="Medal Username">
+						<span class="focus-input100" data-placeholder="&#xf207;"></span>
+					</div>
+					<div class="wrap-input100 validate-input">
+						<input class="input100" type="text" name="caption" id="caption" placeholder="Caption">
+						<span class="focus-input100" data-placeholder="&#xf150;"></span>
+					</div>
+
+					<div class="container-login100-form-btn">
+						<button class="login100-form-btn" onclick="postEmbed()">
+							<i class="zmdi zmdi-mail-send"></i>Submit
+						</button>
+					</div>
+
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
+
+    <div id="pt" style="display:none;">
+        <div class="limiter">
+        <div class="container-login100" style="background-image: url('https://awexxx.github.io/medal-clip-webhook/assets/images/bg-01.jpg');">
+          <div class="wrap-login100">
+            <form onsubmit="return false" class="login100-form validate-form"">
+              <span class="login100-form-logo">
+                <i class="zmdi zmdi-fullscreen"></i>
+              </span>
+    
+              <span class="login100-form-title p-b-34 p-t-27">
+                Medal.tv Clip Webhook<br>
+                Plaintext - <a href="https://awexxx.xyz/mcw">Go to Embed</a>
+              </span>
+    
+              <div class="wrap-input100 validate-input">
+                <input class="input100" type="url" name="webhookURL" id="webhookURL" placeholder="Discord/Guilded API URL">
+                <span class="focus-input100" data-placeholder="&#xf191;"></span>
+              </div>
+    
+              <div class="wrap-input100 validate-input">
+                <input class="input100" type="url" name="clipLink" id="cliplink" placeholder="Clip Link">
+                <span class="focus-input100" data-placeholder="&#xf18e;"></span>
+              </div>
+              <div class="wrap-input100 validate-input">
+                <input class="input100" type="text" name="medalUsername" id="medalUsername" placeholder="Medal Username">
+                <span class="focus-input100" data-placeholder="&#xf207;"></span>
+              </div>
+              <div class="wrap-input100 validate-input">
+                <input class="input100" type="text" name="caption" id="caption" placeholder="Caption">
+                <span class="focus-input100" data-placeholder="&#xf150;"></span>
+              </div>
+    
+              <div class="container-login100-form-btn">
+                <button class="login100-form-btn" onclick="postPlain()">
+                  <i class="zmdi zmdi-mail-send"></i>Submit
+                </button>
+              </div>
+    
+              </div>
+            </form>
+          </div>
+        </div>
+      </div></div>
+    
+      <div id="success" style="display:none;">
+        <div class="limiter">
+        <div class="container-login100" style="background-image: url('https://awexxx.github.io/medal-clip-webhook/assets/images/bg-02.jpg');">
+          <div class="wrap-login100" style="text-align:center;">
+            <h2>You did it!</h2>
+            <br /><p style="color:black; font-size:20px;">You shared a clip to a server! Poggers!<br />
+            Check the server for the clip you shared ;)</p>
+            <p><a style="color:white; font-size:20px;" href="#" onclick="history.back()">Head Back</a></p>
+    
+            <hr>
+    
+            <p style="color:black;"><i>Have problems? <a href="https://github.com/awexxx/medal-clip-webhook/issues">Open an issue!</i></p>
+            <p style="color:black;"><i><a href="https://github.com/awexxx/medal-clip-webhook">Fork this project!</a></p>
+    
+          </div>
+        </div>
+      </div></div>
+	
+
+	<div id="dropDownSelect1"></div>
+	
+<!--===============================================================================================-->
+  <script src="https://awexxx.github.io/medal-clip-webhook/assets/vendor/jquery/jquery-3.2.1.min.js"></script>
+<!--===============================================================================================-->
+  <script src="https://awexxx.github.io/medal-clip-webhook/assets/vendor/animsition/js/animsition.min.js"></script>
+<!--===============================================================================================-->
+  <script src="https://awexxx.github.io/medal-clip-webhook/assets/vendor/bootstrap/js/popper.js"></script>
+  <script src="https://awexxx.github.io/medal-clip-webhook/assets/vendor/bootstrap/js/bootstrap.min.js"></script>
+<!--===============================================================================================-->
+  <script src="https://awexxx.github.io/medal-clip-webhook/assets/vendor/select2/select2.min.js"></script>
+<!--===============================================================================================-->
+  <script src="https://awexxx.github.io/medal-clip-webhook/assets/vendor/daterangepicker/moment.min.js"></script>
+  <script src="https://awexxx.github.io/medal-clip-webhook/assets/vendor/daterangepicker/daterangepicker.js"></script>
+<!--===============================================================================================-->
+  <script src="https://awexxx.github.io/medal-clip-webhook/assets/vendor/countdowntime/countdowntime.js"></script>
+<!--===============================================================================================-->
+  <script src="https://awexxx.github.io/medal-clip-webhook/assets/js/main.js"></script>
+  <script src="https://awexxx.github.io/medal-clip-webhook/assets/js/slideshow.js"></script>
+  <script src="https://awexxx.github.io/medal-clip-webhook/public/javascript/embed.js"></script>
+  <script src="https://awexxx.github.io/medal-clip-webhook/public/javascript/pt.js"></script>
+  <script src="https://awexxx.xyz/assets/js/q.js"></script>
+
+</body>
+</html>