Added the first version of the Sheepstar Dashboard

2022-09-06 17:10:21 +02:00 · 2022-09-06 17:10:21 +02:00 · 908b2b6964
commit 908b2b6964
parent 0a60e6db0d
26 changed files with 532 additions and 0 deletions
--- a/SheepstarDashboardV1/.idea/.gitignore
+++ b/SheepstarDashboardV1/.idea/.gitignore
@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
--- a/SheepstarDashboardV1/.idea/css-test.iml
+++ b/SheepstarDashboardV1/.idea/css-test.iml
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/SheepstarDashboardV1/.idea/discord.xml
+++ b/SheepstarDashboardV1/.idea/discord.xml
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DiscordProjectSettings">
+    <option name="show" value="PROJECT_FILES" />
+  </component>
+</project>
--- a/SheepstarDashboardV1/.idea/inspectionProfiles/Project_Default.xml
+++ b/SheepstarDashboardV1/.idea/inspectionProfiles/Project_Default.xml
@ -0,0 +1,32 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myCustomPropertiesEnabled" value="true" />
+      <option name="myIgnoreVendorSpecificProperties" value="false" />
+      <option name="myCustomPropertiesList">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="marign-top" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
+    <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="7">
+            <item index="0" class="java.lang.String" itemvalue="nobr" />
+            <item index="1" class="java.lang.String" itemvalue="noembed" />
+            <item index="2" class="java.lang.String" itemvalue="comment" />
+            <item index="3" class="java.lang.String" itemvalue="noscript" />
+            <item index="4" class="java.lang.String" itemvalue="embed" />
+            <item index="5" class="java.lang.String" itemvalue="script" />
+            <item index="6" class="java.lang.String" itemvalue="container" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
+  </profile>
+</component>
--- a/SheepstarDashboardV1/.idea/modules.xml
+++ b/SheepstarDashboardV1/.idea/modules.xml
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/css-test.iml" filepath="$PROJECT_DIR$/.idea/css-test.iml" />
+    </modules>
+  </component>
+</project>
--- a/SheepstarDashboardV1/img/add.png
+++ b/SheepstarDashboardV1/img/add.png
--- a/SheepstarDashboardV1/img/arrow.svg
+++ b/SheepstarDashboardV1/img/arrow.svg
@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="11px" height="7px" viewBox="0 0 11 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
+    <title>switcher</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="header" transform="translate(-1275.000000, -41.000000)" fill="#FFFFFF">
+            <g id="Group-3" transform="translate(1151.000000, 22.000000)">
+                <path d="M124.172823,19.7967723 C123.83576,19.3567271 124.006153,19 124.558414,19 L134.247416,19 C134.797435,19 134.963005,19.3491139 134.61487,19.7827005 L129.893835,25.6625512 C129.546755,26.0948247 128.99033,26.0861517 128.655084,25.6484793 L124.172823,19.7967723 Z" id="switcher"></path>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/SheepstarDashboardV1/img/cancel.png
+++ b/SheepstarDashboardV1/img/cancel.png
--- a/SheepstarDashboardV1/img/profile.webp
+++ b/SheepstarDashboardV1/img/profile.webp
--- a/SheepstarDashboardV1/img/question-mark.png
+++ b/SheepstarDashboardV1/img/question-mark.png
--- a/SheepstarDashboardV1/img/services/chat.png
+++ b/SheepstarDashboardV1/img/services/chat.png
--- a/SheepstarDashboardV1/img/services/commands.png
+++ b/SheepstarDashboardV1/img/services/commands.png
--- a/SheepstarDashboardV1/img/services/counter.png
+++ b/SheepstarDashboardV1/img/services/counter.png
--- a/SheepstarDashboardV1/img/services/games.png
+++ b/SheepstarDashboardV1/img/services/games.png
--- a/SheepstarDashboardV1/img/services/giveaway.png
+++ b/SheepstarDashboardV1/img/services/giveaway.png
--- a/SheepstarDashboardV1/img/services/global.png
+++ b/SheepstarDashboardV1/img/services/global.png
--- a/SheepstarDashboardV1/img/services/level.png
+++ b/SheepstarDashboardV1/img/services/level.png
--- a/SheepstarDashboardV1/img/services/moderation.png
+++ b/SheepstarDashboardV1/img/services/moderation.png
--- a/SheepstarDashboardV1/img/services/music.png
+++ b/SheepstarDashboardV1/img/services/music.png
--- a/SheepstarDashboardV1/img/services/role.png
+++ b/SheepstarDashboardV1/img/services/role.png
--- a/SheepstarDashboardV1/img/services/ticket.png
+++ b/SheepstarDashboardV1/img/services/ticket.png
--- a/SheepstarDashboardV1/img/services/voice.png
+++ b/SheepstarDashboardV1/img/services/voice.png
--- a/SheepstarDashboardV1/img/sheepstar.png
+++ b/SheepstarDashboardV1/img/sheepstar.png
--- a/SheepstarDashboardV1/index.html
+++ b/SheepstarDashboardV1/index.html
@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <title>Sheepstar Example</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css" >
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="main.js" async defer></script>
+</head>
+
+<body>
+<div class="block" id="block">
+    <div class="frame">
+        <span class="image image-loading" ><span class="spinner"><span class="spinner-inner spinner-wandering-cubes"><span class="spinner-item"></span><span class="spinner-item"></span></span></span></span>
+    </div>
+</div>
+
+<div class="modal-overlay closed" id="modal-overlay"></div>
+
+<header>
+    <img class="logo" src="img/sheepstar.png" alt="logo" width="60">
+    <nav>
+        <ul class="nav__links">
+            <li><a href="#">Zuhause</a></li>
+            <li><a href="#">Unterpunkt 1</a></li>
+            <li><a href="#">Unterpunkt 2</a></li>
+            <li><a href="#">Unterpunkt 3</a></li>
+        </ul>
+    </nav>
+    <ul class="navigation">
+        <li><img class="rounded" src="img/profile.webp" width="50"></li>
+        <li><h3>GNM</h3></li>
+        <li><img src="img/arrow.svg"></li>
+    </ul>
+</header>
+
+<main>
+    <div class="wrapper">
+        <h3>Standard-Funktionen</h3>
+        <div class="content">
+            <div onclick="activateModule(this)" class="item"><img src="img/sheepstar.png" width="100px"></div>
+            <div onclick="activateModule(this)" class="item"><img src="img/services/global.png" width="100px"></div>
+        </div>
+        <h3>Funktionen #1</h3>
+        <div class="content">
+            <div onclick="activateModule(this)" class="item deactivated"><img src="img/services/voice.png" width="100px"></div>
+            <div onclick="activateModule(this)" class="item deactivated"><img src="img/services/chat.png" width="100px"></div>
+            <div onclick="activateModule(this)" class="item deactivated"><img src="img/services/music.png" width="100px"></div>
+            <div onclick="activateModule(this)" class="item deactivated"><img src="img/services/ticket.png" width="100px"></div>
+            <div onclick="activateModule(this)" class="item deactivated"><img src="img/services/giveaway.png" width="100px"></div>
+            <div onclick="activateModule(this)" class="item deactivated"><img src="img/services/games.png" width="100px"></div>
+            <div onclick="activateModule(this)" class="item deactivated"><img src="img/services/role.png" width="100px"></div>
+        </div>
+        <h3>Funktionen #2</h3>
+        <div class="content">
+            <div onclick="activateModule(this)" class="item deactivated"><img src="img/services/commands.png" width="100px"></div>
+            <div onclick="activateModule(this)" class="item deactivated"><img src="img/services/moderation.png" width="100px"></div>
+            <div onclick="activateModule(this)" class="item deactivated"><img src="img/services/level.png" width="100px"></div>
+        </div>
+    </div>
+</main>
+
+<footer>
+
+</footer>
+
+<div id="activate" class="modal closed">
+    <div class="container">
+        <div class="top">
+            <span class="title">
+                <img id="updateMe" src="img/services/commands.png" width="50px">
+            </span>
+            <span class="center">Reaktionsrollen aktivieren</span>
+            <span class="close">
+                <img src="img/cancel.png" width="35px">
+            </span>
+        </div>
+
+        <div class="content">
+            <h3>Mit diesem Modul kannst du eigene, für deinen Server angepasste Befehle erstellen.<br><br>
+            Modulprefix: <input placeholder="sc!" />
+            <br><br>
+            <button style="float: right;">Aktivieren</button>
+            </h3>
+        </div>
+
+    </div>
+</div>
+
+</body>
+
+</html>
--- a/SheepstarDashboardV1/main.js
+++ b/SheepstarDashboardV1/main.js
@ -0,0 +1,39 @@
+var modalOverlay = document.getElementById("modal-overlay");
+var modal1 = document.getElementById("myModal");
+var modal2 = document.getElementById("activate");
+var span1 = document.getElementsByClassName("close")[0];
+var span2 = document.getElementsByClassName("close")[1];
+
+window.addEventListener("load", function () {
+    document.getElementById("block").style.display = "none";
+});
+span1.onclick = function () {
+    modalOverlay.classList.add("closed");
+    modal2.classList.add("closed");
+}
+
+// span2.onclick = function () {
+//     modalOverlay.classList.add("closed");
+//     modal2.classList.add("closed");
+// }
+
+
+window.onclick = function(event) {
+    if (event.target == modalOverlay) {
+        modalOverlay.classList.add("closed");
+        // modal1.classList.add("closed");
+        modal2.classList.add("closed");
+    }
+}
+
+function showModules() {
+    modal1.classList.remove("closed");
+    modalOverlay.classList.remove("closed");
+}
+
+function activateModule(id) {
+    var url = id.getElementsByTagName("img")[0].src;
+    document.getElementById("updateMe").src = url;
+    modal2.classList.remove("closed");
+    modalOverlay.classList.remove("closed");
+}
--- a/SheepstarDashboardV1/style.css
+++ b/SheepstarDashboardV1/style.css
@ -0,0 +1,323 @@
+/******************** BODY */
+body {background-color: #202130;color: white;font-family: 'Roboto', serif;font-size: 18px;margin: 0; padding: 0;}
+
+
+/******************** SPINNER (PRELOADER) */
+.block {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 50;background: #202130;}
+.frame {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);}
+.image {vertical-align: bottom;}
+.image.image-loading {-ms-flex-align: center;-ms-flex-pack: center;-webkit-box-align: center;-webkit-box-pack: center;align-items: center;background-color: rgba(0, 0, 0, 0.05);background-size: 100% 100%;display: flex;justify-content: center;}
+.image {-moz-user-select: text;-ms-user-select: text;-webkit-user-select: text;display: inline-block;position: relative;user-select: text;}
+.spinner-wandering-cubes .spinner-item {-webkit-animation: spinner-wandering-cubes 1.8s infinite ease-in-out;animation: spinner-wandering-cubes 1.8s infinite ease-in-out;background-color: #7289da;height: 10px;left: 0;position: absolute;top: 0;width: 10px;}
+.spinner-wandering-cubes .spinner-item:last-child {-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}
+.spinner-wandering-cubes .spinner-item {-webkit-animation: spinner-wandering-cubes 1.8s infinite ease-in-out;animation: spinner-wandering-cubes 1.8s infinite ease-in-out;background-color: #7289da;height: 10px;left: 0;position: absolute;top: 0;width: 10px;}
+@-webkit-keyframes spinner-wandering-cubes { 25% {transform: translateX(22px) rotate(-90deg) scale(0.5);} 50% {transform: translateX(22px) translateY(22px) rotate(-180deg);} 75% {transform: translateX(0) translateY(22px) rotate(-270deg) scale(0.5);} to {transform: rotate(-1turn);} }
+@keyframes spinner-wandering-cubes { 25% {transform: translateX(22px) rotate(-90deg) scale(0.5);} 50% {transform: translateX(22px) translateY(22px) rotate(-180deg);} 75% {transform: translateX(0) translateY(22px) rotate(-270deg) scale(0.5);} to {transform: rotate(-1turn);} }
+
+* {
+    padding: 0;
+}
+
+.nav__links li, a, button {
+    font-size: 28px;
+    color: #C8C8C8;
+    text-decoration: none;
+}
+
+header {
+    background-color: #1C1D2F;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding-left: 25px;
+}
+
+.logo {
+    opacity: 80%;
+    transition: all 0.2s ease;
+    border-radius: 15px;
+    cursor: pointer;
+}
+
+.logo:hover {
+    transition: all 0.2s ease;
+    width: 65px;
+    opacity: 100%;
+}
+
+.rounded {
+    border-radius: 100px;
+}
+
+header .navigation {
+    list-style: none;
+    align-items: center;
+    display: flex;
+    margin-left: auto;
+    margin-right: 25px;
+}
+
+header .navigation li {
+    padding-left: 10px;
+}
+
+
+main .wrapper {
+    margin: 20px 80px;
+    background-attachment: fixed;
+}
+
+main .wrapper h3 {
+    font-weight: 400;
+    margin-left: 10px;
+    font-size: 36px;
+}
+
+main .wrapper .content {
+    display: flex;
+    flex-wrap: wrap;
+}
+main .wrapper .content .item {
+    transition: all 0.5s ease;
+    width: 140px;
+    cursor: pointer;
+    height: 140px;
+    background-color: #22273A;
+    margin: 10px;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items :center;
+}
+
+main .wrapper .content .deactivated {
+    opacity: 30%;
+}
+
+main .wrapper .content .item img {
+    width: 120px;
+    transition: all 0.5s ease;
+    border-radius: 25px;
+}
+
+main .wrapper .content .item:hover {
+    transition: all 0.3s ease;
+    background-color: #384266;
+    border-radius: 20px;
+}
+
+main .wrapper .content .item:hover img {
+    transition: all 0.5s ease;
+    width: 130px;
+}
+
+.nav__links {
+    list-style: none;
+}
+
+.nav__links li {
+    display: inline-block;
+    padding: 0 20px;
+}
+
+.nav__links li a {
+    transition: all 0.3s ease 0s;
+}
+
+.nav__links li a:hover {
+    color: #0088a9;
+}
+
+
+footer {
+    background-color: #1C1D2D;
+    width: 100%;
+    height: 25px;
+}
+
+.modal-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 50;background: rgba(24, 24, 24, 0.6);}
+.modal {position: fixed;top: 50%;z-index: 100;left: 50%;transform: translate(-50%, -50%);}
+.closed {display: none;}
+.modal .container {/*border: #199DF5 1px solid;*/
+    width: 710px;height: auto;background-color: #22273A;border-radius: 5px; -webkit-animation-name: animatetop;-webkit-animation-duration: 0.4s;animation-name: animatetop;animation-duration: 0.4s;}
+
+
+@-webkit-keyframes animatetop {
+    from {top:-300px; opacity:0}
+    to {top:0; opacity:1}
+}
+
+@keyframes animatetop {
+    from {top:-300px; opacity:0}
+    to {top:0; opacity:1}
+}
+
+/*inline*/
+.modal .container .top {
+    margin-left: 5px;
+    margin-right: 5px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: center;
+    vertical-align: top;
+}
+
+
+.modal .container .top span {
+    font-size: 21px;
+    flex: 1;
+}
+.modal .container .top .title img {
+    flex-grow:0;
+    flex-shrink:0;
+    /*border-radius: 20px;*/
+}
+.modal .container .top span:nth-of-type(1) {
+    text-align: left;
+
+}
+.modal .container .top span:nth-of-type(2) {
+    flex-basis: initial;
+    text-align: center;
+}
+.modal .container .top span:nth-of-type(3) {
+    text-align: right;
+}
+
+.modal .container .content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.modal .container .content h3 {
+    font-weight: 400;
+}
+
+.modal .container .content input {
+    border: none;
+    font-size: 25px;
+    width: 100px;
+    border-radius: 7px;
+    color: #ffffff;
+    background-color: #252D48;
+}
+
+.modal .container .content button {
+    border: none;
+    cursor: pointer;
+    border-radius: 5px;
+    background-color: #00d06c;
+    font-weight: 500;
+    width: 120px;
+    height: 35px;
+    font-size: 26px;
+    color: #ffffff;
+}
+
+
+.modal .container .content .item .indicator {
+    position: absolute;
+    left: 100px;
+    float: right;
+    background-color: #1C1D2D;
+    width: 25px;
+    height: 25px;
+    border-radius: 100px;
+}
+
+.modal .container .content .item hr {
+    width: 25px;
+    border: gray 2px solid;
+    border-radius: 5px;
+    margin: 0 auto 0 auto;
+}
+
+.modal .container .content .item h3 {
+    margin-top: 0;
+}
+
+
+.modal .container .content .item .indicator img {
+    padding-top: 3px;
+    padding-left: 1px;
+    width: 20px;
+}
+
+.modal .container .content .item {
+    cursor: pointer;
+    position: relative;
+    padding-left: 10px;
+    padding-right: 10px;
+    border-radius: 15px;
+}
+
+.modal .container .content .item .tooltip img {
+    width: 100px;
+    height: 100px;
+}
+
+.modal .container .content .item:hover {
+    background-color: #1E2230;
+    transition: 300ms;
+}
+
+.modal .container .indicator {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px dotted black;
+}
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px dotted black;
+}
+
+
+.tooltip .tooltiptext {
+    visibility: hidden;
+    width: 120px;
+    background-color: black;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 0;
+    position: absolute;
+    z-index: 1;
+    bottom: 100%;
+    left: 50%;
+    margin-left: -60px;
+}
+
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+}
+
+@media (max-width: 480px) {
+    main .wrapper {
+        margin: 0 10px 0 10px;
+    }
+    main .wrapper .content .item {
+        width: 110px;
+        height: 110px;
+    }
+    main .wrapper .content .item img {
+        width: 100px;
+    }
+}
+
+@media (max-width: 700px) {
+    .modal {
+        left: 0;
+        transform: translate(0%, -50%);
+    }
+    .modal .container {
+        width: 100%;
+    }
+}