smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2024-12-25 06:00:43 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Admin dashboard (#5)

Browse source 
* feat: base html/css

* feat: aligment and setting up grids

* fix: update titles

* feat: card formatting and colors

* feat: add bg colors/border radius

* feat: finished topbar
This commit is contained in:
Mike 2023-11-17 09:16:25 -05:00 committed by GitHub
parent b96438787d
commit eb98c77d0d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 394 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

159
admin-dashboard/css/style.css Normal file
View file

@ -0,0 +1,159 @@
:root {
--dark-bg: #2C3639;
--light-bg: #DCD7C9;
--dark-bg-color-2: #EBE3D5;
--content-color: #FAF6F0;
--card-color: #B0A695;
}
* {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: 1fr 5fr;
}
.sidebar {
grid-row: 1 / 3;
background-color: var(--dark-bg);
color: var(--light-bg);
}
.navbar {
grid-column: 1 / 2;
display: grid;
grid-template-rows: repeat(auto-fit, minmax(60px, 1fr));
justify-content: center;
gap: 40px;
}
.navbar ul>a>h1 {
display: flex;
align-items: center;
gap: 1.3rem;
font-size: 2rem;
}
.topbar-header {
margin: 12px 0;
}
.topbar-header > [class="material-symbols-outlined"] {
font-size: 40px;
}
.navbar ul>a>li {
display: flex;
align-items: center;
gap: 1rem;
font-size: 1.4rem;
padding: 5px;
margin-top: 20px;
margin-left: 10px;
margin-bottom: 10px;
}
.topbar {
background-color: var(--dark-bg-color-2);
box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
grid-row: 1 / 1;
grid-column: 2 / 3;
margin: 20px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.topbar ul {
padding: 20px;
display: flex;
justify-content: flex-start;
gap: 20px;
margin-left: 10px;
}
.topbar .user-info {
margin-right: 20px;
align-self: center;
}
.user-info {
display: flex;
justify-content: center;
gap: 20px;
}
.user-info img {
height: 2.2rem;
border: 2px #2C3639 solid;
border-radius: 50%;
}
.user-info span {
font-size: 2.2rem;
}
.content-header {
margin-left: 20px;
margin-top: 20px;
}
.cards {
grid-column: 2 / 3;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
padding: 20px;
gap: 20px;
}
.card {
word-wrap: wrap;
min-width: 300px;
padding: 20px;
border-radius: 2%;
background-color: var(--card-color);
}
.card h1 {
font-size: 1.5rem;
margin-bottom: 6px;
text-align: left;
padding: 8px;
}
.card p {
font-size: 0.9rem;
padding: 8px;
}
.card-icons {
margin: 5px;
display: flex;
justify-content: flex-end;
}
ul {
list-style-type: none;
}
body {
font-family: 'Fira Sans', sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
background-color: var(--light-bg);
}
a {
text-decoration: none;
color: inherit;
}

235
admin-dashboard/index.html Normal file
View file

@ -0,0 +1,235 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>Admin Dashboard</title>
</head>
<body>
<div class="container">
<header>
<div class="topbar">
<div class="links">
<ul>
<li>New</li>
<li>Upload</li>
<li>Share</li>
</ul>
</div>
<div class="user-info">
<span class="material-symbols-outlined">
notifications_unread
</span>
<img src="static/logo.png" alt="">
</div>
</div>
</header>
<div class="sidebar">
<nav class="navbar">
<ul>
<a href="#">
<h1 class="topbar-header"><span class="material-symbols-outlined">dashboard</span>Dashboard</h1>
</a>
<a href="#">
<li><span class="material-symbols-outlined">home</span>Home</li>
</a>
<a href="#">
<li><span class="material-symbols-outlined">shield_locked</span>Profile</li>
</a>
<a href="#">
<li><span class="material-symbols-outlined">chat</span>Messages</li>
</a>
<a href="#">
<li><span class="material-symbols-outlined">manage_history</span>History</li>
</a>
<a href="#">
<li><span class="material-symbols-outlined">task</span>Tasks</li>
</a>
</ul>
<ul>
<a href="#">
<li><span class="material-symbols-outlined">settings</span> Settings</li>
</a>
<a href="#">
<li><span class="material-symbols-outlined">help</span>Support</li>
</a>
<a href="#">
<li><span class="material-symbols-outlined">security</span>Privacy</li>
</a>
</ul>
</nav>
</div>
<div class="content">
<h1 class="content-header">User stories</h1>
<div class="cards">
<div class="card">
<h1 class=title>Some important Stuff!</h1>
<p class="text">
Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec
nec
ante dictum, hendrerit dui id, mattis arcu.
In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum
mauris at,
placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="card-icons">
<span class="material-symbols-outlined">share</span>
<span class="material-symbols-outlined">more_vert</span>
</div>
</div>
<div class="card">
<h1 class=title>Some important Stuff!</h1>
<p class="text">
Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec
nec
ante dictum, hendrerit dui id, mattis arcu.
In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum
mauris at,
placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="card-icons">
<span class="material-symbols-outlined">share</span>
<span class="material-symbols-outlined">more_vert</span>
</div>
</div>
<div class="card">
<h1 class=title>Some important Stuff!</h1>
<p class="text">
Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec
nec
ante dictum, hendrerit dui id, mattis arcu.
In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum
mauris at,
placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="card-icons">
<span class="material-symbols-outlined">share</span>
<span class="material-symbols-outlined">more_vert</span>
</div>
</div>
<div class="card">
<h1 class=title>Some important Stuff!</h1>
<p class="text">
Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec
nec
ante dictum, hendrerit dui id, mattis arcu.
In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum
mauris at,
placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="card-icons">
<span class="material-symbols-outlined">share</span>
<span class="material-symbols-outlined">more_vert</span>
</div>
</div>
<div class="card">
<h1 class=title>Some important Stuff!</h1>
<p class="text">
Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec
nec
ante dictum, hendrerit dui id, mattis arcu.
In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum
mauris at,
placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="card-icons">
<span class="material-symbols-outlined">share</span>
<span class="material-symbols-outlined">more_vert</span>
</div>
</div>
<div class="card">
<h1 class=title>Some important Stuff!</h1>
<p class="text">
Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec
nec
ante dictum, hendrerit dui id, mattis arcu.
In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum
mauris at,
placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="card-icons">
<span class="material-symbols-outlined">share</span>
<span class="material-symbols-outlined">more_vert</span>
</div>
</div>
<div class="card">
<h1 class=title>Some important Stuff!</h1>
<p class="text">
Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec
nec
ante dictum, hendrerit dui id, mattis arcu.
In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum
mauris at,
placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="card-icons">
<span class="material-symbols-outlined">share</span>
<span class="material-symbols-outlined">more_vert</span>
</div>
</div>
<div class="card">
<h1 class=title>Some important Stuff!</h1>
<p class="text">
Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec
nec
ante dictum, hendrerit dui id, mattis arcu.
In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum
mauris at,
placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="card-icons">
<span class="material-symbols-outlined">share</span>
<span class="material-symbols-outlined">more_vert</span>
</div>
</div>
<div class="card">
<h1 class=title>Some important Stuff!</h1>
<p class="text">
Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec
nec
ante dictum, hendrerit dui id, mattis arcu.
In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum
mauris at,
placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="card-icons">
<span class="material-symbols-outlined">share</span>
<span class="material-symbols-outlined">more_vert</span>
</div>
</div>
<div class="card">
<h1 class=title>Some important Stuff!</h1>
<p class="text">
Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec
nec
ante dictum, hendrerit dui id, mattis arcu.
In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum
mauris at,
placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="card-icons">
<span class="material-symbols-outlined">share</span>
<span class="material-symbols-outlined">more_vert</span>
</div>
</div>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>

0
admin-dashboard/js/script.js Normal file
View file

BIN
admin-dashboard/static/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 261 KiB