Skip to content

Commit

Permalink
added files for dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@wowser20
wowser20 committed Sep 1, 2023
1 parent 237f00b commit a1783de
Show file tree
Hide file tree
Showing 12 changed files with 1,188 additions and 0 deletions.
802 changes: 802 additions & 0 deletions ArtcafeDashboard/css/style.css
View file

Large diffs are not rendered by default.

Binary file added ArtcafeDashboard/favicon.ico
View file
Binary file not shown.
Binary file added ArtcafeDashboard/img/logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ArtcafeDashboard/img/logo2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ArtcafeDashboard/img/profile-1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ArtcafeDashboard/img/profile-2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ArtcafeDashboard/img/profile-3.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ArtcafeDashboard/img/profile-4.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ArtcafeDashboard/img/profile-5.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
302 changes: 302 additions & 0 deletions ArtcafeDashboard/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,302 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<title>ArtShoppe</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
</head>
<body>
<div class="container">
<aside>
<div class="top">
<div class="logo">
<img src="./img/logo2.png" alt="">
<h2>
<a href="#">ART<span class="primary">SHOPPE</span></a>
</h2>
</div>
<div class="close" id="close-btn">
<span class="fa-solid fa-xmark"></span>
</div>
</div>

<div class="sidebar">
<a href="#" class="active">
<span class="material-symbols-outlined">dashboard</span>
<h3>Dashboard</h3>
</a>
<a href="#">
<span class="fa-solid fa-user-group"></span>
<h3>Customers</h3>
</a>
<a href="#">
<span class="fa-solid fa-cart-shopping"></span>
<h3>Orders</h3>
</a>
<a href="#">
<span class="fa-solid fa-chart-line"></span>
<h3>Analytics</h3>
</a>
<a href="#">
<span class="fa-solid fa-inbox"></span>
<h3>Messages</h3>
<span class="message-count">14</span>
</a>
<a href="#">
<span class="fa-solid fa-clipboard-list"></span>
<h3>Products</h3>
</a>
<a href="#">
<span class="fa-regular fa-flag"></span>
<h3>Reports</h3>
</a>
<a href="#">
<span class="fa-solid fa-sliders"></span>
<h3>Settings</h3>
</a>
<a href="#">
<span class="fa-solid fa-square-plus"></span>
<h3>Add Product</h3>
</a>
<a href="#">
<span class="fa-solid fa-arrow-right-from-bracket"></span>
<h3>Logout</h3>
</a>
</div>
</aside>

<!-----------------------------END OF ASIDE------------------------------------------------->

<main>
<h1>Dashboard</h1>
<div class="date">
<input type="date">
</div>

<div class="insights">

<div class="sales">
<span class="fa-solid fa-magnifying-glass-chart"></span>
<div class="middle">
<div class="left">
<h3>Total Sales</h3>
<h1>$25,000</h1>
</div>

<div class="progress">
<svg>
<circle cx='37' cy='38' r='36'></circle>
</svg>
<div class="number">
<p>81%</p>
</div>
</div>
</div>

<small class="text-muted">Last 24 Hours</small>
</div>

<!--------------------------END OF SALES----------------------------------------->

<div class="expenses">
<span class="fa-solid fa-briefcase"></span>
<div class="middle">
<div class="left">
<h3>Total Expenses</h3>
<h1>$14,160</h1>
</div>

<div class="progress">
<svg>
<circle cx='37' cy='38' r='36'></circle>
</svg>
<div class="number">
<p>62%</p>
</div>
</div>
</div>

<small class="text-muted">Last 24 Hours</small>
</div>
<!--------------------------END OF EXPENSES----------------------------------------->


<div class="income">
<span class="fa-solid fa-sack-dollar"></span>
<div class="middle">
<div class="left">
<h3>Total Income</h3>
<h1>$10,480</h1>
</div>

<div class="progress">
<svg>
<circle cx='37' cy='38' r='36'></circle>
</svg>
<div class="number">
<p>44%</p>
</div>
</div>
</div>

<small class="text-muted">Last 24 Hours</small>
</div>
<!--------------------------END OF INCOME----------------------------------------->

</div>

<!--------------------------------END OF INSIGHTS----------------------------------------------------->
<div class="recent-orders">
<h2>Recent Orders</h2>
<table>
<thead>
<tr>
<th>Product Name</th>
<th>Product Number</th>
<th>Payment</th>
<th>Shipping Status</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<a href="">Show All</a>
</div>
</main>

<div class="right">
<div class="top">
<button id="menu-btn">
<span class="fa-solid fa-bars"></span>
</button>
<div class="theme-toggler">
<span class="fa-regular fa-sun active"></span>
<span class="fa-solid fa-moon"></span>
</div>
<div class="profile">
<div class="info">
<p>Hey, <b>John</b></p>
<small class="text-muted">Admin</small>
</div>
<div class="profile-photo">
<img src="./img/profile-1.jpg" alt="">
</div>
</div>
</div>
<!-----------------END OF TOP RIGHT------------------->

