git.beeping.pet — ssl-expert.git: 29de41930c74b8373ebb9202362259a2676a0b3d

feat: add index.html and page structure

freya freya@asm.pet

Fri, 03 Apr 2026 16:07:05 +0200

commit

29de41930c74b8373ebb9202362259a2676a0b3d

parent

e682e109deb6a363ccb6c327c532a2aab4d73f94

2 files changed, 623 insertions(+), 16 deletions(-)

jump to

index.html

static/style.css

M index.html → index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="de">
 
 <head>
     <meta charset="UTF-8">
@@ -8,18 +8,197 @@ <title>SSL-Expert | Ihr Partner für Sicherheit im Netz! Sichern Sie sich jetzt ein SSL-Zertifkat!</title>
     <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
     <link rel="stylesheet" href="static/style.css">
 </head>
-<header>
-    <img src="static/ssl-expert.webp" alt="SSL Expert" width="150px">
-    <h1>SSL-Expert, Ihr Partner für Sicherheit im Netz!</h1>
-</header>
-<hr>
 
 <body>
+    <a href="#main" class="skip-link">Zum Inhalt springen</a>
+
+    <div id="cookie-banner" role="dialog" aria-label="Hinweis">
+        <p>Wir und unsere 2736 Partner würden gerne mehr über Sie erfahren.
+            <a href="#" onclick="acceptCookies(); return false;">OK</a> |
+            <a href="#" onclick="acceptCookies(); return false;">Schließen</a> |
+            <a href="https://de.wikipedia.org/wiki/Polyamorie" target="_blank" rel="noopener">Mehr erfahren</a>
+        </p>
+    </div>
+
+    <div class="page-border">
+        <div class="header-strip"></div>
+
+        <div class="header">
+            <a href="index.html">
+                <img src="static/ssl-expert.webp" alt="SSL-Expert Logo" width="140">
+            </a>
+            <div class="header-text">
+                <span class="site-title">SSL-Expert</span><br>
+                <span class="site-subtitle">Ihr Partner für Sicherheit im Netz</span>
+            </div>
+            <div class="header-right">
+                Serverstandort: Stuttgart, DE<br>
+                <span class="fine-print">Letzte Aktualisierung: 14.03.2019</span>
+            </div>
+        </div>
+
+        <nav aria-label="Hauptnavigation">
+            <a href="index.html" class="active" aria-current="page">Startseite</a>
+            <a href="#angebot">SSL-Zertifikate</a>
+            <a href="#">S/MIME</a>
+            <a href="#antrag">Beantragen</a>
+            <a href="#">Dokumentation</a>
+            <a href="#">FAQ</a>
+        </nav>
+
+        <div class="breadcrumb" aria-label="Brotkrümelnavigation">
+            Sie befinden sich hier: <a href="index.html">Startseite</a>
+            &nbsp;|&nbsp;
+            <a href="#" onclick="window.print(); return false;">Seite drucken</a>
+            &nbsp;|&nbsp;
+            <a href="mailto:?subject=SSL-Expert&amp;body=https://ssl-expert.de">Seite empfehlen</a>
+        </div>
+
+        <div class="content-wrap">
+            <div class="left-nav" role="navigation" aria-label="Seitennavigation">
+                <div class="left-nav-header">Navigation</div>
+                <a href="index.html" class="left-nav-active">Startseite</a>
+                <a href="#angebot">Zertifikate</a>
+                <a href="#">S/MIME <span class="nav-badge">Neu</span></a>
+                <a href="#antrag">Beantragen</a>
+                <a href="#">Dokumentation</a>
+                <a href="#">FAQ</a>
+                <a href="#">Root-Zertifikat</a>
+
+                <div class="left-nav-header" style="margin-top: 10px;">Aktuelles</div>
+                <div class="left-nav-news">
+                    <b>14.03.2019</b><br>
+                    S/MIME-Zertifikate jetzt verfügbar! <a href="#">Weiterlesen...</a>
+                </div>
+                <div class="left-nav-news">
+                    <b>02.01.2018</b><br>
+                    Wartungsarbeiten an einem Tag zwischen dem 01.01. und 31.02.
+                </div>
+                <div class="left-nav-news">
+                    <b>15.09.2015</b><br>
+                    SSL-Expert ist online!
+                </div>
+            </div>
+
+            <main id="main">
+                <h1>Kostenlose SSL-Zertifikate</h1>
+                <hr noshade size="1" color="#c3d9ff">
+
+                <p>SSL-Expert stellt Ihnen kostenlos SSL-Zertifikate aus, damit Ihr Browser endlich aufhört, Ihre Besucher zu warnen.</p>
+
+                <table class="info-table" cellpadding="4" cellspacing="0" id="angebot">
+                    <caption class="sr-only">Zertifikatstypen</caption>
+                    <tr class="info-header">
+                        <th colspan="2">Unsere Zertifikate im Überblick</th>
+                    </tr>
+                    <tr>
+                        <td class="info-label"><b>Basic</b></td>
+                        <td>Domain-Validierung in unter 30 Sekunden. Keine Fragen gestellt.</td>
+                    </tr>
+                    <tr class="info-alt">
+                        <td class="info-label"><b>Pro</b></td>
+                        <td>Wildcard-Zertifikate. Auch für die Subdomains, von denen wir nichts wissen möchten.</td>
+                    </tr>
+                    <tr>
+                        <td class="info-label"><b>Ultra</b></td>
+                        <td>Extended Validation. Wir schicken eine E-Mail, Sie antworten "Ja", fertig.</td>
+                    </tr>
+                </table>
+                <p class="fine-print" style="margin-top: 4px;">Alle Zertifikate mit 128-Bit-Verschlüsselung. Warum nicht 256? Vertrauen Sie uns.</p>
+
+                <br>
+
+                <table class="info-table" cellpadding="4" cellspacing="0">
+                    <caption class="sr-only">Kennzahlen</caption>
+                    <tr class="info-header">
+                        <th colspan="2">SSL-Expert in Zahlen</th>
+                    </tr>
+                    <tr>
+                        <td class="info-label">Ausgestellte Zertifikate</td>
+                        <td><b>14+</b></td>
+                    </tr>
+                    <tr class="info-alt">
+                        <td class="info-label">Kundenzufriedenheit*</td>
+                        <td><b>100%</b></td>
+                    </tr>
+                    <tr>
+                        <td class="info-label">Bekannte Vorfälle**</td>
+                        <td><b>0</b></td>
+                    </tr>
+                    <tr class="info-alt">
+                        <td class="info-label">Support</td>
+                        <td><b>24/7 per Fax</b></td>
+                    </tr>
+                </table>
+                <p class="fine-print" style="margin-top: 4px;">* Interne Umfrage, n=4. ** Die uns bekannt sind.</p>
+            </main>
+
+            <aside class="sidebar" aria-label="Zertifikat beantragen">
+                <div class="sidebar-box" id="antrag">
+                    <div class="sidebar-title">Zertifikat beantragen</div>
+                    <form id="antrag-form">
+                        <div class="form-row">
+                            <label for="domain">Domain:</label>
+                            <input type="text" id="domain" name="domain" required>
+                        </div>
+                        <div class="form-row">
+                            <label for="email">E-Mail:</label>
+                            <input type="email" id="email" name="email" required>
+                        </div>
+                        <div class="form-row">
+                            <label for="plan">Typ:</label>
+                            <select id="plan" name="plan">
+                                <option value="basic">Basic</option>
+                                <option value="pro">Pro</option>
+                                <option value="ultra">Ultra</option>
+                            </select>
+                        </div>
+                        <div class="form-row form-submit">
+                            <button type="submit" class="btn">Absenden &raquo;</button>
+                        </div>
+                    </form>
+                </div>
+
+                <div class="sidebar-notice">
+                    <b>Hinweis:</b> SSL-Expert ist ein nichtkommerzielles Projekt. Es fallen keine Kosten an.
+                </div>
+
+                <div class="sidebar-notice">
+                    <b>Kompatibilität:</b> Unsere Zertifikate funktionieren mit den meisten gängigen Browsern.<br>
+                    <span class="fine-print">Getestet: Netscape Navigator 4.7, IE6, Firefox 3.5</span>
+                </div>
+
+                <div class="sidebar-notice">
+                    <b>Download:</b> <a href="#">Root-Zertifikat herunterladen (PEM, 2 KB)</a>
+                </div>
+            </aside>
+        </div>
+    </div>
+
+    <footer class="footer-bar">
+        <div class="footer-inner">
+            &copy;2015-2023 SSL-Expert &bull; Stuttgart &bull;
+            Webmaster: admin&#64;ssl-expert.de &bull;
+            Optimiert für 1024x768 &bull;
+            <a href="#" onclick="document.getElementById('cookie-banner').style.display='flex'; return false;">Hinweis erneut anzeigen</a>
+        </div>
+        <div class="footer-inner">
+            Hier könnte Ihre Werbung stehen.
+        </div>
+        <div class="footer-inner fine-print">
+            Diese Seite wurde mit Microsoft FrontPage erstellt.
+        </div>
+    </footer>
+
+    <script>
+        function acceptCookies() {
+            document.getElementById('cookie-banner').style.display = 'none';
+            localStorage.setItem('cookies-accepted', 'true');
+        }
+        if (localStorage.getItem('cookies-accepted')) {
+            document.getElementById('cookie-banner').style.display = 'none';
+        }
+    </script>
 </body>
