manuel/uhr
1
0
Fork 0
Code Issues 5 Pull requests Releases Wiki Activity

tweaked the info page

Browse source
This commit is contained in:
Manuel Friedli 2014-08-11 18:10:38 +02:00
parent 055cd4ff52
commit 633401862f
2 changed files with 26 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
info/index.html
View file

@ -30,7 +30,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</head> </head>
<body> <body>
<h1 id="main-title">Die Zeit im Wort</h1> <h1 id="main-title">Die Zeit im Wort</h1>
<nav>Inhalt: <nav><span id="toc">Inhalt:</span>
<ol> <ol>
<li><a href="#about">Was soll das?</a></li> <li><a href="#about">Was soll das?</a></li>
<li><a href="#the-clock">Die Uhr</a> <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> <li><a href="#license">Lizenzbestimmungen</a></li>
</ol> </ol>
</nav> </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>Hallo, Besucher!</p>
<p>Hier gibt's vertiefte Informationen über diese Uhr, die dir sagt, <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 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> 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> <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="../"> <a href="../">
<div id="uhr1"></div> <div id="uhr1"></div>
</a> </a>
<h3 id="requirements">Benötigte Bibliotheken</h3> <h3 id="requirements">Benötigte Bibliotheken<a href="#toc" class="toclink">Zum Inhalt</a></h3>
<ul> <ul>
<li><a href="http://jquery.com/download/">jQuery</a> (getestet mit Version 2.1.0)</li> <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: <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>
<li><a href="https://github.com/carhartl/jquery-cookie/releases">jQuery-cookie</a> (getestet mit Version 1.4.0)</li> <li><a href="https://github.com/carhartl/jquery-cookie/releases">jQuery-cookie</a> (getestet mit Version 1.4.0)</li>
</ul> </ul>
<h3 id="include-in-html">Einbinden in HTML</h3> <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>&lt;head&gt;</code></h4> <h4 id="js-and-css-in-head">Javascript- und CSS-Dateien im <code>&lt;head&gt;</code><a href="#toc" class="toclink">Zum Inhalt</a></h4>
<p>Füge folgende Zeilen im <code>&lt;head&gt;</code>-Tag deines HTML-Dokumentes ein. <strong>Beachte dabei, dass die CSS-Dateien <em>vor</em> den Javascript eingebunden werden</strong>.<br/> <p>Füge folgende Zeilen im <code>&lt;head&gt;</code>-Tag deines HTML-Dokumentes ein. <strong>Beachte dabei, dass die CSS-Dateien <em>vor</em> den Javascript eingebunden werden</strong>.<br/>
<code>&lt;link rel="stylesheet" type="text/css" href="uhr.css" /&gt; <code>&lt;link rel="stylesheet" type="text/css" href="uhr.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-black.css" data-class="black" data-name="Schwarz" /&gt; &lt;link rel="stylesheet" type="text/css" href="uhr-black.css" data-class="black" data-name="Schwarz" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-blue.css" data-class="blue" data-name="Blau" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-green.css" data-class="green" data-name="Grün" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-red.css" data-class="red" data-name="Rot" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-white.css" data-class="white" data-name="Weiss" /&gt; &lt;link rel="stylesheet" type="text/css" href="uhr-white.css" data-class="white" data-name="Weiss" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-red.css" data-class="red" data-name="Rot" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-yellow.css" data-class="yellow" data-name="Gelb" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-green.css" data-class="green" data-name="Grün" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-blue.css" data-class="blue" data-name="Blau" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-pink.css" data-class="pink" data-name="Pink" /&gt; &lt;link rel="stylesheet" type="text/css" href="uhr-pink.css" data-class="pink" data-name="Pink" /&gt;
&lt;script type="text/javascript" src="jquery-2.1.0.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery-2.1.0.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"&gt;&lt;/script&gt;
@ -95,12 +96,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
&lt;script type="text/javascript" src="uhr-it.js"&gt;&lt;/script&gt;</code> &lt;script type="text/javascript" src="uhr-it.js"&gt;&lt;/script&gt;</code>
</p> </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>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> <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</h4> <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>&lt;div&gt;</code>-Element:<br/> <p>Definiere an der Stelle, wo die Uhr angezeigt werden soll, ein leeres <code>&lt;div&gt;</code>-Element:<br/>
<code>&lt;div id="meine-uhr"&gt;&lt;/div&gt;</code> <code>&lt;div id="meine-uhr"&gt;&lt;/div&gt;</code>
</p> </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>&lt;head&gt;</code> oder <code>&lt;body&gt;</code>) ein Javascript-Snippet, um die Uhr zu initialisieren:<br/> <p>Definiere im HTML-Dokument (<code>&lt;head&gt;</code> oder <code>&lt;body&gt;</code>) ein Javascript-Snippet, um die Uhr zu initialisieren:<br/>
<code>&lt;script type="text/javascript"&gt; <code>&lt;script type="text/javascript"&gt;
jQuery(document).ready(function() { jQuery(document).ready(function() {
@ -114,7 +115,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
theme: 'red' theme: 'red'
});</code> });</code>
</p> </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> <p>Es existieren die folgenden Konfigurationsoptionen:</p>
<dl> <dl>
<dt><code>width</code></dt> <dt><code>width</code></dt>
@ -153,11 +154,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
}); });
})(jQuery); })(jQuery);
</script> </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/> <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> 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> <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> <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> <h3 id="gpl-v3" style="text-align: center;">GNU GENERAL PUBLIC LICENSE</h3>
<p style="text-align: center;">Version 3, 29 June 2007</p> <p style="text-align: center;">Version 3, 29 June 2007</p>

9
info/info.css
View file

@ -2,7 +2,8 @@ body {
font-size: 120%; font-size: 120%;
} }
code { code {
white-space: pre; white-space: pre-line;
display: inline-block;
} }
ol { ol {
counter-reset: item; counter-reset: item;
@ -15,3 +16,9 @@ ol li:before {
content: counters(item, ".") ". "; content: counters(item, ".") ". ";
counter-increment: item; counter-increment: item;
} }
a.toclink {
font-size: 25%;
}
a.toclink:before {
content: "▲ ";
}