Update manager experimental UI

Developer
Aurer
Size
3,742 Kb
Views
50,600
  1. Update manager experimental UI Previews
  2. Update manager experimental UI HTML Codes
  3. Update manager experimental UI CSS Codes

How do I make an update manager experimental ui?

Experimental responsive UI for an update managment application.. What is a update manager experimental ui? How do you make a update manager experimental ui? This script and codes were developed by Aurer on 03 August 2022, Wednesday.

Update manager experimental UI Previews
IQ Test

Update manager experimental UI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Update manager experimental UI</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Ubuntu'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="page"> <h1>Update Manager</h1> <div class="message is-success"> Example success message! </div> <div class="message is-error"> Example error message! </div> <form class="standard" accept-charset="UTF-8">	<div class="field">	<label for="server">Server</label>	<input type="text" name="server" value="bifm" id="server">	</div>	<div class="field">	<label for="name">Name</label>	<input type="text" name="name" value="bifm" id="name">	</div>	<div class="field">	<label for="slug">Slug</label>	<input type="text" name="slug" value="bifm" id="slug">	</div>	<div class="field">	<label for="url">Url</label>	<input type="text" name="url" value="" id="url">	</div>	<div class="field">	<label for="repo">Repository</label>	<input type="text" name="repo" value="" id="repo">	</div>	<div class="field">	<input type="hidden" name="returnto" value="">	<input type="hidden" name="id" value="1015">	<input type="submit" value="Save">	</div>
</form> <input type="search" class="filter" > <nav class="actions"> <a href="">Status</a> <a href="">Info</a> <a href="">Show updates</a> <a href="">Update</a> </nav> <div class="stats-table"> <div class="cell"> <div class="th">Repository</div> <div class="td"><a href="#">https://svn.example.com/sites/name/</a></div> </div> <div class="cell"> <div class="th">Update Response</div> <div class="td">2.34s</div> </div> <div class="cell"> <div class="th">Generated Link</div> <div class="td"><a href="#">http://example.com</a></div> </div> </div> <div class="filtered-list sites"> <h2>Sites</h2> <ol> <li><a href="#">bifm</a></li>	<li><a href="#">comm</a></li>	<li><a href="#">comm</a></li>	<li><a href="#">comm</a></li>	<li><a href="#">comm</a></li>	<li><a href="#">comm</a></li>	<li><a href="#">comm</a></li>	<li><a href="#">comm</a></li> <li><a href="#">bifm</a></li>	<li><a href="#">comm</a></li>	<li><a href="#">comm</a></li>	<li><a href="#">comm</a></li>	<li><a href="#">comm</a></li>	<li><a href="#">comm</a></li>	<li><a href="#">comm</a></li>	<li><a href="#">comm</a></li> <li><a href="#">bifm</a></li>	<li><a href="#">comm</a></li>	<li><a href="#">comm</a></li>	<li><a href="#">comm</a></li>	<li><a href="#">comm</a></li>	<li><a href="#">comm</a></li>	<li><a href="#">comm</a></li>	<li><a href="#">comm</a></li> </ol> </div> <div class="filtered-list servers"> <h2>Servers</h2> <ol> <li><a href="/servers/abcul" title="linux">Abcul</a></li>	<li><a href="#" title="linux">Abta</a></li>	<li><a href="#" title="windows">Barweb</a></li>	<li><a href="#" title="linux">Bectu</a></li> </ol> </div>
</div>
</body>
</html>

Update manager experimental UI - Script Codes CSS Codes

