Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/philopaterhany/elzero-dashboard
Elzero Multi-Page Dashboard
https://github.com/philopaterhany/elzero-dashboard
css dashboard design html js multi-page pug scss
Last synced: 18 days ago
JSON representation
Elzero Multi-Page Dashboard
- Host: GitHub
- URL: https://github.com/philopaterhany/elzero-dashboard
- Owner: PhilopaterHany
- Created: 2022-10-06T23:34:03.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-20T17:04:43.000Z (about 1 year ago)
- Last Synced: 2024-11-19T08:08:50.122Z (3 months ago)
- Topics: css, dashboard, design, html, js, multi-page, pug, scss
- Language: SCSS
- Homepage: https://philopaterhany.github.io/Elzero-Dashboard/
- Size: 3.96 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Elzero Dashboard
This is the source code of [Elzero Dashboard By Osama Elzero](https://elzero.org/html-css-template-4-preview/). Making projects and templates help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [How To Run The Code](#running-code)
- [Screenshots](#screenshots)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [Style](#styles)
- [Data Samples](#data-samples)
- [Useful resources](#useful-resources)
- [Author](#author)
## Overview
### Running Code
Download the files from `main` branch, extract the files from the `zip` file, run `index.html` file with a live server because the code contains `json data` so it will NOT work on `file protocol`.
### Screenshots
All web page screenshots are in [design directory](https://github.com/PhilopaterHany/Elzero-Dashboard/tree/main/design/).
Note: Those were the original design images, but I made a few changes and added some stuff.
### Links
- Design URL: [Osama ELzero](https://elzero.org/html-css-template-4-preview/)
- Source Code URL: [Github](https://github.com/PhilopaterHany/Elzero-Dashboard/)
- Live Site URL: [Github Pages](https://philopaterhany.github.io/Elzero-Dashboard/)
## My process
### Built with
- Pug.js (HTML)
- SCSS (CSS)
- Vanilla Javascript + ES6 + JSON + AJAX
- Font Awesome Library
- Chart.js Library
- SweetAlert2 Library
- AOS Library
### Styles
#### Colors
- Dodger Blue: rgb(0, 117, 255)
- Denim Blue: rgb(13, 105, 213)
- Vivid Orange: rgb(245, 158, 11)
- Green Cyan: rgb(34, 197, 94)
- Red Orange: rgb(244, 67, 54)
- Suva Gray: rgb(136, 136, 136)
- Whisper Gray: rgb(238, 238, 238)
- Gainsboro Gray: rgb(231, 229, 229)
- Chinese Silver: rgb(204, 204, 204)
- Pattens Blue: rgb(241, 245, 249)
- Russian Black: rgb(18, 19, 21)
- Russian Black: rgb(26, 26, 30)
- Charcoal Black: rgb(65, 65, 65)
- Charade Black: rgb(60, 64, 67)
- Pure Black: rgb(0, 0, 0)
- Pure White: rgb(255, 255, 255)
#### Fonts
- Family: [Open Sans](https://fonts.google.com/specimen/Open+Sans)
- Weight(s): 300, 400, 500, 600, 700, 800
- Family: [Cookie](https://fonts.google.com/specimen/Cookie)
- Weight(s): 400
### Data Samples
#### Courses Schema
```json
[
{
"instructor": "images/team-01.png",
"cover": "images/course-01.jpg",
"name": "Mastering Web Design",
"description": "Master The Art Of Web Designing And Mocking, Prototyping And Creating Web Design Architecture.",
"participants": "729",
"price": "165"
}
]
```
#### Files Schema
```json
[
{
"name": "January Report.pdf",
"icon": "images/pdf.svg",
"uploader": "Arthur Morgan",
"date": "05/01/2021",
"size": "5.21 MB"
}
]
```
#### Friends Schema
```json
[
{
"name": "Arthur Morgan",
"job": "JavaScript Developer",
"image": "images/friend-01.jpg",
"friends": "342",
"projects": "74",
"articles": "821",
"phoneNumber": "+201209990000",
"email": "[email protected]",
"joinDate": "11/04/2020",
"vip": true
}
]
```
#### Posts Schema
```json
[
{
"image": "images/team-05.png",
"name": "Sister Calderón",
"time": "5 Days Ago",
"content": "Take a gamble that love exists, and do a loving act.",
"likes": "186.4k",
"comments": "92.5k"
}
]
```
#### Profile Schema
```json
{
"avatar": {
"image": "images/avatar.png",
"nickName": "Rafay",
"level": "17",
"xpProgress": "70",
"rating": "550"
},
"general": {
"fullName": "Philopater Hany",
"gender": "Male",
"countryName": "Egypt",
"countryCode": "EG"
},
"personal": {
"email": "[email protected]",
"phoneNumber": "+201220009999",
"birthdate": "04/08/2005"
},
"job": {
"title": "Front-End Developer",
"progLang": "JavaScript",
"moneyEarned": "8723",
"experience": "+15"
},
"billing": {
"paymentMethod": "Paypal",
"plan": "Basic",
"subscription": "Monthly"
},
"skills": [
["HTML", "Pug.js"],
["CSS", "SCSS", "Bootstrap"],
["JavaScript", "TypeScript"],
["React.js", "Angular.js"],
["Gulp.js", "Jest"],
["Python", "Flask"],
["C++", "PHP"]
],
"social": {
"facebook": "philopater.hany.3",
"twitter": "PhilopaterHany4",
"linkedin": "phth",
"github": "PhilopaterHany"
}
}
```
#### Projects Schema
```json
[
{
"name": "Social Media App",
"client": "SocialTech Innovations",
"description": "Create a cutting-edge social media app, it will include features like user profiles, news feeds, multimedia sharing, and real-time messaging.",
"startDate": "24/12/2022",
"team": ["images/team-01.png", "images/team-05.png"],
"keywords": ["Programming", "Design"],
"progress": "87",
"profit": "1500"
}
]
```
### Useful Resources
- [Youtube: Elzero Web School](https://www.youtube.com/c/ElzeroInfo)
- [MDN: Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
- [Font Awesome Documentation](https://fontawesome.com/docs)
- [Chart.js Documentation](https://www.chartjs.org/docs/latest/)
- [SweetAlert2 Documentation](https://sweetalert2.github.io/)
- [AOS Documentation](https://michalsnik.github.io/aos/)
## Author
- Website - Portfolio Is Coming Out Soon!
- Twitter - [@PhilopaterHany4](https://www.twitter.com/PhilopaterHany4/)
- Linkedin - [@phth](https://www.linkedin.com/in/phth/)
- Facebook - [Philopater Hany](https://www.facebook.com/philopater.hany.3)
- Discord - [#8178](https://discord.com/#8178/)