source: www/index.html @ 2457

Letzte Änderung dieser Datei seit 2457 war 2457, erstellt von knittl vor 4 Jahren

Make tastentierchen "jump" on hover

Dateigröße: 7.2 KB
Zeile 
1<!DOCTYPE html>
2<html lang="de">
3<head>
4        <title>Neo – Ergonomisches Tastaturlayout</title>
5        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
6        <link rel="shortcut icon" href="./favicon.ico" />
7
8        <meta charset="utf-8" />
9        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
10        <meta name="viewport" content="width=device-width, initial-scale=1" />
11
12        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
13
14        <style>
15                body { background-color:#dceeee; }
16
17                .page-header a img {
18                        border:0;
19                }
20                nav .list-group-item .glyphicon {
21                        padding-right:1ex;
22                }
23
24                /* Interaktive Tastaturebenen */
25
26                .Ebenen_box { position: relative; margin-bottom:1ex; }
27
28                .Ebene_bild { padding-top:2.5em; }
29
30                .Ebene_wrapper { position:absolute; top:0; background-color: #F5F5F5; }
31                .Ebene_wrapper .btn, .Ebene1_wrapper .btn {
32                        position:absolute;
33                        z-index:2;
34                }
35
36                .Ebene_wrapper > .Ebene_bild { display:none; }
37                .Ebene_wrapper:hover > .Ebene_bild { display:block; }
38
39                h1 .tastentierchen {
40                        height:100%;
41                        background-color:#dceeee;
42                }
43                h1 .tastentierchen a:hover {
44                        position:relative;
45                        top:-5px;
46                }
47        </style>
48</head>
49
50<body>
51<div class="container">
52        <header class="page-header">
53                <h1 class="clearfix text-hide" style="background:url(./neo_kopf_trac_522x50.png) no-repeat; height:50px;">
54                        Neo – Ergonomisches Tastaturlayout
55
56                        <span class="tastentierchen pull-right">
57                                <a href="neo_de.xmodmap">
58                                        <img src="./tastentierchen_pingu.png" title="quickdownload:Neo_Linux" alt="quickdownload:Neo_Linux" />
59                                </a>
60                                <a href="//wiki.neo-layout.org/browser/windows/neo-vars/out/neo20.exe?format=raw">
61                                        <img src="./tastentierchen_fenster.png" title="quickdownload:Neo_Windows" alt="quickdownload:Neo_Windows" />
62                                </a>
63                                <a href="//wiki.neo-layout.org/browser/mac_osx/neo.keylayout?format=raw">
64                                        <img src="./tastentierchen_apfel.png" title="quickdownload:Neo_OS-X" alt="quickdownload:Neo_OS-X" />
65                                </a>
66                        </span>
67                </h1>
68        </header>
69
70        <div class="row clearfix">
71                <section class="col-md-9 col-md-push-3">
72                        <div class="jumbotron well">
73                                <h1>Neo</h1>
74                                <p>Neo ist eine <em>ergonomische Tastaturbelegung</em>, welche für die deutsche Sprache optimiert ist.</p>
75
76                                <p class="text-right"><a class="btn btn-primary btn-lg" href="//wiki.neo-layout.org/wiki/Einführungskapitel">Mehr erfahren <small class="glyphicon glyphicon-chevron-right"></small></a></p>
77                        </div>
78
79                        <section class="well text-justify">
80                                <h2 class="h4"><a href="//wiki.neo-layout.org/wiki/Einf%C3%BChrungskapitel">Wichtige Kriterien</a></h2>
81                                <ul>
82                                        <li>Optimierung bezüglich deutscher <a href="http://de.wikipedia.org/wiki/Buchstabenhäufigkeit">Buch&shy;staben&shy;häufig&shy;keiten</a> und <a href="http://de.wikipedia.org/wiki/N-Gramm">Bi- und Trigrammen</a> (Ebene 1 und 2)</li>
83                                        <li>Sonderzeichen sind gut erreichbar (Ebene 3)</li>
84                                        <li>Unicode-Zeichen wie „ “ « » ∫ √ α β … sind direkt einzugeben (alle Ebenen)</li>
85                                        <li>Navigation mittels Steuerkreuz ←↑↓→ direkt auf der Haupttastatur (Ebene 4)</li>
86                                </ul>
87                        </section>
88
89                        <section class="well">
90                                <h2 class="h4"><a href="//wiki.neo-layout.org/wiki/Ebenen">Die 6 Ebenen</a></h2>
91                                <div class="Ebenen_box img-responsive">
92                                        <div class="Ebene1_wrapper">
93                                                <div class="btn btn-default btn-sm" style="left:0em">Ebene&nbsp;1</div>
94                                                <div class="Ebene_bild">
95                                                        <img src="./grafik/tastatur3d/hauptfeld/tastatur_neo_Ebene1.png" alt="Tastenbelegung Ebene 1" class="img-responsive" />
96                                                </div>
97                                        </div>
98                                        <div class="Ebene_wrapper">
99                                                <div class="btn btn-default btn-sm" style="left:6.5em;">Ebene&nbsp;2</div>
100                                                <div class="Ebene_bild">
101                                                        <img src="./grafik/tastatur3d/hauptfeld/tastatur_neo_Ebene2.png" alt="Tastenbelegung Ebene 2" class="img-responsive" />
102                                                </div>
103                                        </div>
104                                        <div class="Ebene_wrapper">
105                                                <div class="btn btn-default btn-sm" style="left:13em;">Ebene&nbsp;3</div>
106                                                <div class="Ebene_bild">
107                                                        <img src="./grafik/tastatur3d/hauptfeld/tastatur_neo_Ebene3.png" alt="Tastenbelegung Ebene 3" class="img-responsive" />
108                                                </div>
109                                        </div>
110                                        <div class="Ebene_wrapper">
111                                                <div class="btn btn-default btn-sm" style="left:19.5em">Ebene&nbsp;4</div>
112                                                <div class="Ebene_bild">
113                                                        <img src="./grafik/tastatur3d/hauptfeld/tastatur_neo_Ebene4.png" alt="Tastenbelegung Ebene 4" class="img-responsive" />
114                                                </div>
115                                        </div>
116                                        <div class="Ebene_wrapper">
117                                                <div class="btn btn-default btn-sm" style="left:26em;">Ebene&nbsp;5</div>
118                                                <div class="Ebene_bild">
119                                                        <img src="./grafik/tastatur3d/hauptfeld/tastatur_neo_Ebene5.png" alt="Tastenbelegung Ebene 5" class="img-responsive" />
120                                                </div>
121                                        </div>
122                                        <div class="Ebene_wrapper">
123                                                <div class="btn btn-default btn-sm" style="left:32.5em;">Ebene&nbsp;6</div>
124                                                <div class="Ebene_bild">
125                                                        <img src="./grafik/tastatur3d/hauptfeld/tastatur_neo_Ebene6.png" alt="Tastenbelegung Ebene 6" class="img-responsive" />
126                                                </div>
127                                        </div>
128                                </div>
129
130                                <p>Zum Ausdrucken und Lernen der Neo-Tastaturbelegung gibt es <a href="//wiki.neo-layout.org/wiki/Grafiken">verschiedene Grafiken</a>.</p>
131                        </section>
132                </section>
133
134                <nav class="col-md-3 col-md-pull-9">
135                        <div class="row">
136                                <div class="col-sm-6 col-md-12">
137                                        <h3 class="visible-sm visible-xs h4">Navigation</h3>
138                                        <div class="list-group">
139                                                <a class="list-group-item" href="//wiki.neo-layout.org/wiki"><i class="glyphicon glyphicon-globe"></i> Wiki</a>
140                                                <a class="list-group-item" href="//wiki.neo-layout.org/wiki/Download"><i class="glyphicon glyphicon-download-alt"></i> Download</a>
141                                                <a class="list-group-item" href="//wiki.neo-layout.org/wiki/Benutzerhandbuch"><i class="glyphicon glyphicon-book"></i> Handbuch</a>
142                                                <a class="list-group-item" href="//wiki.neo-layout.org/wiki/Neo%20einrichten"><i class="glyphicon glyphicon-floppy-disk"></i> Installation</a>
143                                                <a class="list-group-item" href="//wiki.neo-layout.org/wiki/Verweise%20auf%20andere%20Projekte"><i class="glyphicon glyphicon-random"></i> ähnliche Projekte</a>
144                                                <a class="list-group-item" href="//wiki.neo-layout.org/wiki/Presseberichte"><i class="glyphicon glyphicon-volume-up"></i> Presse</a></li>
145                                        </div>
146                                </div>
147
148                                <section class="col-sm-6 col-md-12">
149                                        <h4>Kontakt</h4>
150                                        <div class="list-group">
151                                                <a class="list-group-item" href="//webchat.freenode.net?channels=neo"><i class="glyphicon glyphicon-user"></i> Neo-Chat</a>
152                                                <a class="list-group-item" href="//wiki.neo-layout.org/wiki/Mailingliste"><i class="glyphicon glyphicon-send"></i> Mailingliste</a>
153                                                <a class="list-group-item" href="//neo-layout.org/forum"><i class="glyphicon glyphicon-list"></i> Forum</a>
154                                                <a class="list-group-item" href="//wiki.neo-layout.org/newticket"><i class="glyphicon glyphicon-fire"></i> Fehler melden</a>
155                                                <a class="list-group-item" href="//wiki.neo-layout.org/wiki/Impressum"><i class="glyphicon glyphicon-phone-alt"></i> Impressum</a>
156                                        </div>
157                                </section>
158                        </div>
159                </nav>
160        </div>
161
162        <footer>
163                <p class="text-muted text-center">Entwickelt mit <a href="http://getbootstrap.com/">Twitter Bootstrap v3.2.0</a> und dem <a href="http://glyphicons.com/">Glyphicons Halflings set</a>.</p>
164        </footer>
165</div>
166</body>
167
168</html>
Hinweis: Hilfe zum Repository-Browser finden Sie in TracBrowser.