::-webkit-scrollbar { width: 6px; height: 6px; border: none;
}
::-webkit-scrollbar-track { border-radius: 10px; background: rgba(0,0,0,0.1); border: none;
}
::-webkit-scrollbar-thumb{ border-radius: 10px; background: rgba(0,0,0,0.2); border: none;
}
::-webkit-scrollbar-thumb:hover{	background: rgba(0,0,0,0.4);
}
::-webkit-scrollbar-thumb:active{	background: rgba(0,0,0,.9);
}
*{ box-sizing: border-box; -moz-box-sizing: border-box;
}
body{ font-family: "Ubuntu", "Myriad pro", sans-serif; background: #223038; color: #eee; padding: 1em;
}
h1, h2, h3{ text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}
a{ color: #4bd0fc; text-decoration: none; text-shadow: 0 0 4px #005eff;
}
a:hover,
a:focus{ color: #fff;
}
input.filter{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; width: 100%; background: #1a2429; border: 1px solid #10171a; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(255, 255, 255, 0.2); color: inherit; -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; padding: .5em .7em; border-radius: 2px;
}
input.filter:focus{ outline: 1px solid #ffc412; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 10px #ffc412;
}
.page{ max-width: 50em; margin: 0 auto;
}
.filtered-list{ width: 48%; float: left; margin: 2em 1%;
}
.filtered-list ol{ list-style:none; margin:0; padding:0; display: block; max-height: 20em; overflow: auto; ;
}
.filtered-list h2{ margin-top: 0; color: #4B5961;
}
.filtered-list li{ margin: 1px; }
.filtered-list a{ display: block; border-top: 1px dashed #1a2429; padding: .4em 0 .5em; margin-right: .5em; -webkit-transition: all .2s;
}
.filtered-list a:hover,
.filtered-list a:focus{ background: rgba(0, 0, 0, .05);
}
.actions{ background: #eee; background: -webkit-linear-gradient(top, #ccc, #aaa); color: #222; margin: 1em 0; border-radius: 2px; display: table; width: 100%; border-spacing: 1px; table-layout:fixed;
}
.actions{ background: #ccc; background: -webkit-linear-gradient(top, #eee, #aaa); border-radius: 2px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 10, 0.2); display: table; width: 100%; margin: 1em 0; border-spacing: 1px;
}
.actions a{ display: table-cell; text-align: center; padding: 1em; color: #1a2429; text-shadow: none; font-weight: bold; text-transform: uppercase; font-size: .9em; border-radius: 2px;
}
.actions a:hover,
.actions a:focus,
.actions a:active,
.actions a.active,
.actions a.loading{ background: #223038; background: -webkit-linear-gradient(top, #1D282E, #172126); color: #F9A936;
}
.output pre{ background-image: url(/img/loading.gif); background-repeat: no-repeat; background-position: -999px; position: relative; overflow: auto;
}
.output pre.loading{ text-align: center; padding: 4em 0 2em; background-position: 50% 30%;
}
.output pre .line{ display: block; white-space: pre-wrap; padding: .1em; margin-bottom: 1px;
}
.output pre .xml{ background: #213133; border-radius: 2px;
}
.output pre .external{ background: #161E22; opacity: .9;
}
.output pre .external:before{ content: '\2197'; font-size: .8em; position: absolute; right: -0;
}
.message{ padding: .6em 1em; margin: 0 0 1em; border-radius: 2px;
}
.is-success{ color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #5bb75b; background-image: -moz-linear-gradient(top, #62c462, #51a351); background-image: -webkit-linear-gradient(top, #62c462, #51a351); background-image: -o-linear-gradient(top, #62c462, #51a351); background-image: linear-gradient(to bottom, #62c462, #51a351);
}
.is-error{ color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #da4f49; background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f); background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f); background-image: -o-linear-gradient(top, #ee5f5b, #bd362f); background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
}
.stats-table{ display: table; width:100%; border-spacing: 0; border-bottom: 1px solid #4B5961; border-right: 1px solid #4B5961;
}
.stats-table .cell{ display: table-cell;
}
.stats-table .cell > div{ border-top: 1px solid #4B5961; border-left: 1px solid #4B5961; padding: .5em 1em;
}
.stats-table .th, .stats-table .td{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.stats-table .th{ font-weight: bold; color: #aaa; background: rgba(0, 0, 0, 0.2);
}
.stats-table .td{ background: rgba(0, 0, 0, 0.1);
}
form.standard{}
form.standard .field{	margin: 0 0 1em;	border-radius: 3px;
}
form.standard label{	width: 30%;	display: block;	float: left;	padding: .5em .7em;	margin: 0;	background: #394B54;	background: -webkit-linear-gradient(top, #394B54, #2C3B42);	border-radius:3px 0 0 3px; border: 1px solid #10171a; border-right: none;
}
form.standard input,
form.standard select{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; font: inherit; width: 70%; background: #1a2429; border: 1px solid #10171a; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(255, 255, 255, 0.2); color: inherit; -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; padding: .5em .7em; margin: 0; border-radius: 0 3px 3px 0;
}
form.standard input[type=submit]{ width: auto; background-color: #006dcc; background-image: -webkit-linear-gradient(top, #0088cc, #0044cc); background-image: -moz-linear-gradient(top, #0088cc, #0044cc); background-image: linear-gradient(top, #0088cc, #0044cc); padding: .3em 1em .4em; color: #fff; border: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); -webkit-transition: none; -moz-transition: none; border-color: #0044cc #0044cc#002a80;
}
@media (max-width: 60em){ .page-column, .page-main .page-column{ padding-left: 1em; padding-right: 1em; }
}
@media (max-width: 50em){ .stats-table{ display: block; border: none; } .stats-table .cell{ display: block; margin-bottom: .5em; clear: both; overflow: hidden; border-bottom: 1px solid #4B5961; border-right: 1px solid #4B5961; } .stats-table .th, .stats-table .td{ width: 50%; float: left; }
}
@media (max-width: 30em){ html{ font-size: .85em; } .actions a{ padding: .7em; }
}
Update manager experimental UI - Script Codes
Update manager experimental UI - Script Codes
Home Page Home
Developer Aurer
Username aurer
Uploaded August 03, 2022
Rating 3
Size 3,742 Kb
Views 50,600
Do you need developer help for Update manager experimental UI?

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!

Aurer (aurer) Script Codes
Name
Tomcat chrome extension UI
Collapsing list indicator animation
Homepage layout
One of those text scrollers
Super Clock
A responsive table
SVG Loading icons
Vue form theme
ERC Search panels mockup
Simple normalised button style
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!