-<hr>
-<footer>
-    Hier könnte Ihre Werbung stehen.<br />
-    ©2015-2023 SSL-Expert
-</footer>
 
-</html>+</html>

M static/style.css → static/style.css

@@ -1,8 +1,436 @@
-header {
+body {
+    font-family: Verdana, Tahoma, Arial, sans-serif;
+    font-size: 11px;
+    color: #1a1a1a;
+    background: #d0d0d0;
+    margin: 0;
+    padding: 12px;
+}
+
+.skip-link {
+    position: absolute;
+    left: -9999px;
+    top: 0;
+    background: #003399;
+    color: #fff;
+    padding: 4px 12px;
+    z-index: 1000;
+}
+
+.skip-link:focus {
+    left: 12px;
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}
+
+.page-border {
+    max-width: 960px;
+    margin: 0 auto;
+    background: #fff;
+    border: 1px solid #888;
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
+}
+
+.header-strip {
+    height: 3px;
+    background: linear-gradient(to right, #001a66, #003399, #0044cc);
+}
+
+#cookie-banner {
+    max-width: 960px;
+    margin: 0 auto 4px;
+    background: #ffffcc;
+    border: 1px solid #cc9;
+    padding: 3px 10px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 11px;
+}
+
+#cookie-banner p {
+    margin: 0;
+    color: #1a1a1a;
+}
+
+#cookie-banner a {
+    color: #003399;
+    font-size: 11px;
+}
+
+.header {
     display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 10px 16px;
+    background: #eef2fa;
+    border-bottom: 1px solid #c3d9ff;
+}
+
+.header a {
+    flex-shrink: 0;
+    line-height: 0;
+}
+
+.header-text {
     flex: 1;
+}
 
