Skip to content

Commit

Permalink
🔖 Design Version 1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
Hadi-koubeissi committed Apr 7, 2021
1 parent ecd8d63 commit 3e5099f
Show file tree
Hide file tree
Showing 7 changed files with 220 additions and 51 deletions.
140 changes: 138 additions & 2 deletions src/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,9 @@ ul.social-icons {
}
.add_to_discord:hover {
background-color: rgb(152, 67, 233);
}
text-decoration: none;
}

.commandstitle {
color: #ffffff;
}
Expand Down Expand Up @@ -199,6 +201,141 @@ ul.social-icons {
font-family: 'Cairo';
}

.card{
background-color: rgb(255, 251, 251);
color: red;
max-width: 360px;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 2rem;
box-shadow: 0px 1rem 1.5rem rgba(0,0,0,0.5);
}

.card .banner{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 11rem;
display: flex;
align-items: flex-end;
justify-content: center;
box-sizing: border-box;
}
.card .banner img{
background-color: #fff;
width: 8rem;
height: 8rem;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3);
border-radius: 50%;
transform: translateY(50%);
transition: transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.card .banner img:hover{
transform: translateY(50%) scale(1.3);
}

.card h2.name{
text-align: center;
padding: 0 2rem 0.5rem;
margin: 0;
}

.card .title{
color: #a0a0a0;
font-size: 0.85rem;
text-align: center;
padding: 0 2rem 1.2rem;
}

.card .actions{
padding: 0 2rem 1.2rem;
display: flex;
flex-direction: column;
order: 99;
}

.card .actions .follow-info{
padding: 0 0 1rem;
display: flex;
}

.card .actions .follow-info h2{
text-align: center;
width: 50%;
margin: 0;
box-sizing: border-box;
}

.card .actions .follow-info h2 a{
text-decoration: none;
padding: 0.8rem;
display: flex;
flex-direction: column;
border-radius: 0.8rem;
transition: background-color 100ms ease-in-out;
}

.card .actions .follow-info h2 a span{
color: #1c9eff;
font-weight: bold;
transform-origin: bottom;
transform: scaleY(1.3);
transition: color 100ms ease-in-out;
}

.card .actions .follow-info h2 a small{
color: #afafaf;
font-size: 0.85rem;
font-weight: normal;
}

.card .actions .follow-info h2 a:hover{
background-color: #f2f2f2;
}

.card .actions .follow-info h2 a:hover span{
color: #007ad6;
}

