Skip to content

Instantly share code, notes, and snippets.

@dhavalsavalia

dhavalsavalia/software_engineer_console.html

Last active October 2, 2020 17:47
Show Gist options
  • Save dhavalsavalia/7e5c3d82f67df1526150e582a36bfda7 to your computer and use it in GitHub Desktop.
Save dhavalsavalia/7e5c3d82f67df1526150e582a36bfda7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
software_engineer_console.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<link href="nouislider.css" rel="stylesheet">
<style type="text/css">
input[type="range"] {
margin: auto;
position: relative;
overflow: hidden;
cursor: pointer;
}
::-webkit-slider-runnable-track {
background: #ddd;
}
::-webkit-slider-thumb {
-webkit-appearance: none;
background: #fff;
box-shadow: -100vw 0 0 100vw #00AEA3;
border: 20px solid #999;
/* 1 */
}
::-ms-fill-lower {
background: #00AEA3;
}
</style>
</head>
<body>
<br><br><br><br>
<div class="container">
<h1>Software Engineer Console</h1>
<br>
<div class="row">
<div class="col s2">
<h5>Bugs:</h5>
</div>
<div class="col s5">
<p class="range-field">
<input name="bugs" type="range" id="test5" min="0" max="100" step="25" value="100" />
</p>
</div>
</div>
<div class="row">
<div class="col s2">
<h5>Scaling:</h5>
</div>
<div class="col s5">
<p class="range-field">
<input name="bugs" type="range" id="test5" min="0" max="100" step="25" value="0" />
</p>
</div>
</div>
<div class="row">
<div class="col s3">
<p>
<label>
<input type="checkbox" />
<span>Unit Testing</span>
</label>
</p>
</div>
<div class="col s3">
<p>
<label>
<input type="checkbox" />
<span>Documentation</span>
</label>
</p>
</div>
<div class="col s3">
<p>
<label>
<input type="checkbox" />
<span>Deployment</span>
</label>
</p>
</div>
</div>
<button data-target="modal1" class="waves-effect waves-light btn-large modal-trigger"><i
class="material-icons left">check</i>submit</button>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Code Push Successful</h4>
<p>A bunch of text</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="nouislider.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment