Linux / UNIX generate htpasswd to store username and password with htpasswd command

Create a new password file

htpasswd -c /home/www/.htpasswd bob

Change or update password

htpasswd /home/www/.htpasswd-users fanny

NB
The name of the file is irrelevant, you could have many many passwd files instead of lumping all of them together.

Creating an on off slide toggle with only CSS

Creating an on off slide toggle with only CSS

The HTML:

    
        
            

            

    </label>
</div>

The CSS:

/**** on off button pure css ****/
.onoffswitch {
    position: relative; width: 38px;
	margin:0 6px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
	display: inline-block;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block;
	overflow: hidden;
	cursor: pointer;
	height:13px;
    border: 1px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
    width: 200%; margin-left: -100%;
    -moz-transition: margin 0.1s ease-in 0s; -webkit-transition: margin 0.1s ease-in 0s;
    -o-transition: margin 0.1s ease-in 0s; transition: margin 0.1s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    float: left;
	width: 50%;
	height: 14px;
	padding: 0;
	line-height: 14px;
    color: white;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "on";
    padding-left: 5px;
	margin-top: -1px;
	color: #FFFFFF;
    background-color: #597093;
	/*background-color: #1194CF; 
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);*/
}	

.onoffswitch-inner:after {
    content: "off";
    padding-right: 6px;
    background-color: #FFFFFF; color: #999999;
    text-align: right;
}
.onoffswitch-inner:hover, .onoffswitch-inner:hover{
	font-weight: normal;	
}
.onoffswitch-switch {
    width: 13px;
	height: 13px;
	margin: 5px 1px;
	margin-left: 2px;
    background: #FFF;
    border: 1px solid #999999;
	border-radius: 20px;
    position: absolute;
	top: -5px;
	bottom: 0;
	right: 31px;
    -moz-transition: all 0.1s ease-in 0s; -webkit-transition: all 0.1s ease-in 0s;
    -o-transition: all 0.1s ease-in 0s; transition: all 0.1s ease-in 0s;
}
.onoffswitch-checkbox ~ .onoffswitch-switch {
	margin-right: -8px;
}
.onoffswitch-checkbox:checked ~ .onoffswitch-switch {
    margin-right: -31px;
}
.onoffswitch-checkbox:checked ~ .onoffswitch-inner:hover {
    background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#46b8dc), to(#1194cf));
	background: -moz-linear-gradient(top,  #46b8dc,  #1194cf);
}
.onoffswitch-checkbox:checked + .onoffswitch-inner {
    margin-left: 0;
}

And here is a jsfiddel: http://jsfiddle.net/f0y4xurz/