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

Responsible

Browse source
This commit is contained in:
mmk2410 2015-04-02 10:46:06 +02:00
parent 0e70a4d47f
commit 5f52be4cac
4 changed files with 223 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
index.html
View file

@ -3,12 +3,17 @@
<title>Morse Converter</title> <title>Morse Converter</title>
<link rel="stylesheet" type="text/css" href="res/css/main.css" /> <link rel="stylesheet" type="text/css" href="res/css/main.css" />
<script src="./res/js/jquery-2.1.3.min.js"></script> <script src="./res/js/jquery-2.1.3.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
<link rel="shortcut icon" href="./res/img/favicon.png" type="image/x-icon" /> <link rel="shortcut icon" href="./res/img/favicon.png" type="image/x-icon" />
<link rel="image_src" href="./res/img/favicon.png" /> <link rel="image_src" href="./res/img/favicon.png" />
</head> </head>
<body> <body>
<span class="actionbar">Morse Converter</span> <span class="actionbar">
<img src="./res/img/menu.svg" class="menuicon" onclick="drawer()"/>
Morse Converter
</span>
<div class="drawer"> <div class="drawer">
<img src="res/img/drawergraphic.png" class="drawerimg"/> <img src="res/img/drawergraphic.png" class="drawerimg"/>
<div class="draweritem">writtenMorse</div> <div class="draweritem">writtenMorse</div>
@ -33,10 +38,28 @@
</div> </div>
</body> </body>
<script> <script>
var dur = 150
var drawerStatus = true
function getText(){ function getText(){
var input = $('#textarea').val() var input = $('#textarea').val()
$('#output').text(input) $('#output').text(input)
$('#outputcard').fadeIn(100) $('#outputcard').fadeIn(dur)
}
function drawer(){
if(window.innerWidth <= 1400){
if(drawerStatus){
$('.drawer').show('slide', {direction: 'left'}, dur)
$('.actionbar').before("<div class='overlay' onclick='drawer()'></div>")
$('.overlay').animate({"opacity":"0.4"}, dur)
drawerStatus = false
} else {
$('.drawer').hide('slide', {direction: 'left'}, dur)
$('.overlay').animate({"opacity":"0"}, dur, function callback (){
$('.overlay').remove()
})
drawerStatus = true
}
}
} }
</script> </script>
</html> </html>

57
res/css/main.css
View file

