tweaked the info page
This commit is contained in:
parent
055cd4ff52
commit
633401862f
2 changed files with 26 additions and 18 deletions
|
|
@ -30,7 +30,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
</head>
|
||||
<body>
|
||||
<h1 id="main-title">Die Zeit im Wort</h1>
|
||||
<nav>Inhalt:
|
||||
<nav><span id="toc">Inhalt:</span>
|
||||
<ol>
|
||||
<li><a href="#about">Was soll das?</a></li>
|
||||
<li><a href="#the-clock">Die Uhr</a>
|
||||
|
|
@ -50,7 +50,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<li><a href="#license">Lizenzbestimmungen</a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h2 id="about">Was soll das?</h2>
|
||||
<h2 id="about">Was soll das?<a href="#toc" class="toclink">Zum Inhalt</a></h2>
|
||||
<p>Hallo, Besucher!</p>
|
||||
<p>Hier gibt's vertiefte Informationen über diese Uhr, die dir sagt,
|
||||
wie spät es ist. Hier erfährt du, wie du sie selber auf deiner
|
||||
|
|
@ -58,11 +58,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
dich dabei an die Regeln der <a href="#lizenz">Lizenz</a> hältst.</p>
|
||||
<p><a href="..">Das interessiert mich nicht, ich will zurück zur grossen Uhr!</a></p>
|
||||
|
||||
<h2 id="the-clock">Die Uhr</h2>
|
||||
<h2 id="the-clock">Die Uhr<a href="#toc" class="toclink">Zum Inhalt</a></h2>
|
||||
<a href="../">
|
||||
<div id="uhr1"></div>
|
||||
</a>
|
||||
<h3 id="requirements">Benötigte Bibliotheken</h3>
|
||||
<h3 id="requirements">Benötigte Bibliotheken<a href="#toc" class="toclink">Zum Inhalt</a></h3>
|
||||
<ul>
|
||||
<li><a href="http://jquery.com/download/">jQuery</a> (getestet mit Version 2.1.0)</li>
|
||||
<li><a href="http://jqueryui.com/download/">jQuery-UI</a> (getestet mit Version 1.10.4) mit folgenden Komponenten:
|
||||
|
|
@ -73,15 +73,16 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
</li>
|
||||
<li><a href="https://github.com/carhartl/jquery-cookie/releases">jQuery-cookie</a> (getestet mit Version 1.4.0)</li>
|
||||
</ul>
|
||||
<h3 id="include-in-html">Einbinden in HTML</h3>
|
||||
<h4 id="js-and-css-in-head">Javascript- und CSS-Dateien im <code><head></code></h4>
|
||||
<h3 id="include-in-html">Einbinden in HTML<a href="#toc" class="toclink">Zum Inhalt</a></h3>
|
||||
<h4 id="js-and-css-in-head">Javascript- und CSS-Dateien im <code><head></code><a href="#toc" class="toclink">Zum Inhalt</a></h4>
|
||||
<p>Füge folgende Zeilen im <code><head></code>-Tag deines HTML-Dokumentes ein. <strong>Beachte dabei, dass die CSS-Dateien <em>vor</em> den Javascript eingebunden werden</strong>.<br/>
|
||||
<code><link rel="stylesheet" type="text/css" href="uhr.css" />
|
||||
<link rel="stylesheet" type="text/css" href="uhr-black.css" data-class="black" data-name="Schwarz" />
|
||||
<link rel="stylesheet" type="text/css" href="uhr-blue.css" data-class="blue" data-name="Blau" />
|
||||
<link rel="stylesheet" type="text/css" href="uhr-green.css" data-class="green" data-name="Grün" />
|
||||
<link rel="stylesheet" type="text/css" href="uhr-red.css" data-class="red" data-name="Rot" />
|
||||
<link rel="stylesheet" type="text/css" href="uhr-white.css" data-class="white" data-name="Weiss" />
|
||||
<link rel="stylesheet" type="text/css" href="uhr-red.css" data-class="red" data-name="Rot" />
|
||||
<link rel="stylesheet" type="text/css" href="uhr-yellow.css" data-class="yellow" data-name="Gelb" />
|
||||
<link rel="stylesheet" type="text/css" href="uhr-green.css" data-class="green" data-name="Grün" />
|
||||
<link rel="stylesheet" type="text/css" href="uhr-blue.css" data-class="blue" data-name="Blau" />
|
||||
<link rel="stylesheet" type="text/css" href="uhr-pink.css" data-class="pink" data-name="Pink" />
|
||||
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
|
||||
<script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"></script>
|
||||
|
|
@ -95,12 +96,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<script type="text/javascript" src="uhr-it.js"></script></code>
|
||||
</p>
|
||||
<p>Von den Stylesheets zwingend ist <code>uhr.css</code> und mindestens eines der Farbschema-Stylesheets. Die Attribute <code>data-class</code> bzw. <code>data-name</code> definieren dabei die im Stylesheet deklarierte Klasse bzw. den im Auswahlmenu anzuzeigenden Namen. Der Name kann frei gewählt werden, die Style-Klasse muss mit der im Stylesheet definierten übereinstimmen.</p>
|
||||
<p><code>uhr-de_CH_genau.js</code> ist eine Variante von Berndeutsch, bei der zur vollen Stunde zusätlich das Wort <tt>genau</tt> angezeigt wird (also z.B. <tt>ES ISCH GENAU DRÜ</tt>).</p>
|
||||
<h4 id="clock-element">Uhr-Element auf der Seite</h4>
|
||||
<p><code>uhr-de_CH_genau.js</code> ist eine Variante von Berndeutsch, bei der zur vollen Stunde zusätlich das Wort <tt>genau</tt> angezeigt wird (also z.B. um 15:00 Uhr <tt>ES ISCH GENAU DRÜ</tt>).</p>
|
||||
<h4 id="clock-element">Uhr-Element auf der Seite<a href="#toc" class="toclink">Zum Inhalt</a></h4>
|
||||
<p>Definiere an der Stelle, wo die Uhr angezeigt werden soll, ein leeres <code><div></code>-Element:<br/>
|
||||
<code><div id="meine-uhr"></div></code>
|
||||
</p>
|
||||
<h4 id="initialize">Uhr initialisieren</h4>
|
||||
<h4 id="initialize">Uhr initialisieren<a href="#toc" class="toclink">Zum Inhalt</a></h4>
|
||||
<p>Definiere im HTML-Dokument (<code><head></code> oder <code><body></code>) ein Javascript-Snippet, um die Uhr zu initialisieren:<br/>
|
||||
<code><script type="text/javascript">
|
||||
jQuery(document).ready(function() {
|
||||
|
|
@ -114,7 +115,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
theme: 'red'
|
||||
});</code>
|
||||
</p>
|
||||
<h3 id="configuration">Konfiguration</h3>
|
||||
<h3 id="configuration">Konfiguration<a href="#toc" class="toclink">Zum Inhalt</a></h3>
|
||||
<p>Es existieren die folgenden Konfigurationsoptionen:</p>
|
||||
<dl>
|
||||
<dt><code>width</code></dt>
|
||||
|
|
@ -153,11 +154,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
});
|
||||
})(jQuery);
|
||||
</script>
|
||||
<h2 id="information">Informationen</h2>
|
||||
<h2 id="information">Informationen<a href="#toc" class="toclink">Zum Inhalt</a></h2>
|
||||
<p>Programmiert von <a href="mailto:manuel@fritteli.ch">Manuel Friedli</a> mit Inspiration von <a href="http://www.qlocktwo.com/">QLOCKTWO</a>.<br/>
|
||||
Diese Uhr ist aus Freude am Programmieren und am Konzept einer die Zeit in Worten ausdrückenden Uhr entstanden. Sollte daraus jemandem Schaden oder ein gravierender Nachteil erwachsen, so soll sich diese Person bei mir melden und wir werden bestimmt eine Lösung finden, die für alle beteiligten angemessen ist. Allen anderen Personen wünsche ich viel Freude mit der Zeit im Wort.</p>
|
||||
<p>Der Quellcode ist frei zugänglich unter <a href="https://git.friedli.info/manuel/uhr">https://git.friedli.info/manuel/uhr</a>.</p>
|
||||
<h2 id="license">Lizenzbestimmungen</h2>
|
||||
<h2 id="license">Lizenzbestimmungen<a href="#toc" class="toclink">Zum Inhalt</a></h2>
|
||||
<p>Der komplette Sourcecode ist unter der GNU GPL 3.0 lizenziert und darf nach deren Vorgaben verwendet, kopiert, weitergegeben und verändert werden. Die GNU GPL 3.0 findest Du unter folgendem Link: <a href="https://www.gnu.org/licenses/gpl-3.0">GNU GPL 3.0</a>. Und direkt hier:</p>
|
||||
<h3 id="gpl-v3" style="text-align: center;">GNU GENERAL PUBLIC LICENSE</h3>
|
||||
<p style="text-align: center;">Version 3, 29 June 2007</p>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@ body {
|
|||
font-size: 120%;
|
||||
}
|
||||
code {
|
||||
white-space: pre;
|
||||
white-space: pre-line;
|
||||
display: inline-block;
|
||||
}
|
||||
ol {
|
||||
counter-reset: item;
|
||||
|
|
@ -15,3 +16,9 @@ ol li:before {
|
|||
content: counters(item, ".") ". ";
|
||||
counter-increment: item;
|
||||
}
|
||||
a.toclink {
|
||||
font-size: 25%;
|
||||
}
|
||||
a.toclink:before {
|
||||
content: "▲ ";
|
||||
}
|
||||
Loading…
Reference in a new issue