<div class="recent-updates">
<h2>Recent Updates</h2>
<div class="updates">
<div class="update">
<div class="profile-photo">
<img src="./img/profile-2.jpg" alt="">
</div>

<div class="message">
<p><b>Frank Tyler</b> has received order of Copic Marker.</p>
<small class="text-muted">10 minutes ago</small>
</div>
</div>

<div class="update">
<div class="profile-photo">
<img src="./img/profile-5.jpg" alt="">
</div>

<div class="message">
<p><b>Ana Rhey</b> has received order of WACOM drawing tablet.</p>
<small class="text-muted">33 minutes ago</small>
</div>
</div>

<div class="update">
<div class="profile-photo">
<img src="./img/profile-4.jpg" alt="">
</div>

<div class="message">
<p><b>Kate Miller</b> has received order of iPad Air.</p>
<small class="text-muted">55 minutes ago</small>
</div>
</div>


</div>
</div>
<!---------------------------------END OF RECENT UPDATES------------------------------------------------>

<div class="sales-analytics">
<h2>Sales Analytics</h2>
<div class="item online">
<div class="icon">
<span class="fa-solid fa-cart-flatbed"></span>
</div>


<div class="right">
<div class="info">
<h3>ONLINE ORDERS</h3>
<small class="text-muted">Last 24 Hours</small>
</div>
<h5 class="success">+26%</h5>
<h3>2290</h3>
</div>
</div>


<div class="item offline">
<div class="icon">
<span class="fa-solid fa-bag-shopping"></span>
</div>


<div class="right">
<div class="info">
<h3>OFFLINE ORDERS</h3>
<small class="text-muted">Last 24 Hours</small>
</div>
<h5 class="danger">-10%</h5>
<h3>987</h3>
</div>
</div>

<div class="item customers">
<div class="icon">
<span class="fa-solid fa-users"></span>
</div>


<div class="right">
<div class="info">
<h3>NEW CUSTOMERS</h3>
<small class="text-muted">Last 24 Hours</small>
</div>
<h5 class="success">+33%</h5>
<h3>878</h3>
</div>
</div>


<div class="item add-product">
<div>
<span class="fa-solid fa-plus"></span>
<h3>Add Product</h3>
</div>
</div>
</div>
<!--------------------------END OF SALES ANALYTICS-------------------------------------------------->


</div>

</div>
<script src="./js/orders.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
45 changes: 45 additions & 0 deletions ArtcafeDashboard/js/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@


const sideMenu = document.querySelector("aside");
const menuBtn = document.querySelector("#menu-btn");
const closeBtn = document.querySelector("#close-btn");
const themeToggler = document.querySelector(".theme-toggler");



menuBtn.addEventListener('click', () =>{
sideMenu.style.display = 'block';
})


closeBtn.addEventListener('click', () =>{
sideMenu.style.display="none";

})


//change theme

themeToggler.addEventListener('click', ()=>{
document.body.classList.toggle('dark-theme-variables');

themeToggler.querySelector('span:nth-child(1)').classList.toggle('active');
themeToggler.querySelector('span:nth-child(2)').classList.toggle('active');

})

Orders.forEach(order =>{
const tr = document.createElement('tr');
const trContent = `
<td>${order.productName}</td>
<td>${order.productNumber}</td>
<td>${order.paymentStatus}</td>
<td class="${order.shipping==='Declined' ? 'danger' : order.shipping==='Pending' ? 'warning' : 'primary'}">${order.shipping}</td>
<td class="primary">Details</td>
`;
tr.innerHTML = trContent;
document.querySelector('table tbody').appendChild(tr);
})



39 changes: 39 additions & 0 deletions ArtcafeDashboard/js/orders.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
const Orders = [
{
productName: 'WACOM drawing tablet',
productNumber: '746362',
paymentStatus: 'Due',
shipping: 'Declined'
},
{
productName: 'Copic Marker',
productNumber: '562632',
paymentStatus: 'Due',
shipping: 'Pending'
},
{
productName: 'Sketchbook',
productNumber: '712383',
paymentStatus: 'Due',
shipping: 'Pending'
},
{
productName: 'Watercolor Brush',
productNumber: '232123',
paymentStatus: 'Due',
shipping: 'Pending'
},
{
productName: 'Palette',
productNumber: '337218',
paymentStatus: 'Due',
shipping: 'Pending'
},
{
productName: 'Acrylic Canvas',
productNumber: '372732',
paymentStatus: 'Due',
shipping: 'Pending'
},

]

0 comments on commit a1783de

Please sign in to comment.