Add files via upload

Nanoraisu · Nov 21, 2024 · 251f853 · 251f853
1 parent 31cb413
commit 251f853
Show file tree

Hide file tree

Showing 5 changed files with 251 additions and 0 deletions.
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="fi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Sairaslomageneraattori jokaisen työpäivän välttämiseen.">
+    <meta name="author" content="Lari Helminen">
+    <title>Sairaslomageneraattori</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="icon" href="sivuikoni.ico" type="image/x-icon">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <header>
+        <nav>
+            <div class="logo">
+                <a href="#">YourLogo</a>
+            </div>
+            <ul class="nav-links">
+                <li><a href="#about">Meistä</a></li>
+                <li><a href="#services">Palvelumme</a></li>
+                <li><a href="#contact">Yhteystiedot</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main>
+        <section id="hero">
+            <h1>Tervetuloa sairaslomageneraattoriin!</h1>
+            <p>Hyvä syy olla kotona vuoden jokaisena työpäivänä!</p>
+            <a href="sairaslomageneraattori.html" class="btn">Sairaslomageneraattoriin</a>
+        </section>
+        <section id="about">
+            <h2>Meistä</h2>
+            <p>Sairaslomageneraattorin takana on pitkäaikainen duunari, joka insinööriopintojensa uuvuttamana ei jaksanut enää keksiä työantajalleen hyviä syitä olla poissa töistä. Nokkela insinöörinraakile päätti julkaista saikkugeneraattorin muiden iloksi.</p>
+        </section>
+        <section id="services">
+            <h2>Palvelumme</h2>
+            <p>Vain yhdellä napin painalluksella saat nerokkaan syyn olla poissa töistä.</p>
+        </section>
+        <section id="contact">
+            <h2>Contact Us</h2>
+            <form action="#" method="post">
+                <label for="name">Name:</label>
+                <input type="text" id="name" name="name" required>
+
+                <label for="email">Email:</label>
+                <input type="email" id="email" name="email" required>
+
+                <label for="message">Message:</label>
+                <textarea id="message" name="message" rows="5" required></textarea>
+
+                <button type="submit">Send</button>
+            </form>
+        </section>
+    </main>
+    <footer>
+        <p>&copy; 2024 Lari Helminen. All rights reserved.</p>
+    </footer>
+    <!-- Add external JavaScript -->
+    <script src="scripts.js"></script>
+</body>
+</html>
diff --git a/sairaslomageneraattori.html b/sairaslomageneraattori.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="fi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sairaslomageneraattori</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <header>
+        <h1>Sairaslomageneraattori</h1>
+    </header>
+    <main>
+        <p>Paina nappia saadaksesi satunnaisen sairaslomatodistuksen tekstin.</p>
+        <button id="generateButton">Luo sairaslomateksti</button>
+        <p id="output" style="margin-top: 20px; font-weight: bold;"></p>
+    </main>
+    <footer>
+        <a href="index.html">Takaisin etusivulle</a>
+    </footer>
+    <script>
+        const texts = [
+            "Potilas on työkyvytön influenssan vuoksi seuraavat kolme päivää. Lisätietoja löydät <a href='https://www.terveyskirjasto.fi/dlk00570/influenssa?q=influenssa' target='_blank'>influenssasta</a>.",
+            "Potilaalla diagnosoitu selkäkipu, ja hän tarvitsee lepoa viiden päivän ajan. Lue lisää <a href='https://www.terveyskirjasto.fi/dlk00326/selkakipu?q=selk%C3%A4kipu' target='_blank'>selkäkivusta</a>.",
+            "Potilas on määrätty sairauslomalle stressiperäisen uupumuksen takia, kestoltaan yksi viikko. Lisätietoja löydät <a href='https://www.terveyskirjasto.fi/dlk00976/stressi?q=stressi' target='_blank'>stressistä</a>.",
+            "Potilas tarvitsee sairauslomaa vatsataudin vuoksi, kaksi päivää. Lue lisää <a href='https://www.terveyskirjasto.fi/dlk00059/vatsatauti-ja-ripuli?q=vatsatauti' target='_blank'>vatsataudista</a>.",
+            "Potilas on sairauslomalla migreenikohtauksen vuoksi, kolme päivää. Tietoa löydät <a href='https://www.terveyskirjasto.fi/dlk00047/migreeni?q=migreeni' target='_blank'>migreenistä</a>.",
+            "Potilas oli Australiassa lomalla ja tämän niskaan tippui <a href='https://en.wikipedia.org/wiki/Drop_bear' target='blank'>australialainen tippuva karhu</a>. Potilas sairaslomalla kolme viikkoa hyökkäyksestä toipumiseen.",
+            "Potilaalla on akuutti lorvikatarri ja tarvitsee yhden päivän sairaslomaa. Lisätietoa lorvikatarrista <a href='https://fi.wiktionary.org/wiki/lorvikatarri' target='blank'></a>"
+        ];
+
+        document.getElementById('generateButton').addEventListener('click', function() {
+            const randomIndex = Math.floor(Math.random() * texts.length);
+            document.getElementById('output').innerHTML = texts[randomIndex];
+        });
+    </script>
+</body>
+</html>
+
+
+
+
+
+
+"Potilas oli Australiassa lomalla ja tämän niskaan tippui <a href='https://en.wikipedia.org/wiki/Drop_bear' target='blank'>australialainen tippuva karhu</a>. Potilas sairaslomalla kolme viikkoa hyökkäyksestä toipumiseen."
diff --git a/sivuikoni.ico b/sivuikoni.ico
diff --git a/styles.css b/styles.css
@@ -0,0 +1,144 @@
+/* General Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Roboto', sans-serif;
+    line-height: 1.6;
+    color: #333;
+    background-color: #f4f4f9;
+    padding: 0 20px;
+}
+
+/* Header */
+header {
+    background: #333;
+    color: #fff;
+    padding: 10px 20px;
+    text-align: center;
+}
+
+header nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1100px;
+    margin: 0 auto;
+}
+
+.nav-links {
+    list-style: none;
+    display: flex;
+}
+
+.nav-links li {
+    margin: 0 15px;
+}
+
+.nav-links a {
+    color: #fff;
+    text-decoration: none;
+    font-weight: bold;
+    transition: color 0.3s;
+}
+
+.nav-links a:hover {
+    color: #f4f4f9;
+}
+
+/* Hero Section */
+#hero {
+    text-align: center;
+    padding: 50px 20px;
+    background: #4CAF50;
+    color: #fff;
+}
+
+#hero h1 {
+    font-size: 2.5rem;
+    margin-bottom: 10px;
+}
+
+#hero p {
+    font-size: 1.2rem;
+    margin-bottom: 20px;
+}
+
+#hero .btn {
+    background: #fff;
+    color: #4CAF50;
+    padding: 10px 20px;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background 0.3s, color 0.3s;
+}
+
+#hero .btn:hover {
+    background: #333;
+    color: #fff;
+}
+
+/* Section Styling */
+section {
+    margin: 20px 0;
+    padding: 20px;
+    background: #fff;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+section h2 {
+    font-size: 1.8rem;
+    margin-bottom: 10px;
+}
+
+/* Form Styles */
+form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+form label {
+    font-weight: bold;
+}
+
+form input,
+form textarea,
+form button {
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    font-size: 1rem;
+}
+
+form input:focus,
+form textarea:focus {
+    border-color: #4CAF50;
+    outline: none;
+}
+
+form button {
+    background: #4CAF50;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    transition: background 0.3s;
+}
+
+form button:hover {
+    background: #333;
+}
+
+/* Footer */
+footer {
+    text-align: center;
+    padding: 10px 20px;
+    background: #333;
+    color: #fff;
+    margin-top: 20px;
+    font-size: 0.9rem;
+}