+++ /dev/null
----
-title: "Projects"
-url: /projects.html
-outputs:
- - html
-weight: 20
----
-<main class="maincontent">
- <h1>Projects - Potemkinsche Dörfer!</h1>
- <ul>
- <li><a href="potemkin/fix-swf/overview.html" th:href="@{/potemkin/fix-swf/overview.html}">Fix SWF</a></li>
- <li><a href="potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}">HTML-Experimente</a></li>
- <li><a href="potemkin/accelerator.html" th:href="@{/potemkin/accelerator.html}">accelerator</a></li>
- <li><a href="potemkin/typo.html" th:href="@{/potemkin/typo.html}">Typography</a></li>
- </ul>
- </main>
+++ /dev/null
----
-title: "accelerator - Overview"
-url: /potemkin/accelerator.html
----
-<main class="maincontent">
- <h1>Accelerator - DUMMY</h1>
- </main>
+++ /dev/null
----
-title: "Fix SWF"
-url: /potemkin/fix-swf/overview.html
-build:
- render: local
-outputs:
- - html
----
-<main class="maincontent">
- <h1>Overviw - DUMMY</h1>
- </main>
+++ /dev/null
----
-title: "Fix SWF - Getting Started"
-linkTitle: "Getting Started"
-url: /potemkin/fix-swf/getting-started.html
----
-<main class="maincontent">
- <h1>Getting Started - DUMMY</h1>
- </main>
+++ /dev/null
----
-title: "Fix SWF - Overview"
-url: /potemkin/fix-swf/overview.html
----
-<main class="maincontent">
- <h1>Overviw - DUMMY</h1>
- </main>
+++ /dev/null
----
-title: "HTML-Experimente"
----
-<div>
- <h1>HTML-Elemente / spezielle Seiten</h1>
- <h2>Die Templates</h2>
- <ul>
- <li><a href="templates/layout.html">Layout</a> - Das Layout für juplo.de</li>
- <li><a href="templates/fragments.html">Fragmente</a> Auf mehreren Seiten verwendete Inhalte</li>
- <li><a href="error/404.html">404-Fehlerseite</a></li>
- <li><a href="error/5xx.html">5xx-Fehlerseite</a></li>
- <li><a href="templates/testlab.html">Testlab</a> Testseite für die Skalierung auf untrschiedliche Seitenbreiten</li>
- </ul>
- </div>
-<article class="maincontent">
- <header><h1>HTML-Elemente / spezielle Seiten</h1></header>
- <h2>Seiten zum Testen gerenderter Inhalte</h2>
- <ul>
- <li><a href="html-experimente/formulare.html" th:href="@{/potemkin/html-experimente/formulare.html}">Formulare</a></li>
- <li><a href="html-experimente/symbole.html" th:href="@{/potemkin/html-experimente/symbole.html}">Symbol-Font</a></li>
- <li><a href="error/404.html" th:href="@{/404.html}">404-Template</a></li>
- <li><a href="html-experimente/gibts-ja-gar-nicht.html" th:href="@{/potemkin/html-experimente/gibts-ja-gar-nicht.html}">404-Fehlerseite</a></li>
- <li><a href="error/5xx.html" th:href="@{/error.html}">Template für andere Fehler</a></li>
- <li><a href="html-experimente/error.html" th:href="@{/potemkin/html-experimente/error.html}">Fehlerseite für andere Fehler</a></li>
- </ul>
- <h2>Layout-Grenzfälle</h2>
- <ul>
- <li><a href="html-experimente/fast-leer-mit-menü.html" th:href="@{/potemkin/html-experimente/fast-leer-mit-menü.html}">Fast leere Seite mit Menü</a></li>
- <li><a href="html-experimente/fast-leer-mit-menü-und-marginalinhalt.html" th:href="@{/potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html}">Fast leere Seite mit Menü und Marginal-Inhalt</a></li>
- <li><a href="html-experimente/fast-leer-kein-menü.html" th:href="@{/potemkin/html-experimente/fast-leer-kein-menü.html}">Fast leere Seite ohne Menü</a></li>
- <li><a href="html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html" th:href="@{/potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html}">Fast leere Seite ohne Menü aber mit Marginal-Inhalt</a></li>
- <li><a href="html-experimente/fast-leer-einspaltig.html" th:href="@{/potemkin/html-experimente/fast-leer-einspaltig.html}">Fast leere einspaltige Seite</a></li>
- <li><a href="html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html" th:href="@{/potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html}">Fast leere einspaltige Seite mit Marginal-Inhalt</a></li>
- <li><a href="html-experimente/breadcrumb.html" th:href="@{/potemkin/html-experimente/breadcrumb.html}">Seite mit sehr langem Breadcrumb</a></li>
- </ul>
- <h2>Layout-Variationen</h2>
- <ul>
- <li><a href="html-experimente/kein-layout.html" th:href="@{/potemkin/html-experimente/kein-layout.html}">Alle Stylings deaktiviert</a></li>
- <li><a href="html-experimente/basis-layout.html" th:href="@{/potemkin/html-experimente/basis-layout.html}">Nur das Basis-Layout</a></li>
- <li><a href="html-experimente/druck-layout.html" th:href="@{/potemkin/html-experimente/druck-layout.html}">Die für den Ausdruck angepasste Ansicht</a></li>
- <li><a href="html-experimente/tiny.html" th:href="@{/potemkin/html-experimente/tiny.html}">Layout für sehr kleine Bildschirmgrößen</a></li>
- <li><a href="html-experimente/phone.html" th:href="@{/potemkin/html-experimente/phone.html}">Layout für Smartphones</a></li>
- <li><a href="html-experimente/tablet.html" th:href="@{/potemkin/html-experimente/tablet.html}">Layout für Tablets</a></li>
- </ul>
- <h2>Testseiten für einzelne Seiten-Bestandteile</h2>
- <ul>
- <li><a href="html-experimente/seitenaufteilung.html" th:href="@{/potemkin/html-experimente/seitenaufteilung.html}">Nur das Basis-Layout und die Seitenaufteilung</a></li>
- <li><a href="html-experimente/seitenkopf.html" th:href="@{/potemkin/html-experimente/seitenkopf.html}">Nur das Basis-Layout und der Seitenkopf</a></li>
- </ul>
- <h2>Anderer Krams...</h2>
- <ul>
- <li><a href="html-experimente/testlab.html" th:href="@{/potemkin/html-experimente/testlab.html}">Seite mit Breiten-Markierungen für den Tests von Media-Queries (Beispiel)</a></li>
- </ul>
- </article>
+++ /dev/null
----
-title: "HTML-Experimente - Basis-Layout"
-linkTitle: "Basis-Layout"
-url: /potemkin/html-experimente/basis-layout.html
----
-<main class="maincontent">
- <header><h1>Nur das Basis-Layout</h1></header>
- <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
- </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
+++ /dev/null
----
-title: "HTML-Experimente - Langer Breadcrumb"
-linkTitle: "Langer Breadcrumb"
-url: /potemkin/html-experimente/breadcrumb.html
----
-<ol id="crumbs">
- <li class="b"><a class="b" href="../index.html" th:href="@{/index.html}">Home</a></li>
- <li class="b"><a class="b" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
- <li class="b"><a class="b" href="html-experimente.html" th:href="@{/potemkin/html-experimente.html}">HTML-Experimente</a></li>
- <li class="b"><strong class="b">Dies ist ein Seite mit einem unendlich langen Breadcrumb-Eintrag der bestimmt nicht in den vorgesehenen Platz passt</strong></li>
- </ol>
-<article class="maincontent">
- <header><h1>Seite mit sehr langem Breadcrumb</h1></header>
- <p>Eine Seite mit einem extrem langen Breadcrumb...</p>
- </article>
+++ /dev/null
----
-title: "HTML-Experimente - Druck-Layout"
-linkTitle: "Druck-Layout"
-url: /potemkin/html-experimente/druck-layout.html
----
-<main class="maincontent">
- <header><h1>Die für den Ausdruck angepasste Ansicht</h1></header>
- <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
- </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
+++ /dev/null
----
-title: "This Page Will Raise An Error"
-url: /potemkin/html-experimente/error.html
----
-<p>This page will raise an error, because the <strong><code>uri</code></strong> is set to an unknown value...</p>
+++ /dev/null
----
-title: "HTML-Experimente - Fast leere einspaltige Seite mit Marginalinhalt"
-linkTitle: "Fast leere einspaltige Seite mit Marginalinhalt"
-url: /potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html
----
-<nav id="navigation">
- <hr class="n">
- <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
- <h1 class="nav">Navigation</h1>
- <h2 class="nav menu">Section-Menu</h2>
- <ul class="cf" id="menu">
- <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
- <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
- <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
- </ul>
- </nav>
-<article class="maincontent">
- <header><h1>Fast leere einspaltige Seite mit Marginalinhalt</h1></header>
- <p><strong>KAPUTT:</strong> siehe Erklärung im Commit</p>
- </article>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
+++ /dev/null
----
-title: "HTML-Experimente - Fast leere einspaltige Seite"
-linkTitle: "Fast leere einspaltige Seite"
-url: /potemkin/html-experimente/fast-leer-einspaltig.html
----
-<nav id="navigation">
- <hr class="n">
- <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
- <h1 class="nav">Navigation</h1>
- <h2 class="nav menu">Section-Menu</h2>
- <ul class="cf" id="menu">
- <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
- <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
- <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
- </ul>
- </nav>
-<article class="maincontent">
- <header><h1>Fast leere einspaltige Seite</h1></header>
- <p><strong>KAPUTT:</strong> siehe Erklärung im Commit</p>
- </article>
+++ /dev/null
----
-title: "HTML-Experimente - Fast leere Seite ohne Menü aber mit Marginalspalte"
-linkTitle: "Fast leere Seite ohne Menü aber mit Marginalspalte"
-url: /potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html
----
-<nav id="navigation">
- <hr class="n">
- <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
- <h1 class="nav">Navigation</h1>
- <h2 class="nav menu">Section-Menu</h2>
- <ul class="cf" id="menu">
- <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
- <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
- <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
- </ul>
- </nav>
-<article class="maincontent">
- <header><h1>Fast leere Seite ohne Menü aber mit Marginalinhalt</h1></header>
- <p>Ein ganz bischen Text...</p>
- </article>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
+++ /dev/null
----
-title: "HTML-Experimente - Fast leere Seite ohne Menü"
-linkTitle: "Fast leere Seite ohne Menü"
-url: /potemkin/html-experimente/fast-leer-kein-menü.html
----
-<nav id="navigation">
- <hr class="n">
- <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
- <h1 class="nav">Navigation</h1>
- <h2 class="nav menu">Section-Menu</h2>
- <ul class="cf" id="menu">
- <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
- <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
- <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
- </ul>
- </nav>
-<article class="maincontent">
- <header><h1>Fast leere Seite ohne Menü</h1></header>
- <p>Ein ganz bischen Text...</p>
- </article>
+++ /dev/null
----
-title: "HTML-Experimente - Fast leere Seite mit Menü und Marginalinhalt"
-linkTitle: "Fast leere Seite mit Menü und Marginalinhalt"
-url: /potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html
----
-<article class="maincontent">
- <header><h1>Fast leere Seite mit Menü und Marginalinhalt</h1></header>
- <p>Ein ganz bischen Text...</p>
- </article>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
+++ /dev/null
----
-title: "HTML-Experimente - Fast leere Seite mit Menü"
-linkTitle: "Fast leere Seite mit Menü"
-url: /potemkin/html-experimente/fast-leer-mit-menü.html
----
-<article class="maincontent">
- <header><h1>Fast leere Seite mit Menü</h1></header>
- <p>Ein ganz bischen Text...</p>
- </article>
+++ /dev/null
----
-title: "HTML-Experimente - Formulare"
-linkTitle: "Formulare"
-url: /potemkin/html-experimente/formulare.html
----
-<article class="maincontent">
- <header><h1>Formulare</h1></header>
- <form action="#" class="form" method="get">
- <h2 class="f">Anzeigetext</h2>
- <div class="f textarea">
- <label class="f info" for="textarea_01">Geben Sie hier Ihren Anzeigentext ein.</label>
- <textarea class="f error" cols="50" id="textarea_01" rows="10">Eingegebener Text</textarea>
- <span class="f error"><span class="e">< </span><strong class="e">Fehler:</strong> Es wurde kein Text für die Anzeige eingegeben!</span>
- </div>
- </form>
- <form action="#" class="form" method="get">
- <h2 class="f">Textformatierung</h2>
- <fieldset class="f radiobutton cf">
- <legend class="f info">
- Die zusätzlichen Gestaltungsoptionen sind nur für das Magazin wählbar.<br>
- Online erscheint die Anzeige als normaler Fließtext.
- </legend>
- <hr class="f">
- <div class="col2">
- <div class="f">
- <input class="f" id="radio_tbox_01" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_01">normaler Fließtext</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_02" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_02">Text zentriert</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_03" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_04" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_04">Text fett</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_05" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_05">Text fett und rot</label>
- </div>
- </div>
- <div class="col2">
- <div class="f">
- <input class="f" id="radio_tbox_06" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_07" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_08" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_09" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
- </div>
- </div>
- </fieldset>
- </form>
- <form action="#" class="form" method="get">
- <h2 class="f">Einspaltige Radiobuttons...</h2>
- <fieldset class="f radiobutton">
- <div class="f">
- <input class="f" id="radio_tbox_b01" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_b01">Dies ist eine etwas länglichere Beschreibung der auswählbaren Option</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_b02" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_b02">Option X</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_b03" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_b03">Dies ist eine sehr, sehr lange Beschreibung der auswählbaren Option - so lang, dass sie am Ende hoffentlich umbricht...</label>
- </div>
- </fieldset>
- <hr class="f">
- <div class="f submit">
- <input class="f" type="submit" value="> zur Übersicht">
- <input class="f left" type="submit" value="< zurück">
- <input class="f" type="submit" value="> weiter">
- </div>
- </form>
- <form action="#" class="form" method="get">
- <h2 class="f">Bild</h2>
- <fieldset class="f checkbox">
- <legend class="f">
- Du kannst Deiner Anzeige ein Bild hinzufügen.
- Das Bild erscheint nur online.
- Im Magazin erscheint die Kleinanzeige mit Hinweis auf das Onlinebild.
- </legend>
- <hr class="f">
- <div class="f">
- <input class="f" id="checkbox_tbox_01" name="checkbox_tbox" type="checkbox">
- <label class="f" for="checkbox_tbox_01">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
- </div>
- <div class="f">
- <input class="f" id="checkbox_tbox_02" name="checkbox_tbox" type="checkbox">
- <label class="f" for="checkbox_tbox_02">Ich habe die AGB für das Hochladen von Bildern gelesen und akzeptiere diese</label>
- </div>
- </fieldset>
- </form>
- <form action="#" class="form" method="get">
- <h2 class="f">Alleinstehende Checkbox</h2>
- <div class="f checkbox">
- <input class="f" id="checkbox_tbox_03" name="checkbox_tbox" type="checkbox">
- <label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
- </div>
- </form>
- <form action="#" class="form" method="get">
- <h2 class="f">Kundendaten</h2>
- <p class="f required">
- <strong class="r">Pflichtfelder</strong> sind mit einem
- <strong class="r symbol">*</strong> markiert.
- </p>
- <div class="f text required">
- <label class="f" for="text_tbox_01"><span class="required">* </span>Nachname</label>
- <input class="f" id="text_tbox_01" type="text" value="Mustermann">
- </div>
- <div class="f text required">
- <label class="f" for="text_tbox_02">Vorname</label>
- <input class="f" id="text_tbox_02" type="text" value="Max">
- </div>
- <div class="f select required">
- <label class="f" for="text_tbox_03"><span class="required">* </span>Ort</label>
- <select class="f" id="text_tbox_03">
- <option>Dortmund</option>
- <option>Bochum</option>
- <option>Essen</option>
- <option>Mönchengladbach</option>
- <option>Oberhausen</option>
- <option>Castrop-Rauxel</option>
- <option>Düsseldorf</option>
- </select>
- </div>
- <div class="f text required">
- <label class="f" for="text_tbox_04"><span class="required">* </span>Straße/Hausnr.</label>
- <input class="f error" id="text_tbox_04" type="text" value="">
- <span class="f error"><span class="e">< </span><strong class="e">Fehler:</strong> Dies ist ein Pflichtfeld!</span>
- </div>
- <div class="f text required">
- <label class="f" for="text_tbox_05"><span class="required">* </span>Postleitzahl</label>
- <input class="f" id="text_tbox_05" type="text" value="">
- </div>
- <div class="f text required">
- <label class="f" for="text_tbox_06">Telefon</label>
- <input class="f" id="text_tbox_06" type="text" value="">
- </div>
- <hr class="f">
- <div class="f submit">
- <input class="f" type="submit" value="> weiter">
- </div>
- </form>
- <form action="#" class="form" method="get">
- <h2 class="f">Anzeige regionalisieren</h2>
- <p class="f">
- Indem Du Deine Kleinanzeige einer Stadt zuordnest, können Interessenten
- diese online leichter finden, wenn sie nur nach Kleinanzeigen aus
- bestimmten Städten suchen.
- Du kannst auch keine Stadt zuordnen, dann wird die Kleinanzeige von
- diesen Interessenten aber auch nicht gefunden.
- </p>
- <hr class="f">
- <div class="f text">
- <label class="f" for="city">Stadt</label>
- <input class="f" id="city" type="text">
- <p class="f info">
- Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
- </p>
- </div>
- </form>
- <form action="#" class="form" method="get">
- <h2 class="f">Ein Passwort-Eingabe-Feld</h2>
- <div class="f text required">
- <label class="f" for="text_tbox_05"><span class="required">* </span>Passwort</label>
- <input class="f" id="text_tbox_05" type="password" value="t">
- </div>
- </form>
- <form action="#" class="form" method="get">
- <h2 class="f">Lade das Bild hoch</h2>
- <p class="f info">
- Du kannst ein Bild im JPEG- oder PNG-Format hochladen.
- Das Bild darf nicht größer als 8 MByte sein.
- </p>
- <div class="f file required">
- <label class="f" for="file_tbox_01"><span class="required">* </span>Bild</label>
- <input class="f" id="file_tbox_01" type="file">
- </div>
- <hr class="f">
- <div class="f submit">
- <input class="f" type="submit" value="> Doch kein Bild">
- <input class="f" type="submit" value="> Bild hochladen">
- </div>
- </form>
- <div class="form">
- <h2 class="f">Antworten</h2>
- <p class="f required">
- <strong class="r">Pflichtfelder</strong> sind mit einem
- <strong class="r symbol">*</strong> markiert.
- </p>
- <div class="f text required">
- <label class="f" for="replyTo"><span class="required">*</span> Antwort-Adresse</label>
- <input class="f" id="replyTo" name="replyTo" tabindex="1" type="text" value="">
- </div>
- <div class="f text required">
- <label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
- <input class="f" id="replyToRepeated" name="replyToRepeated" tabindex="2" type="text" value="">
- </div>
- <div class="f text required">
- <label class="f" for="subject"><span class="required">*</span> Betreff</label>
- <input class="f" id="subject" name="subject" tabindex="3" type="text" value="">
- </div>
- <div class="f textarea required">
- <label class="f" for="text"><span class="required">*</span> Nachricht</label>
- <textarea class="f" cols="20" id="text" name="text" rows="15" tabindex="4"></textarea>
- </div>
- <div class="f checkbox">
- <input checked="checked" class="f" id="attachment1" name="attachment" tabindex="4" type="checkbox" value="true"><input name="_attachment" type="hidden" value="on">
- <label class="f" for="attachment">Ich möchte eine Datei an die E-Mail anhängen.</label>
- </div>
- <div class="f checkbox">
- <input checked="checked" class="f" id="copy1" name="copy" tabindex="5" type="checkbox" value="true"><input name="_copy" type="hidden" value="on">
- <label class="f" for="copy">Ich möchte eine Kopie der Nachricht zugesendet bekommen.</label>
- </div>
- </div>
- <div class="form cf">
- <div class="col2 left">
- <h2 class="f">Weiter mit Anmeldung</h2>
- <div class="f text">
- <label class="f" for="username">Benutzername</label>
- <input class="f" id="username" name="username" tabindex="6" type="text">
- </div>
- <div class="f text">
- <label class="f" for="password">Passwort</label>
- <input class="f" id="password" name="password" tabindex="7" type="password">
- </div>
- </div>
- <div class="col2 right">
- <h2 class="f">Weiter ohne Anmeldung</h2>
- <!-- <a href="/kleinanzeigen/37431/lust+.html" title="Zu schwer? Hier klicken um das Bild zu wechseln!"><img src="/img/captcha.jpg" alt="Captcha" width="120" height="60" /></a> -->
- <div class="f captcha cf">
- <span class="f">Was steht da?</span>
- <img alt="Captcha" class="f" height="60" src="/img/captcha.jpg" width="120">
- </div>
- <div class="f text">
- <label class="f" for="captcha">Lösung</label>
- <input class="f" id="captcha" name="captcha" tabindex="8" type="text">
- </div>
- </div>
- </div>
- </article>
+++ /dev/null
----
-title: "HTML-Experimente - Kein Layout"
-linkTitle: "Kein Layout"
-url: /potemkin/html-experimente/kein-layout.html
----
-<main class="maincontent">
- <header><h1>Alle Stylings deaktiviert</h1></header>
- <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
- </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
+++ /dev/null
----
-title: "HTML-Experimente - Layout PHONE"
-linkTitle: "Layout PHONE"
-url: /potemkin/html-experimente/phone.html
----
-<main class="maincontent">
- <header><h1>Layout für Smartphones</h1></header>
- <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
- </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
+++ /dev/null
----
-title: "HTML-Experimente - Basis-Layout & Seitenaufteilung"
-linkTitle: "Basis-Layout & Seitenaufteilung"
-url: /potemkin/html-experimente/seitenaufteilung.html
----
-<main class="maincontent">
- <header><h1>Nur das Basis-Layout und die Seitenaufteiltung</h1></header>
- <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
- </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
+++ /dev/null
----
-title: "HTML-Experimente - Basis-Layout & Seitenkopf"
-linkTitle: "Basis-Layout & Seitenkopf"
-url: /potemkin/html-experimente/seitenkopf.html
----
-<main class="maincontent">
- <header><h1>Nur das Basis-Layout und der Seitenkopf</h1></header>
- <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
- </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
+++ /dev/null
----
-title: "HTML-Experimente - Symbol-Font"
-linkTitle: "Symbol-Font"
-url: /potemkin/html-experimente/symbole.html
----
-<article class="maincontent">
- <header><h1>Symbol-Font</h1></header>
- <h2>100%</h2>
- <div class="symbols">
- <span class="e600"></span>
- <span class="e601"></span>
- <span class="e602"></span>
- <span class="e603"></span>
- <span class="e604"></span>
- <span class="e605"></span>
- <span class="e606"></span>
- <span class="e607"></span>
- <span class="e608"></span>
- <span class="e609"></span>
- <span class="e60a"></span>
- <span class="e60b"></span>
- <span class="e60c"></span>
- <span class="e60d"></span>
- <span class="e60e"></span>
- <span class="e60f"></span>
- <span class="e610"></span>
- <span class="e611"></span>
- <span class="e612"></span>
- <span class="e613"></span>
- <span class="e614"></span>
- <span class="e615"></span>
- <span class="e616"></span>
- <span class="e617"></span>
- <span class="e618"></span>
- <span class="e619"></span>
- <span class="e61a"></span>
- <span class="e61b"></span>
- <span class="e61c"></span>
- <span class="e61d"></span>
- <span class="e61e"></span>
- <span class="e61f"></span>
- <span class="e620"></span>
- <span class="e621"></span>
- <span class="e622"></span>
- <span class="e623"></span>
- <span class="e624"></span>
- <span class="e625"></span>
- <span class="e626"></span>
- <span class="e627"></span>
- <span class="e628"></span>
- <span class="e629"></span>
- <span class="e62a"></span>
- <span class="e62b"></span>
- <span class="e62c"></span>
- <span class="e62d"></span>
- <span class="e62e"></span>
- <span class="e62f"></span>
- <span class="e630"></span>
- <span class="e631"></span>
- <span class="e632"></span>
- <span class="e633"></span>
- <span class="e634"></span>
- <span class="e635"></span>
- <span class="e636"></span>
- <span class="e637"></span>
- <span class="e638"></span>
- <span class="e639"></span>
- <span class="e63a"></span>
- <span class="e63b"></span>
- <span class="e63c"></span>
- <span class="e63d"></span>
- <span class="e63e"></span>
- <span class="e63f"></span>
- <span class="e640"></span>
- <span class="e641"></span>
- <span class="e642"></span>
- <span class="e643"></span>
- <span class="e644"></span>
- <span class="e645"></span>
- <span class="e646"></span>
- <span class="e647"></span>
- <span class="e648"></span>
- <span class="e649"></span>
- <span class="e64a"></span>
- <span class="e64b"></span>
- </div>
- <h2>200%</h2>
- <div class="symbols" style="font-size: 200%; line-height: 1.5em">
- <span class="e600"></span>
- <span class="e601"></span>
- <span class="e602"></span>
- <span class="e603"></span>
- <span class="e604"></span>
- <span class="e605"></span>
- <span class="e606"></span>
- <span class="e607"></span>
- <span class="e608"></span>
- <span class="e609"></span>
- <span class="e60a"></span>
- <span class="e60b"></span>
- <span class="e60c"></span>
- <span class="e60d"></span>
- <span class="e60e"></span>
- <span class="e60f"></span>
- <span class="e610"></span>
- <span class="e611"></span>
- <span class="e612"></span>
- <span class="e613"></span>
- <span class="e614"></span>
- <span class="e615"></span>
- <span class="e616"></span>
- <span class="e617"></span>
- <span class="e618"></span>
- <span class="e619"></span>
- <span class="e61a"></span>
- <span class="e61b"></span>
- <span class="e61c"></span>
- <span class="e61d"></span>
- <span class="e61e"></span>
- <span class="e61f"></span>
- <span class="e620"></span>
- <span class="e621"></span>
- <span class="e622"></span>
- <span class="e623"></span>
- <span class="e624"></span>
- <span class="e625"></span>
- <span class="e626"></span>
- <span class="e627"></span>
- <span class="e628"></span>
- <span class="e629"></span>
- <span class="e62a"></span>
- <span class="e62b"></span>
- <span class="e62c"></span>
- <span class="e62d"></span>
- <span class="e62e"></span>
- <span class="e62f"></span>
- <span class="e630"></span>
- <span class="e631"></span>
- <span class="e632"></span>
- <span class="e633"></span>
- <span class="e634"></span>
- <span class="e635"></span>
- <span class="e636"></span>
- <span class="e637"></span>
- <span class="e638"></span>
- <span class="e639"></span>
- <span class="e63a"></span>
- <span class="e63b"></span>
- <span class="e63c"></span>
- <span class="e63d"></span>
- <span class="e63e"></span>
- <span class="e63f"></span>
- <span class="e640"></span>
- <span class="e641"></span>
- <span class="e642"></span>
- <span class="e643"></span>
- <span class="e644"></span>
- <span class="e645"></span>
- <span class="e646"></span>
- <span class="e647"></span>
- <span class="e648"></span>
- <span class="e649"></span>
- <span class="e64a"></span>
- <span class="e64b"></span>
- </div>
- <h2>300%</h2>
- <div class="symbols" style="font-size: 300%; line-height: 1.5em">
- <span class="e600"></span>
- <span class="e601"></span>
- <span class="e602"></span>
- <span class="e603"></span>
- <span class="e604"></span>
- <span class="e605"></span>
- <span class="e606"></span>
- <span class="e607"></span>
- <span class="e608"></span>
- <span class="e609"></span>
- <span class="e60a"></span>
- <span class="e60b"></span>
- <span class="e60c"></span>
- <span class="e60d"></span>
- <span class="e60e"></span>
- <span class="e60f"></span>
- <span class="e610"></span>
- <span class="e611"></span>
- <span class="e612"></span>
- <span class="e613"></span>
- <span class="e614"></span>
- <span class="e615"></span>
- <span class="e616"></span>
- <span class="e617"></span>
- <span class="e618"></span>
- <span class="e619"></span>
- <span class="e61a"></span>
- <span class="e61b"></span>
- <span class="e61c"></span>
- <span class="e61d"></span>
- <span class="e61e"></span>
- <span class="e61f"></span>
- <span class="e620"></span>
- <span class="e621"></span>
- <span class="e622"></span>
- <span class="e623"></span>
- <span class="e624"></span>
- <span class="e625"></span>
- <span class="e626"></span>
- <span class="e627"></span>
- <span class="e628"></span>
- <span class="e629"></span>
- <span class="e62a"></span>
- <span class="e62b"></span>
- <span class="e62c"></span>
- <span class="e62d"></span>
- <span class="e62e"></span>
- <span class="e62f"></span>
- <span class="e630"></span>
- <span class="e631"></span>
- <span class="e632"></span>
- <span class="e633"></span>
- <span class="e634"></span>
- <span class="e635"></span>
- <span class="e636"></span>
- <span class="e637"></span>
- <span class="e638"></span>
- <span class="e639"></span>
- <span class="e63a"></span>
- <span class="e63b"></span>
- <span class="e63c"></span>
- <span class="e63d"></span>
- <span class="e63e"></span>
- <span class="e63f"></span>
- <span class="e640"></span>
- <span class="e641"></span>
- <span class="e642"></span>
- <span class="e643"></span>
- <span class="e644"></span>
- <span class="e645"></span>
- <span class="e646"></span>
- <span class="e647"></span>
- <span class="e648"></span>
- <span class="e649"></span>
- <span class="e64a"></span>
- <span class="e64b"></span>
- </div>
- <h2>400%</h2>
- <div class="symbols" style="font-size: 400%; line-height: 1.5em">
- <span class="e600"></span>
- <span class="e601"></span>
- <span class="e602"></span>
- <span class="e603"></span>
- <span class="e604"></span>
- <span class="e605"></span>
- <span class="e606"></span>
- <span class="e607"></span>
- <span class="e608"></span>
- <span class="e609"></span>
- <span class="e60a"></span>
- <span class="e60b"></span>
- <span class="e60c"></span>
- <span class="e60d"></span>
- <span class="e60e"></span>
- <span class="e60f"></span>
- <span class="e610"></span>
- <span class="e611"></span>
- <span class="e612"></span>
- <span class="e613"></span>
- <span class="e614"></span>
- <span class="e615"></span>
- <span class="e616"></span>
- <span class="e617"></span>
- <span class="e618"></span>
- <span class="e619"></span>
- <span class="e61a"></span>
- <span class="e61b"></span>
- <span class="e61c"></span>
- <span class="e61d"></span>
- <span class="e61e"></span>
- <span class="e61f"></span>
- <span class="e620"></span>
- <span class="e621"></span>
- <span class="e622"></span>
- <span class="e623"></span>
- <span class="e624"></span>
- <span class="e625"></span>
- <span class="e626"></span>
- <span class="e627"></span>
- <span class="e628"></span>
- <span class="e629"></span>
- <span class="e62a"></span>
- <span class="e62b"></span>
- <span class="e62c"></span>
- <span class="e62d"></span>
- <span class="e62e"></span>
- <span class="e62f"></span>
- <span class="e630"></span>
- <span class="e631"></span>
- <span class="e632"></span>
- <span class="e633"></span>
- <span class="e634"></span>
- <span class="e635"></span>
- <span class="e636"></span>
- <span class="e637"></span>
- <span class="e638"></span>
- <span class="e639"></span>
- <span class="e63a"></span>
- <span class="e63b"></span>
- <span class="e63c"></span>
- <span class="e63d"></span>
- <span class="e63e"></span>
- <span class="e63f"></span>
- <span class="e640"></span>
- <span class="e641"></span>
- <span class="e642"></span>
- <span class="e643"></span>
- <span class="e644"></span>
- <span class="e645"></span>
- <span class="e646"></span>
- <span class="e647"></span>
- <span class="e648"></span>
- <span class="e649"></span>
- <span class="e64a"></span>
- <span class="e64b"></span>
- </div>
- <h2>500%</h2>
- <div class="symbols" style="font-size: 500%; line-height: 1.5em">
- <span class="e600"></span>
- <span class="e601"></span>
- <span class="e602"></span>
- <span class="e603"></span>
- <span class="e604"></span>
- <span class="e605"></span>
- <span class="e606"></span>
- <span class="e607"></span>
- <span class="e608"></span>
- <span class="e609"></span>
- <span class="e60a"></span>
- <span class="e60b"></span>
- <span class="e60c"></span>
- <span class="e60d"></span>
- <span class="e60e"></span>
- <span class="e60f"></span>
- <span class="e610"></span>
- <span class="e611"></span>
- <span class="e612"></span>
- <span class="e613"></span>
- <span class="e614"></span>
- <span class="e615"></span>
- <span class="e616"></span>
- <span class="e617"></span>
- <span class="e618"></span>
- <span class="e619"></span>
- <span class="e61a"></span>
- <span class="e61b"></span>
- <span class="e61c"></span>
- <span class="e61d"></span>
- <span class="e61e"></span>
- <span class="e61f"></span>
- <span class="e620"></span>
- <span class="e621"></span>
- <span class="e622"></span>
- <span class="e623"></span>
- <span class="e624"></span>
- <span class="e625"></span>
- <span class="e626"></span>
- <span class="e627"></span>
- <span class="e628"></span>
- <span class="e629"></span>
- <span class="e62a"></span>
- <span class="e62b"></span>
- <span class="e62c"></span>
- <span class="e62d"></span>
- <span class="e62e"></span>
- <span class="e62f"></span>
- <span class="e630"></span>
- <span class="e631"></span>
- <span class="e632"></span>
- <span class="e633"></span>
- <span class="e634"></span>
- <span class="e635"></span>
- <span class="e636"></span>
- <span class="e637"></span>
- <span class="e638"></span>
- <span class="e639"></span>
- <span class="e63a"></span>
- <span class="e63b"></span>
- <span class="e63c"></span>
- <span class="e63d"></span>
- <span class="e63e"></span>
- <span class="e63f"></span>
- <span class="e640"></span>
- <span class="e641"></span>
- <span class="e642"></span>
- <span class="e643"></span>
- <span class="e644"></span>
- <span class="e645"></span>
- <span class="e646"></span>
- <span class="e647"></span>
- <span class="e648"></span>
- <span class="e649"></span>
- <span class="e64a"></span>
- <span class="e64b"></span>
- </div>
- </article>
+++ /dev/null
----
-title: "HTML-Experimente - Layout TABLET"
-linkTitle: "Layout TABLET"
-url: /potemkin/html-experimente/tablet.html
----
-<main class="maincontent">
- <header><h1>Layout für Tablets</h1></header>
- <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
- </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
+++ /dev/null
----
-title: "HTML-Experimente - Media-Query-Test: BEISPIEL"
-linktTitle: "Media-Query-Test: BEISPIEL"
-url: /potemkin/html-experimente/testlab.html
----
-<div class="content">
- <form action="#" class="testlab form" method="get">
- <h2 class="f">Anzeigetext</h2>
- <div class="f textarea">
- <label class="f info" for="textarea_01">Geben Sie hier Ihren Anzeigentext ein.</label>
- <textarea class="f error" cols="50" id="textarea_01" rows="10">Eingegebener Text</textarea>
- <span class="f error"><span class="e">< </span><strong class="e">Fehler:</strong> Es wurde kein Text für die Anzeige eingegeben!</span>
- </div>
- </form>
- <form action="#" class="testlab form" method="get">
- <h2 class="f">Textformatierung</h2>
- <fieldset class="f radiobutton cf">
- <legend class="f info">
- Die zusätzlichen Gestaltungsoptionen sind nur für das Magazin wählbar.<br>
- Online erscheint die Anzeige als normaler Fließtext.
- </legend>
- <hr class="f">
- <div class="col2">
- <div class="f">
- <input class="f" id="radio_tbox_01" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_01">normaler Fließtext</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_02" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_02">Text zentriert</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_03" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_04" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_04">Text fett</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_05" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_05">Text fett und rot</label>
- </div>
- </div>
- <div class="col2">
- <div class="f">
- <input class="f" id="radio_tbox_06" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_07" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_08" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_09" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
- </div>
- </div>
- </fieldset>
- </form>
- <form action="#" class="testlab form" method="get">
- <h2 class="f">Einspaltige Radiobuttons...</h2>
- <fieldset class="f radiobutton">
- <div class="f">
- <input class="f" id="radio_tbox_b01" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_b01">Dies ist eine etwas länglichere Beschreibung der auswählbaren Option</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_b02" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_b02">Option X</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_b03" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_b03">Dies ist eine sehr, sehr lange Beschreibung der auswählbaren Option - so lang, dass sie am Ende hoffentlich umbricht...</label>
- </div>
- </fieldset>
- <hr class="f">
- <div class="f submit">
- <input class="f" type="submit" value="> zur Übersicht">
- <input class="f left" type="submit" value="< zurück">
- <input class="f" type="submit" value="> weiter">
- </div>
- </form>
- <form action="#" class="testlab form" method="get">
- <h2 class="f">Bild</h2>
- <fieldset class="f checkbox">
- <legend class="f">
- Du kannst Deiner Anzeige ein Bild hinzufügen.
- Das Bild erscheint nur online.
- Im Magazin erscheint die Kleinanzeige mit Hinweis auf das Onlinebild.
- </legend>
- <hr class="f">
- <div class="f">
- <input class="f" id="checkbox_tbox_01" name="checkbox_tbox" type="checkbox">
- <label class="f" for="checkbox_tbox_01">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
- </div>
- <div class="f">
- <input class="f" id="checkbox_tbox_02" name="checkbox_tbox" type="checkbox">
- <label class="f" for="checkbox_tbox_02">Ich habe die AGB für das Hochladen von Bildern gelesen und akzeptiere diese</label>
- </div>
- </fieldset>
- </form>
- <form action="#" class="testlab form" method="get">
- <h2 class="f">Alleinstehende Checkbox</h2>
- <div class="f checkbox">
- <input class="f" id="checkbox_tbox_03" name="checkbox_tbox" type="checkbox">
- <label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
- </div>
- </form>
- <form action="#" class="testlab form" method="get">
- <h2 class="f">Kundendaten</h2>
- <p class="f required">
- <strong class="r">Pflichtfelder</strong> sind mit einem
- <strong class="r symbol">*</strong> markiert.
- </p>
- <div class="f text required">
- <label class="f" for="text_tbox_01"><span class="required">* </span>Nachname</label>
- <input class="f" id="text_tbox_01" type="text" value="Mustermann">
- </div>
- <div class="f text required">
- <label class="f" for="text_tbox_02">Vorname</label>
- <input class="f" id="text_tbox_02" type="text" value="Max">
- </div>
- <div class="f select required">
- <label class="f" for="text_tbox_03"><span class="required">* </span>Ort</label>
- <select class="f" id="text_tbox_03">
- <option>Dortmund</option>
- <option>Bochum</option>
- <option>Essen</option>
- <option>Mönchengladbach</option>
- <option>Oberhausen</option>
- <option>Castrop-Rauxel</option>
- <option>Düsseldorf</option>
- </select>
- </div>
- <div class="f text required">
- <label class="f" for="text_tbox_04"><span class="required">* </span>Straße/Hausnr.</label>
- <input class="f error" id="text_tbox_04" type="text" value="">
- <span class="f error"><span class="e">< </span><strong class="e">Fehler:</strong> Dies ist ein Pflichtfeld!</span>
- </div>
- <div class="f text required">
- <label class="f" for="text_tbox_05"><span class="required">* </span>Postleitzahl</label>
- <input class="f" id="text_tbox_05" type="text" value="">
- </div>
- <div class="f text required">
- <label class="f" for="text_tbox_06">Telefon</label>
- <input class="f" id="text_tbox_06" type="text" value="">
- </div>
- <hr class="f">
- <div class="f submit">
- <input class="f" type="submit" value="> weiter">
- </div>
- </form>
- <form action="#" class="testlab form" method="get">
- <h2 class="f">Anzeige regionalisieren</h2>
- <p class="f">
- Indem Du Deine Kleinanzeige einer Stadt zuordnest, können Interessenten
- diese online leichter finden, wenn sie nur nach Kleinanzeigen aus
- bestimmten Städten suchen.
- Du kannst auch keine Stadt zuordnen, dann wird die Kleinanzeige von
- diesen Interessenten aber auch nicht gefunden.
- </p>
- <hr class="f">
- <div class="f text">
- <label class="f" for="city">Stadt</label>
- <input class="f" id="city" type="text">
- <p class="f info">
- Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
- </p>
- </div>
- </form>
- <form action="#" class="testlab form" method="get">
- <h2 class="f">Ein Passwort-Eingabe-Feld</h2>
- <div class="f text required">
- <label class="f" for="text_tbox_05"><span class="required">* </span>Passwort</label>
- <input class="f" id="text_tbox_05" type="password" value="t">
- </div>
- </form>
- <form action="#" class="testlab form" method="get">
- <h2 class="f">Lade das Bild hoch</h2>
- <p class="f info">
- Du kannst ein Bild im JPEG- oder PNG-Format hochladen.
- Das Bild darf nicht größer als 8 MByte sein.
- </p>
- <div class="f file required">
- <label class="f" for="file_tbox_01"><span class="required">* </span>Bild</label>
- <input class="f" id="file_tbox_01" type="file">
- </div>
- <hr class="f">
- <div class="f submit">
- <input class="f" type="submit" value="> Doch kein Bild">
- <input class="f" type="submit" value="> Bild hochladen">
- </div>
- </form>
- <div class="testlab form">
- <h2 class="f">Antworten</h2>
- <p class="f required">
- <strong class="r">Pflichtfelder</strong> sind mit einem
- <strong class="r symbol">*</strong> markiert.
- </p>
- <div class="f text required">
- <label class="f" for="replyTo"><span class="required">*</span> Antwort-Adresse</label>
- <input class="f" id="replyTo" name="replyTo" tabindex="1" type="text" value="">
- </div>
- <div class="f text required">
- <label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
- <input class="f" id="replyToRepeated" name="replyToRepeated" tabindex="2" type="text" value="">
- </div>
- <div class="f text required">
- <label class="f" for="subject"><span class="required">*</span> Betreff</label>
- <input class="f" id="subject" name="subject" tabindex="3" type="text" value="">
- </div>
- <div class="f textarea required">
- <label class="f" for="text"><span class="required">*</span> Nachricht</label>
- <textarea class="f" cols="20" id="text" name="text" rows="15" tabindex="4"></textarea>
- </div>
- <div class="f checkbox">
- <input checked="checked" class="f" id="attachment1" name="attachment" tabindex="4" type="checkbox" value="true"><input name="_attachment" type="hidden" value="on">
- <label class="f" for="attachment">Ich möchte eine Datei an die E-Mail anhängen.</label>
- </div>
- <div class="f checkbox">
- <input checked="checked" class="f" id="copy1" name="copy" tabindex="5" type="checkbox" value="true"><input name="_copy" type="hidden" value="on">
- <label class="f" for="copy">Ich möchte eine Kopie der Nachricht zugesendet bekommen.</label>
- </div>
- </div>
- <div class="testlab form cf">
- <div class="col2 left">
- <h2 class="f">Weiter mit Anmeldung</h2>
- <div class="f text">
- <label class="f" for="username">Benutzername</label>
- <input class="f" id="username" name="username" tabindex="6" type="text">
- </div>
- <div class="f text">
- <label class="f" for="password">Passwort</label>
- <input class="f" id="password" name="password" tabindex="7" type="password">
- </div>
- </div>
- <div class="col2 right">
- <h2 class="f">Weiter ohne Anmeldung</h2>
- <!-- <a href="/kleinanzeigen/37431/lust+.html" title="Zu schwer? Hier klicken um das Bild zu wechseln!"><img src="/img/captcha.jpg" alt="Captcha" width="120" height="60" /></a> -->
- <div class="f captcha cf">
- <span class="f">Was steht da?</span>
- <img alt="Captcha" class="f" height="60" src="/img/captcha.jpg" width="120">
- </div>
- <div class="f text">
- <label class="f" for="captcha">Lösung</label>
- <input class="f" id="captcha" name="captcha" tabindex="8" type="text">
- </div>
- </div>
- </div>
- </div>
+++ /dev/null
----
-title: "HTML-Experimente - Layout TINY"
-linkTitle: "Layout TINY"
-url: /potemkin/html-experimente/tiny.html
----
-<main class="maincontent">
- <header><h1>Layout für sehr kleine Bildschirmgrößen</h1></header>
- <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
- </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
+++ /dev/null
----
-title: "Typography"
-url: /potemkin/typo.html
----
-<article class="maincontent">
- <header><h1>Typography</h1></header>
- <p>
- Lorem ipsum dolor <a href="#da">sit amet</a>, consectetur adipisicing elit,
- sed do eiusmod <strong>tempor incididunt</strong> ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud
- <a href="#dort">exercitation</a> ullamco laboris nisi ut aliquip
- <em>ex ea</em> commodo consequat. Duis aute irure dolor in reprehenderit
- in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- <strong>Excepteur sint <em>occaecat</em> cupidatat non proident</strong>,
- sunt in culpa qui officia deserunt mollit anim id est laborum.
- </p>
- <h2>Ein Link <a href="#link">im Titel</a></h2>
- <p>Ein Link <a href="#link">im Text</a>.</p>
- <h2>Normal / Italic / Bold / Bold+Italic</h2>
- <ul>
- <li>normal</li>
- <li><em>italic</em></li>
- <li><strong>bold</strong></li>
- <li><strong><em>bold italic</em></strong></li>
- </ul>
- <p>
- ÄäÖöÜüß@€¢
- <strong>ÄäÖöÜüß@€¢</strong>
- <em>ÄäÖöÜüß@€¢</em>
- <strong><em>ÄäÖöÜüß@€¢</em></strong>
- </p>
- <h1>
- AÄaäOÖoöuÜuüß@€¢
- <strong>AÄaäOÖoöUÜuüß@€¢</strong>
- <em>AÄaäOÖoöUÜuüß@€¢</em>
- <strong><em>AÄaäOÖoöUÜuüß@€¢</em></strong>
- </h1>
- <h1>H1: Heading</h1>
- <h2>H2: Heading</h2>
- <h3>H3: Heading</h3>
- <h4>H4: Heading</h4>
- <h1>H1: Heading</h1>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
- ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat. Duis aute irure dolor in
- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
- culpa qui officia deserunt mollit anim id est laborum.
- </p>
- <h2>H2: Heading</h2>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
- ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat. Duis aute irure dolor in
- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
- culpa qui officia deserunt mollit anim id est laborum.
- </p>
- <h3>H3: Heading</h3>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
- ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat. Duis aute irure dolor in
- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
- culpa qui officia deserunt mollit anim id est laborum.
- </p>
- <h4>H4: Heading</h4>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
- ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat. Duis aute irure dolor in
- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
- culpa qui officia deserunt mollit anim id est laborum.
- </p>
- <h1>Preformatted code</h1>
- <p>
- <em>Juplo Branding</em> uses
- <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html" title="Visit prettify's README">google-code-prettify</a> for automatic
- syntax highlighting.
- </p>
- <pre class="prettyprint linenums"><code class="language-xml"><plugin>
- <groupId>ro.isdc.wro4j</groupId>
- <artifactId>wro4j-maven-plugin</artifactId>
- <version>${wro4j.version}</version>
- <configuration>
- <wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory</wroManagerFactory>
- <cssDestinationFolder>${project.build.directory}/${project.build.finalName}/css/</cssDestinationFolder>
- </configuration>
- <executions>
- <execution>
- <phase>package</phase>
- <goals>
- <goal>run</goal>
- </goals>
- </execution>
- </executions>
-</plugin>
-</code></pre>
- </article>
--- /dev/null
+---
+title: "Projects"
+url: /projects.html
+outputs:
+ - html
+weight: 20
+---
+<main class="maincontent">
+ <h1>Projects - Potemkinsche Dörfer!</h1>
+ <ul>
+ <li><a href="potemkin/fix-swf/overview.html" th:href="@{/potemkin/fix-swf/overview.html}">Fix SWF</a></li>
+ <li><a href="potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}">HTML-Experimente</a></li>
+ <li><a href="potemkin/accelerator.html" th:href="@{/potemkin/accelerator.html}">accelerator</a></li>
+ <li><a href="potemkin/typo.html" th:href="@{/potemkin/typo.html}">Typography</a></li>
+ </ul>
+ </main>
--- /dev/null
+---
+title: "accelerator - Overview"
+url: /potemkin/accelerator.html
+---
+<main class="maincontent">
+ <h1>Accelerator - DUMMY</h1>
+ </main>
--- /dev/null
+---
+title: "Fix SWF"
+url: /potemkin/fix-swf/overview.html
+build:
+ render: local
+outputs:
+ - html
+---
+<main class="maincontent">
+ <h1>Overviw - DUMMY</h1>
+ </main>
--- /dev/null
+---
+title: "Fix SWF - Getting Started"
+linkTitle: "Getting Started"
+url: /potemkin/fix-swf/getting-started.html
+---
+<main class="maincontent">
+ <h1>Getting Started - DUMMY</h1>
+ </main>
--- /dev/null
+---
+title: "Fix SWF - Overview"
+url: /potemkin/fix-swf/overview.html
+---
+<main class="maincontent">
+ <h1>Overviw - DUMMY</h1>
+ </main>
--- /dev/null
+---
+title: "HTML-Experimente"
+---
+<div>
+ <h1>HTML-Elemente / spezielle Seiten</h1>
+ <h2>Die Templates</h2>
+ <ul>
+ <li><a href="templates/layout.html">Layout</a> - Das Layout für juplo.de</li>
+ <li><a href="templates/fragments.html">Fragmente</a> Auf mehreren Seiten verwendete Inhalte</li>
+ <li><a href="error/404.html">404-Fehlerseite</a></li>
+ <li><a href="error/5xx.html">5xx-Fehlerseite</a></li>
+ <li><a href="templates/testlab.html">Testlab</a> Testseite für die Skalierung auf untrschiedliche Seitenbreiten</li>
+ </ul>
+ </div>
+<article class="maincontent">
+ <header><h1>HTML-Elemente / spezielle Seiten</h1></header>
+ <h2>Seiten zum Testen gerenderter Inhalte</h2>
+ <ul>
+ <li><a href="html-experimente/formulare.html" th:href="@{/potemkin/html-experimente/formulare.html}">Formulare</a></li>
+ <li><a href="html-experimente/symbole.html" th:href="@{/potemkin/html-experimente/symbole.html}">Symbol-Font</a></li>
+ <li><a href="error/404.html" th:href="@{/404.html}">404-Template</a></li>
+ <li><a href="html-experimente/gibts-ja-gar-nicht.html" th:href="@{/potemkin/html-experimente/gibts-ja-gar-nicht.html}">404-Fehlerseite</a></li>
+ <li><a href="error/5xx.html" th:href="@{/error.html}">Template für andere Fehler</a></li>
+ <li><a href="html-experimente/error.html" th:href="@{/potemkin/html-experimente/error.html}">Fehlerseite für andere Fehler</a></li>
+ </ul>
+ <h2>Layout-Grenzfälle</h2>
+ <ul>
+ <li><a href="html-experimente/fast-leer-mit-menü.html" th:href="@{/potemkin/html-experimente/fast-leer-mit-menü.html}">Fast leere Seite mit Menü</a></li>
+ <li><a href="html-experimente/fast-leer-mit-menü-und-marginalinhalt.html" th:href="@{/potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html}">Fast leere Seite mit Menü und Marginal-Inhalt</a></li>
+ <li><a href="html-experimente/fast-leer-kein-menü.html" th:href="@{/potemkin/html-experimente/fast-leer-kein-menü.html}">Fast leere Seite ohne Menü</a></li>
+ <li><a href="html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html" th:href="@{/potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html}">Fast leere Seite ohne Menü aber mit Marginal-Inhalt</a></li>
+ <li><a href="html-experimente/fast-leer-einspaltig.html" th:href="@{/potemkin/html-experimente/fast-leer-einspaltig.html}">Fast leere einspaltige Seite</a></li>
+ <li><a href="html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html" th:href="@{/potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html}">Fast leere einspaltige Seite mit Marginal-Inhalt</a></li>
+ <li><a href="html-experimente/breadcrumb.html" th:href="@{/potemkin/html-experimente/breadcrumb.html}">Seite mit sehr langem Breadcrumb</a></li>
+ </ul>
+ <h2>Layout-Variationen</h2>
+ <ul>
+ <li><a href="html-experimente/kein-layout.html" th:href="@{/potemkin/html-experimente/kein-layout.html}">Alle Stylings deaktiviert</a></li>
+ <li><a href="html-experimente/basis-layout.html" th:href="@{/potemkin/html-experimente/basis-layout.html}">Nur das Basis-Layout</a></li>
+ <li><a href="html-experimente/druck-layout.html" th:href="@{/potemkin/html-experimente/druck-layout.html}">Die für den Ausdruck angepasste Ansicht</a></li>
+ <li><a href="html-experimente/tiny.html" th:href="@{/potemkin/html-experimente/tiny.html}">Layout für sehr kleine Bildschirmgrößen</a></li>
+ <li><a href="html-experimente/phone.html" th:href="@{/potemkin/html-experimente/phone.html}">Layout für Smartphones</a></li>
+ <li><a href="html-experimente/tablet.html" th:href="@{/potemkin/html-experimente/tablet.html}">Layout für Tablets</a></li>
+ </ul>
+ <h2>Testseiten für einzelne Seiten-Bestandteile</h2>
+ <ul>
+ <li><a href="html-experimente/seitenaufteilung.html" th:href="@{/potemkin/html-experimente/seitenaufteilung.html}">Nur das Basis-Layout und die Seitenaufteilung</a></li>
+ <li><a href="html-experimente/seitenkopf.html" th:href="@{/potemkin/html-experimente/seitenkopf.html}">Nur das Basis-Layout und der Seitenkopf</a></li>
+ </ul>
+ <h2>Anderer Krams...</h2>
+ <ul>
+ <li><a href="html-experimente/testlab.html" th:href="@{/potemkin/html-experimente/testlab.html}">Seite mit Breiten-Markierungen für den Tests von Media-Queries (Beispiel)</a></li>
+ </ul>
+ </article>
--- /dev/null
+---
+title: "HTML-Experimente - Basis-Layout"
+linkTitle: "Basis-Layout"
+url: /potemkin/html-experimente/basis-layout.html
+---
+<main class="maincontent">
+ <header><h1>Nur das Basis-Layout</h1></header>
+ <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+ </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
--- /dev/null
+---
+title: "HTML-Experimente - Langer Breadcrumb"
+linkTitle: "Langer Breadcrumb"
+url: /potemkin/html-experimente/breadcrumb.html
+---
+<ol id="crumbs">
+ <li class="b"><a class="b" href="../index.html" th:href="@{/index.html}">Home</a></li>
+ <li class="b"><a class="b" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
+ <li class="b"><a class="b" href="html-experimente.html" th:href="@{/potemkin/html-experimente.html}">HTML-Experimente</a></li>
+ <li class="b"><strong class="b">Dies ist ein Seite mit einem unendlich langen Breadcrumb-Eintrag der bestimmt nicht in den vorgesehenen Platz passt</strong></li>
+ </ol>
+<article class="maincontent">
+ <header><h1>Seite mit sehr langem Breadcrumb</h1></header>
+ <p>Eine Seite mit einem extrem langen Breadcrumb...</p>
+ </article>
--- /dev/null
+---
+title: "HTML-Experimente - Druck-Layout"
+linkTitle: "Druck-Layout"
+url: /potemkin/html-experimente/druck-layout.html
+---
+<main class="maincontent">
+ <header><h1>Die für den Ausdruck angepasste Ansicht</h1></header>
+ <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+ </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
--- /dev/null
+---
+title: "This Page Will Raise An Error"
+url: /potemkin/html-experimente/error.html
+---
+<p>This page will raise an error, because the <strong><code>uri</code></strong> is set to an unknown value...</p>
--- /dev/null
+---
+title: "HTML-Experimente - Fast leere einspaltige Seite mit Marginalinhalt"
+linkTitle: "Fast leere einspaltige Seite mit Marginalinhalt"
+url: /potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html
+---
+<nav id="navigation">
+ <hr class="n">
+ <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
+ <h1 class="nav">Navigation</h1>
+ <h2 class="nav menu">Section-Menu</h2>
+ <ul class="cf" id="menu">
+ <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
+ <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
+ <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
+ </ul>
+ </nav>
+<article class="maincontent">
+ <header><h1>Fast leere einspaltige Seite mit Marginalinhalt</h1></header>
+ <p><strong>KAPUTT:</strong> siehe Erklärung im Commit</p>
+ </article>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
--- /dev/null
+---
+title: "HTML-Experimente - Fast leere einspaltige Seite"
+linkTitle: "Fast leere einspaltige Seite"
+url: /potemkin/html-experimente/fast-leer-einspaltig.html
+---
+<nav id="navigation">
+ <hr class="n">
+ <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
+ <h1 class="nav">Navigation</h1>
+ <h2 class="nav menu">Section-Menu</h2>
+ <ul class="cf" id="menu">
+ <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
+ <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
+ <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
+ </ul>
+ </nav>
+<article class="maincontent">
+ <header><h1>Fast leere einspaltige Seite</h1></header>
+ <p><strong>KAPUTT:</strong> siehe Erklärung im Commit</p>
+ </article>
--- /dev/null
+---
+title: "HTML-Experimente - Fast leere Seite ohne Menü aber mit Marginalspalte"
+linkTitle: "Fast leere Seite ohne Menü aber mit Marginalspalte"
+url: /potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html
+---
+<nav id="navigation">
+ <hr class="n">
+ <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
+ <h1 class="nav">Navigation</h1>
+ <h2 class="nav menu">Section-Menu</h2>
+ <ul class="cf" id="menu">
+ <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
+ <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
+ <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
+ </ul>
+ </nav>
+<article class="maincontent">
+ <header><h1>Fast leere Seite ohne Menü aber mit Marginalinhalt</h1></header>
+ <p>Ein ganz bischen Text...</p>
+ </article>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
--- /dev/null
+---
+title: "HTML-Experimente - Fast leere Seite ohne Menü"
+linkTitle: "Fast leere Seite ohne Menü"
+url: /potemkin/html-experimente/fast-leer-kein-menü.html
+---
+<nav id="navigation">
+ <hr class="n">
+ <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
+ <h1 class="nav">Navigation</h1>
+ <h2 class="nav menu">Section-Menu</h2>
+ <ul class="cf" id="menu">
+ <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
+ <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
+ <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
+ </ul>
+ </nav>
+<article class="maincontent">
+ <header><h1>Fast leere Seite ohne Menü</h1></header>
+ <p>Ein ganz bischen Text...</p>
+ </article>
--- /dev/null
+---
+title: "HTML-Experimente - Fast leere Seite mit Menü und Marginalinhalt"
+linkTitle: "Fast leere Seite mit Menü und Marginalinhalt"
+url: /potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html
+---
+<article class="maincontent">
+ <header><h1>Fast leere Seite mit Menü und Marginalinhalt</h1></header>
+ <p>Ein ganz bischen Text...</p>
+ </article>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
--- /dev/null
+---
+title: "HTML-Experimente - Fast leere Seite mit Menü"
+linkTitle: "Fast leere Seite mit Menü"
+url: /potemkin/html-experimente/fast-leer-mit-menü.html
+---
+<article class="maincontent">
+ <header><h1>Fast leere Seite mit Menü</h1></header>
+ <p>Ein ganz bischen Text...</p>
+ </article>
--- /dev/null
+---
+title: "HTML-Experimente - Formulare"
+linkTitle: "Formulare"
+url: /potemkin/html-experimente/formulare.html
+---
+<article class="maincontent">
+ <header><h1>Formulare</h1></header>
+ <form action="#" class="form" method="get">
+ <h2 class="f">Anzeigetext</h2>
+ <div class="f textarea">
+ <label class="f info" for="textarea_01">Geben Sie hier Ihren Anzeigentext ein.</label>
+ <textarea class="f error" cols="50" id="textarea_01" rows="10">Eingegebener Text</textarea>
+ <span class="f error"><span class="e">< </span><strong class="e">Fehler:</strong> Es wurde kein Text für die Anzeige eingegeben!</span>
+ </div>
+ </form>
+ <form action="#" class="form" method="get">
+ <h2 class="f">Textformatierung</h2>
+ <fieldset class="f radiobutton cf">
+ <legend class="f info">
+ Die zusätzlichen Gestaltungsoptionen sind nur für das Magazin wählbar.<br>
+ Online erscheint die Anzeige als normaler Fließtext.
+ </legend>
+ <hr class="f">
+ <div class="col2">
+ <div class="f">
+ <input class="f" id="radio_tbox_01" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_01">normaler Fließtext</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_02" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_02">Text zentriert</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_03" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_04" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_04">Text fett</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_05" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_05">Text fett und rot</label>
+ </div>
+ </div>
+ <div class="col2">
+ <div class="f">
+ <input class="f" id="radio_tbox_06" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_07" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_08" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_09" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
+ </div>
+ </div>
+ </fieldset>
+ </form>
+ <form action="#" class="form" method="get">
+ <h2 class="f">Einspaltige Radiobuttons...</h2>
+ <fieldset class="f radiobutton">
+ <div class="f">
+ <input class="f" id="radio_tbox_b01" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_b01">Dies ist eine etwas länglichere Beschreibung der auswählbaren Option</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_b02" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_b02">Option X</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_b03" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_b03">Dies ist eine sehr, sehr lange Beschreibung der auswählbaren Option - so lang, dass sie am Ende hoffentlich umbricht...</label>
+ </div>
+ </fieldset>
+ <hr class="f">
+ <div class="f submit">
+ <input class="f" type="submit" value="> zur Übersicht">
+ <input class="f left" type="submit" value="< zurück">
+ <input class="f" type="submit" value="> weiter">
+ </div>
+ </form>
+ <form action="#" class="form" method="get">
+ <h2 class="f">Bild</h2>
+ <fieldset class="f checkbox">
+ <legend class="f">
+ Du kannst Deiner Anzeige ein Bild hinzufügen.
+ Das Bild erscheint nur online.
+ Im Magazin erscheint die Kleinanzeige mit Hinweis auf das Onlinebild.
+ </legend>
+ <hr class="f">
+ <div class="f">
+ <input class="f" id="checkbox_tbox_01" name="checkbox_tbox" type="checkbox">
+ <label class="f" for="checkbox_tbox_01">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
+ </div>
+ <div class="f">
+ <input class="f" id="checkbox_tbox_02" name="checkbox_tbox" type="checkbox">
+ <label class="f" for="checkbox_tbox_02">Ich habe die AGB für das Hochladen von Bildern gelesen und akzeptiere diese</label>
+ </div>
+ </fieldset>
+ </form>
+ <form action="#" class="form" method="get">
+ <h2 class="f">Alleinstehende Checkbox</h2>
+ <div class="f checkbox">
+ <input class="f" id="checkbox_tbox_03" name="checkbox_tbox" type="checkbox">
+ <label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
+ </div>
+ </form>
+ <form action="#" class="form" method="get">
+ <h2 class="f">Kundendaten</h2>
+ <p class="f required">
+ <strong class="r">Pflichtfelder</strong> sind mit einem
+ <strong class="r symbol">*</strong> markiert.
+ </p>
+ <div class="f text required">
+ <label class="f" for="text_tbox_01"><span class="required">* </span>Nachname</label>
+ <input class="f" id="text_tbox_01" type="text" value="Mustermann">
+ </div>
+ <div class="f text required">
+ <label class="f" for="text_tbox_02">Vorname</label>
+ <input class="f" id="text_tbox_02" type="text" value="Max">
+ </div>
+ <div class="f select required">
+ <label class="f" for="text_tbox_03"><span class="required">* </span>Ort</label>
+ <select class="f" id="text_tbox_03">
+ <option>Dortmund</option>
+ <option>Bochum</option>
+ <option>Essen</option>
+ <option>Mönchengladbach</option>
+ <option>Oberhausen</option>
+ <option>Castrop-Rauxel</option>
+ <option>Düsseldorf</option>
+ </select>
+ </div>
+ <div class="f text required">
+ <label class="f" for="text_tbox_04"><span class="required">* </span>Straße/Hausnr.</label>
+ <input class="f error" id="text_tbox_04" type="text" value="">
+ <span class="f error"><span class="e">< </span><strong class="e">Fehler:</strong> Dies ist ein Pflichtfeld!</span>
+ </div>
+ <div class="f text required">
+ <label class="f" for="text_tbox_05"><span class="required">* </span>Postleitzahl</label>
+ <input class="f" id="text_tbox_05" type="text" value="">
+ </div>
+ <div class="f text required">
+ <label class="f" for="text_tbox_06">Telefon</label>
+ <input class="f" id="text_tbox_06" type="text" value="">
+ </div>
+ <hr class="f">
+ <div class="f submit">
+ <input class="f" type="submit" value="> weiter">
+ </div>
+ </form>
+ <form action="#" class="form" method="get">
+ <h2 class="f">Anzeige regionalisieren</h2>
+ <p class="f">
+ Indem Du Deine Kleinanzeige einer Stadt zuordnest, können Interessenten
+ diese online leichter finden, wenn sie nur nach Kleinanzeigen aus
+ bestimmten Städten suchen.
+ Du kannst auch keine Stadt zuordnen, dann wird die Kleinanzeige von
+ diesen Interessenten aber auch nicht gefunden.
+ </p>
+ <hr class="f">
+ <div class="f text">
+ <label class="f" for="city">Stadt</label>
+ <input class="f" id="city" type="text">
+ <p class="f info">
+ Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
+ </p>
+ </div>
+ </form>
+ <form action="#" class="form" method="get">
+ <h2 class="f">Ein Passwort-Eingabe-Feld</h2>
+ <div class="f text required">
+ <label class="f" for="text_tbox_05"><span class="required">* </span>Passwort</label>
+ <input class="f" id="text_tbox_05" type="password" value="t">
+ </div>
+ </form>
+ <form action="#" class="form" method="get">
+ <h2 class="f">Lade das Bild hoch</h2>
+ <p class="f info">
+ Du kannst ein Bild im JPEG- oder PNG-Format hochladen.
+ Das Bild darf nicht größer als 8 MByte sein.
+ </p>
+ <div class="f file required">
+ <label class="f" for="file_tbox_01"><span class="required">* </span>Bild</label>
+ <input class="f" id="file_tbox_01" type="file">
+ </div>
+ <hr class="f">
+ <div class="f submit">
+ <input class="f" type="submit" value="> Doch kein Bild">
+ <input class="f" type="submit" value="> Bild hochladen">
+ </div>
+ </form>
+ <div class="form">
+ <h2 class="f">Antworten</h2>
+ <p class="f required">
+ <strong class="r">Pflichtfelder</strong> sind mit einem
+ <strong class="r symbol">*</strong> markiert.
+ </p>
+ <div class="f text required">
+ <label class="f" for="replyTo"><span class="required">*</span> Antwort-Adresse</label>
+ <input class="f" id="replyTo" name="replyTo" tabindex="1" type="text" value="">
+ </div>
+ <div class="f text required">
+ <label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
+ <input class="f" id="replyToRepeated" name="replyToRepeated" tabindex="2" type="text" value="">
+ </div>
+ <div class="f text required">
+ <label class="f" for="subject"><span class="required">*</span> Betreff</label>
+ <input class="f" id="subject" name="subject" tabindex="3" type="text" value="">
+ </div>
+ <div class="f textarea required">
+ <label class="f" for="text"><span class="required">*</span> Nachricht</label>
+ <textarea class="f" cols="20" id="text" name="text" rows="15" tabindex="4"></textarea>
+ </div>
+ <div class="f checkbox">
+ <input checked="checked" class="f" id="attachment1" name="attachment" tabindex="4" type="checkbox" value="true"><input name="_attachment" type="hidden" value="on">
+ <label class="f" for="attachment">Ich möchte eine Datei an die E-Mail anhängen.</label>
+ </div>
+ <div class="f checkbox">
+ <input checked="checked" class="f" id="copy1" name="copy" tabindex="5" type="checkbox" value="true"><input name="_copy" type="hidden" value="on">
+ <label class="f" for="copy">Ich möchte eine Kopie der Nachricht zugesendet bekommen.</label>
+ </div>
+ </div>
+ <div class="form cf">
+ <div class="col2 left">
+ <h2 class="f">Weiter mit Anmeldung</h2>
+ <div class="f text">
+ <label class="f" for="username">Benutzername</label>
+ <input class="f" id="username" name="username" tabindex="6" type="text">
+ </div>
+ <div class="f text">
+ <label class="f" for="password">Passwort</label>
+ <input class="f" id="password" name="password" tabindex="7" type="password">
+ </div>
+ </div>
+ <div class="col2 right">
+ <h2 class="f">Weiter ohne Anmeldung</h2>
+ <!-- <a href="/kleinanzeigen/37431/lust+.html" title="Zu schwer? Hier klicken um das Bild zu wechseln!"><img src="/img/captcha.jpg" alt="Captcha" width="120" height="60" /></a> -->
+ <div class="f captcha cf">
+ <span class="f">Was steht da?</span>
+ <img alt="Captcha" class="f" height="60" src="/img/captcha.jpg" width="120">
+ </div>
+ <div class="f text">
+ <label class="f" for="captcha">Lösung</label>
+ <input class="f" id="captcha" name="captcha" tabindex="8" type="text">
+ </div>
+ </div>
+ </div>
+ </article>
--- /dev/null
+---
+title: "HTML-Experimente - Kein Layout"
+linkTitle: "Kein Layout"
+url: /potemkin/html-experimente/kein-layout.html
+---
+<main class="maincontent">
+ <header><h1>Alle Stylings deaktiviert</h1></header>
+ <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+ </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
--- /dev/null
+---
+title: "HTML-Experimente - Layout PHONE"
+linkTitle: "Layout PHONE"
+url: /potemkin/html-experimente/phone.html
+---
+<main class="maincontent">
+ <header><h1>Layout für Smartphones</h1></header>
+ <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+ </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
--- /dev/null
+---
+title: "HTML-Experimente - Basis-Layout & Seitenaufteilung"
+linkTitle: "Basis-Layout & Seitenaufteilung"
+url: /potemkin/html-experimente/seitenaufteilung.html
+---
+<main class="maincontent">
+ <header><h1>Nur das Basis-Layout und die Seitenaufteiltung</h1></header>
+ <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+ </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
--- /dev/null
+---
+title: "HTML-Experimente - Basis-Layout & Seitenkopf"
+linkTitle: "Basis-Layout & Seitenkopf"
+url: /potemkin/html-experimente/seitenkopf.html
+---
+<main class="maincontent">
+ <header><h1>Nur das Basis-Layout und der Seitenkopf</h1></header>
+ <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+ </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
--- /dev/null
+---
+title: "HTML-Experimente - Symbol-Font"
+linkTitle: "Symbol-Font"
+url: /potemkin/html-experimente/symbole.html
+---
+<article class="maincontent">
+ <header><h1>Symbol-Font</h1></header>
+ <h2>100%</h2>
+ <div class="symbols">
+ <span class="e600"></span>
+ <span class="e601"></span>
+ <span class="e602"></span>
+ <span class="e603"></span>
+ <span class="e604"></span>
+ <span class="e605"></span>
+ <span class="e606"></span>
+ <span class="e607"></span>
+ <span class="e608"></span>
+ <span class="e609"></span>
+ <span class="e60a"></span>
+ <span class="e60b"></span>
+ <span class="e60c"></span>
+ <span class="e60d"></span>
+ <span class="e60e"></span>
+ <span class="e60f"></span>
+ <span class="e610"></span>
+ <span class="e611"></span>
+ <span class="e612"></span>
+ <span class="e613"></span>
+ <span class="e614"></span>
+ <span class="e615"></span>
+ <span class="e616"></span>
+ <span class="e617"></span>
+ <span class="e618"></span>
+ <span class="e619"></span>
+ <span class="e61a"></span>
+ <span class="e61b"></span>
+ <span class="e61c"></span>
+ <span class="e61d"></span>
+ <span class="e61e"></span>
+ <span class="e61f"></span>
+ <span class="e620"></span>
+ <span class="e621"></span>
+ <span class="e622"></span>
+ <span class="e623"></span>
+ <span class="e624"></span>
+ <span class="e625"></span>
+ <span class="e626"></span>
+ <span class="e627"></span>
+ <span class="e628"></span>
+ <span class="e629"></span>
+ <span class="e62a"></span>
+ <span class="e62b"></span>
+ <span class="e62c"></span>
+ <span class="e62d"></span>
+ <span class="e62e"></span>
+ <span class="e62f"></span>
+ <span class="e630"></span>
+ <span class="e631"></span>
+ <span class="e632"></span>
+ <span class="e633"></span>
+ <span class="e634"></span>
+ <span class="e635"></span>
+ <span class="e636"></span>
+ <span class="e637"></span>
+ <span class="e638"></span>
+ <span class="e639"></span>
+ <span class="e63a"></span>
+ <span class="e63b"></span>
+ <span class="e63c"></span>
+ <span class="e63d"></span>
+ <span class="e63e"></span>
+ <span class="e63f"></span>
+ <span class="e640"></span>
+ <span class="e641"></span>
+ <span class="e642"></span>
+ <span class="e643"></span>
+ <span class="e644"></span>
+ <span class="e645"></span>
+ <span class="e646"></span>
+ <span class="e647"></span>
+ <span class="e648"></span>
+ <span class="e649"></span>
+ <span class="e64a"></span>
+ <span class="e64b"></span>
+ </div>
+ <h2>200%</h2>
+ <div class="symbols" style="font-size: 200%; line-height: 1.5em">
+ <span class="e600"></span>
+ <span class="e601"></span>
+ <span class="e602"></span>
+ <span class="e603"></span>
+ <span class="e604"></span>
+ <span class="e605"></span>
+ <span class="e606"></span>
+ <span class="e607"></span>
+ <span class="e608"></span>
+ <span class="e609"></span>
+ <span class="e60a"></span>
+ <span class="e60b"></span>
+ <span class="e60c"></span>
+ <span class="e60d"></span>
+ <span class="e60e"></span>
+ <span class="e60f"></span>
+ <span class="e610"></span>
+ <span class="e611"></span>
+ <span class="e612"></span>
+ <span class="e613"></span>
+ <span class="e614"></span>
+ <span class="e615"></span>
+ <span class="e616"></span>
+ <span class="e617"></span>
+ <span class="e618"></span>
+ <span class="e619"></span>
+ <span class="e61a"></span>
+ <span class="e61b"></span>
+ <span class="e61c"></span>
+ <span class="e61d"></span>
+ <span class="e61e"></span>
+ <span class="e61f"></span>
+ <span class="e620"></span>
+ <span class="e621"></span>
+ <span class="e622"></span>
+ <span class="e623"></span>
+ <span class="e624"></span>
+ <span class="e625"></span>
+ <span class="e626"></span>
+ <span class="e627"></span>
+ <span class="e628"></span>
+ <span class="e629"></span>
+ <span class="e62a"></span>
+ <span class="e62b"></span>
+ <span class="e62c"></span>
+ <span class="e62d"></span>
+ <span class="e62e"></span>
+ <span class="e62f"></span>
+ <span class="e630"></span>
+ <span class="e631"></span>
+ <span class="e632"></span>
+ <span class="e633"></span>
+ <span class="e634"></span>
+ <span class="e635"></span>
+ <span class="e636"></span>
+ <span class="e637"></span>
+ <span class="e638"></span>
+ <span class="e639"></span>
+ <span class="e63a"></span>
+ <span class="e63b"></span>
+ <span class="e63c"></span>
+ <span class="e63d"></span>
+ <span class="e63e"></span>
+ <span class="e63f"></span>
+ <span class="e640"></span>
+ <span class="e641"></span>
+ <span class="e642"></span>
+ <span class="e643"></span>
+ <span class="e644"></span>
+ <span class="e645"></span>
+ <span class="e646"></span>
+ <span class="e647"></span>
+ <span class="e648"></span>
+ <span class="e649"></span>
+ <span class="e64a"></span>
+ <span class="e64b"></span>
+ </div>
+ <h2>300%</h2>
+ <div class="symbols" style="font-size: 300%; line-height: 1.5em">
+ <span class="e600"></span>
+ <span class="e601"></span>
+ <span class="e602"></span>
+ <span class="e603"></span>
+ <span class="e604"></span>
+ <span class="e605"></span>
+ <span class="e606"></span>
+ <span class="e607"></span>
+ <span class="e608"></span>
+ <span class="e609"></span>
+ <span class="e60a"></span>
+ <span class="e60b"></span>
+ <span class="e60c"></span>
+ <span class="e60d"></span>
+ <span class="e60e"></span>
+ <span class="e60f"></span>
+ <span class="e610"></span>
+ <span class="e611"></span>
+ <span class="e612"></span>
+ <span class="e613"></span>
+ <span class="e614"></span>
+ <span class="e615"></span>
+ <span class="e616"></span>
+ <span class="e617"></span>
+ <span class="e618"></span>
+ <span class="e619"></span>
+ <span class="e61a"></span>
+ <span class="e61b"></span>
+ <span class="e61c"></span>
+ <span class="e61d"></span>
+ <span class="e61e"></span>
+ <span class="e61f"></span>
+ <span class="e620"></span>
+ <span class="e621"></span>
+ <span class="e622"></span>
+ <span class="e623"></span>
+ <span class="e624"></span>
+ <span class="e625"></span>
+ <span class="e626"></span>
+ <span class="e627"></span>
+ <span class="e628"></span>
+ <span class="e629"></span>
+ <span class="e62a"></span>
+ <span class="e62b"></span>
+ <span class="e62c"></span>
+ <span class="e62d"></span>
+ <span class="e62e"></span>
+ <span class="e62f"></span>
+ <span class="e630"></span>
+ <span class="e631"></span>
+ <span class="e632"></span>
+ <span class="e633"></span>
+ <span class="e634"></span>
+ <span class="e635"></span>
+ <span class="e636"></span>
+ <span class="e637"></span>
+ <span class="e638"></span>
+ <span class="e639"></span>
+ <span class="e63a"></span>
+ <span class="e63b"></span>
+ <span class="e63c"></span>
+ <span class="e63d"></span>
+ <span class="e63e"></span>
+ <span class="e63f"></span>
+ <span class="e640"></span>
+ <span class="e641"></span>
+ <span class="e642"></span>
+ <span class="e643"></span>
+ <span class="e644"></span>
+ <span class="e645"></span>
+ <span class="e646"></span>
+ <span class="e647"></span>
+ <span class="e648"></span>
+ <span class="e649"></span>
+ <span class="e64a"></span>
+ <span class="e64b"></span>
+ </div>
+ <h2>400%</h2>
+ <div class="symbols" style="font-size: 400%; line-height: 1.5em">
+ <span class="e600"></span>
+ <span class="e601"></span>
+ <span class="e602"></span>
+ <span class="e603"></span>
+ <span class="e604"></span>
+ <span class="e605"></span>
+ <span class="e606"></span>
+ <span class="e607"></span>
+ <span class="e608"></span>
+ <span class="e609"></span>
+ <span class="e60a"></span>
+ <span class="e60b"></span>
+ <span class="e60c"></span>
+ <span class="e60d"></span>
+ <span class="e60e"></span>
+ <span class="e60f"></span>
+ <span class="e610"></span>
+ <span class="e611"></span>
+ <span class="e612"></span>
+ <span class="e613"></span>
+ <span class="e614"></span>
+ <span class="e615"></span>
+ <span class="e616"></span>
+ <span class="e617"></span>
+ <span class="e618"></span>
+ <span class="e619"></span>
+ <span class="e61a"></span>
+ <span class="e61b"></span>
+ <span class="e61c"></span>
+ <span class="e61d"></span>
+ <span class="e61e"></span>
+ <span class="e61f"></span>
+ <span class="e620"></span>
+ <span class="e621"></span>
+ <span class="e622"></span>
+ <span class="e623"></span>
+ <span class="e624"></span>
+ <span class="e625"></span>
+ <span class="e626"></span>
+ <span class="e627"></span>
+ <span class="e628"></span>
+ <span class="e629"></span>
+ <span class="e62a"></span>
+ <span class="e62b"></span>
+ <span class="e62c"></span>
+ <span class="e62d"></span>
+ <span class="e62e"></span>
+ <span class="e62f"></span>
+ <span class="e630"></span>
+ <span class="e631"></span>
+ <span class="e632"></span>
+ <span class="e633"></span>
+ <span class="e634"></span>
+ <span class="e635"></span>
+ <span class="e636"></span>
+ <span class="e637"></span>
+ <span class="e638"></span>
+ <span class="e639"></span>
+ <span class="e63a"></span>
+ <span class="e63b"></span>
+ <span class="e63c"></span>
+ <span class="e63d"></span>
+ <span class="e63e"></span>
+ <span class="e63f"></span>
+ <span class="e640"></span>
+ <span class="e641"></span>
+ <span class="e642"></span>
+ <span class="e643"></span>
+ <span class="e644"></span>
+ <span class="e645"></span>
+ <span class="e646"></span>
+ <span class="e647"></span>
+ <span class="e648"></span>
+ <span class="e649"></span>
+ <span class="e64a"></span>
+ <span class="e64b"></span>
+ </div>
+ <h2>500%</h2>
+ <div class="symbols" style="font-size: 500%; line-height: 1.5em">
+ <span class="e600"></span>
+ <span class="e601"></span>
+ <span class="e602"></span>
+ <span class="e603"></span>
+ <span class="e604"></span>
+ <span class="e605"></span>
+ <span class="e606"></span>
+ <span class="e607"></span>
+ <span class="e608"></span>
+ <span class="e609"></span>
+ <span class="e60a"></span>
+ <span class="e60b"></span>
+ <span class="e60c"></span>
+ <span class="e60d"></span>
+ <span class="e60e"></span>
+ <span class="e60f"></span>
+ <span class="e610"></span>
+ <span class="e611"></span>
+ <span class="e612"></span>
+ <span class="e613"></span>
+ <span class="e614"></span>
+ <span class="e615"></span>
+ <span class="e616"></span>
+ <span class="e617"></span>
+ <span class="e618"></span>
+ <span class="e619"></span>
+ <span class="e61a"></span>
+ <span class="e61b"></span>
+ <span class="e61c"></span>
+ <span class="e61d"></span>
+ <span class="e61e"></span>
+ <span class="e61f"></span>
+ <span class="e620"></span>
+ <span class="e621"></span>
+ <span class="e622"></span>
+ <span class="e623"></span>
+ <span class="e624"></span>
+ <span class="e625"></span>
+ <span class="e626"></span>
+ <span class="e627"></span>
+ <span class="e628"></span>
+ <span class="e629"></span>
+ <span class="e62a"></span>
+ <span class="e62b"></span>
+ <span class="e62c"></span>
+ <span class="e62d"></span>
+ <span class="e62e"></span>
+ <span class="e62f"></span>
+ <span class="e630"></span>
+ <span class="e631"></span>
+ <span class="e632"></span>
+ <span class="e633"></span>
+ <span class="e634"></span>
+ <span class="e635"></span>
+ <span class="e636"></span>
+ <span class="e637"></span>
+ <span class="e638"></span>
+ <span class="e639"></span>
+ <span class="e63a"></span>
+ <span class="e63b"></span>
+ <span class="e63c"></span>
+ <span class="e63d"></span>
+ <span class="e63e"></span>
+ <span class="e63f"></span>
+ <span class="e640"></span>
+ <span class="e641"></span>
+ <span class="e642"></span>
+ <span class="e643"></span>
+ <span class="e644"></span>
+ <span class="e645"></span>
+ <span class="e646"></span>
+ <span class="e647"></span>
+ <span class="e648"></span>
+ <span class="e649"></span>
+ <span class="e64a"></span>
+ <span class="e64b"></span>
+ </div>
+ </article>
--- /dev/null
+---
+title: "HTML-Experimente - Layout TABLET"
+linkTitle: "Layout TABLET"
+url: /potemkin/html-experimente/tablet.html
+---
+<main class="maincontent">
+ <header><h1>Layout für Tablets</h1></header>
+ <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+ </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
--- /dev/null
+---
+title: "HTML-Experimente - Media-Query-Test: BEISPIEL"
+linktTitle: "Media-Query-Test: BEISPIEL"
+url: /potemkin/html-experimente/testlab.html
+---
+<div class="content">
+ <form action="#" class="testlab form" method="get">
+ <h2 class="f">Anzeigetext</h2>
+ <div class="f textarea">
+ <label class="f info" for="textarea_01">Geben Sie hier Ihren Anzeigentext ein.</label>
+ <textarea class="f error" cols="50" id="textarea_01" rows="10">Eingegebener Text</textarea>
+ <span class="f error"><span class="e">< </span><strong class="e">Fehler:</strong> Es wurde kein Text für die Anzeige eingegeben!</span>
+ </div>
+ </form>
+ <form action="#" class="testlab form" method="get">
+ <h2 class="f">Textformatierung</h2>
+ <fieldset class="f radiobutton cf">
+ <legend class="f info">
+ Die zusätzlichen Gestaltungsoptionen sind nur für das Magazin wählbar.<br>
+ Online erscheint die Anzeige als normaler Fließtext.
+ </legend>
+ <hr class="f">
+ <div class="col2">
+ <div class="f">
+ <input class="f" id="radio_tbox_01" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_01">normaler Fließtext</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_02" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_02">Text zentriert</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_03" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_04" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_04">Text fett</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_05" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_05">Text fett und rot</label>
+ </div>
+ </div>
+ <div class="col2">
+ <div class="f">
+ <input class="f" id="radio_tbox_06" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_07" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_08" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_09" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
+ </div>
+ </div>
+ </fieldset>
+ </form>
+ <form action="#" class="testlab form" method="get">
+ <h2 class="f">Einspaltige Radiobuttons...</h2>
+ <fieldset class="f radiobutton">
+ <div class="f">
+ <input class="f" id="radio_tbox_b01" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_b01">Dies ist eine etwas länglichere Beschreibung der auswählbaren Option</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_b02" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_b02">Option X</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_b03" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_b03">Dies ist eine sehr, sehr lange Beschreibung der auswählbaren Option - so lang, dass sie am Ende hoffentlich umbricht...</label>
+ </div>
+ </fieldset>
+ <hr class="f">
+ <div class="f submit">
+ <input class="f" type="submit" value="> zur Übersicht">
+ <input class="f left" type="submit" value="< zurück">
+ <input class="f" type="submit" value="> weiter">
+ </div>
+ </form>
+ <form action="#" class="testlab form" method="get">
+ <h2 class="f">Bild</h2>
+ <fieldset class="f checkbox">
+ <legend class="f">
+ Du kannst Deiner Anzeige ein Bild hinzufügen.
+ Das Bild erscheint nur online.
+ Im Magazin erscheint die Kleinanzeige mit Hinweis auf das Onlinebild.
+ </legend>
+ <hr class="f">
+ <div class="f">
+ <input class="f" id="checkbox_tbox_01" name="checkbox_tbox" type="checkbox">
+ <label class="f" for="checkbox_tbox_01">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
+ </div>
+ <div class="f">
+ <input class="f" id="checkbox_tbox_02" name="checkbox_tbox" type="checkbox">
+ <label class="f" for="checkbox_tbox_02">Ich habe die AGB für das Hochladen von Bildern gelesen und akzeptiere diese</label>
+ </div>
+ </fieldset>
+ </form>
+ <form action="#" class="testlab form" method="get">
+ <h2 class="f">Alleinstehende Checkbox</h2>
+ <div class="f checkbox">
+ <input class="f" id="checkbox_tbox_03" name="checkbox_tbox" type="checkbox">
+ <label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
+ </div>
+ </form>
+ <form action="#" class="testlab form" method="get">
+ <h2 class="f">Kundendaten</h2>
+ <p class="f required">
+ <strong class="r">Pflichtfelder</strong> sind mit einem
+ <strong class="r symbol">*</strong> markiert.
+ </p>
+ <div class="f text required">
+ <label class="f" for="text_tbox_01"><span class="required">* </span>Nachname</label>
+ <input class="f" id="text_tbox_01" type="text" value="Mustermann">
+ </div>
+ <div class="f text required">
+ <label class="f" for="text_tbox_02">Vorname</label>
+ <input class="f" id="text_tbox_02" type="text" value="Max">
+ </div>
+ <div class="f select required">
+ <label class="f" for="text_tbox_03"><span class="required">* </span>Ort</label>
+ <select class="f" id="text_tbox_03">
+ <option>Dortmund</option>
+ <option>Bochum</option>
+ <option>Essen</option>
+ <option>Mönchengladbach</option>
+ <option>Oberhausen</option>
+ <option>Castrop-Rauxel</option>
+ <option>Düsseldorf</option>
+ </select>
+ </div>
+ <div class="f text required">
+ <label class="f" for="text_tbox_04"><span class="required">* </span>Straße/Hausnr.</label>
+ <input class="f error" id="text_tbox_04" type="text" value="">
+ <span class="f error"><span class="e">< </span><strong class="e">Fehler:</strong> Dies ist ein Pflichtfeld!</span>
+ </div>
+ <div class="f text required">
+ <label class="f" for="text_tbox_05"><span class="required">* </span>Postleitzahl</label>
+ <input class="f" id="text_tbox_05" type="text" value="">
+ </div>
+ <div class="f text required">
+ <label class="f" for="text_tbox_06">Telefon</label>
+ <input class="f" id="text_tbox_06" type="text" value="">
+ </div>
+ <hr class="f">
+ <div class="f submit">
+ <input class="f" type="submit" value="> weiter">
+ </div>
+ </form>
+ <form action="#" class="testlab form" method="get">
+ <h2 class="f">Anzeige regionalisieren</h2>
+ <p class="f">
+ Indem Du Deine Kleinanzeige einer Stadt zuordnest, können Interessenten
+ diese online leichter finden, wenn sie nur nach Kleinanzeigen aus
+ bestimmten Städten suchen.
+ Du kannst auch keine Stadt zuordnen, dann wird die Kleinanzeige von
+ diesen Interessenten aber auch nicht gefunden.
+ </p>
+ <hr class="f">
+ <div class="f text">
+ <label class="f" for="city">Stadt</label>
+ <input class="f" id="city" type="text">
+ <p class="f info">
+ Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
+ </p>
+ </div>
+ </form>
+ <form action="#" class="testlab form" method="get">
+ <h2 class="f">Ein Passwort-Eingabe-Feld</h2>
+ <div class="f text required">
+ <label class="f" for="text_tbox_05"><span class="required">* </span>Passwort</label>
+ <input class="f" id="text_tbox_05" type="password" value="t">
+ </div>
+ </form>
+ <form action="#" class="testlab form" method="get">
+ <h2 class="f">Lade das Bild hoch</h2>
+ <p class="f info">
+ Du kannst ein Bild im JPEG- oder PNG-Format hochladen.
+ Das Bild darf nicht größer als 8 MByte sein.
+ </p>
+ <div class="f file required">
+ <label class="f" for="file_tbox_01"><span class="required">* </span>Bild</label>
+ <input class="f" id="file_tbox_01" type="file">
+ </div>
+ <hr class="f">
+ <div class="f submit">
+ <input class="f" type="submit" value="> Doch kein Bild">
+ <input class="f" type="submit" value="> Bild hochladen">
+ </div>
+ </form>
+ <div class="testlab form">
+ <h2 class="f">Antworten</h2>
+ <p class="f required">
+ <strong class="r">Pflichtfelder</strong> sind mit einem
+ <strong class="r symbol">*</strong> markiert.
+ </p>
+ <div class="f text required">
+ <label class="f" for="replyTo"><span class="required">*</span> Antwort-Adresse</label>
+ <input class="f" id="replyTo" name="replyTo" tabindex="1" type="text" value="">
+ </div>
+ <div class="f text required">
+ <label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
+ <input class="f" id="replyToRepeated" name="replyToRepeated" tabindex="2" type="text" value="">
+ </div>
+ <div class="f text required">
+ <label class="f" for="subject"><span class="required">*</span> Betreff</label>
+ <input class="f" id="subject" name="subject" tabindex="3" type="text" value="">
+ </div>
+ <div class="f textarea required">
+ <label class="f" for="text"><span class="required">*</span> Nachricht</label>
+ <textarea class="f" cols="20" id="text" name="text" rows="15" tabindex="4"></textarea>
+ </div>
+ <div class="f checkbox">
+ <input checked="checked" class="f" id="attachment1" name="attachment" tabindex="4" type="checkbox" value="true"><input name="_attachment" type="hidden" value="on">
+ <label class="f" for="attachment">Ich möchte eine Datei an die E-Mail anhängen.</label>
+ </div>
+ <div class="f checkbox">
+ <input checked="checked" class="f" id="copy1" name="copy" tabindex="5" type="checkbox" value="true"><input name="_copy" type="hidden" value="on">
+ <label class="f" for="copy">Ich möchte eine Kopie der Nachricht zugesendet bekommen.</label>
+ </div>
+ </div>
+ <div class="testlab form cf">
+ <div class="col2 left">
+ <h2 class="f">Weiter mit Anmeldung</h2>
+ <div class="f text">
+ <label class="f" for="username">Benutzername</label>
+ <input class="f" id="username" name="username" tabindex="6" type="text">
+ </div>
+ <div class="f text">
+ <label class="f" for="password">Passwort</label>
+ <input class="f" id="password" name="password" tabindex="7" type="password">
+ </div>
+ </div>
+ <div class="col2 right">
+ <h2 class="f">Weiter ohne Anmeldung</h2>
+ <!-- <a href="/kleinanzeigen/37431/lust+.html" title="Zu schwer? Hier klicken um das Bild zu wechseln!"><img src="/img/captcha.jpg" alt="Captcha" width="120" height="60" /></a> -->
+ <div class="f captcha cf">
+ <span class="f">Was steht da?</span>
+ <img alt="Captcha" class="f" height="60" src="/img/captcha.jpg" width="120">
+ </div>
+ <div class="f text">
+ <label class="f" for="captcha">Lösung</label>
+ <input class="f" id="captcha" name="captcha" tabindex="8" type="text">
+ </div>
+ </div>
+ </div>
+ </div>
--- /dev/null
+---
+title: "HTML-Experimente - Layout TINY"
+linkTitle: "Layout TINY"
+url: /potemkin/html-experimente/tiny.html
+---
+<main class="maincontent">
+ <header><h1>Layout für sehr kleine Bildschirmgrößen</h1></header>
+ <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+ </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
--- /dev/null
+---
+title: "Typography"
+url: /potemkin/typo.html
+---
+<article class="maincontent">
+ <header><h1>Typography</h1></header>
+ <p>
+ Lorem ipsum dolor <a href="#da">sit amet</a>, consectetur adipisicing elit,
+ sed do eiusmod <strong>tempor incididunt</strong> ut labore et dolore
+ magna aliqua. Ut enim ad minim veniam, quis nostrud
+ <a href="#dort">exercitation</a> ullamco laboris nisi ut aliquip
+ <em>ex ea</em> commodo consequat. Duis aute irure dolor in reprehenderit
+ in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ <strong>Excepteur sint <em>occaecat</em> cupidatat non proident</strong>,
+ sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ <h2>Ein Link <a href="#link">im Titel</a></h2>
+ <p>Ein Link <a href="#link">im Text</a>.</p>
+ <h2>Normal / Italic / Bold / Bold+Italic</h2>
+ <ul>
+ <li>normal</li>
+ <li><em>italic</em></li>
+ <li><strong>bold</strong></li>
+ <li><strong><em>bold italic</em></strong></li>
+ </ul>
+ <p>
+ ÄäÖöÜüß@€¢
+ <strong>ÄäÖöÜüß@€¢</strong>
+ <em>ÄäÖöÜüß@€¢</em>
+ <strong><em>ÄäÖöÜüß@€¢</em></strong>
+ </p>
+ <h1>
+ AÄaäOÖoöuÜuüß@€¢
+ <strong>AÄaäOÖoöUÜuüß@€¢</strong>
+ <em>AÄaäOÖoöUÜuüß@€¢</em>
+ <strong><em>AÄaäOÖoöUÜuüß@€¢</em></strong>
+ </h1>
+ <h1>H1: Heading</h1>
+ <h2>H2: Heading</h2>
+ <h3>H3: Heading</h3>
+ <h4>H4: Heading</h4>
+ <h1>H1: Heading</h1>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip ex ea commodo consequat. Duis aute irure dolor in
+ reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+ culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ <h2>H2: Heading</h2>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip ex ea commodo consequat. Duis aute irure dolor in
+ reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+ culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ <h3>H3: Heading</h3>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip ex ea commodo consequat. Duis aute irure dolor in
+ reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+ culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ <h4>H4: Heading</h4>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip ex ea commodo consequat. Duis aute irure dolor in
+ reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+ culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ <h1>Preformatted code</h1>
+ <p>
+ <em>Juplo Branding</em> uses
+ <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html" title="Visit prettify's README">google-code-prettify</a> for automatic
+ syntax highlighting.
+ </p>
+ <pre class="prettyprint linenums"><code class="language-xml"><plugin>
+ <groupId>ro.isdc.wro4j</groupId>
+ <artifactId>wro4j-maven-plugin</artifactId>
+ <version>${wro4j.version}</version>
+ <configuration>
+ <wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory</wroManagerFactory>
+ <cssDestinationFolder>${project.build.directory}/${project.build.finalName}/css/</cssDestinationFolder>
+ </configuration>
+ <executions>
+ <execution>
+ <phase>package</phase>
+ <goals>
+ <goal>run</goal>
+ </goals>
+ </execution>
+ </executions>
+</plugin>
+</code></pre>
+ </article>
projects / website / commitdiff