Rearrange for quicker access to twiddlables

This commit is contained in:
Neale Pickett 2017-03-12 21:54:22 -06:00
parent 9e15c3e9bd
commit 11f98e9f9a
5 changed files with 40 additions and 20 deletions

Binary file not shown.

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,23 @@
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(MaterialIcons-Regular.ttf) format('truetype');
}
body {
width: 24em;
}
.slider {
width: 2em;
}
.fab {
z-index: 9999;
position: fixed;
right: 1em;
top: 1em;
}

View File

@ -3,7 +3,7 @@
"name": "__MSG_extName__", "name": "__MSG_extName__",
"short_name": "PWGen", "short_name": "PWGen",
"author": "Neale Pickett <neale@woozle.org>", "author": "Neale Pickett <neale@woozle.org>",
"version": "1.0", "version": "1.1",
"default_locale": "en", "default_locale": "en",
"description": "__MSG_extDescription__", "description": "__MSG_extDescription__",

View File

@ -2,20 +2,28 @@
<html> <html>
<head> <head>
<title>PWGen</title> <title>PWGen</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/material.min.css"> <link rel="stylesheet" href="css/material.min.css">
<script src="js/material.min.js"></script> <script src="js/material.min.js"></script>
<script src="js/popup.js"></script> <script src="js/popup.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head> </head>
<body style="width:26em;"> <body>
<div class="mdl-card"> <div class="mdl-card">
<!--
<div class="mdl-card__title">
<h1 class="mdl-card__title-text" id="title">PWGen</h1>
</div>
-->
<div class="mdl-card__supporting-text"> <div class="mdl-card__supporting-text">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="password">
</div>
<div class="fab">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored" id="regen">
<i class="material-icons">refresh</i>
</button>
</div>
<label for="len">
<span>Length: <span id="lentxt">--</span></span>
<input class="slider mdl-slider mdl-js-slider" type="range" min="4" max="26" value="12" tabindex="0" id="len">
</label>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="num"> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="num">
<input type="checkbox" id="num" class="mdl-checkbox__input" checked> <input type="checkbox" id="num" class="mdl-checkbox__input" checked>
<span class="mdl-checkbox__label">Numbers</span> <span class="mdl-checkbox__label">Numbers</span>
@ -24,18 +32,7 @@
<input type="checkbox" id="sym" class="mdl-checkbox__input" checked> <input type="checkbox" id="sym" class="mdl-checkbox__input" checked>
<span class="mdl-checkbox__label">Symbols</span> <span class="mdl-checkbox__label">Symbols</span>
</label> </label>
<label for="len"> <p>Password is copied into your clipboard.</p>
<input class="mdl-slider mdl-js-slider" type="range" min="4" max="26" value="12" tabindex="0" id="len">
<span>Length: <span id="lentxt"></span></span>
</label>
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="password">
<!-- <label class="mdl-textfield__label" for="password">Password</label> -->
</div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" id="regen">
rebuild
</button>
<p>Password is in your clipboard</p>
</div> </div>
</div> </div>