Skip to content

Fixed some indentation and fixed the spacing of the options #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dpeukert wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Fixed some indentation and fixed the spacing of the options #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b6aa928
Fixed indentation and removed unused id
dpeukert Oct 22, 2017
7638d27
Fixed indentation, removed unused ID and added elements for changed CSS
dpeukert Oct 22, 2017
cb79089
Fixed options spacing and some other indentation
dpeukert Oct 22, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 57 additions & 54 deletions app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,17 @@
<link rel="shortcut icon" type="image/png" href="../../img/favicon.png" />
<link rel="stylesheet" href="style.css" />
<meta property="twitter:card" content="summary"/>
<meta property="twitter:site" content="@patrickwied" />
<meta property="twitter:creator" content="@patrickwied" />
<meta property="twitter:url" content="https://www.patrick-wied.at/projects/heatmap-keyboard/"/>
<meta property="twitter:title" content="Keyboard Heatmap Visualization"/>
<meta property="twitter:description" content="Keyboard Heatmap Visualization showing character distribution on different keyboard layouts while you're typing" />
<meta property="twitter:image" content="https://www.patrick-wied.at/assets/img/social-img.jpeg" />
<meta property="og:title" content="Keyboard Heatmap Visualization" />
<meta property="og:url" content="https://www.patrick-wied.at/assets/img/heatmap-keyboard.jpg" />
<meta property="og:description" content="Keyboard Heatmap Visualization showing character distribution on different keyboard layouts while you're typing" />
<meta property="og:image" content="https://www.patrick-wied.at/assets/img/heatmap-keyboard.jpg" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create','UA-12880923-1','auto');</script>
<meta property="twitter:site" content="@patrickwied" />
<meta property="twitter:creator" content="@patrickwied" />
<meta property="twitter:url" content="https://www.patrick-wied.at/projects/heatmap-keyboard/"/>
<meta property="twitter:title" content="Keyboard Heatmap Visualization"/>
<meta property="twitter:description" content="Keyboard Heatmap Visualization showing character distribution on different keyboard layouts while you're typing" />
<meta property="twitter:image" content="https://www.patrick-wied.at/assets/img/social-img.jpeg" />
<meta property="og:title" content="Keyboard Heatmap Visualization" />
<meta property="og:url" content="https://www.patrick-wied.at/assets/img/heatmap-keyboard.jpg" />
<meta property="og:description" content="Keyboard Heatmap Visualization showing character distribution on different keyboard layouts while you're typing" />
<meta property="og:image" content="https://www.patrick-wied.at/assets/img/heatmap-keyboard.jpg" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create','UA-12880923-1','auto');</script>
</head>
<body>
<div id="wrapper">
Expand All @@ -50,39 +50,42 @@ <h1>Visualizing character distribution of texts on a keyboard while you're typin
<div id="customize">
<h2>Customize it</h2>
<div id="customizearea">
<label>Select your fingertip size</label>
<select id="fingertip">
<option>Small</option>
<option selected>Normal</option>
<option>Huuuge</option>
</select><br />
<label>Select a heatmap gradient</label>
<select id="gradient">
<option selected>Standard</option>
<option>Nightly</option>
<option>Fanzy</option>
</select><br />
<label>Select a keyboard layout</label>
<select id="layout">
<option value="ASSET">Asset</option>
<option value="CARPALX_QFMLWY">Carpalx QFMLWY</option>
<option value="COLEMAK">Colemak</option>
<option value="DVORAK">Dvorak</option>
<option value="DVORAK_PROGRAMMER">Dvorak Programmer</option>
<option value="ERGODOX_COLEMAK">ErgoDox COLEMAK</option>
<option value="ERGODOX_QWERTY">ErgoDox QWERTY</option>
<option value="ERGODOX_DVORAK">ErgoDox DVORAK</option>
<option value="LIIGOL">LIIGOL Layout</option>
<option value="MINIMAK_4K">Minimak 4-Keys</option>
<option value="MINIMAK_8K">Minimak 8-Keys</option>
<option value="MINIMAK_12K">Minimak 12-Keys</option>
<option value="NORMAN">Norman</option>
<option value="QWERTY" selected>QWERTY</option>
<option value="WORKMAN">Workman</option>
</select>
<!-- <div id="apply" class="button">
Apply customizations
</div>-->
<div class="item">
<label>Select your fingertip size</label>
<select id="fingertip">
<option>Small</option>
<option selected>Normal</option>
<option>Huuuge</option>
</select>
</div>
<div class="item">
<label>Select a heatmap gradient</label>
<select id="gradient">
<option selected>Standard</option>
<option>Nightly</option>
<option>Fanzy</option>
</select>
</div>
<div class="item">
<label>Select a keyboard layout</label>
<select id="layout">
<option value="ASSET">Asset</option>
<option value="CARPALX_QFMLWY">Carpalx QFMLWY</option>
<option value="COLEMAK">Colemak</option>
<option value="DVORAK">Dvorak</option>
<option value="DVORAK_PROGRAMMER">Dvorak Programmer</option>
<option value="ERGODOX_COLEMAK">ErgoDox COLEMAK</option>
<option value="ERGODOX_QWERTY">ErgoDox QWERTY</option>
<option value="ERGODOX_DVORAK">ErgoDox DVORAK</option>
<option value="LIIGOL">LIIGOL Layout</option>
<option value="MINIMAK_4K">Minimak 4-Keys</option>
<option value="MINIMAK_8K">Minimak 8-Keys</option>
<option value="MINIMAK_12K">Minimak 12-Keys</option>
<option value="NORMAN">Norman</option>
<option value="QWERTY" selected>QWERTY</option>
<option value="WORKMAN">Workman</option>
</select>
</div>
</div>
</div>
<div id="inputarea">
Expand Down Expand Up @@ -123,16 +126,16 @@ <h3>About the project</h3>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u=(("https:" == document.location.protocol) ? "https" : "http") + "://www.patrick-wied.at/helper/piwik/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', 1]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript';
g.defer=true; g.async=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u=(("https:" == document.location.protocol) ? "https" : "http") + "://www.patrick-wied.at/helper/piwik/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', 1]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript';
g.defer=true; g.async=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<noscript><p><img src="https://www.patrick-wied.at/helper/piwik/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->
Expand Down
231 changes: 117 additions & 114 deletions app/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,114 +1,117 @@
html{height:100%}body{height:100%;overflow:auto;font-family:Helvetica,Arial,Sans-Serif;font-size:100.1%;line-height:1;color:#444;zoom:1}html,body,div,h1,h2{margin:0;padding:0}
#wrapper {
position:relative;
width: 800px;
margin:auto;
height:100%;
}

#typefield {
width:770px;
padding:10px;
margin-top:10px;
font-size:26px;
border: 5px solid grey;
height: 80px;
word-wrap: break-word;
}
#inputarea {
padding: 15px 0px 15px 0px;
}
#keyboard {
position:relative;
width:800px;
margin:auto;
height:373px;
bottom:0;
padding:0;
background-image:url(img/QWERTY.png);
}
#presample {
font-weight:bold;
padding:20px 15px 5px 5px;
vertical-align:middle;
}
#footer {
margin-top:10px;
padding-top:0 !important;
line-height:24px;
font-size:16px;

}
#footer h3 { font-size:24px; margin:0; margin-bottom:10px;}
h1 {
font-size:35px;
padding-top:15px;
padding-bottom:20px;
}
ul {
display:inline;
list-style-type:none;
}
li {
font-weight:normal;
display:inline;
padding:10px 15px 10px 15px;
background-color:#98c8f7;
border-radius:10px;
}
li:hover {
cursor:pointer;
text-decoration:underline;
background-color:#c0dbf6;
}
div {
padding:10px 0 10px 0;
}
#customizearea {
position:relative;
height:100px;
}
#customize div{
font-size:20px;
line-height:30px;
}
#customize select{
position:absolute;
font-size:25px;
left:300px;
width:200px;
}
#fingertip{
margin-top:-10px;
}
#layout {
margin-top:10px;
}
#apply {
position:absolute;
right:5px;
top:5px;
padding:20px;
cursor:pointer;
}
.button {
font-family: Arial;
color: #ffffff;
font-size: 35px;
padding: 10px;
text-decoration: none;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
text-shadow: 1px 1px 3px #666666;
border: solid #d9941c 2px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fabc3f), to(#fa6f05));
background: -moz-linear-gradient(top, #fabc3f, #fa6f05);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#fabc3f, endColorStr=#fa6f05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#fabc3f, endColorStr=#fa6f05);
}
.button:hover {
background: #fab505;
}

html {
height:100%
}
body {
height:100%;
overflow:auto;
font-family:Helvetica,Arial,Sans-Serif;
font-size:100.1%;
line-height:1;
color:#444;
zoom:1
}
html,body,div,h1,h2 {
margin:0;
padding:0
}
#wrapper {
position:relative;
width:800px;
margin:auto;
height:100%;
}
#typefield {
width:770px;
padding:10px;
margin-top:10px;
font-size:26px;
border:5px solid grey;
height:80px;
word-wrap:break-word;
}
#inputarea {
padding:15px 0px 15px 0px;
}
#keyboard {
position:relative;
width:800px;
margin:auto;
height:373px;
bottom:0;
padding:0;
background-image:url('img/QWERTY.png');
}
#presample {
font-weight:bold;
padding:20px 15px 5px 5px;
vertical-align:middle;
}
#footer {
margin-top:10px;
padding-top:0 !important;
line-height:24px;
font-size:16px;
}
#footer h3 {
font-size:24px;
margin:0;
margin-bottom:10px;
}
h1 {
font-size:35px;
padding-top:15px;
padding-bottom:20px;
}
ul {
display:inline;
list-style-type:none;
}
li {
font-weight:normal;
display:inline;
padding:10px 15px 10px 15px;
background-color:#98c8f7;
border-radius:10px;
}
li:hover {
cursor:pointer;
text-decoration:underline;
background-color:#c0dbf6;
}
div {
padding:10px 0;
}
#customizearea div{
font-size:20px;
padding:2px 0;
}
#customize .item {
display:flex;
width:500px;
justify-content:space-between;
align-items:center;
}
#customize select{
font-size:25px;
width:200px;
}
.button {
font-family:Arial;
color:#ffffff;
font-size:35px;
padding:10px;
text-decoration:none;
-webkit-border-radius:28px;
-moz-border-radius:28px;
-webkit-box-shadow:0px 1px 3px #666666;
-moz-box-shadow:0px 1px 3px #666666;
text-shadow:1px 1px 3px #666666;
border:solid #d9941c 2px;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#fabc3f), to(#fa6f05));
background:-moz-linear-gradient(top, #fabc3f, #fa6f05);
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#fabc3f, endColorStr=#fa6f05);
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#fabc3f, endColorStr=#fa6f05);
}
.button:hover {
background:#fab505;
}