.card .actions .follow-btn button{
color: inherit;
font: inherit;
font-weight: bold;
background-color: #ffd01a;
width: 100%;
border: none;
padding: 1rem;
outline: none;
box-sizing: border-box;
border-radius: 1.5rem/50%;
transition: background-color 100ms ease-in-out, transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.card .actions .follow-btn button:hover{
background-color: #efb10a;
transform: scale(1.1);
}

.card .actions .follow-btn button:active{
background-color: #e8a200;
transform: scale(1);
}

.licetitle {
color: #ffff;
margin: 5px;
font-family: monospace;
}

.textlice {
box-sizing: border-box;
color: #ffff;
margin: 3px;
letter-spacing: 1px;
}

.mastfoot.mb-auto{
padding-bottom: 40px;
padding: 20px;
Expand All @@ -207,7 +344,6 @@ ul.social-icons {
height: auto;
background-color: #212529;
color: white;
position: initial;
}


Expand Down
16 changes: 7 additions & 9 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
<a class="nav-link" href="pages/commands.html">Commands</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/team.html">Dev Team</a>
<a class="nav-link" href="pages/team.html">Staff</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="linksdrop" role="button" data-bs-toggle="dropdown"
Expand Down Expand Up @@ -122,17 +122,15 @@ <h3 class="ttjoin ml-5"><span>Join our</span>
</svg>Add To Discord</button></a></div>
</div>
</div>

<footer class="mastfoot mb-auto">
<div class="container-fluid mb-auto">
<div class="row">
<div class="col-md-6 mt-md-0 mt-3 text-center">
<h5 class="text-uppercase"><b>Additional Information</b></h5>
<div class="row d-flex justify-content-center">
<div class="">
<p style="font-size: 19px; padding: 0px; margin: 0px;"><a href="https://github.com/Hadi-Koubeissi"
style="text-decoration: none; color: white;">Made with 💖 by Hadi Koubeissi</a></br>Hbot © 2021. All
rights reserved.</br>[<a href="/license"><b>Terms Of Use</b></a>]</p>
</div>
<div class="col-md-6 mb-md-0 mb-3 text-center">
<h5 class="text-uppercase"><b>Custom settings</b></h5>
style="text-decoration: none; color: white;">Made with 💖 by Hadi Koubeissi</a></br>Hbot ©
2021. All
rights reserved.</br>[<a href="./pages/license.html"><b>Terms Of Use</b></a>]</p>
</div>
</div>
</div>
Expand Down
9 changes: 9 additions & 0 deletions src/js/license.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

34 changes: 20 additions & 14 deletions src/js/team.js
Original file line number Diff line number Diff line change
@@ -1,29 +1,35 @@
// this code is created by LWJerri#3290 https://lwjerri.js.org/
const teamContainer = document.getElementById(".team-container");
const API = "https://japi.ohori.me/discord/avatar/";
/*
THIS CODE BY LWJerri#3290
*/
const boxOwners = document.getElementById("owners_list");
/*
you can use this api but if you need to create custome api check:
https://github.com/Hadi-Koubeissi/discord-web-api
*/
const API = "https://discord-web-api.glitch.me/discord/user/";

const owners = [
{
"id": "442793591501357056",
"post": "Creator / Dev",
"post": "Bot Owner",
"GHURL": "https://github.com/Hadi-Koubeissi",
"InstaURL": "",
"YTURL": "https://www.youtube.com/channel/UCmO0xdpxQr7fX2Csth_2JOQ"
}
]

for(let indexOne = 0; indexOne < owners.length; indexOne++){
for (let indexOne = 0; indexOne < owners.length; indexOne++) {
const elementOwners = owners[indexOne];

$.getJSON(API + elementOwners.id)
.then(output => {
if(!output.username || !output.url){
setTimeout(function(){
document.querySelectorAll(".banner img").forEach(imgs => imgs.src = url + "/src/images/logo-default.png");
}, 1000);
}
.then(output => {
if (!output.username || !output.url) {
setTimeout(function () {
document.querySelectorAll(".banner img").forEach(imgs => imgs.src = url + "../assets/bot.png");
}, 1000);
}

const ownerList = "<div id='trigger' class='card' style='margin: 15px;'><div class='banner'><img src='" + output.url + "'></div></br></br></br></br><h2 class='name'>" + output.username + "</h2><div class='title'><h1 id='trigger2' style='font-size: 26px; color: #000000;'>" + elementOwners.post + "</h2></div><div class='actions'><div class='follow-btn' style='margin-bottom: 5px;'><a href='" + elementOwners.GHURL + "' target='_blank'><button style='color: #000000;'>GitHub</button></a></div><div class='follow-btn'><a href='" + elementOwners.YTURL + "' target='_blank'><button style='color: #000000;'>YouTube</button></a></div></div></div>"
teamContainer.innerHTML += ownerList;
});
const ownerList = "<div id='trigger' class='card' style='margin: 15px;'><div class='banner'><img src='" + output.url + "'></div></br></br></br></br><h2 class='name'>" + output.username + "</h2><div class='title'><h1 id='trigger2' style='font-size: 26px; color: #000000;'>" + elementOwners.post + "</h2></div><div class='actions'><div class='follow-btn' style='margin-bottom: 5px;'><a href='" + elementOwners.GHURL + "' target='_blank'><button style='color: #000000;'>GitHub</button></a></div><div class='follow-btn'><a href='" + elementOwners.YTURL + "' target='_blank'><button style='color: #000000;'>YouTube</button></a></div></div></div>"
boxOwners.innerHTML += ownerList;
});
}
24 changes: 10 additions & 14 deletions src/pages/commands.html
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
<a class="nav-link" aria-current="page" href="#/">Commands</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./team.html">Dev Team</a>
<a class="nav-link" href="./team.html">Staff</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="linksdrop" role="button"
Expand Down Expand Up @@ -119,21 +119,17 @@ <h4 style="color: #cccccc;">Examples:</h4>
</div>

<footer class="mastfoot mb-auto">
<div class="container-fluid mb-auto">
<div class="row">
<div class="col-md-6 mt-md-0 mt-3 text-center">
<h5 class="text-uppercase"><b>Additional Information</b></h5>
<p style="font-size: 19px; padding: 0px; margin: 0px;"><a href="https://github.com/Hadi-Koubeissi"
style="text-decoration: none; color: white;">Made with 💖 by Hadi Koubeissi</a></br>Hbot ©
2021. All
rights reserved.</br>[<a href="/license"><b>Terms Of Use</b></a>]</p>
</div>
<div class="col-md-6 mb-md-0 mb-3 text-center">
<h5 class="text-uppercase"><b>Custom settings</b></h5>
<div class="container-fluid mb-auto">
<div class="row d-flex justify-content-center">
<div class="">
<p style="font-size: 19px; padding: 0px; margin: 0px;"><a href="https://github.com/Hadi-Koubeissi"
style="text-decoration: none; color: white;">Made with 💖 by Hadi Koubeissi</a></br>Hbot ©
2021. All
rights reserved.</br>[<a href="./license.html"><b>Terms Of Use</b></a>]</p>
</div>
</div>
</div>
</div>
</footer>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
Expand Down
28 changes: 28 additions & 0 deletions src/pages/license.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" href="../assets/favicon.png">
<title>Hbot</title>
</head>

<body style="background-color: #38383b">
<div class="container-fluid text-center" style="margin: 25px 0 25px 0;">
<h1 class="display-5 licetitle" style="padding-bottom: 10px;"><b>LICENSE</b></h1>
<hr style="border: 1px solid #ffff; width: 170px;">
<blockquote class="blockquote">
<p class="mb-0 textlice" id="text"></p>
</blockquote>
<a class="btn btn-primary" href="https://github.com/Hadi-koubeissi/Discord-bot-website-templat">Go to github
repository</a>
<a class="btn btn-success" href="../index.html">Back to main page</a>

<script src="../js/license.js"></script>
</body>

</html>
20 changes: 8 additions & 12 deletions src/pages/team.html
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
<a class="nav-link" aria-current="page" href="./commands.html">Commands</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/">Dev Team</a>
<a class="nav-link" href="#/">Staff</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="linksdrop" role="button"
Expand Down Expand Up @@ -66,25 +66,21 @@
</div>
</nav>

<div class="team-page">
<div class="team-page-title">Neeko Team</div>
<div class="team-container">

<div class="container text-center">
<h3 style="color: #ffffff; margin: 20px">Dev Team</h3>
<hr style="border: 1px solid #ffffff">
<div class="row equal d-flex justify-content-center" style="margin: 20px" id="owners_list">
</div>
</div>

<footer class="mastfoot mb-auto">
<div class="container-fluid mb-auto">
<div class="row">
<div class="col-md-6 mt-md-0 mt-3 text-center">
<h5 class="text-uppercase"><b>Additional Information</b></h5>
<div class="row d-flex justify-content-center">
<div class="">
<p style="font-size: 19px; padding: 0px; margin: 0px;"><a href="https://github.com/Hadi-Koubeissi"
style="text-decoration: none; color: white;">Made with 💖 by Hadi Koubeissi</a></br>Hbot ©
2021. All
rights reserved.</br>[<a href="/license"><b>Terms Of Use</b></a>]</p>
</div>
<div class="col-md-6 mb-md-0 mb-3 text-center">
<h5 class="text-uppercase"><b>Custom settings</b></h5>
rights reserved.</br>[<a href="./license.html"><b>Terms Of Use</b></a>]</p>
</div>
</div>
</div>
Expand Down

0 comments on commit 3e5099f

Please sign in to comment.