added bootstrap
This commit is contained in:
Vendored
+6
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
-112
@@ -1,112 +0,0 @@
|
||||
.cardicon {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
overflow: hidden;
|
||||
transition: ease-in-out 0.3s;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.cardicon > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
/* position: absolute;
|
||||
top: 10px;
|
||||
right: 10px; */
|
||||
position: relative;
|
||||
/* top: 10px; */
|
||||
/* right: 10px; */
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
transition: 0.3s;
|
||||
background: linear-gradient(rgb(109, 107, 107), rgb(177, 175, 175));
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.card > .text > .mail {
|
||||
position: relative;
|
||||
font-size: 17px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card > .text > .username {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
font-size: 32px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.card > .text > .mail::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: gray;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.card > .text > h2::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: gray;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.card > .text {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 30px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.cardicon:hover {
|
||||
box-shadow: white 0 0 30px;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.card:hover > .cardicon {
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.card > .text > .username:hover::after {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.card > .text > .mail:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card:hover > .text {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
.header {
|
||||
position: relative;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
/* padding: 10px 70px 10px 10px; */
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
text-align: center;
|
||||
text-shadow: white 0 0 30px;
|
||||
}
|
||||
|
||||
.time {
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.header {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.time:hover {
|
||||
text-shadow: white 0 0 20px;
|
||||
}
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
.icons {
|
||||
width: 50%;
|
||||
height: max-content;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(5px);
|
||||
border-radius: 10px;
|
||||
padding: 10px 0 10px 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
overflow: hidden;
|
||||
border-radius: 100%;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.icon > a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.icon > a > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.icons {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.icon:hover {
|
||||
border-radius: 10px;
|
||||
transform: translateY(-10px);
|
||||
box-shadow: white 0 0 30px;
|
||||
}
|
||||
}
|
||||
+4
-10
@@ -5,14 +5,8 @@
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
padding: 10px;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
@media (hover: hover) {
|
||||
.navbar-brand:hover {
|
||||
text-shadow: var(--bs-body-color) 0 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
.searchblock {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: max-content;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.searchicon {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#search-in-google {
|
||||
max-width: 500px;
|
||||
padding: 10px 50px;
|
||||
font-size: 20px;
|
||||
margin: 10px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(5px);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
#search-in-google {
|
||||
max-width: 200px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
#search-in-google:hover {
|
||||
box-shadow: white 0 0 20px;
|
||||
}
|
||||
}
|
||||
+49
-30
@@ -5,40 +5,59 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" href="img/logo.ico" />
|
||||
<link rel="stylesheet" href="css/index.css" />
|
||||
<link rel="stylesheet" href="css/icons.css" />
|
||||
<link rel="stylesheet" href="css/header.css" />
|
||||
<link rel="stylesheet" href="css/search.css" />
|
||||
<link rel="stylesheet" href="css/card.css" />
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css" />
|
||||
<script src="js/icons.js" defer></script>
|
||||
<!-- <script src="js/mails.js" defer></script> -->
|
||||
<script src="js/time.js" defer></script>
|
||||
<script src="js/search.js" defer></script>
|
||||
<script src="js/theme.js" defer></script>
|
||||
<script src="js/bootstrap.min.js" defer></script>
|
||||
<title>Dashboard</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1 class="header-text">Dashboard</h1>
|
||||
<h1 class="time"></h1>
|
||||
<div style="width: 60px; height: 60px; position: relative">
|
||||
<div class="card" tabindex="0">
|
||||
<span class="cardicon">
|
||||
<img src="img/user.jpeg" alt="" />
|
||||
</span>
|
||||
<div class="text" id="mails">
|
||||
<h2 class="username">Tola</h2>
|
||||
</div>
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Dashboard</a>
|
||||
<a class="navbar-brand" style="cursor: pointer" id="time"></a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item d-flex align-items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="sc-gJwTLC ikxBAC"
|
||||
id="dark_theme"
|
||||
/>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<h1 class="navbar-item" id="time"></h1>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
name="search-in-google"
|
||||
id="search-in-google"
|
||||
placeholder="Search in Google"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchblock">
|
||||
<input
|
||||
type="text"
|
||||
name="search-in-google"
|
||||
id="search-in-google"
|
||||
placeholder="Search in Google"
|
||||
/>
|
||||
<div class="searchicon">🔍</div>
|
||||
</div>
|
||||
<div class="icons"></div>
|
||||
<script src="js/icons.js"></script>
|
||||
<script src="js/mails.js"></script>
|
||||
<script src="js/time.js"></script>
|
||||
<script src="js/search.js"></script>
|
||||
</nav>
|
||||
<div
|
||||
class="d-flex gap-3 m-3 flex-wrap align-items-center justify-content-center"
|
||||
id="icons"
|
||||
></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Vendored
+7
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+8
-6
@@ -1,4 +1,4 @@
|
||||
const iconsArea = document.querySelector(".icons");
|
||||
const iconsArea = document.querySelector("#icons");
|
||||
|
||||
const icons = [
|
||||
{
|
||||
@@ -60,9 +60,11 @@ const icons = [
|
||||
];
|
||||
|
||||
icons.map((icon) => {
|
||||
iconsArea.innerHTML += `<div class="icon">
|
||||
<a href="${icon.href}">
|
||||
<img src="${icon.img}" alt="${icon.alt}" />
|
||||
</a>
|
||||
</div>`;
|
||||
iconsArea.innerHTML += `<div class="card" style="width: 16rem;">
|
||||
<img src="${icon.img}" alt="${icon.alt}" class="card-img-top">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">${icon.text}</h5>
|
||||
<a href="${icon.href}" class="btn btn-primary">Visit</a>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
const dark_theme = document.querySelector("#dark_theme");
|
||||
|
||||
dark_theme.addEventListener("click", () => {
|
||||
if (dark_theme.checked) {
|
||||
document.documentElement.setAttribute("data-bs-theme", "dark");
|
||||
localStorage.setItem("data-bs-theme", "dark");
|
||||
} else {
|
||||
document.documentElement.setAttribute("data-bs-theme", "light");
|
||||
localStorage.setItem("data-bs-theme", "light");
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
var theme = localStorage.getItem("data-bs-theme");
|
||||
if (theme) {
|
||||
document.documentElement.setAttribute("data-bs-theme", theme);
|
||||
if (theme === "dark") {
|
||||
dark_theme.checked = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
const timeblock = document.querySelector(".time");
|
||||
const timeblock = document.querySelector("#time");
|
||||
|
||||
let intervalid = true;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user