From 3f07b49b401d7bf9841dcbe3e1fed5f704d416c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anna-Sara=20S=C3=A9lea?= <anna-sara@qualitythink.se>
Date: Wed, 18 Mar 2026 18:20:48 +0100
Subject: [PATCH] Setup

---
 Dockerfile         |   5 ++
 css/style.css      | 188 +++++++++++++++++++++++++++++++++++++++++++++
 docker-compose.yml |  10 +++
 index.php          |  29 +++++++
 info.php           |  42 ++++++++++
 pages/1.html       |   1 +
 pages/2.html       |   1 +
 pages/3.html       |   1 +
 pages/4.html       |   1 +
 pages/5.html       |   1 +
 pages/6.html       |   1 +
 11 files changed, 280 insertions(+)
 create mode 100644 Dockerfile
 create mode 100644 css/style.css
 create mode 100644 docker-compose.yml
 create mode 100644 index.php
 create mode 100644 info.php
 create mode 100644 pages/1.html
 create mode 100644 pages/2.html
 create mode 100644 pages/3.html
 create mode 100644 pages/4.html
 create mode 100644 pages/5.html
 create mode 100644 pages/6.html

diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..7cdbac9
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,5 @@
+FROM php:8.2-apache
+
+COPY . /var/www/html/
+RUN chown -R www-data:www-data /var/www/html
+EXPOSE 80
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..1d9bced
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,188 @@
+html {
+    margin: 0;
+    padding:0;
+    box-sizing: border-box;
+}
+
+body {
+    position: relative;
+    height: 100vh;
+    margin: 0;
+    padding:0;
+}
+main {
+    display: flex;
+    justify-content: center;
+    width: 90%;
+    flex-direction: column;
+    align-items: center;
+}
+
+h1 {
+    text-align: center;
+    color: white;
+    font-size: 40px;
+    margin: 0;
+}
+
+.places {
+    font-size: 40px;
+    text-align: center;
+    color: white;
+    font-weight: bold;
+    margin: 0;
+}
+
+.places:after {
+    display: block;
+    content: "Viskafors";
+    /* animation-duration = number of keyframes * duration per keyframe */
+    animation: change-text 15s infinite;
+}
+
+@keyframes change-text {
+  0% {
+    content: "Viskafors";
+  }
+  20% {
+    content: "Rydboholm";
+  }
+  40% {
+    content: "Svaneholm";
+  }
+  60% {
+    content: "Kinnarumma";
+  }
+  80% {
+    content: "Seglora";
+  }
+}
+
+main.info-main {
+    width: 100%;
+}
+
+.info-first-div {
+    background: #092626;
+background: linear-gradient(0deg, rgba(9, 38, 38, 1) 0%, rgba(20, 52, 66, 1) 64%, rgba(59, 98, 161, 1) 100%);
+    height: 300px;
+    width: 100%;
+    z-index: 1;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding-bottom: 100px;
+}
+
+.info-second-div {  
+    min-height: 400px;
+    padding-top: 150px;
+    margin-top: -150px;
+    z-index: 2;
+    background-color: #fff;
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    -webkit-clip-path: polygon(50% 17%, 100% 0, 100% 84%, 50% 100%, 0 84%, 0 0);
+    clip-path: polygon(50% 17%, 100% 0, 100% 84%, 100% 100%, 0 100%, 0 0);
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;  
+}
+
+.info-second-div-inner-container {
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.info-second-div-inner-container a {
+    margin-top: 30px;
+    align-items: center;
+    background: #FFFFFF;
+    border: 0 solid #E2E8F0;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-sizing: border-box;
+    color: #1A202C;
+    display: inline-flex;
+    font-family: Inter, sans-serif;
+    font-size: 1rem;
+    font-weight: 700;
+    height: 56px;
+    justify-content: center;
+    line-height: 24px;
+    overflow-wrap: break-word;
+    padding: 24px;
+    text-decoration: none;
+    width: auto;
+    border-radius: 8px;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+}
+
+footer {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    text-align: center;
+}
+
+footer.footer-info {
+    position: unset;
+    bottom: unset;
+    right: unset;
+    left: unset;
+}
+
+.footer-text {
+    padding: 10px 0;
+    background-color: #092626;
+    color: white;
+    width: 100%;
+    margin-top:50px;
+    display: flex;
+    justify-content: center;
+    align-items: center
+}
+
+footer a {
+    margin-top: 30px;
+    align-items: center;
+    background: #FFFFFF;
+    border: 0 solid #E2E8F0;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-sizing: border-box;
+    color: #1A202C;
+    display: inline-flex;
+    font-size: 1rem;
+    font-weight: 700;
+    height: 56px;
+    justify-content: center;
+    line-height: 24px;
+    overflow-wrap: break-word;
+    padding: 24px;
+    text-decoration: none;
+    width: auto;
+    border-radius: 8px;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+}
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..c409841
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,10 @@
+services:
+  php-app:
+    build: .
+    ports:
+      - "8080:80"
+    volumes:
+      - .:/var/www/html
+    environment:
+      - APACHE_RUN_USER=www-data
+      - APACHE_RUN_GROUP=www-data
\ No newline at end of file
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..0788071
--- /dev/null
+++ b/index.php
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="sv">    
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="css/style.css">
+    </head>
+    <body>
+        <main>
+            <?php 
+                $dir = 'pages/*.html';
+                $files = glob($dir);    
+
+                if(empty($files)) {
+                    die("Error: No HTML files found in /pages directory");
+                }
+
+                $randomPage = $files[array_rand($files)];
+
+                echo file_get_contents($randomPage);
+            ?>
+        </main>
+        <footer>
+             <a href="/info.php">Vad är detta för nåt?</a>
+             <div class="footer-text">
+                vBytes | vbytes.se
+             </div>
+        </footer>
+    </body>
+</html>
\ No newline at end of file
diff --git a/info.php b/info.php
new file mode 100644
index 0000000..65bac12
--- /dev/null
+++ b/info.php
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="sv">    
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="css/style.css">
+    </head>
+    <body>
+        <main class="info-main">
+            <div class="info-first-div">
+
+            <h1>vBytes <br> &#9829</h1>
+            <p class="places"></p>
+
+            </div>
+            <div class="info-second-div">
+                <div class="info-second-div-inner-container">
+                    <h2>
+                        Vad är detta för nåt?
+                    </h2>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing 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.
+                    </p>
+
+                    <h2>
+                        Lorem ipsum dolor
+                    </h2>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing 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.
+                    </p>
+
+                   
+                </div>
+            </div>
+        </main>
+        <footer class="footer-info">
+             <a href="/index.php">Klicka för att bli glad</a>
+             <div class="footer-text">
+                vBytes | vbytes.se
+             </div>
+        </footer>
+    </body>
+</html>
\ No newline at end of file
diff --git a/pages/1.html b/pages/1.html
new file mode 100644
index 0000000..7185b06
--- /dev/null
+++ b/pages/1.html
@@ -0,0 +1 @@
+<div>Hej från 1.html</div>
\ No newline at end of file
diff --git a/pages/2.html b/pages/2.html
new file mode 100644
index 0000000..4772ac4
--- /dev/null
+++ b/pages/2.html
@@ -0,0 +1 @@
+<div>Hej från 2.html</div>
\ No newline at end of file
diff --git a/pages/3.html b/pages/3.html
new file mode 100644
index 0000000..ede107d
--- /dev/null
+++ b/pages/3.html
@@ -0,0 +1 @@
+<div>Hej från 3.html</div>
\ No newline at end of file
diff --git a/pages/4.html b/pages/4.html
new file mode 100644
index 0000000..dd5b547
--- /dev/null
+++ b/pages/4.html
@@ -0,0 +1 @@
+<div>Hej från 4.html</div>
\ No newline at end of file
diff --git a/pages/5.html b/pages/5.html
new file mode 100644
index 0000000..28bf5ed
--- /dev/null
+++ b/pages/5.html
@@ -0,0 +1 @@
+<div>Hej från 5.html</div>
\ No newline at end of file
diff --git a/pages/6.html b/pages/6.html
new file mode 100644
index 0000000..389213c
--- /dev/null
+++ b/pages/6.html
@@ -0,0 +1 @@
+<div>Hej från 6.html</div>
\ No newline at end of file