-    h1 {
-        margin-top: 100px;
+.site-title {
+    font-size: 24px;
+    font-weight: bold;
+    color: #003399;
+    font-family: Georgia, "Times New Roman", serif;
+    letter-spacing: -0.5px;
+}
+
+.site-subtitle {
+    font-size: 11px;
+    color: #555;
+}
+
+.header-right {
+    font-size: 10px;
+    color: #737373;
+    white-space: nowrap;
+    text-align: right;
+}
+
+nav[aria-label="Hauptnavigation"] {
+    background: #003399;
+    padding: 0;
+    font-size: 11px;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+nav[aria-label="Hauptnavigation"] a {
+    color: #c3d9ff;
+    text-decoration: none;
+    padding: 5px 14px;
+    border-right: 1px solid #0044cc;
+}
+
+nav[aria-label="Hauptnavigation"] a:hover {
+    background: #0044cc;
+    color: #fff;
+}
+
+nav[aria-label="Hauptnavigation"] a.active {
+    background: #0044cc;
+    color: #fff;
+    font-weight: bold;
+}
+
+.breadcrumb {
+    background: #f5f5f5;
+    border-bottom: 1px solid #ddd;
+    padding: 3px 16px;
+    font-size: 10px;
+    color: #737373;
+}
+
+.breadcrumb a {
+    color: #003399;
+    font-size: 10px;
+}
+
+.content-wrap {
+    display: flex;
+    min-height: 400px;
+}
+
+.left-nav {
+    width: 170px;
+    flex-shrink: 0;
+    background: #eef2fa;
+    border-right: 1px solid #c3d9ff;
+    padding: 0;
+    font-size: 11px;
+}
+
+.left-nav-header {
+    background: #003399;
+    color: #fff;
+    padding: 4px 10px;
+    font-size: 10px;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.left-nav a {
+    display: block;
+    padding: 5px 10px;
+    color: #003399;
+    text-decoration: none;
+    border-bottom: 1px solid #d5dfef;
+    font-size: 11px;
+}
+
+.left-nav a:hover {
+    background: #d5dfef;
+}
+
+.left-nav-active {
+    background: #d5dfef;
+    font-weight: bold;
+}
+
+.nav-badge {
+    background: #cc0000;
+    color: #fff;
+    font-size: 9px;
+    padding: 0 4px;
+    font-weight: bold;
+    vertical-align: middle;
+}
+
+.left-nav-news {
+    padding: 6px 10px;
+    border-bottom: 1px solid #d5dfef;
+    font-size: 10px;
+    line-height: 1.5;
+    color: #444;
+}
+
+.left-nav-news a {
+    display: inline;
+    padding: 0;
+    border: none;
+    font-size: 10px;
+}
+
+main {
+    flex: 1;
+    padding: 14px 20px;
+    min-width: 0;
+}
+
+h1 {
+    font-size: 16px;
+    font-weight: bold;
+    color: #003399;
+    margin: 0 0 4px 0;
+    font-family: Georgia, "Times New Roman", serif;
+}
+
+p {
+    line-height: 1.6;
+    margin: 0 0 8px 0;
+}
+
+a {
+    color: #003399;
+}
+
+a:visited {
+    color: #551a8b;
+}
+
+a:focus-visible {
+    outline: 2px solid #003399;
+    outline-offset: 1px;
+}
+
+hr {
+    margin: 4px 0 10px 0;
+}
+
+.fine-print {
+    font-size: 9px;
+    color: #737373;
+    margin: 0;
+}
+
+.info-table {
+    width: 100%;
+    border: 1px solid #c3d9ff;
+    border-collapse: collapse;
+    margin-top: 10px;
+}
+
+.info-header th {
+    background: #003399;
+    color: #fff;
+    padding: 4px 8px;
+    font-size: 11px;
+    font-weight: bold;
+    text-align: left;
+}
+
+.info-table td {
+    border-bottom: 1px solid #dde5f0;
+    padding: 5px 8px;
+    font-size: 11px;
+    vertical-align: top;
+}
+
+.info-label {
+    width: 120px;
+    white-space: nowrap;
+    background: #eef2fa;
+}
+
+.info-alt td {
+    background: #f5f7fc;
+}
+
+.info-alt .info-label {
+    background: #e4eaf5;
+}
+
+.sidebar {
+    width: 220px;
+    flex-shrink: 0;
+    padding: 14px 14px 14px 0;
+}
+
+.sidebar-box {
+    background: #eef2fa;
+    border: 1px solid #c3d9ff;
+    padding: 12px;
+}
+
+.sidebar-title {
+    text-align: center;
+    font-size: 11px;
+    font-weight: bold;
+    margin-bottom: 8px;
+    color: #003399;
+    border-bottom: 1px solid #c3d9ff;
+    padding-bottom: 6px;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+}
+
+.sidebar-notice {
+    margin-top: 10px;
+    padding: 8px 10px;
+    border: 1px solid #c3d9ff;
+    background: #f5f7fc;
+    font-size: 10px;
+    line-height: 1.5;
+    color: #444;
+}
+
+.form-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 6px;
+}
+
+.form-row label {
+    font-size: 11px;
+    white-space: nowrap;
+    width: 50px;
+    text-align: right;
+    flex-shrink: 0;
+}
+
+.form-submit {
+    justify-content: flex-end;
+}
+
+input[type="text"],
+input[type="email"],
+select {
+    font-family: Verdana, Tahoma, Arial, sans-serif;
+    font-size: 11px;
+    padding: 2px 4px;
+    border: 1px solid #7f9db9;
+    flex: 1;
+    min-width: 0;
+}
+
+input:focus,
+select:focus {
+    outline: 2px solid #003399;
+    outline-offset: -1px;
+}
+
+.btn {
+    font-family: Tahoma, Verdana, Arial, sans-serif;
+    font-size: 11px;
+    padding: 3px 12px;
+    background: #eee;
+    border: 1px solid #888;
+    cursor: pointer;
+}
+
+.btn:hover {
+    background: #ddd;
+}
+
+.btn:focus-visible {
+    outline: 2px solid #003399;
+    outline-offset: 1px;
+}
+
+.footer-bar {
+    max-width: 960px;
+    margin: 4px auto 0;
+    text-align: center;
+    padding: 8px 16px;
+    font-size: 10px;
+    color: #555;
+    line-height: 1.7;
+    background: #eee;
+    border: 1px solid #bbb;
+}
+
+.footer-inner {
+    margin-bottom: 2px;
+}
+
+.footer-bar a {
+    color: #003399;
+    font-size: 10px;
+}
+
+.visitor-counter {
+    display: inline-block;
+    margin: 4px 0;
+    padding: 2px 10px;
+    background: #333;
+    color: #0f0;
+    font-family: "Courier New", monospace;
+    font-size: 11px;
+    letter-spacing: 1px;
+}
+
+@media (max-width: 768px) {
+    body {
+        padding: 0;
+    }
+
+    .page-border {
+        border: none;
+        box-shadow: none;
+    }
+
+    .content-wrap {
+        flex-direction: column;
     }
-}+
+    .left-nav {
+        width: 100%;
+        border-right: none;
+        border-bottom: 1px solid #c3d9ff;
+    }
+
+    .sidebar {
+        width: 100%;
+        padding: 14px;
+    }
+}

all repos — ssl-expert @ 29de41930c74b8373ebb9202362259a2676a0b3d

Landing page for ssl-expert.de