diff --git a/SheepstarDashboardV1/.idea/.gitignore b/SheepstarDashboardV1/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/SheepstarDashboardV1/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/SheepstarDashboardV1/.idea/css-test.iml b/SheepstarDashboardV1/.idea/css-test.iml new file mode 100644 index 0000000..0c8867d --- /dev/null +++ b/SheepstarDashboardV1/.idea/css-test.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/SheepstarDashboardV1/.idea/discord.xml b/SheepstarDashboardV1/.idea/discord.xml new file mode 100644 index 0000000..cd711a0 --- /dev/null +++ b/SheepstarDashboardV1/.idea/discord.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/SheepstarDashboardV1/.idea/inspectionProfiles/Project_Default.xml b/SheepstarDashboardV1/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..1a11f3c --- /dev/null +++ b/SheepstarDashboardV1/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,32 @@ + + + + \ No newline at end of file diff --git a/SheepstarDashboardV1/.idea/modules.xml b/SheepstarDashboardV1/.idea/modules.xml new file mode 100644 index 0000000..457baa2 --- /dev/null +++ b/SheepstarDashboardV1/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/SheepstarDashboardV1/img/add.png b/SheepstarDashboardV1/img/add.png new file mode 100644 index 0000000..1cbd10e Binary files /dev/null and b/SheepstarDashboardV1/img/add.png differ diff --git a/SheepstarDashboardV1/img/arrow.svg b/SheepstarDashboardV1/img/arrow.svg new file mode 100644 index 0000000..509a683 --- /dev/null +++ b/SheepstarDashboardV1/img/arrow.svg @@ -0,0 +1,14 @@ + + + + switcher + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/SheepstarDashboardV1/img/cancel.png b/SheepstarDashboardV1/img/cancel.png new file mode 100644 index 0000000..c56f429 Binary files /dev/null and b/SheepstarDashboardV1/img/cancel.png differ diff --git a/SheepstarDashboardV1/img/profile.webp b/SheepstarDashboardV1/img/profile.webp new file mode 100644 index 0000000..9c76e1d Binary files /dev/null and b/SheepstarDashboardV1/img/profile.webp differ diff --git a/SheepstarDashboardV1/img/question-mark.png b/SheepstarDashboardV1/img/question-mark.png new file mode 100644 index 0000000..4d56a6d Binary files /dev/null and b/SheepstarDashboardV1/img/question-mark.png differ diff --git a/SheepstarDashboardV1/img/services/chat.png b/SheepstarDashboardV1/img/services/chat.png new file mode 100644 index 0000000..1b7939a Binary files /dev/null and b/SheepstarDashboardV1/img/services/chat.png differ diff --git a/SheepstarDashboardV1/img/services/commands.png b/SheepstarDashboardV1/img/services/commands.png new file mode 100644 index 0000000..d35964b Binary files /dev/null and b/SheepstarDashboardV1/img/services/commands.png differ diff --git a/SheepstarDashboardV1/img/services/counter.png b/SheepstarDashboardV1/img/services/counter.png new file mode 100644 index 0000000..3bfc5c9 Binary files /dev/null and b/SheepstarDashboardV1/img/services/counter.png differ diff --git a/SheepstarDashboardV1/img/services/games.png b/SheepstarDashboardV1/img/services/games.png new file mode 100644 index 0000000..18c7bb1 Binary files /dev/null and b/SheepstarDashboardV1/img/services/games.png differ diff --git a/SheepstarDashboardV1/img/services/giveaway.png b/SheepstarDashboardV1/img/services/giveaway.png new file mode 100644 index 0000000..e5cb7cb Binary files /dev/null and b/SheepstarDashboardV1/img/services/giveaway.png differ diff --git a/SheepstarDashboardV1/img/services/global.png b/SheepstarDashboardV1/img/services/global.png new file mode 100644 index 0000000..88e3a13 Binary files /dev/null and b/SheepstarDashboardV1/img/services/global.png differ diff --git a/SheepstarDashboardV1/img/services/level.png b/SheepstarDashboardV1/img/services/level.png new file mode 100644 index 0000000..f27350c Binary files /dev/null and b/SheepstarDashboardV1/img/services/level.png differ diff --git a/SheepstarDashboardV1/img/services/moderation.png b/SheepstarDashboardV1/img/services/moderation.png new file mode 100644 index 0000000..684e613 Binary files /dev/null and b/SheepstarDashboardV1/img/services/moderation.png differ diff --git a/SheepstarDashboardV1/img/services/music.png b/SheepstarDashboardV1/img/services/music.png new file mode 100644 index 0000000..13a4a0a Binary files /dev/null and b/SheepstarDashboardV1/img/services/music.png differ diff --git a/SheepstarDashboardV1/img/services/role.png b/SheepstarDashboardV1/img/services/role.png new file mode 100644 index 0000000..494d5bd Binary files /dev/null and b/SheepstarDashboardV1/img/services/role.png differ diff --git a/SheepstarDashboardV1/img/services/ticket.png b/SheepstarDashboardV1/img/services/ticket.png new file mode 100644 index 0000000..ce2ec99 Binary files /dev/null and b/SheepstarDashboardV1/img/services/ticket.png differ diff --git a/SheepstarDashboardV1/img/services/voice.png b/SheepstarDashboardV1/img/services/voice.png new file mode 100644 index 0000000..65b1e14 Binary files /dev/null and b/SheepstarDashboardV1/img/services/voice.png differ diff --git a/SheepstarDashboardV1/img/sheepstar.png b/SheepstarDashboardV1/img/sheepstar.png new file mode 100644 index 0000000..f4b0628 Binary files /dev/null and b/SheepstarDashboardV1/img/sheepstar.png differ diff --git a/SheepstarDashboardV1/index.html b/SheepstarDashboardV1/index.html new file mode 100644 index 0000000..a412c75 --- /dev/null +++ b/SheepstarDashboardV1/index.html @@ -0,0 +1,93 @@ + + + + Sheepstar Example + + + + + + + + +
+
+ +
+
+ + + +
+ + + +
+ +
+
+

Standard-Funktionen

+
+
+
+
+

Funktionen #1

+
+
+
+
+
+
+
+
+
+

Funktionen #2

+
+
+
+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/SheepstarDashboardV1/main.js b/SheepstarDashboardV1/main.js new file mode 100644 index 0000000..3d1bb62 --- /dev/null +++ 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"); +} diff --git a/SheepstarDashboardV1/style.css b/SheepstarDashboardV1/style.css new file mode 100644 index 0000000..2f90ad6 --- /dev/null +++ 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%; + } +}