Finalizing Chrome app window layout
Stylized buttons for chrome app
This commit is contained in:
		
							parent
							
								
									33270f5442
								
							
						
					
					
						commit
						0126665e4c
					
				| 
						 | 
					@ -1,8 +1,8 @@
 | 
				
			||||||
chrome.app.runtime.onLaunched.addListener(function() {
 | 
					chrome.app.runtime.onLaunched.addListener(function() {
 | 
				
			||||||
  chrome.app.window.create("window.html", {
 | 
					  chrome.app.window.create("window.html", {
 | 
				
			||||||
    "bounds": {
 | 
					    "bounds": {
 | 
				
			||||||
        "width": 400,
 | 
					        "width": 685,
 | 
				
			||||||
        "height": 500
 | 
					        "height": 263
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    });
 | 
					    });
 | 
				
			||||||
});
 | 
					});
 | 
				
			||||||
| 
						 | 
					@ -1,6 +1,6 @@
 | 
				
			||||||
{
 | 
					{
 | 
				
			||||||
  "name": "",
 | 
					  "name": "HamShield",
 | 
				
			||||||
  "description": "HAMShield",
 | 
					  "description": "HamShield",
 | 
				
			||||||
  "version": "1.0.0",
 | 
					  "version": "1.0.0",
 | 
				
			||||||
  "app": {
 | 
					  "app": {
 | 
				
			||||||
    "background": {
 | 
					    "background": {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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; }
 | 
				
			||||||
| 
						 | 
					@ -1,13 +1,67 @@
 | 
				
			||||||
<!DOCTYPE html>
 | 
					<!DOCTYPE html>
 | 
				
			||||||
<html>
 | 
					<html>
 | 
				
			||||||
  <head>
 | 
					  <head>
 | 
				
			||||||
 | 
					    <link rel="stylesheet" type="text/css" href="styles.css">
 | 
				
			||||||
  </head>
 | 
					  </head>
 | 
				
			||||||
  <body>
 | 
					  <body>
 | 
				
			||||||
    <div>
 | 
					    <div class="lcd" style="width: 623px">
 | 
				
			||||||
      Power
 | 
					       220.000 MHz
 | 
				
			||||||
    </div>
 | 
					    </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">
 | 
				
			||||||
 | 
					      <<
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					    <div class="btn">
 | 
				
			||||||
 | 
					      >>
 | 
				
			||||||
 | 
					    </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>
 | 
					    </div>
 | 
				
			||||||
  </body>
 | 
					  </body>
 | 
				
			||||||
</html>
 | 
					</html>
 | 
				
			||||||
		Loading…
	
		Reference in New Issue