Status Monitor mockup

Developer
Moses Holmström
Size
7,599 Kb
Views
34,408
  1. Status Monitor mockup Previews
  2. Status Monitor mockup HTML Codes
  3. Status Monitor mockup CSS Codes
  4. Status Monitor mockup JS Codes

How do I make an status monitor mockup?

What is a status monitor mockup? How do you make a status monitor mockup? This script and codes were developed by Moses Holmström on 21 August 2022, Sunday.

Status Monitor mockup Previews
IQ Test

Status Monitor mockup - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Status Monitor mockup</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head> <title>Status Monitor</title> <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body> <div class="content"> <div class="header"> <a href="#">WlndYtn&reg;</a> <a href="#">node management</a> <div href="#" class="current">Status monitor</div> </div> <div class="menu closed"><a id="viewButton" href="#">Views</a><div class="items"></div></div> <div class="footer"><a href="mailto:[email protected]">Moses Holmström &copy; 2014</a></div> </div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Status Monitor mockup - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Dosis:600,500,300);
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
* { box-sizing: border-box;
}
html { font-size: 16px;
}
@media only screen and (max-width: 658px) { html { font-size: 3.4vw; }
}
@media only screen and (max-width: 424px) { html { font-size: 7vw; }
}
@media only screen and (min-width: 1200px) { html { font-size: 1.25vw; }
}
body { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #110d0d; background-image: -webkit-linear-gradient(45deg, rgba(32, 24, 24, 0) 1%, rgba(32, 24, 24, 0.67) 1.5%, rgba(32, 24, 24, 0) 3%), -webkit-linear-gradient(235deg, rgba(32, 24, 24, 0) 1%, rgba(32, 24, 24, 0.67) 1.5%, rgba(32, 24, 24, 0) 3%); background-image: linear-gradient(45deg, rgba(32, 24, 24, 0) 1%, rgba(32, 24, 24, 0.67) 1.5%, rgba(32, 24, 24, 0) 3%), linear-gradient(215deg, rgba(32, 24, 24, 0) 1%, rgba(32, 24, 24, 0.67) 1.5%, rgba(32, 24, 24, 0) 3%); background-size: 1rem 1rem; font-family: "Dosis", sans-serif; font-weight: 300; color: #fafafa; line-height: 1rem;
}
div { font-size: 1rem; line-height: 1rem;
}
h1, h2, h3, p { font-size: 1rem; line-height: 1rem; padding: 0; margin: 0;
}
h1, h2, h3 { text-transform: uppercase; font-weight: 600;
}
.header, .footer { -webkit-transition: all 0.1s ease-out; transition: all 0.1s ease-out; font-weight: 300; background: #3f3f54;
}
.header:hover, .footer:hover { background: rgba(96, 96, 128, 0.3);
}
.header { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; border-bottom: 0px dotted black; min-height: 2rem; margin: 0 0 1rem 0; padding: 0.5rem 1rem 0.5rem 1rem;
}
.header a, .header p, .header div { font-size: 1rem; text-transform: uppercase; line-height: 1rem; display: inline-block; padding: 0 0px; font-weight: 300;
}
.header a:after, .header p:after, .header div:after { display: inline-block; padding: 0 0 0 0.25rem; content: "\00BB"; color: #fa6610;
}
.header a { color: #fb8642;
}
.header a:hover { text-decoration: underline; color: #fafafa; background: rgba(250, 102, 16, 0.67);
}
.header .current { font-weight: 600;
}
.footer { position: fixed; cursor: default; text-align: center; letter-spacing: -4px; border-top: 0px dotted black; display: block; width: 100%; height: 2.5rem; padding: 0.5rem 0.5rem 0.5rem 1rem; bottom: 0;
}
.footer a { padding: 1.5em; font-size: 0.5rem; text-decoration: none; color: rgba(250, 250, 250, 0); -webkit-transition: all 0.1s ease-out; transition: all 0.1s ease-out;
}
.footer a:hover { text-decoration: underline; text-shadow: 0px 0 0 #9f9f7f, 0px 0 0 #0599ef;
}
.footer:hover { opacity: 1; letter-spacing: 0.1rem;
}
.footer:hover a { color: #fafafa;
}
.menu { margin: 0 0 0 0.5rem; line-height: 1rem; width: calc(100% - 1rem); position: relative; overflow: hidden; display: block; border: 0px solid #3f3f54; border-radius: 0 0.25rem 0 0.25rem; background: rgba(63, 63, 84, 0.15); -webkit-transition: background 0.4s ease-out, box-shadow 0.1s ease-out, -webkit-transform 0.2s ease-out; transition: background 0.4s ease-out, box-shadow 0.1s ease-out, -webkit-transform 0.2s ease-out; transition: background 0.4s ease-out, transform 0.2s ease-out, box-shadow 0.1s ease-out; transition: background 0.4s ease-out, transform 0.2s ease-out, box-shadow 0.1s ease-out, -webkit-transform 0.2s ease-out; box-shadow: 0px 0 0 #606080;
}
.menu:hover { box-shadow: 0 0 0 0px #fa6610;
}
.menu > a { outline: none; margin: 0; padding: 0 0 1rem 0.5rem; color: #fafafa; text-decoration: none; text-transform: uppercase; display: block;
}
.menu .items { position: relative; margin: 0; padding: 0;
}
.menu .items .button { font-size: 1rem; cursor: pointer; line-height: 1rem; height: 2rem; display: inline-block; margin: 0 1rem 1rem 0.5rem; padding: 0.5rem 0 0.5rem 0.5rem; max-width: 8rem; min-width: 8rem; border: 0px solid #606080; border-radius: 0 0.25rem 0 0.25rem; color: #fafafa; background: rgba(17, 13, 13, 0.67); box-shadow: 0.2rem 0 0 #606080; text-decoration: none; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-transition: box-shadow 0.05s ease-out; transition: box-shadow 0.05s ease-out;
}
.menu .items .button:hover { color: #fafafa; background: rgba(250, 102, 16, 0.67); box-shadow: 0 0 0 0px #fb8642; border: 0px solid #ba4704; text-shadow: 0px 0 0px #ba4704;
}
.menu .items .button.selected { outline: none; background: rgba(96, 96, 128, 0.67); box-shadow: 0 0 0 0px #6b6b8f; border: 0px solid #606080; text-shadow: 0px 0 0px #694f4f;
}
.menu .items .button:active { background: rgba(96, 96, 128, 0.15); box-shadow: 0 0 0 0px #6b6b8f;
}
.menu.closed { height: 2rem; background: transparent; width: 12rem; -webkit-transform: translate3d(1rem, 0, 0); transform: translate3d(1rem, 0, 0); padding: 0; border: 0px solid #606080; border-radius: 0 0.25rem 0 0.25rem;
}
.menu.closed:hover { color: #fafafa; background: rgba(250, 102, 16, 0.67); border: 0px solid #fa6610; border-radius: 0 0.25rem 0 0.25rem;
}
.menu.closed > a { height: 2rem;
}
.menu.flash { -webkit-transition: background 0.4s ease-out; transition: background 0.4s ease-out; background: rgba(250, 102, 16, 0.67);
}
.content { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; padding: 0; overflow: hidden; margin-bottom: 3.5rem;
}
.view { margin: 1rem 0.5rem 0 0.5rem; padding: 0 0 0 0.5rem; border: 0px solid #3f3f54; border-radius: 0 0.25rem 0 0.25rem; box-shadow: 0px 0 0 #606080; background: rgba(63, 63, 84, 0.15); -webkit-transition: margin 0.1s ease-out; transition: margin 0.1s ease-out;
}
.view:not(.closed) { color: #fafafa;
}
.view.closed { color: #3f3f54; display: inline-block; overflow: hidden; -ms-flex-preferred-size: 1rem; flex-basis: 1rem; margin: 1rem 1rem 0 1rem;
}
.view h2 { cursor: pointer; display: block; margin: 0; font-size: 1rem; line-height: 1rem; height: 2rem;
}
.view h2:hover { color: #fa6610;
}
.nodelist { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;
}
.nodelist .node { height: 4rem; -ms-flex-preferred-size: 12rem; flex-basis: 12rem; line-height: 1rem; white-space: nowrap; margin: 0 1rem 1rem 0; -webkit-transition: box-shadow 0.1s ease-out; transition: box-shadow 0.1s ease-out; border: 0px solid #201818; border-radius: 0 0.25rem 0 0.25rem;
}
.nodelist .node:not(.fail) { box-shadow: inset 0 0 0 0 #2080c0, 0.05px 0 0 0 #2080c0;
}
.nodelist .node:not(.fail):hover { background: #201818; box-shadow: inset 0 0 0 1px #2080c0, 0.25rem 0 0 0 #2080c0;
}
.nodelist .node .icon { float: left; display: inline-block; width: 2rem; height: 2rem; padding: 0.5rem; margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}
.nodelist .node ul { display: block; list-style: none; margin: 0; padding: 0;
}
.nodelist .node ul:after { clear: both;
}
.nodelist .node ul li { margin: 0 0 0 2.5rem; display: block; font-size: 0.8rem; line-height: 1rem;
}
.nodelist .node ul li a { color: #fafafa; text-decoration: none;
}
.nodelist .node ul li a:hover { color: #694f4f; text-decoration: underline;
}
.nodelist .node ul li .data { font-size: inherit; font-weight: 600; display: block; position: relative; margin: -1rem 0 0 0; padding: 0 1rem 0 0; text-align: right; right: 0;
}
.console { font-family: "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace; color: #fafafa; margin: 0 auto 1rem auto; padding: 0 1rem; max-width: 48rem; min-height: 18rem; background: #110d0d; white-space: pre-wrap; font-size: 0.8rem; border: 0px solid #201818; border-radius: 0 0.25rem 0 0.25rem;
}
.signal { color: #2080c0;
}
.fail { -webkit-animation: alertblink 0.8s ease-in-out infinite; animation: alertblink 0.8s ease-in-out infinite; -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1;
}
.fail .data.signal { color: #c02030;
}
.fail.node { border: 0px solid #c02030; border-radius: 0 0.25rem 0 0.25rem;
}
.fail:hover { -webkit-animation: none; animation: none; box-shadow: inset 0 0 0 1px #c02030, 0.25rem 0 0 0 #c02030;
}
@-webkit-keyframes alertblink { 0% { background: rgba(192, 32, 48, 0); box-shadow: inset 0 0 2rem -1rem rgba(192, 32, 48, 0), 0.05px 0 0 #c02030; } 50% { background: rgba(192, 32, 48, 0.15); box-shadow: inset 0 0 1rem -0.5rem #c02030, 0.25rem 0 0 #c02030; } 100% { background: rgba(192, 32, 48, 0); box-shadow: inset 0 0 2rem -1rem rgba(192, 32, 48, 0), 0.05px 0 0 #c02030; }
}
@keyframes alertblink { 0% { background: rgba(192, 32, 48, 0); box-shadow: inset 0 0 2rem -1rem rgba(192, 32, 48, 0), 0.05px 0 0 #c02030; } 50% { background: rgba(192, 32, 48, 0.15); box-shadow: inset 0 0 1rem -0.5rem #c02030, 0.25rem 0 0 #c02030; } 100% { background: rgba(192, 32, 48, 0); box-shadow: inset 0 0 2rem -1rem rgba(192, 32, 48, 0), 0.05px 0 0 #c02030; }
}

Status Monitor mockup - Script Codes JS Codes

console.clear();
var nodes = [ { hostname: "Adowa", status: "OK", address: "192.168.0.24", icon: "plane" }, { hostname: "Betty", status: "OK", address: "192.168.0.32", icon: "tasks" }, { hostname: "Derelict", status: "OFFLINE", address: "192.168.0.48", icon: "globe" }, { hostname: "Erebus", status: "OK", address: "192.168.0.64", icon: "upload" }, { hostname: "K-014", status: "OK", address: "192.168.0.96", icon: "download" }, { hostname: "Patna", status: "OFFLINE", address: "192.168.0.128", icon: "tasks" }, { hostname: "Shinyo Maru", status: "OK", address: "192.168.0.160", icon: "phone" }, { hostname: "Typhoon", status: "OK", address: "192.168.0.192", icon: "globe" }
];
var initialViews = [ { title: "Dashboard", closed: false, content: function() { var nodelist = document.createElement("div"); nodelist.classList.add("nodelist"); for(each in nodes) { var node = document.createElement("div"); node.classList.add("node"); if(nodes[each].status !== "OK") { node.classList.add("fail"); } var icon = document.createElement("div"); icon.classList.add("icon","glyphicon", "glyphicon-"+nodes[each].icon); node.appendChild(icon); var details = document.createElement("ul"); details.classList.add("details"); var host = document.createElement("li"); host.innerHTML = "Hostname:"; var hostLink = document.createElement("a"); hostLink.classList.add("data"); hostLink.innerHTML = nodes[each].hostname; hostLink.setAttribute("href", "#"+nodes[each].address); host.appendChild(hostLink); details.appendChild(host); var status = document.createElement("li"); status.innerHTML = "Status:"; var statusLine = document.createElement("div"); statusLine.classList.add("data", "signal"); statusLine.innerHTML = nodes[each].status; status.appendChild(statusLine); details.appendChild(status); var address = document.createElement("li"); address.innerHTML = "Address:"; var ip = document.createElement("div"); ip.classList.add("data"); ip.innerHTML = nodes[each].address; address.appendChild(ip); details.appendChild(address); node.appendChild(details); nodelist.appendChild(node); } return nodelist; } }, { title: "Console", closed: false, content: function() { var content = document.createElement("div"); content.classList.add("console"); content.innerHTML = "admin@wlndytn:~$ uname -srnmo\n\
Linux Weyland 2.6.32-042stab062.2 x86_64 GNU/Linux\n\
admin@wlndytn:~$ _"; return content; } }, { title: "CPU Load", closed: true }, { title: "Memory", closed: true }, { title: "DNS", closed: true }, { title: "Graphs & Logs", closed: true },
];
var menuButton = document.getElementById("viewButton");
var menu = menuButton.parentNode;
function createMenu () { var target = document.querySelectorAll(".menu .items")[0]; initialViews.map(function(e) { var btn = document.createElement("div"); btn.innerHTML = e.title; btn.setAttribute("id", "btn-" + e.title.split(" ")[0].toLowerCase()); btn.classList.add("button"); if(!e.closed) { btn.classList.add("selected"); } createView(e); target.appendChild(btn); });
}
function createView (v) { var content = document.querySelectorAll(".content")[0]; var view = document.createElement("div"); view.setAttribute("id", v.title.split(" ")[0].toLowerCase() ); view.classList.add("view"); if(v.closed) { view.classList.add("closed"); } var viewTitle = document.createElement("h2"); viewTitle.innerHTML = v.title; view.appendChild(viewTitle); if(typeof v.content == "function") { view.appendChild(v.content()); } content.appendChild(view);
}
createMenu();
function createConsole () { var term = document.createElement("div"); term.classList.add("console"); term.innerHTML = "admin@wlndytn:~$ uname -srnmo\
Linux Weyland 2.6.32-042stab062.2 x86_64 GNU/Linux\
admin@wlndytn:~$ _"; return term;
}
menu.addEventListener("click", function(evt) { if(evt.target == menuButton) { menu.classList.toggle("closed"); return false; } var e = evt.target; e.classList.toggle("selected"); var t = document.querySelector("#" + e.id.split("btn-")[1]); t.classList.toggle("closed");
});
var views = document.querySelectorAll(".view h2");
[].forEach.call(views, function (el) { el.addEventListener("click", function(evt) { el.parentNode.classList.toggle("closed"); var button = document.querySelector("#btn-" + el.parentNode.id); button.classList.toggle("selected"); }, false);
});
Status Monitor mockup - Script Codes
Status Monitor mockup - Script Codes
Home Page Home
Developer Moses Holmström
Username thykka
Uploaded August 21, 2022
Rating 4
Size 7,599 Kb
Views 34,408
Do you need developer help for Status Monitor mockup?

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!

Moses Holmström (thykka) Script Codes
Name
Animated Unlock Tutorial
Pageful Catalogue
Tripples
Orbit Loader
Loader - Connect the dots
Three.js Planetoid
Brainbow Menu
Rotating ASCII Globe
Freaky Shadow Effect
Random word highlight script
Create amazing video scripts 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!