Dashboard
Dashboard π
Hey!! π
Hope you you're doing well!
I made the front-end of a dashboard, in HTML
, CSS
, and a tiny bit of JS
!
It's completely responsive, meaning you can view and use it perfectly on any type of device. It also has a dark and light theme, as well as many cool animations!
Here's how a bit how looks it like:
This is how it looks like on a phone:
Important to know; this is just the front-end and the design of the dashboard. It doesn't actually work or have any real data in it. However, feel free to fork the repl and make it functional! :)
Links π
Features β¨
Sidebar
- Pushes content to the side (on smaller devices, overlaps content)
- CTA
+ NEW REPORT
button - Different sections (
MAIN
,PEOPLE
) - Each with different tabs (as well as an active tab)
- Main: Home, Analytics, Sales, Costs, Market
- People: Users, Reviews, Feedback
- Bottom section is fixed and has settings icon as well as dark/light theme toggle
Topbar
- Calendar icon
- Search box with search icon
- Profile with username, profile picture, and notification
Content
- Friendly message to user
- Contains several types of (fake) data with different sizes:
- Rect (
1
x2
) - Small (
1
x1
) - Big (
2
x2
) - Large (
4
x2
)
- Rect (
- Each data card has an icon, title, value, and description, as well as icon to open more detailed view (doens't actually exist)
- Below, there's the actual data under a graph, big number, or text
Average session length
- Multiple area graph
Less sessions/More users
- Big number
Daily users/Performance
- Line graph
Sales
- Column graph
Revenue/Costs
- Big number
- Smaller numbers next to it
Reviews
- Picture of reviewer and name
- Number of stars (on 5)
- Review
Style
Font family
The font family I used is 'Be Vietnam Pro', sans-serif
, a font from Google Fonts. It's a smooth and modern font that looks good with technology.
I also used a secondary font: 'Roboto Condensed', sans-serif
(also from Google Fonts). It's a sort of thin, condensed (like the name implies) font that is more straight. When I used it, the text was in all caps and there was also a letter spacing of 2px
. This is because I feel like SC (small caps) fonts look very big and imposing, so having some space between each letter makes it a bit less 'forceful'.
These 2 fonts are a bit opposing each other and I much like the contrast. Here's an example of how they look like together:
Colors
There are 2 different color schemes; one for dark mode and one for light mode. I showed how dark mode looks like at the top, and light mode looks like this:
As you can see, almost all the colors; accent color, primary, secondary, colors for the graphs and numbers, etc. have changed. In light mode, the colors are more saturated and sort of 'brighter', as compared to the dark theme.
I got inspiration for the different colors from Google's Material Design color-picking tool. It shows many different colors with different amounts of saturation or intensity of that same color. These different intensities were used for the different themes.
Icons
I've used many icons in this site, for example in the sidebar with each tab (Home, Analytics, Sales, Costs, etc.), or in the top bar, and also in the main content for each data item.
These icons come from Ionicons, a great library filled with beautiful icons that you can also customize.
Animations
There are several animations in this site. For example, when you hover on any of the icons in the sidebar, they rotate to the right a bit. When you hover on the icons in the top right corner of each data container, they move to the top and right. The elements in the topbar also become a bit bigger on hover. Finally, when you hover on the cross symbol to close the sidebar, it spins, and when you hover on the hamburger icon to open the sidebar, the lines seperate.
Charts
The charts come from Charts.css, a great framework for data such as columns, areas, bars, lines, etc. What's cool is that they are rather simple to use, and you can customize their colors, shapes, and values, and can even add animations or motion effects. You can get started here.
Faces
The faces used in the reviews data container are all fake and generated with AI. They were generated with this face generator. With this generator, you get a completely random face, or tweak things such as age, emotions, skin/hair color, and much more!
Closing πͺ
Well, that's about all! Make sure to let me know any comments, suggestions, or questions if you have them! :D
If there are any issues/bugs/things breaking, please comment them or DM me on Discord @ Bookie0#7538
.
If you use this dashboard template/site, please keep in mind that I'd love if you gave credit (like in the footer of your website or something), as I did put some effort into this! :)
Have a fantastic day!!!
Bye! π
@CodingElf66 Lol thanks! Yeah for the sidebar issue; I think it's actually fine, it just looks not aligned because of the border radii of the reviews container.
Thanks tho! :D
It also cuts off parts of the image as seen [email protected]
@Bookie0 Theres an issue on mobile where almost nothing lines up. It is so annoying to me.
@StringentDev Could you send a screenshot of what you mean by 'nothing lines up' please?
@Bookie0 Its not a bug with your website since you are not using absolute or relative posistioning.
@Bookie0 I was creating a custom Video Player in HTML, CSS and JS in which the progress bar would not line up correctly.
@iocoder 99 upvotes as of when i sent this... so close
@iocoder 100+ Upvotes woo hoo!
@CodingElf66 finally
Amazing
Thank you! :D @AdvikaPathak
so⦠business site with lotz of fake data⦠I'm in!
Lmao :) @RahulChoubey1
@Bookie0 ping ping ping
@Bookie0 Every time I travel to replit, all of your posts are in the βtrendingβ area of the homepage. And I always click them, because I know they are going to be amazing! Keep that legacy! I loved this one lmao...
@frostedbutton75 Lol thanks! :)
UPDOOT!
@Glitterpoop Is your username a kotlc reference?
Hey @Bookie0!
Noice work!
Would you like to work together to make some really good website.
(idk what)
I can do back-end and I am decent at front-end...
(Its fine if you say no)
@ABirdCoder thanks! Iβm quite busy, but what are you aiming to do; whatβs ur idea?
@Bookie0 idk... maybe a recreation of the replit signup/login page. It's kind of outdated.
We can come up with other ideas. @Bookie0
when i tried lightmode -
Narrator: AmoghTheCool diedπ.
@AmoghTheCool lmao
@AmoghTheCool In the middle of the night (since programmers don't sleep, jk) turn this (or any other website) to light mode and turn your brightness to max and put it in anyone's face whom you want to suffer. Just know that they may or may not die from it. Be careful not to end your own eyes.
Nice hamburger Bookie, may I know what meat you used in it?
@GhostKing007 Lmao no meat just bread
@Bookie0 hmms very cool
How did you get the representation of the website on an iMac?
I used this wonderful tool @mhmcwatters23
@Bookie0 Cool, TYSM! Love your CSS projects btw.
Damn, this is very impressive!
Thank you! :) @InformatiQs
###cool###
Thanks! :) @Vivaanawesome
What if you make the calendar icon sort of "attached" to the menu that slides out. Make it next to the hamburger icon, then have it slide out when you toggle the menu.
Great dashboard! I really like the design style.
What website did you use for the iMac/iPhone/MacBook pictures?
Thought of the day:
Statistically, Windows is more popular than macOS, yet images like this are pretty much always on Apple machines. Why is this?
Thank you! :D @DillonB07
I used this for the mockup frames: https://mockuphone.com/
Response to the thought of the day:
Most likely because Apple devices look much better, so images on those devices look cooler
You should really do UI commissions! Just an idea :)
@jeweledfox Lol thanks! :) I think it'd be cool to do those, but I don't always have much time. Really depends on what the commission would be
nice!
Thank you! :) @ThanhTails
@Bookie0 you wellcome :)
THIS IS FANTASTIC! I love this. Could I use this in my website? Is there any specific format that you would like credit to be given (such as a URL to your website, replit page, discord username, etc.)?
Thanks! :) @Froggo-School
Yeah sure, you could credit by saying I built this and linking my site (https://bookie0.repl.co/) :D
@Bookie0 :) Ok, thanks. Oh, I noticed that when you close the sidebar, that the two bars on the button to re-open the sidebar, one seems to have a greater height.
@Bookie0 I am using 64-bit Chrome (v94) on ChromeOS. Using DevTools shows they are both 5px in height, meaning this is probably an issue with how Chrome is rendering the webpage, and not actually your fault.
Ahh ok lol @Froggo-School
Yeah
Thanks! @Froggo-School
I love the animation when you close the sidebar, replit needs to implement this
@Whippingdot lol thanks :)
100th upvote, awesome project. I absolutely love the color scheme
@Cyclonically lol thanks :)
maybe next time you should tell people to read the readme to make the post shorter, but itβs still cool!
@ruiwenge2 thanks! Yeah I wish more people read the README as I do spend some time writing it lol, but yeah cuz itβs long most people just skip it
@ruiwenge2 lol yeah but if I just kept it in the README Iβm sure even less people would read it
Nice. I like how similar this is to other websites' GUI, so it is very easy to understand what each piece of it would do even if it has no functionality. I also really like the transition from light to dark mode.
@tankerguy1917 Thank you! :D
kewl
sees light mode
oo
clicks
silence
Lmao @zplusfour
i died the second i turned on light mode
lmao @PixiGem
@Bookie0 lmfao I love how u always say lmao
lmao @PixiGem
@Bookie0 lmfao is superior to lmao
lmfao @FlaminHotValdez
lmao @Bookie0
@Bookie0 Could I work with you in frontend?
@cutech my best site is spotlite.repl.co
Wdym 'work with you'? @cutech
@Bookie0 code together on these types of projects
@cutech Hm idk I'm kinda busy these days. Feel free to let me know what kinds of projects you're doing and I can see what I can do :)
@Bookie0 Understandable have a great day.
You too! :) @cutech
lmfaoooo @FlaminHotValdez