Dashboard Template

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

A basic admin panel made for work.

Thumbnail
This awesome code was written by davisj16usmc, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright davisj16usmc ©
  • HTML
  • CSS
  • JavaScript
            <!-- Navbar -->
        <div class="menuContainer">
            <span>Admin Panel</span>
            <div class="menu-element">
                <div class="menu" onclick="openModal()">
                    <div class="top"></div>
                    <div class="mid"></div>
                    <div class="bot"></div>
                </div>
                <span>Menu</span>
            </div>
            <div class="menu-element">
                <div class="plus-button" id="btnTools" onclick="openTools()">
                </div>
                <span>Tools</span>
            </div>
        </div>

        <!-- Modal Menu -->
        <div id="menu" class="modal-container">
            <div class="modal">
                <span onclick="closeModal()" class="close">&times;</span>
                <a style="color: #303030;" href="#TBD">Home</a>
                <a style="color: #FF3385;" href="#TBD">My Dashboard</a>
                <a style="color: #9030CE;" href="#TBD">Monitors</a>
                <a style="color: #009933;" href="#TBD">Devices</a>
                <a style="color: #0099FF;" href="#TBD">DEV Center</a>
            </div>
        </div>

        <!-- Left Nav -->
        <nav class="left-nav">
            <div class="left-nav-top">
                <span>Welcome, <strong id="userName">User</strong></span>
            </div>
            <h2>Dashboard</h2>
            <div class="left-nav-links">
                <a href="#" class="active"><span class="icon-display"></span>Overview</a>
                <a href="#"><span class="icon-tree"></span>Migration Manager</a>
                <a href="#"><span class="icon-calendar"></span>Calendar</a>
                <a href="#"><span class="icon-books"></span>SIGACTS</a>
            </div>
        </nav>

        <!-- Overview Content -->
        <div id="pageOverview" class="page">
            <h2>Today is Monday, May 15th, 2017.</h2>
            <div style="display: inline-flex; width: 100%;">
                <div class="stats">
                    <div class="servers">
                        <h1 class="icon-stack"></h1>
                        <span>42</span>
                        <h4>Servers</h4>
                    </div>
                </div>
                <div class="stats">
                    <div class="personnel">
                        <h1 class="icon-profile"></h1>
                        <span>105</span>
                        <h4>Personnel</h4>
                    </div>
                </div>
                <div class="stats">
                    <div class="other1">
                        <h1 class="icon-database"></h1>
                        <span>23</span>
                        <h4>Databases</h4>
                    </div>
                </div>
                <div class="stats">
                    <div class="other2">
                        <h1 class="icon-bug"></h1>
                        <span>12</span>
                        <h4>Current Issues</h4>
                    </div>
                </div>
            </div>
            <div class="feed">
                <h2>Feed</h2>
                <div class="feed-content">
                    <div>
                        <h2 class="icon-profile feed-login"></h2>
                        <span>Someone logged in.</span>
                        <span>23 mins ago</span>
                    </div>
                    <div>
                        <h2 class="icon-clock feed-run"></h2>
                        <span>You ran 7.52 miles.</span>
                        <span>42 mins ago</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Migration Manager Page -->
        <div class="page">
        </div>

        <!-- Migration Form -->
        <div class="formcontainer" id="migration-form">
            <div class="migration-form">
                <span onclick="openTools()" class="close">&times;</span>
                <select>
                    <option>Administrator</option>
                </select>
                <input type="date" class="date-selector" />
                <div class="actions">
                    <input type="radio" name="rb" id="rb1" />
                    <label for="rb1" onclick="showTBOX('no')">GPO</label>
                    <input type="radio" name="rb" id="rb2" />
                    <label for="rb2" onclick="showTBOX('no')">Permissions</label>
                    <input type="radio" name="rb" id="rb3" />
                    <label for="rb3" onclick="showTBOX('no')">Network Storage</label>
                    <input type="radio" name="rb" id="rb4" />
                    <label for="rb4" onclick="showTBOX('no')">Server Build</label>
                    <input type="radio" name="rb" id="rb5" />
                    <label for="rb5" onclick="showTBOX('no')">AD / OU</label>
                    <input type="radio" name="rb" id="rb6" />
                    <label for="rb6" onclick="showTBOX('server')">Server Decomission</label>
                    <input type="radio" name="rb" id="rb7" />
                    <label for="rb7" onclick="showTBOX('other')">Other</label>
                </div>
                <div id="divExtra" class="inactive">
                    <span id="txtName">New Server Name:</span>
                    <input type="text" />
                </div>
                <select>
                    <option>Basline / Customer</option>
                </select>
                <select>
                    <option>Server / Storage Name</option>
                </select>
                <textarea>Work Performed</textarea>
                <button>Submit</button>
            </div>
        </div>

/*Downloaded from https://www.codeseek.co/davisj16usmc/dashboard-template-rmGarQ */
    /* Globals */
.inactive {
    display: none;
}

.active {
    display: block !important;
}

/* Navigation Menu */
.menuContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 700px;
    line-height: 68px;
    background-size: 150%;
    background-image: linear-gradient(90deg, #EEE 0%, #DDD 25%, #2C5 50%, #DDD 75%, #EEE 100%);
    color: #222;
    animation: anim-fade-in linear 1 0.5s, anim-nav-background linear infinite 8s;
    z-index: 1;
}

@keyframes anim-fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes anim-nav-background {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.menuContainer span {
    font-size: 40px;
    margin: 15px 15px;
}

.menu-element {
  width: 200px;
  float: right;
}

.menu-element span {
  float: right;
  line-height: 35px;
  font-size: 30px;
}

.plus-button {
  float: right;
  margin: 17px 17px;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  background-color: #222;
  color: #FFF;
  cursor: pointer;
  transition: all linear 0.3s;
}

.plus-button::before {
  content: "+";
  position: relative;
  top: -45%;
  left: 28%;
  font-size: 28px;
  font-weight: 600;
}

.plus-button:hover {
  box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.5);
}

.open {
  transform: rotate(45deg);
  text-shadow: -1px -1px 5px rgba(255, 255, 255, 0.5);
  box-shadow: -1px 2px 5px rgba(0, 0, 0, 0.5);
}

.menu {
    float: right;
    margin: 15px 15px;
    cursor: pointer;
    width: 35px;
}

    .menu:hover div {
        box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.75);
    }

    .menu div {
        height: 5px;
        background: #222;
        margin: 6px 0;
        transition: all linear 0.3s;
    }

/* Modal */
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.65);
    transition: all linear 0.5s;
    display: none;
    z-index: -1;
}

.show {
    z-index: 5 !important;
    animation: anim-fade-in linear 0.3s 1;
}

.modal {
    min-height: 250px;
    width: 50%;
    min-width: 250px;
    padding: 20px;
    margin: 8em auto;
    text-align: center;
    box-shadow: -5px 5px 15px 5px rgba(0, 0, 0, 0.75);
    background: #FFF;
}

    .modal a {
        padding: 8px;
        font-size: 20px;
        text-align: center;
        position: relative;
        text-decoration: none;
        display: block;
        transition: all linear 0.5s;
    }

        .modal a:hover {
            text-shadow: -1px 1px 5px rgba(0, 0, 0, 0.75);
        }

        .modal a::before {
            content: '';
            position: absolute;
            bottom: 0%;
            left: 0px;
            width: 100%;
            height: 1px;
            background: #909090;
            display: block;
            transform-origin: right top;
            transform: scale(0, 1);
            transition: transform 0.5s;
        }

        .modal a:hover::before {
            transform-origin: left top;
            transform: scale(1, 1);
        }

        .modal a:first-of-type {
            margin-top: 35px;
        }

.close {
    color: #333;
    float: right;
    font-size: 28px;
    font-weight: bold;
    transition: all linear 0.2s;
    margin-right: 15px;
    margin-top: 15px;
}

    .close:hover {
        text-shadow: -1px 1px 5px rgba(0, 0, 0, 0.75);
        cursor: pointer;
    }

/* Page Body */
.page {
    display: block;
    z-index: 0;
    margin-top: 77px;
    margin-left: 315px;
    color: #222;
    height: 100%;
    transition: all linear 0.5s;
    animation: anim-fade-in linear 1s 1;
}

/* Left Nav */
.left-nav {
    z-index: 1;
    height: 100%;
    width: 300px;
    background: #FFF;
    color: #333;
    position: fixed;
    left: 0;
    overflow: auto;
    animation: anim-nav-swipe-from-left 0.5s linear 1;
}

@keyframes anim-nav-swipe-from-left {
    0% {
        left: -300px;
        opacity: 0;
    }

    100% {
        left: 0;
        opacity: 1;
    }
}

.left-nav-top {
    margin-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    text-align: right;
    border-bottom: 1px solid #CCC;
}

.left-nav div {
    width: 100%;
}

.left-nav-links a {
    font-size: 20px;
    text-decoration: none;
    color: inherit;
    width: 100%;
    display: block;
    line-height: 40px;
    padding-left: 15px;
    transition: all linear 0.3s;
}

    .left-nav-links a > span {
        margin-left: 5px;
    }

    .left-nav-links a:hover {
        box-shadow: 300px 0px #AAA inset !important;
        color: #222 !important;
    }

    .left-nav-links a.active {
        background: #2196F3;
        color: white;
    }

.link-overview {
    padding-right: 15px;
    vertical-align: middle;
    width: 25px;
    height: 25px;
}

/* Overview Page */
.page h2 {
    padding-top: 20px;
}

.stats {
    width: 100%;
    margin: 5px;
}

    .stats div {
        width: 100%;
        min-width: 182px;
        height: 125px;
        color: white;
        cursor: pointer;
        transition: all linear 0.3s;
    }

        .stats div:hover {
            box-shadow: 0px -125px rgba(0, 0, 0, 0.5) inset;
            filter: hue-rotate(30deg);
        }

        .stats div > h1 {
            position: relative;
            top: 10px;
            font-size: 50px;
            margin-left: 10px;
            margin-top: 15px;
        }

        .stats div > span {
            position: relative;
            top: -80px;
            right: 10px;
            font-size: 25px;
            float: right;
        }

        .stats div > h4 {
            font-size: 25px;
            margin: 0.5em;
        }