@ -10,17 +10,25 @@ body {
background: #03a9f4; background: #03a9f4;
top: 0px; top: 0px;
left: 0px; left: 0px;
padding-left: 340px; padding-left: 320px;
color: #fff; color: #fff;
font-size: 25px; font-size: 25px;
line-height: 60px; line-height: 60px;
-webkit-box-shadow: 4px 4px 4px 0px #999; -webkit-box-shadow: 0px 4px 4px 0px #999;
-moz-box-shadow: 4px 4px 4px 0px #999; -moz-box-shadow: 0px 4px 4px 0px #999;
-ms-box-shadow: 4px 4px 4px 0px #999; -ms-box-shadow: 0px 4px 4px 0px #999;
box-shadow: 4px 4px 4px 0px #999; } box-shadow: 0px 4px 4px 0px #999; }
.menuicon {
height: 30px;
position: fixed;
top: 0px;
left: 0px;
padding: 15px;
cursor: pointer; }
.drawer { .drawer {
width: 320px; width: 300px;
top: 0px; top: 0px;
left: 0px; left: 0px;
position: absolute; position: absolute;
@ -28,7 +36,8 @@ body {
background: #fff; background: #fff;
border-right-width: 1px; border-right-width: 1px;
border-right-color: #cecece; border-right-color: #cecece;
border-right-style: solid; } border-right-style: solid;
z-index: 50; }
.drawerimg { .drawerimg {
width: 100%; } width: 100%; }
@ -48,9 +57,9 @@ body {
border-top-style: solid; } border-top-style: solid; }
.main { .main {
width: calc(100% - 320px); width: calc(100% - 300px);
height: 100%; height: calc(100%-60px);
margin-left: 320px; margin-left: 300px;
margin-top: 60px; } margin-top: 60px; }
.card { .card {
@ -90,12 +99,38 @@ body {
.cardbutton { .cardbutton {
min-width: 64px; min-width: 64px;
margin-left: 8px; margin-left: 8px;
padding: 5px; } padding: 5px;
color: #03a9f4; }
.cardbutton:hover { .cardbutton:hover {
background: #e0e0e0; } background: #e0e0e0; }
.overlay {
background: #000;
opacity: 0;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 30; }
#outputcard { #outputcard {
display: none; } display: none; }
@media screen and (max-width: 1400px) {
.drawer {
display: none;
border-right-width: 0px; }
.actionbar {
padding-left: 60px; }
.main {
width: 100%;
margin-left: 0px; } }
@media screen and (max-width: 750px) {
.card {
width: calc(100% - 36px); } }
/*# sourceMappingURL=main.css.map */ /*# sourceMappingURL=main.css.map */

42
res/css/main.sass
View file

@ -1,7 +1,7 @@
$font-stack: 'Roboto', sans-serif $font-stack: 'Roboto', sans-serif
$body-color: #f4f4f4 $body-color: #f4f4f4
$primary-color: #03a9f4 $primary-color: #03a9f4
$drawer-width: 320px $drawer-width: 300px
$actionbar-height: 60px $actionbar-height: 60px
$actionbar-shadow: #999 $actionbar-shadow: #999
$divider-color: #cecece $divider-color: #cecece
@ -38,7 +38,15 @@ body
color: #fff color: #fff
font-size: 25px font-size: 25px
line-height: $actionbar-height line-height: $actionbar-height
+box-shadow(4px,4px,4px,0px,$actionbar-shadow) +box-shadow(0px,4px,4px,0px,$actionbar-shadow)
.menuicon
height: 30px
position: fixed
top: 0px
left: 0px
padding: 15px
cursor: pointer
.drawer .drawer
width: $drawer-width width: $drawer-width
@ -50,6 +58,7 @@ body
border-right-width: 1px border-right-width: 1px
border-right-color: $divider-color border-right-color: $divider-color
border-right-style: solid border-right-style: solid
z-index: 50
.drawerimg .drawerimg
width: 100% width: 100%
@ -69,8 +78,8 @@ body
border-top-style: solid border-top-style: solid
.main .main
width: calc(100% - 320px) width: calc(100% - 300px)
height: 100% height: calc(100%-60px)
margin-left: $drawer-width margin-left: $drawer-width
margin-top: $actionbar-height margin-top: $actionbar-height
@ -107,9 +116,34 @@ body
min-width: 64px min-width: 64px
margin-left: 8px margin-left: 8px
padding: 5px padding: 5px
color: $primary-color
.cardbutton:hover .cardbutton:hover
background: $hovered-element-color background: $hovered-element-color
.overlay
background: #000
opacity: 0
position: fixed
top: 0px
left: 0px
width: 100%
height: 100%
z-index: 30
#outputcard #outputcard
display: none display: none
@media screen and (max-width: 1400px)
.drawer
display: none
border-right-width: 0px
.actionbar
padding-left: 60px
.main
width: 100%
margin-left: 0px
@media screen and (max-width: 750px)
.card
width: calc(100% - 36px)

114
res/img/menu.svg Normal file
View file

@ -0,0 +1,114 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="50"
height="50"
id="svg2"
version="1.1"
inkscape:version="0.48.5 r10040"
sodipodi:docname="menu.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="11.313709"
inkscape:cx="25.03354"
inkscape:cy="26.766694"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="true"
showguides="true"
inkscape:snap-grids="true"
inkscape:guide-bbox="true"
inkscape:snap-to-guides="true"
inkscape:window-width="1366"
inkscape:window-height="715"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:snap-from-guide="true">
<inkscape:grid
type="xygrid"
id="grid2985"
empspacing="5"
visible="true"
enabled="true"
snapvisiblegridlinesonly="true" />
<sodipodi:guide
orientation="0,1"
position="5,50"
id="guide2987" />
<sodipodi:guide
orientation="1,0"
position="50,40"
id="guide2989" />
<sodipodi:guide
orientation="0,1"
position="12,45"
id="guide2991" />
<sodipodi:guide
orientation="0,1"
position="20,5"
id="guide2993" />
<sodipodi:guide
orientation="1,0"
position="5,29"
id="guide2995" />
<sodipodi:guide
orientation="1,0"
position="45,35"
id="guide2997" />
</sodipodi:namedview>
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1002.3622)">
<rect
style="fill:#ffffff;fill-opacity:1;stroke:none"
id="rect2999"
width="30"
height="4.0000525"
x="10"
y="1015.3622" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:none"
id="rect3001"
width="30"
height="3.9999588"
x="10"
y="1025.3622" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:none"
id="rect3003"
width="30"
height="3.9999943"
x="10"
y="1035.3622" />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB