tDashboard

In this example below you will see how to do a tDashboard with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Zelgadis87, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Zelgadis87 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>tDashboard</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
<div class="grid">
	<div class="tile green">
		<div class="title">Title</div>
	</div>
	<div class="tile red">
		<div class="title">Title</div>
	</div>
<!-- 	<div class="tile">
		<div class="title">Title</div>
	</div> -->
	<div class="tile-big calendar1">
		
		<div class="title">
			Appuntamenti
		</div>
		<div class="body">
		
		<div class="separator">
			Oggi
		</div>
		
		<div class="event google">
			
			<div class="time">09:00 - 10:00</div>
			<div class="description">Alessandro Torrini<br/> Antonio Drago<br/>Iacopo Ciao</div>
			
		</div>
		<div class="event">
			
			<div class="time">10:00 - 13:00</div>
			<div class="description">Leonardo Sequi</div>
			
		</div>
		
		<div class="event google">
			
			<div class="time">09:00 - 10:00</div>
			<div class="description">Alessandro Torrini</div>
			
		</div>
		
		<div class="separator">
			Domani
		</div>
		
		<div class="event">
			
			<div class="time">10:00 - 13:00</div>
			<div class="description">Dennis Aleandro Boanini</div>
			
		</div>
		</div>
	</div>
	
	<div class="tile-big calendar2">
		
		<div class="title">
			Appuntamenti
		</div>
		<div class="body">
		<div class="separator">
			Oggi
		</div>
		
		<div class="event google">
			
			<div class="time">09:00 - 10:00</div>
			<div class="description">Alessandro Torrini<br/> Antonio Drago<br/>Iacopo Ciao</div>
			
		</div>
		<div class="event">
			
			<div class="time">10:00 - 13:00</div>
			<div class="description">Leonardo Sequi</div>
			
		</div>
		
		<div class="event google">
			
			<div class="time">09:00 - 10:00</div>
			<div class="description">CRM Daily Meeting</div>
			
		</div>
		
		<div class="separator">
			Domani
		</div>
		
		<div class="event">
			
			<div class="time">10:00 - 13:00</div>
			<div class="description">Dennis Aleandro Boanini</div>
			
		</div>
	</div>
	</div>
	
	<div class="tile-big calendar3">
		
		<div class="title">
			Appuntamenti
		</div>
		<div class="body">
		<div class="separator">
			Oggi
		</div>
		
		<div class="event google">
			
			<div class="time">09:00 - 10:00</div>
			<div class="description">Alessandro Torrini<br/> Antonio Drago<br/>Iacopo Ciao</div>
			
		</div>
		<div class="event">
			
			<div class="time">10:00 - 13:00</div>
			<div class="description">Leonardo Sequi</div>
			
		</div>
		
		<div class="event google">
			
			<div class="time">09:00 - 10:00</div>
			<div class="description">CRM Daily Meeting</div>
			
		</div>
		
		<div class="separator">
			Domani
		</div>
		
		<div class="event">
			
			<div class="time">10:00 - 13:00</div>
			<div class="description">Dennis Aleandro Boanini</div>
			
		</div>
	</div>
	</div>
	
</div>
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Zelgadis87/tdashboard-eerJNG */
html, body {
  height: 100%;
  font-family: Roboto;
}

.grid {
  height: 100%;
  width: 100%;
  background-color: #fafafa;
  padding: 15px;
}

.tile, .tile-big {
  float: left;
  width: 200px;
  height: 100px;
  background-color: white;
  padding: 10px;
  margin-top: 10px;
  margin-left: 20px;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  border-left: 6px solid transparent;
}
.tile.red, .tile-big.red {
  border-left-color: red;
}
.tile.yellow, .tile-big.yellow {
  border-left-color: yellow;
}
.tile.orange, .tile-big.orange {
  border-left-color: orange;
}
.tile.green, .tile-big.green {
  border-left-color: lime;
}

.tile-big {
  float: left;
  width: 205px;
  height: 450px;
  padding: 0;
  border-left-width: 0;
}

.event:hover {
  #box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 1000;
  color: blue;
  cursor: pointer;
}

.tile .title {
  margin-left: 10px;
  font-family: Roboto;
  font-size: 120%;
}

.tile-big .title {
  box-sizing: border-box;
  font-size: 130%;
  font-weight: bold;
  color: #6e6e6e;
  padding: 10px 5px;
  margin: 5px;
  height: 48px;
}

.body {
  height: calc( 100% - 58px );
  overflow: auto;
}

.description {
  font-weight: bold;
  font-size: 90%;
}

.event {
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: #47cf73;
  #margin: 10px 0 10px 10px;
  font-size: 120%;
}
.event.google {
  border-left-color: #309;
}
.event .time {
  font-size: 70%;
}

.calendar1 .event {
  margin: 0px 0px 0px 0px;
  padding: 8px 5px 14px 10px;
}

.calendar2 .event, .calendar3 .event {
  margin: 10px 0px 10px 10px;
  padding: 5px 8px 5px 8px;
}

.separator {
  background-color: #f2f2f2;
  padding: 8px 15px;
  text-align: left;
  # display: none;
}

.calendar3 .separator {
  width: 45%;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local("Roboto Light"), local("Roboto-Light"), url(https://themes.googleusercontent.com/static/fonts/roboto/v9/Pru33qjShpZSmG3z6VYwnT8E0i7KZn-EPnyo3HZu7kw.woff) format("woff");
}
.calendar3 .body {
  overflow: auto;
  visibility: hidden;
}
.calendar3 .body:focus, .calendar3 .body:hover, .calendar3 .body * {
  visibility: visible;
}


/*Downloaded from https://www.codeseek.co/Zelgadis87/tdashboard-eerJNG */

let classes = [ 'red', 'green', 'orange', 'yellow'], i = 0;

jQuery(document.body).ready($ => {
	if ( true ) return;
	let $tile = $('.tile');
	
	setTimeout(() => {
	
		$tile.removeClass();
		$tile.addClass('tile');
		$tile.each((i, t) => $(t).addClass(classes[ Math.round(Math.random() * classes.length)  ]));
		
		
	}, 300)
})

Comments