dhavalsavalia/software_engineer_console.html

## 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>
	<!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>