-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
168 lines (164 loc) · 15.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="de-de"> <!-- Anpassungen -->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Bookmarklets for a multilingual virtual online keyboard</title>
<meta name="keywords" content="favelet, bookmarklet, virtual keyboard, VKI" /> <!-- Anpassungen -->
<meta name="author" content="Podolak, Martin" />
<meta name="citation_author" content="Podolak, Martin" />
<meta name="dc:type" content="computerProgram" />
<meta name="dc:rights" content="MIT" />
<meta name="robots" content="index, follow" />
<meta name="x-ua-compatible" content="IE=edge,chrome=1" />
<meta name="description" content="The bookmarklet displays a multilingual virtual keyboard interface in almost any web site." />
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<meta property="og:image" content="https://pod-o-mart.github.io/images/opengraph.png" />
<meta property="og:image:width" content="158" />
<meta property="og:image:height" content="158" />
<meta property="og:image:type" content="image/png" />
<link rel="image_src" href="https://pod-o-mart.github.io/images/opengraph.png" />
<link rel="shortcut icon" href="https://pod-o-mart.github.io/images/favicon.ico" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.5/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pod-o-mart.github.io/css/template.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://pod-o-mart.github.io/css/user.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/jquery/jquery@1.12.4/dist/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/gh/WickyNilliams/headroom.js@0.7.0/dist/headroom.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.5/dist/js/bootstrap.min.js"></script>
<script src="https://pod-o-mart.github.io/js/template.js" type="text/javascript"></script>
<style>
.module-content li {
font-variant: normal;
color: #fff !important;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
font-weight: bold;
margin: 0;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
table, tr, td {
border:0;
}
#forkme_banner {
display: block;
position: absolute;
top: 0;
right: 10px;
z-index: 10;
padding: 10px 50px 10px 10px;
color: #fff;
background: url("https://pages-themes.github.io/slate/assets/images/blacktocat.png") #0090ff no-repeat 95% 50%;
font-weight: 700;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
a#forkme_banner:hover {
color: #fff !important;
text-decoration:underline;
}
#main {
margin:auto 10px 10px 10px;
}
#sidebar {
padding-left:0;
}
</style>
</head>
<body>
<div id="wrap">
<!--Navigation-->
<header id="header" class="header header--fixed hide-from-print" >
<!--top-->
<div id="top" class="navbar-inverse">
<div class="container">
<div class="row">
<div class="custom site-title">
<p>Martin Podolak</p>
</div>
</div>
</div>
</div>
<!--top-->
<div id="navigation">
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
</div>
<div class="navbar-collapse">
<nav class="navigation">
<ul class="nav menu navbar-nav pull-left toplist hidden-xs">
<li><a href="https://pod-o-mart.github.io" >Home</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<div class="clearfix"></div>
<section>
<div class="container">
<div id="main" class="row show-grid">
<div id="sidebar" class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
<div class="block _menu2">
<div class="moduletable">
<div class="module-title">
<h3 class="title">Similar projects</h3>
</div>
<div class="module-content">
<ul class="nav menu panel-group">
<li class="panel panel-default"><a href="https://pod-o-mart.github.io/dictionaryBookmarklets/">Dictionary Bookmarklets</a></li>
<li class="panel panel-default"><a href="https://pod-o-mart.github.io/slavonicBookmarklets/">Bookmarklets for Slavonic Studies</a></li>
<li class="panel panel-default"><a href="https://pod-o-mart.github.io/yiddishBookmarklets/">Bookmarklet for Yiddish dictionaries, keyboard input and transliteration</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Main content -->
<div style="font-family:sans-serif;">
<a id="forkme_banner" href="https://github.com/pod-o-mart/keyboardBookmarklets">View on GitHub</a>
<h1>Bookmarklets for a multilingual virtual online keyboard</h1>
<p>The bookmarklet displays a virtual keyboard interface in almost any web site. Works on input and textarea fields.</p>
<div style="display:flex;">
<div style="white-space: nowrap;">
<a href="javascript:(function(d){var%20scriptlang=document.createElement('script');scriptlang.type='text/javascript';scriptlang.text='var%20kblang=\'English\'';document.getElementsByTagName('head')[0].appendChild(scriptlang);var%20s=d.createElement('script');s.type='text/javascript';s.charset='utf-8';s.async=true;s.src='https://pod-o-mart.github.io/keyboardBookmarklets/kb.js';d.body.appendChild(s);var%20head=document.head;var%20link=document.createElement('link');link.type='text/css';link.rel='stylesheet';link.href='https://pod-o-mart.github.io/keyboardBookmarklets/keyboard.css';head.appendChild(link);var%20y=document.getElementsByTagName('TEXTAREA');var%20j;for(j=0;j<y.length;j++){y[j].classList.add('keyboardInput');}var%20x=document.querySelectorAll('INPUT');var%20i;for(i=0;i<x.length;i++){x[i].classList.add('keyboardInput');}var%20w=document.getElementsByTagName('INPUT');var%20l;for(l=0;l<w.length;l++){if(w[l].getAttribute('type')==='email'){w[l].setAttribute('type','text');}if(w[l].getAttribute('type')==='search'){w[l].setAttribute('type','text');}}}(document));" onclick="alert('Drag the link into your browser\'s bookmarks toolbar or save it as a bookmark.');return false;" style="border: 1px solid #afafaf; padding: 5px; margin: 5px; background-color: #eeeeee;">Keyboard<img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAANAgMAAADH6eY5AAAADFBMVEUAAADAwMD///+AgID8PoY4AAAAUElEQVR4Xk3KsQ2AIBCF4TcEbHCVe1hoZ3IsZhyBRqdgCNzAwrgEHncGfHnVnw/FhmudSI68jE6OBNujecOpmVu/q5/j5/nnh2OnKN6H0P0LmzYfoht62vIAAAAASUVORK5CYII=" border="0" style="margin-left: 5px;" /></a>
</div>
<div>
<strong>universal</strong> keyboard <a href="javascript:(function(d){var%20scriptlang=document.createElement('script');scriptlang.type='text/javascript';scriptlang.text='var%20kblang=\'English\'';document.getElementsByTagName('head')[0].appendChild(scriptlang);var%20s=d.createElement('script');s.type='text/javascript';s.charset='utf-8';s.async=true;s.src='https://pod-o-mart.github.io/keyboardBookmarklets/kb.js';d.body.appendChild(s);var%20head=document.head;var%20link=document.createElement('link');link.type='text/css';link.rel='stylesheet';link.href='https://pod-o-mart.github.io/keyboardBookmarklets/keyboard.css';head.appendChild(link);var%20y=document.getElementsByTagName('TEXTAREA');var%20j;for(j=0;j<y.length;j++){y[j].classList.add('keyboardInput');}var%20x=document.querySelectorAll('INPUT');var%20i;for(i=0;i<x.length;i++){x[i].classList.add('keyboardInput');}var%20w=document.getElementsByTagName('INPUT');var%20l;for(l=0;l<w.length;l++){if(w[l].getAttribute('type')==='email'){w[l].setAttribute('type','text');}if(w[l].getAttribute('type')==='search'){w[l].setAttribute('type','text');}}}(document));">DEMO</a>
</div>
</div><br />
<div style="display:flex;">
<div style="white-space: nowrap;">
<a href="javascript:(function(d){var%20scriptlang=document.createElement('script');scriptlang.type='text/javascript';scriptlang.text='var%20kblang=\'Русский\'';document.getElementsByTagName('head')[0].appendChild(scriptlang);var%20s=d.createElement('script');s.type='text/javascript';s.charset='utf-8';s.async=true;s.src='https://pod-o-mart.github.io/keyboardBookmarklets/kb-slav.js';d.body.appendChild(s);var%20head=document.head;var%20link=document.createElement('link');link.type='text/css';link.rel='stylesheet';link.href='https://pod-o-mart.github.io/keyboardBookmarklets/kb-slav.css';head.appendChild(link);var%20y=document.getElementsByTagName('TEXTAREA');var%20j;for(j=0;j<y.length;j++){y[j].classList.add('keyboardInput');}var%20x=document.querySelectorAll('INPUT');var%20i;for(i=0;i<x.length;i++){x[i].classList.add('keyboardInput');}var%20w=document.getElementsByTagName('INPUT');var%20l;for(l=0;l<w.length;l++){if(w[l].getAttribute('type')==='email'){w[l].setAttribute('type','text');}if(w[l].getAttribute('type')==='search'){w[l].setAttribute('type','text');}}}(document));" onclick="alert('Drag the link into your browser\'s bookmarks toolbar or save it as a bookmark.');return false;" style="border: 1px solid #afafaf; padding: 5px; margin: 5px; background-color: #eeeeee;">Keyboard<img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAANAgMAAADH6eY5AAAADFBMVEUAAADAwMD///+AgID8PoY4AAAAUElEQVR4Xk3KsQ2AIBCF4TcEbHCVe1hoZ3IsZhyBRqdgCNzAwrgEHncGfHnVnw/FhmudSI68jE6OBNujecOpmVu/q5/j5/nnh2OnKN6H0P0LmzYfoht62vIAAAAASUVORK5CYII=" border="0" style="margin-left: 5px;" /></a>
</div>
<div>
for <strong>Slavic studies</strong>, comprising <strong>Old Church Slavonic</strong> ("Словѣньскъ" > <span style="vertical-align: middle;padding: 0px 0.45em;white-space: pre;height: 1.8em;font-family: 'Lucida Console','Arial Unicode MS',monospace;border-top: 1px solid #e5e5e5;border-right: 1px solid #5d5d5d;border-bottom: 1px solid #5d5d5d;border-left: 1px solid #e5e5e5;background-color: #eeeeee;cursor: default;min-width: 0.75em;-webkit-border-radius: 0.2em;-moz-border-radius: 0.2em;border-radius: 0.2em;">AltGr</span>) and <strong>Glagolitic</strong> ("Ⰳⰾⰰⰳⱁⰾⰹⱌⰰ") <a href="javascript:(function(d){var%20scriptlang=document.createElement('script');scriptlang.type='text/javascript';scriptlang.text='var%20kblang=\'Русский\'';document.getElementsByTagName('head')[0].appendChild(scriptlang);var%20s=d.createElement('script');s.type='text/javascript';s.charset='utf-8';s.async=true;s.src='https://pod-o-mart.github.io/keyboardBookmarklets/kb-slav.js';d.body.appendChild(s);var%20head=document.head;var%20link=document.createElement('link');link.type='text/css';link.rel='stylesheet';link.href='https://pod-o-mart.github.io/keyboardBookmarklets/kb-slav.css';head.appendChild(link);var%20y=document.getElementsByTagName('TEXTAREA');var%20j;for(j=0;j<y.length;j++){y[j].classList.add('keyboardInput');}var%20x=document.querySelectorAll('INPUT');var%20i;for(i=0;i<x.length;i++){x[i].classList.add('keyboardInput');}var%20w=document.getElementsByTagName('INPUT');var%20l;for(l=0;l<w.length;l++){if(w[l].getAttribute('type')==='email'){w[l].setAttribute('type','text');}if(w[l].getAttribute('type')==='search'){w[l].setAttribute('type','text');}}}(document));">DEMO</a>
</div>
</div><br />
<div style="display:flex;">
<div style="white-space: nowrap;">
<a href="javascript:(function(d){var%20scriptlang=document.createElement('script');scriptlang.type='text/javascript';scriptlang.text='var%20kblang=\'Русский\'';document.getElementsByTagName('head')[0].appendChild(scriptlang);var%20s=d.createElement('script');s.type='text/javascript';s.charset='utf-8';s.async=true;s.src='https://pod-o-mart.github.io/keyboardBookmarklets/keyboard-ees.js';d.body.appendChild(s);var%20head=document.head;var%20link=document.createElement('link');link.type='text/css';link.rel='stylesheet';link.href='https://pod-o-mart.github.io/keyboardBookmarklets/keyboard-ees.css';head.appendChild(link);var%20y=document.getElementsByTagName('TEXTAREA');var%20j;for(j=0;j<y.length;j++){y[j].classList.add('keyboardInput');}var%20x=document.querySelectorAll('INPUT');var%20i;for(i=0;i<x.length;i++){x[i].classList.add('keyboardInput');}var%20w=document.getElementsByTagName('INPUT');var%20l;for(l=0;l<w.length;l++){if(w[l].getAttribute('type')==='email'){w[l].setAttribute('type','text');}if(w[l].getAttribute('type')==='search'){w[l].setAttribute('type','text');}}}(document));" onclick="alert('Drag the link into your browser\'s bookmarks toolbar or save it as a bookmark.');return false;" style="border: 1px solid #afafaf; padding: 5px; margin: 5px; background-color: #eeeeee;">Keyboard<img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAANAgMAAADH6eY5AAAADFBMVEUAAADAwMD///+AgID8PoY4AAAAUElEQVR4Xk3KsQ2AIBCF4TcEbHCVe1hoZ3IsZhyBRqdgCNzAwrgEHncGfHnVnw/FhmudSI68jE6OBNujecOpmVu/q5/j5/nnh2OnKN6H0P0LmzYfoht62vIAAAAASUVORK5CYII=" border="0" style="margin-left: 5px;" /></a>
</div>
<div>
for <strong>East European studies</strong> <a href="javascript:(function(d){var%20scriptlang=document.createElement('script');scriptlang.type='text/javascript';scriptlang.text='var%20kblang=\'Русский\'';document.getElementsByTagName('head')[0].appendChild(scriptlang);var%20s=d.createElement('script');s.type='text/javascript';s.charset='utf-8';s.async=true;s.src='https://pod-o-mart.github.io/keyboardBookmarklets/keyboard-ees.js';d.body.appendChild(s);var%20head=document.head;var%20link=document.createElement('link');link.type='text/css';link.rel='stylesheet';link.href='https://pod-o-mart.github.io/keyboardBookmarklets/keyboard-ees.css';head.appendChild(link);var%20y=document.getElementsByTagName('TEXTAREA');var%20j;for(j=0;j<y.length;j++){y[j].classList.add('keyboardInput');}var%20x=document.querySelectorAll('INPUT');var%20i;for(i=0;i<x.length;i++){x[i].classList.add('keyboardInput');}var%20w=document.getElementsByTagName('INPUT');var%20l;for(l=0;l<w.length;l++){if(w[l].getAttribute('type')==='email'){w[l].setAttribute('type','text');}if(w[l].getAttribute('type')==='search'){w[l].setAttribute('type','text');}}}(document));">DEMO</a>
</div>
</div><br />
<input type="text" placeholder="Click 'DEMO'">
<h2>Preferences</h2>
<p>You can change the keyboard's default language by adjusting <code> kblang=\'English\'';</code> in the the bookmark, e.g. <code> kblang=\'Русский\'';</code></p>
<h2>Technical information</h2>
<p style="text-align: justify;">The bookmarklet calls the JavaScript <code><a href="https://pod-o-mart.github.io/keyboardBookmarklets/kb.js">kb.js</a></code>
/ <code><a href="https://pod-o-mart.github.io/keyboardBookmarklets/kb-slav.js">kb-slav.js</a></code> / <code><a href="https://pod-o-mart.github.io/keyboardBookmarklets/keyboard-ees.js">keyboard-ees.js</a></code> and the respective CSS-stylesheet <code><a href="https://pod-o-mart.github.io/keyboardBookmarklets/keyboard.css">keyboard.css</a></code> / <code><a href="https://pod-o-mart.github.io/keyboardBookmarklets/kb-slav.css">kb-slav.css</a></code> / <code><a href="https://pod-o-mart.github.io/keyboardBookmarklets/keyboard-ees.css">keyboard-ees.css</a></code> and applies it to the current web site. Consequently, the bookmarklets will only work with an established internet connection.</p>
<p style="text-align: justify;">The bookmarklets may be downloaded from <a target="_blank" href="https://github.com/pod-o-mart/keyboardBookmarklets">GitHub</a>.</p>
<h2>Credits</h2>
<p>The bookmarklet is based on the Virtual keyboard interface script by <a target="_blank" href="http://www.greywyvern.com/code/javascript/keyboard">GreyWyvern</a>.</p><br />
</div>
<!-- Main content -->
</div>
</div>
<a href="#" class="back-to-top">Back to top</a> <!-- Anpassungen -->
</section>
</div>
</body>
</html>