← Back to Community
Dashboard
Profile icon
Bookie0

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:

howItLooksLike

This is how it looks like on a phone:

mobile

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! :)



Features ✨

Sidebar

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

topbar

  • Calendar icon
  • Search box with search icon
  • Profile with username, profile picture, and notification

Content

content

  • Friendly message to user
  • Contains several types of (fake) data with different sizes:
    • Rect (1 x 2)
    • Small (1 x 1)
    • Big (2 x 2)
    • Large (4 x 2)
  • 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

sessionLength

  • Multiple area graph

Less sessions/More users

lessSessions

  • Big number

Daily users/Performance

dailyUsers

  • Line graph

Sales

sales

  • Column graph

Revenue/Costs

revenue

  • Big number
  • Smaller numbers next to it

Reviews

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:

contrast

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:

light

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.

colors

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! πŸ‘‹

Voters
Profile icon
SimerLol
Profile icon
Bookie0
Profile icon
SnipBlox
Profile icon
AhmadDanial2
Profile icon
inyourface3445
Profile icon
aolifdood
Profile icon
latifaah
Profile icon
luiggipasache
Profile icon
TomatoCake
Profile icon
PythonTheTharun
Comments
hotnewtop
Profile icon
PixiGem

i died the second i turned on light mode

Profile icon
Bookie0
Profile icon
PixiGem

@Bookie0 lmfao I love how u always say lmao

Profile icon
Bookie0
Profile icon
FlaminHotValdez

@Bookie0 lmfao is superior to lmao

Profile icon
Bookie0
Profile icon
Froggo-School
Profile icon
cutech

@Bookie0 Could I work with you in frontend?

Profile icon
cutech

@cutech my best site is spotlite.repl.co

Profile icon
Bookie0

Wdym 'work with you'? @cutech

Profile icon
cutech

@Bookie0 code together on these types of projects

Profile icon
Bookie0

@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 :)

Profile icon
cutech

@Bookie0 Understandable have a great day.

Profile icon
Bookie0

You too! :) @cutech

Profile icon
RehmaUwU
Profile icon
CodingElf66

You are just the king of CSS, and nobody can deny that. This is incredible! One thing, though.

Screenshot 2021-10-10 1.03.34 PM

The bar at the left doesn't align very well with the rest of the website, so I suggest fixing that, but otherwise, good job!

P.S., I'm about to break your nice 6666 upvotes.

Profile icon
Bookie0

@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

Profile icon
hg0428

It also cuts off parts of the image as seen [email protected]

Profile icon
StringentDev

@Bookie0 Theres an issue on mobile where almost nothing lines up. It is so annoying to me.

Profile icon
Bookie0

@StringentDev Could you send a screenshot of what you mean by 'nothing lines up' please?

Profile icon
StringentDev

@Bookie0 Its not a bug with your website since you are not using absolute or relative posistioning.

Profile icon
Bookie0
Profile icon
StringentDev

@Bookie0 I was creating a custom Video Player in HTML, CSS and JS in which the progress bar would not line up correctly.

Profile icon
Bookie0
Profile icon
glitchish

@Bookie0 we need to get this thing to 100 upvotes.
cool project/repl btw.


and... to all who haven't

upvote already!

Profile icon
Bookie0

@iocoder lol thanks! :)

Profile icon
cdCreepArghhh

@iocoder 99 upvotes as of when i sent this... so close

Profile icon
CodingElf66

@iocoder 100+ Upvotes woo hoo!

Profile icon
glitchish

@CodingElf66 finally

Profile icon
AdvikaPathak

Amazing

Profile icon
Bookie0

Thank you! :D @AdvikaPathak

Profile icon
RahulChoubey1

so… business site with lotz of fake data… I'm in!

Profile icon
Bookie0
Profile icon
RahulChoubey1

@Bookie0 ping ping ping

Profile icon
frostedbutton75

@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...

Profile icon
Bookie0

@frostedbutton75 Lol thanks! :)

Profile icon
frostedbutton75
Profile icon
Glitterpoop

UPDOOT!

Profile icon
Bookie0
Profile icon
FlaminHotValdez

@Glitterpoop Is your username a kotlc reference?

Profile icon
ABirdCoder

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)
Profile icon
Bookie0

@ABirdCoder thanks! I’m quite busy, but what are you aiming to do; what’s ur idea?

Profile icon
ABirdCoder

@Bookie0 idk... maybe a recreation of the replit signup/login page. It's kind of outdated.

Profile icon
Bookie0
Profile icon
ABirdCoder

We can come up with other ideas. @Bookie0

Profile icon
AmoghTheCool

when i tried lightmode -

Narrator: AmoghTheCool diedπŸ’€.

Profile icon
Bookie0
Profile icon
TurtleAndrew

@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.

Profile icon
AmoghTheCool
Profile icon
GhostKing007

Nice hamburger Bookie, may I know what meat you used in it?

Profile icon
Bookie0

@GhostKing007 Lmao no meat just bread

Profile icon
GhostKing007

@Bookie0 hmms very cool

Profile icon
itsVyle

I personally prefer the way we reskined it for lunch ;)

Profile icon
Bookie0

@itsVyle i like purple tho ;)

Profile icon
mhmcwatters23

How did you get the representation of the website on an iMac?

Profile icon
Bookie0

I used this wonderful tool @mhmcwatters23

Profile icon
mhmcwatters23

@Bookie0 Cool, TYSM! Love your CSS projects btw.

Profile icon
Bookie0
Profile icon
saion

cool. Wanna build the apple site clone with me?

Profile icon
Bookie0

Thanks! Sorry, I don't really have much time to do collabs these days, but feel free to lmk what it looks like in the end! :) @saion

Profile icon
saion
Profile icon
RehmaUwU

Impressive!! I'm learning Html,css in school right now. I know Python pretty well since it was my first language. :)

Profile icon
Bookie0

Thanks! :) @RehmaUwU

Profile icon
RehmaUwU

anytime ;) @Bookie0

Profile icon
InformatiQs

Damn, this is very impressive!

Profile icon
Bookie0

Thank you! :) @InformatiQs

Profile icon
Vivaanawesome

###cool###

Profile icon
Bookie0

Thanks! :) @Vivaanawesome

Profile icon
vys

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.

Profile icon
Bookie0

@vys thanks for the feedback! :)

Profile icon
vys

of course! I noticed it because there was just that open space in between it, and the menu elements. Best of luck! This dashboard is really clean. Great job, bookie. @Bookie0

Profile icon
DillonB07

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?

Profile icon
Bookie0

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

Profile icon
jeweled

You should really do UI commissions! Just an idea :)

Profile icon
Bookie0

@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

Profile icon
ThanhTails

nice!

Profile icon
Bookie0

Thank you! :) @ThanhTails

Profile icon
ThanhTails

@Bookie0 you wellcome :)

Profile icon
Elijah629

Hey! If you wanted too, you could hook this thing up to a Rest API and make the data real! (Nice BTW)

Profile icon
Bookie0

Thanks! :) @EliOzcan

Profile icon
bestdany

Wow

Profile icon
Bookie0
Profile icon
Froggo-School

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.)?

Profile icon
Bookie0

Thanks! :) @Froggo-School

Yeah sure, you could credit by saying I built this and linking my site (https://bookie0.repl.co/) :D

Profile icon
Froggo-School

@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.

Profile icon
Bookie0

@Froggo-School Np

Hm could you attach a screenshot?

This is how it looks like for me:
Screen Shot 2021-10-20 at 4.22.21 PM

With the dev tools, you can check that they are both exactly 5 px (or should be)

Profile icon
Froggo-School

@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.

Here's the screenshot:
image

Profile icon
Froggo-School
Profile icon
Bookie0

Ahh ok lol @Froggo-School

Profile icon
Bookie0

Yeah
Thanks! @Froggo-School

Profile icon
whiez

Oh! It's really amazing! Can I upgrade this replay using js?

Profile icon
Bookie0

@whiez Thanks!

sure ;)

Profile icon
Whippingdot

I love the animation when you close the sidebar, replit needs to implement this

Profile icon
Bookie0

@Whippingdot lol thanks :)

Profile icon
Cyclonically

100th upvote, awesome project. I absolutely love the color scheme

Profile icon
Bookie0

@Cyclonically lol thanks :)

Profile icon
ruiwenge2

maybe next time you should tell people to read the readme to make the post shorter, but it’s still cool!

Profile icon
Bookie0

@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

Profile icon
ruiwenge2

@Bookie0 yeah if your post is long people have to scroll all the way down which is sometimes annoying

Profile icon
Bookie0

@ruiwenge2 lol yeah but if I just kept it in the README I’m sure even less people would read it

Profile icon
tankerguy1917

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.

Profile icon
Bookie0

@tankerguy1917 Thank you! :D

Profile icon
sojs

Truly Fantastic, as always @Bookie0!
Love the styling but...

image

Edit:
Arghghg gifs dont work.

Here is what i mean:
Good:

image


then click:

image


okie...

image


click...

image


NOO WHAT HAPPENED

image

Profile icon
Bookie0

Thank you! :D

Hm that's weird it shouldn't overlap it. What are the dimensions of your screen (like in px)?

@sojs

Profile icon
sojs

I have absolutely no idea and i cant find out how. is thier like a site or something? @Bookie0

Profile icon
Bookie0

@sojs yeah you could try to open the dev panel (right click and click inspect) and enter mobile device emulation mode (should be an icon looking like a mobile device, next to the inspect icon)
Then you could stretch the things (you’ll see what I mean) and check out the size

Profile icon
sojs

hmm i dont have dev tools... it was blocked. @Bookie0

Profile icon
Bookie0

@sojs oh okay

Profile icon
zplusfour

kewl
sees light mode
oo
clicks
silence

Profile icon
Bookie0