Upload 6 files

static/docs.html

@@ -219,4 +219,4 @@ print(response)</code></pre>
     <p>AkenoAI API Client &copy; 2024</p>
 </footer>
 </body>
-</html>
+</html>

static/follow.css

@@ -0,0 +1,260 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Poppins', sans-serif;
+}
+body{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: #ecf0f3;
+  color: #31344b;
+}
+.wrapper,
+.wrapper .img-area,
+.social-icons a,
+.buttons button{
+  background: #ecf0f3;
+  box-shadow: -3px -3px 7px #ffffff,
+               3px 3px 5px #ceced1;
+}
+.wrapper{
+  position: relative;
+  width: 350px;
+  padding: 30px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.wrapper .icon{
+  font-size: 17px;
+  color: #31344b;
+  position: absolute;
+  cursor: pointer;
+  opacity: 0.7;
+  top: 15px;
+  height: 35px;
+  width: 35px;
+  text-align: center;
+  line-height: 35px;
+  border-radius: 50%;
+  font-size: 16px;
+}
+.wrapper .icon i{
+  position: relative;
+  z-index: 9;
+}
+.wrapper .icon.arrow{
+  left: 15px;
+}
+.wrapper .icon.dots{
+  right: 15px;
+}
+.wrapper .img-area{
+  height: 150px;
+  width: 150px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.img-area .inner-area{
+  height: calc(100% - 25px);
+  width: calc(100% - 25px);
+  border-radius: 50%;
+}
+.inner-area img{
+  height: 100%;
+  width: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+.wrapper .name{
+  font-size: 23px;
+  font-weight: 500;
+  margin: 10px 0 5px 0;
+}
+.wrapper .about{
+  color: #44476a;
+  font-weight: 400;
+  font-size: 16px;
+}
+.wrapper .social-icons{
+  margin: 15px 0 25px 0;
+}
+.social-icons a{
+  position: relative;
+  height: 40px;
+  width: 40px;
+  margin: 0 5px;
+  display: inline-flex;
+  text-decoration: none;
+  border-radius: 50%;
+}
+.social-icons a:hover::before,
+.wrapper .icon:hover::before,
+.buttons button:hover:before{
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  border-radius: 50%;
+  background: #ecf0f3;
+  box-shadow: inset -3px -3px 7px #ffffff,
+              inset 3px 3px 5px #ceced1;
+}
+.buttons button:hover:before{
+  z-index: -1;
+  border-radius: 5px;
+}
+.social-icons a i{
+  position: relative;
+  z-index: 3;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+  line-height: 40px;
+}
+.social-icons a.fb i{
+  color: #4267B2;
+}
+.social-icons a.twitter i{
+  color: #1DA1F2;
+}
+.social-icons a.insta i{
+  color: #E1306C;
+}
+.social-icons a.youtube i{
+  color: #ff0000;
+}
+.social-icons a.linkedin i{
+  color: #0077B5;
+}
+.wrapper .buttons{
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+.buttons button{
+  position: relative;
+  width: 100%;
+  border: none;
+  outline: none;
+  padding: 12px 0;
+  color: #31344b;
+  font-size: 17px;
+  font-weight: 400;
+  border-radius: 5px;
+  cursor: pointer;
+  z-index: 4;
+}
+.buttons button:first-child{
+  margin-right: 10px;
+}
+.buttons button:last-child{
+  margin-left: 10px;
+}
+.wrapper .social-share{
+  display: flex;
+  width: 100%;
+  margin-top: 30px;
+  padding: 0 5px;
+  justify-content: space-between;
+}
+.social-share .row{
+  //color: #31344b;
+  font-size: 17px;
+  cursor: pointer;
+  position: relative;
+}
+.social-share .row::before{
+  position: absolute;
+  content: "";
+  height: 100%;
+  width: 2px;
+  background: #e0e6eb;
+  margin-left: -25px;
+}
+.row:first-child::before{
+  background: none;
+}
+.social-share .row i.icon-2{
+  position: absolute;
+  left: 0;
+  top: 50%;
+  color: #31344b;
+  transform: translateY(-50%);
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.3s ease;
+}
+.row:nth-child(1):hover i.fa-heart,
+.row:nth-child(2):hover i.fa-comment{
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.mode-switcher {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+}
+
+.toggle {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 24px;
+  background-color: #ccc;
+  border-radius: 12px;
+  transition: background-color 0.3s;
+}
+
+.toggle:before {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: #fff;
+  top: 2px;
+  left: 2px;
+  transition: transform 0.3s;
+}
+
+input[type="checkbox"] {
+  display: none;
+}
+
+input[type="checkbox"]:checked + .toggle {
+  background-color: #333;
+}
+
+input[type="checkbox"]:checked + .toggle:before {
+  transform: translateX(26px);
+}
+
+.dark-mode {
+  background: #31344b;
+  color: #ecf0f3;
+}
+
+.dark-mode .mode-switcher .toggle {
+  background-color: #888;
+}
+
+.dark-mode .mode-switcher .toggle:before {
+  background-color: #31344b;
+  //background-color: #ecf0f3;
+}
+
+.dark-mode .icon {
+  color: #ecf0f3;
+}

static/follow.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Randy Developer</title>
+    <link rel="stylesheet" href="/static/follow.css" type="text/css">
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta content="Randy" property="og:site_name">
+    <meta content="Randy || The Dev" property="og:title">
+    <meta content="avater.png" property="og:image">
+    <meta content="akeno.randydev.my.id" property="og:url">
+    <meta content="I am Randy, a passionate programmer dedicated to crafting innovative solutions. Dive into my projects and discover a world of creativity, problem-solving, and endless possibilities. Join me on this journey of continuous learning and growth in the realm of technology." property="og:description">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <script>
+      const disabledKeys = ["c", "C", "x", "J", "u", "I"];
+    
+      const showAlert = e => {
+        //e.preventDefault();
+        //return alert("Dude, don't be a copy cat!");
+      }
+
+      function openLink(url) {
+        window.location.href = url;
+        }
+    
+      document.addEventListener("contextmenu", e => {
+        showAlert(e);
+      });
+    
+      document.addEventListener("keydown", e => {
+        if((e.ctrlKey && disabledKeys.includes(e.key)) || e.key === "F12") {
+          showAlert(e);
+        }
+      });
+
+      document.addEventListener('DOMContentLoaded', () => {
+          const modeToggle = document.getElementById('mode-toggle');
+
+          modeToggle.addEventListener('change', () => {
+              // document.body.classList.toggle('dark-mode');
+              document.querySelector("#wrapper").classList.toggle('dark-mode');
+          });
+      });
+    </script>
+</head>
+<body>
+  <div class="mode-switcher">
+    <input type="checkbox" id="mode-toggle">
+    <label for="mode-toggle" class="toggle"></label>
+  </div>
+  <div class="wrapper" id="wrapper">
+    <div class="img-area">
+      <div class="inner-area">
+        <img src="/static/avater.png" alt="">
+      </div>
+    </div>
+    <div class="name">RANDY WAHIDIN</div>
+    <div class="about">Developer & Programmer</div>
+    <div class="social-icons">
+      <a href="https://www.facebook.com/randydev99" class="fb" target="_blank"><i class="fab fa-facebook-f"></i></a>
+      <a href="https://www.twitter.com/randywahidin" class="twitter" target="_blank"><i class="fab fa-twitter"></i></a>
+      <a href="https://www.instagram.com/randydev99" class="insta" target="_blank"><i class="fab fa-instagram"></i></a>
+      <a href="https://www.linkedin.com/in/randywahidin" class="linkedin" target="_blank"><i class="fab fa-linkedin"></i></a>
+    </div>
+    <div class="buttons">
+      <button onclick="openLink('https://github.com/TeamKillerX')">Follow</button>
+      <button onclick="openLink('https://telegram.me/xtdevs')">Message</button>
+    </div>
+    <div class="social-share">
+      <div class="row">
+        <i class="far fa-heart"></i>
+        <i class="icon-2 fas fa-heart"></i>
+        <span>20.4k</span>
+      </div>
+      <div class="row">
+        <i class="far fa-comment"></i>
+        <i class="icon-2 fas fa-comment"></i>
+        <span>14.3k</span>
+      </div>
+      <div class="row">
+        <i class="fas fa-share"></i>
+        <span>12.8k</span>
+      </div>
+    </div>
+  </div>
+
+</body>
+</html>

static/index.html

@@ -253,7 +253,7 @@
         <br>
         <hr>
         <footer>
-            <p class="footer__copy">&#169; Developed with by Randydev</p>
+            <p class="footer__copy">&#169; Developed with by <a href="/static/follow.html">Randydev</a></p>
         </footer>
         </br>
         </hr>