mmk2410/morse-converter-web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Initial upload

Browse source
This commit is contained in:
mmk2410 2015-04-01 11:37:48 +02:00
parent 29f4332d1b
commit b0fb34a4ab
3 changed files with 134 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
index.html Normal file
View file

@ -0,0 +1,29 @@
<html>
<head>
<title>Morse Converter</title>
<link rel="stylesheet" type="text/css" href="res/css/main.css" />
</head>
<body>
<span class="actionbar">Morse Converter</span>
<div class="drawer">
<img src="res/img/drawergraphic.png" class="drawerimg"/>
<div class="draweritem">writtenMorse</div>
<div class="draweritem">Normal Morse</div>
<div class="drawerdivider"></div>
<div class="draweritem">About</div>
</div>
<div class="main">
<div class="card">
<textarea class="input">Enter your text.</textarea>
<div class="carddivider"></div>
<div class="cardbuttons">
<span class="cardbutton">ENCODE</span>
<span class="cardbutton">DECODE</span>
</div>
</div>
<div class="card ">
<div class="cardtext">Please enter at least one character</div>
</div>
</div>
</body>
</html>

105
res/css/main.css Normal file
View file

@ -0,0 +1,105 @@
body{
font-family: 'Roboto', sans-serif;
background: #f4f4f4;
margin: 0px;
}
.actionbar{
width: 100%;
height: 60px;
position: fixed;
background: #03A9F4;
top: 0px;
left: 0px;
padding-left: 340px;
color: #fff;
font-size: 25px;
line-height: 60px;
box-shadow: 4px 4px 4px 0px #999;
}
.drawer{
width: 320px;
top: 0px;
left: 0px;
position: absolute;
height: 100%;
background: #FFF;
border-right-width: 1px;
border-right-color: #cecece;
border-right-style: solid;
}
.drawerimg{
width: 100%;
}
.draweritem{
height: 72px;
line-height: 72px;
font-size: 18px;
padding-left: 16px;
}
.draweritem:hover{
background: #e0e0e0;
}
.drawerdivider{
border-top-color: #cecece;
border-top-width: 1px;
border-top-style: solid;
}
.main{
width: calc(100% - 320px);
height: 100%;
margin-left: 320px;
margin-top: 60px;
}
.card{
width: calc(50% - 36px);
background: #fff;
border-radius: 1px;
box-shadow: 0px 0px 2px 2px #cecece;
display: inline-block;
margin: 16px;
float: left;
}
.input{
width: 100%;
resize: none;
border: 0px;
height: 100px;
font-family: 'Roboto', sans-serif;
font-size: 16px;
padding: 20px;
}
.carddivider{
width: 100%;
border-top-color: #cecece;
border-top-width: 1px;
border-top-style: solid;
}
.cardtext{
margin: 20px;
}
.cardbuttons{
float: right;
padding: 20px;
}
.cardbutton{
min-width: 64px;
margin-left: 8px;
color: #000000;
padding: 5px;
}
.cardbutton:hover{
background: #e0e0e0;
}

BIN
res/img/drawergraphic.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 276 KiB