Dashboard

Developer
Mfcastro
Size
3,640 Kb
Views
4,048
  1. Dashboard Previews
  2. Dashboard HTML Codes
  3. Dashboard CSS Codes
  4. Dashboard JS Codes

How do I make an dashboard?

What is a dashboard? How do you make a dashboard? This script and codes were developed by Mfcastro on 20 January 2023, Friday.

Dashboard Previews
IQ Test

Dashboard - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dashboard</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div class="container " id="sortable" ng-app="app"> <div class="box panel panel-default resizable wow zoomIn" id="box1"> <div class="panel-heading" id="box1_header">#1</div> <div class="panel-body"> Panel content </div> </div> <div class="box panel panel-default resizable wow zoomIn" data-wow-delay="0.05s" id="box2"> <div class="panel-heading" id="box2_header">#2</div> <div class="panel-body"> Panel content </div> </div> <div class="box panel panel-default resizable wow zoomIn" data-wow-delay="0.1s" id="box3"> <div class="panel-heading" id="box3_header">#3</div> <div class="panel-body"> Panel content </div> </div> <div class="box panel panel-default resizable wow zoomIn" data-wow-delay="0.15s" id="box4"> <div class="panel-heading" id="box4_header">#4</div> <div class="panel-body"> Panel content </div> </div> <div class="box panel panel-default resizable wow zoomIn" data-wow-delay="0.2s" id="box5"> <div class="panel-heading" id="box5_header">#5</div> <div class="panel-body"> Panel content </div> </div> <div class="box panel panel-default resizable wow zoomIn" data-wow-delay="0.25s" id="box6"> <div class="panel-heading" id="box6_header">#6</div> <div class="panel-body"> Panel content </div> </div> <div class="box panel panel-default resizable wow zoomIn" data-wow-delay="0.3s" id="box7" ng-controller="box7"> <div class="panel-heading" id="box7_header">#7</div> <div class="panel-body" class="container"> <form ng-submit="submit()" id="userForm"> <div class="form-group" id="nameGroup"> <label for="">Name</label> <input type="text" class="form-control" ng-model="myForm.name" /> </div> <div class="form-group " id="emailGroup"> <label for="">Email</label> <input type="text" class="form-control" id="email" ng-model="myForm.email" /> </div> <div class="form-group col-md-12 disappear" id="messageGroup"> <label for="area"> Message</label> <textarea name="area" class="form-control" id="" cols="20" rows="3" ng-model="myForm.message"></textarea> </div> <button class="btn btn-primary" id="formButton">Submit</button> </form> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dashboard - Script Codes CSS Codes

.container { width: 100%; margin: 0 auto; background: black; padding-bottom: 510px;
}
.box { min-height: 300px; min-width: 300px; background: white; float: left; margin: 15px 10px 5px 10px; z-index: 5;
}
@media (max-width: 660px) { .box { width: 100%; }
}
#box1_header { background: red;
}
#box2_header { background: yellow;
}
#box3_header { background: blue;
}
#box4_header { background: green;
}
#box5_header { background: orange;
}
#box6_header { background: purple;
}
#sortable { list-style-type: none; margin: 0; padding: 0;
}
#resizable { width: 150px; height: 150px; padding: 0.5em;
}
#resizable h3 { text-align: center; margin: 0;
}
.appear { display: block;
}
.disappear { display: none;
}

Dashboard - Script Codes JS Codes

var panelArr = { one: { position: 1, height: null, width: null }, two: { position: 2, height: null, width: null }, three: { position: 3, height: null, width: null }, four: { position: 4, height: null, width: null }, five: { position: 5, height: null, width: null }, six: { position: 6, height: null, width: null }, seven: { position: 7, height: null, width: null }, } var panel_7 = { table: false } $("#sortable").sortable({ //placeholder: '.drop' }); $("#sortable").disableSelection(); $(".resizable").resizable({ grid: 322, stop: function(event, ui) { panelArr.one.height = $("#box1").height(); panelArr.one.width = $("#box1").width(); panelArr.two.height = $("#box2").height(); panelArr.two.width = $("#box2").width(); panelArr.three.height = $("#box3").height(); panelArr.three.width = $("#box3").width(); panelArr.four.height = $("#box4").height(); panelArr.four.width = $("#box4").width(); panelArr.five.height = $("#box5").height(); panelArr.five.width = $("#box5").width(); panelArr.six.height = $("#box6").height(); panelArr.six.width = $("#box6").width(); panelArr.seven.height = $("#box7").height(); panelArr.seven.width = $("#box7").width(); console.log(panelArr); if (panelArr.seven.width > 400) { $('#emailGroup').addClass('col-md-6'); $('#nameGroup').addClass(' col-md-6'); $('#formButton').addClass('col-md-2 col-lg-2'); $('#messageGroup').addClass('appear col-md-12').removeClass('disappear'); } else if (panelArr.seven.height > 400) { $('#emailGroup').removeClass('col-md-6'); $('#nameGroup').removeClass('col-md-6'); $('#messageGroup').addClass('appear').removeClass('disappear col-md-12'); $('#formButton').removeClass(' col-sm-6 col-md-2 col-lg-2'); } else { $('#emailGroup').removeClass('col-md-12 col-md-6'); $('#nameGroup').removeClass('col-md-12 col-md-6'); $('#formButton').removeClass(' col-sm-6 col-md-2 col-lg-2'); $('#messageGroup').addClass('disappear').removeClass('appear'); } /*if(panelArr.seven.width > 400 && panelArr.seven.height > 400){ $('#messageGroup').addClass('appear').removeClass('disappear'); } else{ $('#messageGroup').addClass('disappear').removeClass('appear'); }*/ } }); var app = angular.module('app', []); app.controller('box7', function($scope) { $scope.submit = function() { alert("Name: " + $scope.myForm.name + " Email: " + $scope.myForm.email + " Message: " + $scope.myForm.message); $scope.myForm = ""; } });
new WOW().init();
Dashboard - Script Codes
Dashboard - Script Codes
Home Page Home
Developer Mfcastro
Username marcocastro
Uploaded January 20, 2023
Rating 3
Size 3,640 Kb
Views 4,048
Do you need developer help for Dashboard?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mfcastro (marcocastro) Script Codes
Name
Learn Animation
A Pen by Mfcastro
V2
Random Quote Machine
Ng-if
RWD- Mostly Fluid Layout Pattern
Workbench
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!