third-party
/
HamShield
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finalizing Chrome app window layout 

Stylized buttons for chrome app
This commit is contained in:
Casey Halverson 2015-06-22 11:47:40 -07:00
parent 33270f5442
commit 0126665e4c
4 changed files with 110 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/ChromeHAMShield/background.js
View File

@ -1,8 +1,8 @@
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create("window.html", {
"bounds": {
"width": 400,
"height": 500
"width": 685,
"height": 263
}
});
});

4
examples/ChromeHAMShield/manifest.json
View File

@ -1,6 +1,6 @@
{
"name": "",
"description": "HAMShield",
"name": "HamShield",
"description": "HamShield",
"version": "1.0.0",
"app": {
"background": {

49
examples/ChromeHAMShield/styles.css
View File

@ -1 +1,48 @@
body{}
body{
display: inline-block;
}
.btn {
background: #adadad;
background-image: -webkit-linear-gradient(top, #adadad, #3d3d3d);
background-image: -moz-linear-gradient(top, #adadad, #3d3d3d);
background-image: -ms-linear-gradient(top, #adadad, #3d3d3d);
background-image: -o-linear-gradient(top, #adadad, #3d3d3d);
background-image: linear-gradient(to bottom, #adadad, #3d3d3d);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
float: left;
text-align:center;
}
.btn:hover {
background: #3d3d3d;
text-decoration: none;
}
.lcd {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0px;
font-family: Courier New;
color: #00ff00;
font-size: 50px;
background: #000000;
padding: 10px 20px 10px 20px;
text-decoration: none;
width: 500px;
}
.lcd:hover {
text-decoration: none;
}
.bs1 { width: 50px; }
.bs2 { width: 100px; }
.bs3 { width: 200px; }

62
examples/ChromeHAMShield/window.html
View File

@ -1,13 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div>
Power
<div class="lcd" style="width: 623px">
220.000 MHz
</div>
<div>
<div class="lcd" style="width: 623px; font-size: 15px;">
1.25M | BW 12.5KHz | TX CTCSS: 103.5 | RX CTCSS: 109.4 | Filter OFF
</div>
<div class="btn" style="width: 75px">
BW
</div>
<div class="btn">
Band
</div>
<div class="btn">
+
</div>
<div class="btn">
-
</div>
<div class="btn">
&lt;&lt;
</div>
<div class="btn">
&gt;&gt;
</div>
<div class="btn">
SQ-
</div>
<div class="btn">
SQ+
</div>
<div class="btn">
VOL
</div>
<br/>
<div class="btn">
CTCSS
</div>
<div class="btn">
CDCSS
</div>
<div class="btn">
Vox
</div>
<div class="btn">
Filter
</div>
<div class="btn">
Offset
</div>
<div class="btn">
Directory
</div>
<div class="btn">
WX
</div>
<br/>
<div class="btn" style="width: 622px">
Transmit
</div>
</body>
</html>