.servers {
    background: #F44336;
}

.personnel {
    background: #2196F3;
}

.other1 {
    background: #009688;
}

.other2 {
    background: #FF9800;
}

/* Feed */
.feed {
    width: 100%;
    margin: 5px 0px;
}

    .feed h2 {
        margin-bottom: 2px;
    }

.feed-content {
    width: 100%;
    min-width: 500px;
    display: table;
}

    .feed-content div {
        display: table-row;
        width: 100%;
        line-height: 30px;
        font-size: 15px;
        background: #EEE;
    }

        .feed-content div:nth-child(even) {
            background: #CCC;
        }

        .feed-content div > h2 {
            margin 0;
            padding: 0;
        }

        .feed-content div > h2,
        .feed-content div > span {
            display: table-cell;
            padding-left: 15px;
        }

            .feed-content div > span:last-child {
                float: right;
                margin-right: 15%;
                font-style: italic;
            }

.feed-login {
    color: #0AF;
}

.feed-run {
    color: #F51;
}

/* Migration Form */
.formcontainer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.65);
    transition: all linear 0.5s;
    display: none;
    z-index: -1;
}

.migration-form {
    width: 50%;
    min-height: 250px;
    background: #FFF;
    position: relative;
    left: 25%;
    top: 5%;
    box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.5);
}

    .migration-form > select, input[type="text"],
    textarea, button, .date-selector,
    .extra span {
        font-size: 25px;
        line-height: 35px;
        margin-top: 15px;
    }

    .migration-form > select, input[type="text"],
    button, .date-selector,
    .extra span {
        height: 35px;
    }

    .migration-form > select, input[type="text"],
    textarea, button, .date-selector {
        margin-left: 5px;
        margin-right: 5px;
        border-radius: 5px;
        box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.25);
        border: 1px solid #AAA;
    }

    .migration-form > select {
        width: 98.5%;
    }

    .migration-form > .date-selector, textarea, button {
        width: 98.2%;
    }

    .migration-form > input[type="text"] {
        width: 70%;
    }

    .migration-form > button {
        background: #AAF;
        margin-bottom: 10px;
        margin-top: 10px;
        cursor: pointer;
        transition: all linear 0.5s;
        box-shadow: -15px -15px 55px rgba(0, 150, 255, 0.75) inset, -1px 1px 2px rgba(0, 0, 0, 0.25);
        color: #FFF;
    }

        .migration-form > button:hover {
            background: #0AF;
            box-shadow: 15px 15px 55px rgba(150, 150, 255, 1) inset, -1px 1px 2px rgba(0, 0, 0, 0.25);
        }

.actions > input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.actions > label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    line-height: 20px;
    font-size: 15px;
    border: 2px solid #0AF;
    top: 8px;
    padding: 8px;
    margin: 2px;
    border-radius: 20px;
    transition: all linear 0.5s;
}

    .actions > label:hover {
        background: #0AF;
        color: #FFF;
        box-shadow: 15px 15px 55px rgba(150, 150, 255, 1) inset;
    }

.actions > input[type="radio"]:checked + label {
    color: #FFF;
    background: #0AF;
}

.migration-form > .actions {
    text-align: center;
}


/*Downloaded from https://www.codeseek.co/davisj16usmc/dashboard-template-rmGarQ */
    var modal = document.getElementById('menu');
function openModal() {
    modal.className = "modal-container show active";
}

function closeModal() {
    modal.className = "modal-container";
}

window.onclick = function (event) {
    if (event.target == modal) {
        modal.className = "modal-container";
    }

    if (event.target == formcontainer) {
        document.getElementById('migration-form').className = "formcontainer";
        document.getElementById('btnTools').className = "plus-button";
    }
}

function displayNotfication(id) {
    var notification = document.getElementById(id);
    notification.className = "notification show active";
    setTimeout(function () {
        notification.className = notification.className.replace("show", "");
        notification.className = notification.className.replace("active", "");
    }, 3000);
}

function showTBOX(info) {
    if (info == 'no') {
        document.getElementById('divExtra').className = "inactive";
        return 0;
    }

    if (info == 'server')
        document.getElementById('txtName').innerHTML = "New Server Name:";

    if (info == 'other')
        document.getElementById('txtName').innerHTML = "Description:";

    document.getElementById('divExtra').className = "extra active";
}

function openTools() {
    var btn = document.getElementById('btnTools');
    var className = btn.className;
    var res = '';

    if (className == "plus-button") {
        className = "plus-button open";
        document.getElementById('migration-form').className = "formcontainer show active";
    }

    else {
        className = "plus-button";
        document.getElementById('migration-form').className = "formcontainer";
    }

    btn.className = className;
}

Comments