From e587c7a59cf547f4f2cdde0e0d5b623257a6b14c Mon Sep 17 00:00:00 2001
From: mateusz779 <mateusz.kedziora@mkedziora.pl>
Date: Wed, 6 Nov 2024 23:38:59 +0100
Subject: [PATCH] inicjalizacja projektu dodanie nowych stylow itp

---
 Dockerfile             |  27 ++++
 go.mod                 |   3 +
 main.go                | 175 ++++++++++++++++++++++++
 public/app.html        |  87 ++++++++++++
 public/index.html      | 301 +++++++++++++++++++++++++++++++++++++++++
 public/style_app.css   | 121 +++++++++++++++++
 public/style_index.css | 241 +++++++++++++++++++++++++++++++++
 readme.md              |  38 ++++++
 run_container.sh       |  50 +++++++
 9 files changed, 1043 insertions(+)
 create mode 100644 Dockerfile
 create mode 100644 go.mod
 create mode 100644 main.go
 create mode 100644 public/app.html
 create mode 100644 public/index.html
 create mode 100644 public/style_app.css
 create mode 100644 public/style_index.css
 create mode 100644 readme.md
 create mode 100755 run_container.sh

diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..d96f05d
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,27 @@
+# Author:Mateusz Kędziora https://mkedziora.pl
+
+FROM golang:1.23.2-alpine AS builder
+
+WORKDIR /app
+
+COPY go.mod go.sum* ./
+
+RUN go mod download
+
+COPY *.go ./
+
+RUN CGO_ENABLED=0 GOOS=linux go build -o main .
+
+FROM alpine:latest
+
+RUN apk --no-cache add ca-certificates
+
+WORKDIR /root/
+
+COPY --from=builder /app/main .
+
+COPY public/ ./public
+
+EXPOSE 8000
+
+CMD ["./main"]
\ No newline at end of file
diff --git a/go.mod b/go.mod
new file mode 100644
index 0000000..d19f5dd
--- /dev/null
+++ b/go.mod
@@ -0,0 +1,3 @@
+module mkedziora/fast-links
+
+go 1.23.2
diff --git a/main.go b/main.go
new file mode 100644
index 0000000..97ba9c7
--- /dev/null
+++ b/main.go
@@ -0,0 +1,175 @@
+package main
+
+// Author:Mateusz Kędziora https://mkedziora.pl
+
+import (
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"strconv"
+	"sync"
+	"time"
+)
+
+type DataEntry struct {
+	Value     string
+	Timestamp time.Time
+}
+
+var (
+	dataMap map[string]DataEntry
+	mu      sync.Mutex
+)
+
+func init() {
+	dataMap = make(map[string]DataEntry)
+}
+
+func setHandler(w http.ResponseWriter, r *http.Request) {
+	if r.Method != http.MethodPost {
+		http.Error(w, "Invalid request method", http.StatusMethodNotAllowed)
+		return
+	}
+
+	var input struct {
+		Data   string `json:"value"`
+		ID     string `json:"id,omitempty"`
+		Expire string `json:"expire,omitempty"`
+	}
+
+	if err := json.NewDecoder(r.Body).Decode(&input); err != nil {
+		http.Error(w, "Bad request", http.StatusBadRequest)
+		return
+	}
+
+	mu.Lock()
+	if input.ID == "" {
+		input.ID = "default"
+	}
+
+	expireString, err := strconv.Atoi(input.Expire)
+	if err != nil {
+		http.Error(w, "Bad request", http.StatusBadRequest)
+		return
+	}
+
+	expireSeconds := 30
+	if expireString > 0 {
+		if expireString > 86400 {
+			http.Error(w, fmt.Sprintf("Maksymalny czas wygaśnięcia to %d sekund", 86400), http.StatusBadRequest)
+			return
+		}
+		expireSeconds = expireString
+	}
+
+	expirationTime := time.Now().Add(time.Duration(expireSeconds) * time.Second)
+
+	dataMap[input.ID] = DataEntry{
+		Value:     input.Data,
+		Timestamp: expirationTime,
+	}
+	mu.Unlock()
+
+	w.WriteHeader(http.StatusNoContent)
+}
+
+func getHandler(w http.ResponseWriter, r *http.Request) {
+	id := r.URL.Query().Get("id")
+	if id == "" {
+		id = "default"
+	}
+
+	mu.Lock()
+	entry, exists := dataMap[id]
+	mu.Unlock()
+
+	if !exists || time.Since(entry.Timestamp) > 30*time.Second {
+		delete(dataMap, id)
+		http.Error(w, "No data available", http.StatusNotFound)
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(map[string]string{"data": entry.Value})
+}
+
+func getUrlHandler(w http.ResponseWriter, r *http.Request) {
+	id := r.URL.Query().Get("id")
+	if id == "" {
+		id = "default"
+	}
+
+	mu.Lock()
+	entry, exists := dataMap[id]
+	mu.Unlock()
+
+	if !exists || time.Since(entry.Timestamp) > 30*time.Second {
+		delete(dataMap, id)
+		http.Error(w, "No data available", http.StatusNotFound)
+		return
+	}
+
+	w.Header().Set("Referrer-Policy", "no-referrer")
+	http.Redirect(w, r, entry.Value, http.StatusFound)
+}
+
+func testHandler(w http.ResponseWriter, r *http.Request) {
+	// Utworzenie mapy do przechowywania nagłówków
+	headers := make(map[string]string)
+
+	// Iteracja przez wszystkie nagłówki
+	for name, values := range r.Header {
+		// Używamy wartości 0, ponieważ nagłówki mogą mieć wiele wartości
+		headers[name] = values[0]
+	}
+
+	// Ustawienie nagłówka Content-Type na application/json
+	w.Header().Set("Content-Type", "application/json")
+
+	// Zwrócenie nagłówków w formacie JSON
+	json.NewEncoder(w).Encode(headers)
+}
+
+func main() {
+	// Obsługa endpointów API
+	http.HandleFunc("/api/set", setHandler)
+	http.HandleFunc("/api/get", getHandler)
+	http.HandleFunc("/api/url", getUrlHandler)
+	http.HandleFunc("/test", testHandler)
+
+	// Serwowanie plików statycznych
+	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+		if r.URL.Path == "/" {
+			http.ServeFile(w, r, "public/index.html")
+		} else {
+			http.NotFound(w, r)
+		}
+	})
+
+	http.HandleFunc("/app", func(w http.ResponseWriter, r *http.Request) {
+		http.ServeFile(w, r, "public/app.html")
+	})
+
+	http.HandleFunc("/style_index.css", func(w http.ResponseWriter, r *http.Request) {
+		http.ServeFile(w, r, "public/style_index.css")
+	})
+
+	http.HandleFunc("/style_app.css", func(w http.ResponseWriter, r *http.Request) {
+		http.ServeFile(w, r, "public/style_app.css")
+	})
+
+	go func() {
+		for {
+			for id, timestamp := range dataMap {
+				if time.Now().After(timestamp.Timestamp) {
+					delete(dataMap, id)
+					break
+				}
+			}
+			time.Sleep(5 * time.Second)
+		}
+	}()
+
+	// Uruchomienie serwera
+	http.ListenAndServe(":8080", nil)
+}
diff --git a/public/app.html b/public/app.html
new file mode 100644
index 0000000..1a000a8
--- /dev/null
+++ b/public/app.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<!-- Author:Mateusz Kędziora https://mkedziora.pl -->
+<html lang="pl">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>App</title>
+    <meta name="robots" content="noindex" />
+    <link href="/style_app.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="container">
+      <h1 id="info">Click the button to start.</h1>
+      <a href="" id="url" rel="noopener noreferrer" target="_blank"></a>
+      <button id="startBtn">Start listening</button>
+    </div>
+    <script>
+      let lastData = "";
+
+      // Pobieranie parametru id z URL
+      const urlParams = new URLSearchParams(window.location.search);
+      const id = urlParams.get("id");
+      let new_url = "";
+      let fetchingData;
+      let newWindow;
+      document
+        .getElementById("startBtn")
+        .addEventListener("click", function () {
+          document.getElementById("info").textContent =
+            "Waiting for a new address...";
+          newWindow = window.open("about:blank", "_blank", "");
+          fetchingData = setInterval(checkForNewAddress, 1000);
+        });
+
+      function checkForNewAddress() {
+        // Dodanie parametru id do URL zapytania
+
+        const apiUrl = id
+          ? `/api/get?id=${encodeURIComponent(id)}`
+          : "/api/get";
+
+        fetch(apiUrl, {
+          method: "GET",
+          headers: {
+            "Cache-Control": "no-cache",
+            Pragma: "no-cache",
+          },
+        })
+          .then((response) => {
+            if (!response.ok) {
+              throw new Error("Brak danych");
+            }
+            return response.json();
+          })
+          .then((data) => {
+            if (data.data && data.data !== lastData) {
+              lastData = data.data;
+              console.log("Nowy adres:", data.data);
+
+              // Przejście do nowego adresu z resetowaniem nagłówków
+              const url = new URL(data.data);
+
+              const a = document.getElementById("url");
+              a.href = url;
+              a.textContent = url;
+              console.log(newWindow);
+              if (newWindow) {
+                console.log("ustawiono nowy adres");
+                newWindow.location.href = id
+                  ? `/api/url?id=${encodeURIComponent(id)}`
+                  : "/api/url";
+              }
+
+              document.getElementById("info").textContent =
+                "The page has opened; if not, click the link below. Link waiting is disabled.";
+              clearInterval(fetchingData);
+            }
+          })
+          .catch((error) => {
+            console.error("Błąd:", error);
+          });
+      }
+
+      // Sprawdzaj co sekundę
+    </script>
+  </body>
+</html>
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..471452c
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,301 @@
+<!DOCTYPE html>
+<!-- Author:Mateusz Kędziora https://mkedziora.pl -->
+<html lang="pl">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="robots" content="noindex" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.3.8/html5-qrcode.min.js"></script>
+    <link href="/style_index.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="controls">
+      <button id="startButton">Uruchom skaner QR</button>
+      <button id="stopButton" style="display: none">Zatrzymaj skaner</button>
+    </div>
+
+    <div class="manual-input">
+      <label for="idInput">ID (opcjonalne):</label>
+      <input type="text" id="idInput" placeholder="Wprowadź ID" />
+
+      <label for="expire">Czas wygaśnięcia (opcjonalne):</label>
+      <input
+        type="number"
+        min="1"
+        value="30"
+        max="86400"
+        id="expireInput"
+        placeholder="Czas wygaśnięcia"
+      />
+    </div>
+
+    <div class="zoom-control" style="display: none">
+      <label for="zoomSlider">Powiększenie kamery:</label>
+      <input
+        type="range"
+        id="zoomSlider"
+        min="1"
+        max="10"
+        step="0.1"
+        value="1"
+      />
+      <div class="zoom-value">1x</div>
+    </div>
+
+    <div id="reader"></div>
+
+    <div class="or-divider">
+      <span class="or-text">LUB</span>
+    </div>
+
+    <div class="manual-input">
+      <label for="manualUrl">Wprowadź URL ręcznie:</label>
+      <input type="url" id="manualUrl" placeholder="https://przykład.com" />
+      <button id="submitUrl">Wyślij URL</button>
+    </div>
+
+    <div id="status"></div>
+
+    <script>
+      let currentStream = null;
+      let html5QrcodeScanner = null;
+      const statusDiv = document.getElementById("status");
+      const startButton = document.getElementById("startButton");
+      const stopButton = document.getElementById("stopButton");
+      const submitUrlButton = document.getElementById("submitUrl");
+      const manualUrlInput = document.getElementById("manualUrl");
+
+      // Funkcja do obsługi i wyświetlania błędów
+      function handleError(error) {
+        console.error("Wystąpił błąd:", error);
+
+        let errorMessage = "Wystąpił nieoczekiwany błąd.";
+
+        if (error instanceof Error) {
+          switch (error.name) {
+            case "NotAllowedError":
+              errorMessage =
+                "Dostęp do kamery został zabroniony. Sprawdź ustawienia przeglądarki.";
+              break;
+            case "NotFoundError":
+              errorMessage =
+                "Nie znaleziono kamery. Sprawdź czy urządzenie ma kamerę.";
+              break;
+            case "NotReadableError":
+              errorMessage =
+                "Kamera jest obecnie używana przez inną aplikację.";
+              break;
+            case "OverconstrainedError":
+              errorMessage =
+                "Nie znaleziono odpowiedniej kamery. Spróbuj ponownie.";
+              break;
+            default:
+              errorMessage =
+                error.message ||
+                "Wystąpił problem z kamerą. Spróbuj odświeżyć stronę.";
+          }
+        }
+
+        statusDiv.textContent = errorMessage;
+        return errorMessage;
+      }
+
+      async function sendUrl(url) {
+        try {
+          statusDiv.textContent = "Wysyłanie danych...";
+
+          const id = document.getElementById("idInput").value.trim();
+          const expire = document.getElementById("expireInput").value.trim();
+          const body = { value: url };
+          if (id) body.id = id;
+          if (expire) body.expire = expire;
+
+          const response = await fetch("/api/set", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(body),
+          });
+
+          if (response.ok) {
+            statusDiv.textContent = "Sukces! URL został przesłany.";
+            return true;
+          } else {
+            throw new Error("Błąd podczas wysyłania danych na serwer");
+          }
+        } catch (error) {
+          handleError(error);
+          return false;
+        }
+      }
+
+      async function stopScanner() {
+        try {
+          if (html5QrcodeScanner) {
+            await html5QrcodeScanner.stop();
+            html5QrcodeScanner.clear();
+            html5QrcodeScanner = null;
+          }
+
+          if (currentStream) {
+            const tracks = currentStream.getTracks();
+            tracks.forEach((track) => {
+              if (track.readyState === "live") {
+                track.stop();
+              }
+            });
+            currentStream = null;
+          }
+
+          document.querySelector(".zoom-control").style.display = "none";
+          startButton.style.display = "block";
+          stopButton.style.display = "none";
+
+          const readerElement = document.getElementById("reader");
+          if (readerElement) {
+            readerElement.innerHTML = "";
+          }
+        } catch (error) {
+          handleError(error);
+        }
+      }
+
+      startButton.addEventListener("click", async function () {
+        const zoomControl = document.querySelector(".zoom-control");
+        const zoomSlider = document.getElementById("zoomSlider");
+        const zoomValue = document.querySelector(".zoom-value");
+
+        try {
+          // Najpierw zatrzymaj poprzedni skaner
+          await stopScanner();
+
+          // Poczekaj chwilę przed ponownym uruchomieniem
+          await new Promise((resolve) => setTimeout(resolve, 500));
+
+          // Sprawdź dostępne urządzenia
+          const devices = await navigator.mediaDevices.enumerateDevices();
+          const videoDevices = devices.filter(
+            (device) => device.kind === "videoinput"
+          );
+
+          if (videoDevices.length === 0) {
+            throw new Error("Nie znaleziono żadnej kamery w urządzeniu");
+          }
+
+          // Preferuj tylną kamerę
+          const camera =
+            videoDevices.find(
+              (device) =>
+                device.label.toLowerCase().includes("back") ||
+                device.label.toLowerCase().includes("tylna")
+            ) || videoDevices[videoDevices.length - 1];
+
+          const stream = await navigator.mediaDevices.getUserMedia({
+            video: {
+              deviceId: camera.deviceId,
+              facingMode: { ideal: "environment" },
+            },
+          });
+
+          currentStream = stream;
+          const track = stream.getVideoTracks()[0];
+
+          if (!track) {
+            throw new Error("Nie udało się uzyskać dostępu do kamery");
+          }
+
+          // Sprawdź możliwości kamery
+          const capabilities = track.getCapabilities();
+          if (capabilities && capabilities.zoom) {
+            zoomControl.style.display = "block";
+            zoomSlider.min = capabilities.zoom.min;
+            zoomSlider.max = capabilities.zoom.max;
+            zoomSlider.step =
+              (capabilities.zoom.max - capabilities.zoom.min) / 100;
+            zoomSlider.value = capabilities.zoom.min;
+            zoomValue.textContent = `${capabilities.zoom.min}x`;
+
+            zoomSlider.addEventListener("input", async (e) => {
+              try {
+                const zoomValue = parseFloat(e.target.value);
+                await track.applyConstraints({
+                  advanced: [{ zoom: zoomValue }],
+                });
+                document.querySelector(
+                  ".zoom-value"
+                ).textContent = `${zoomValue.toFixed(1)}x`;
+              } catch (error) {
+                console.warn("Nie udało się ustawić zoomu:", error);
+              }
+            });
+          } else {
+            zoomControl.style.display = "none";
+          }
+
+          html5QrcodeScanner = new Html5Qrcode("reader");
+          const qrConfig = {
+            fps: 10,
+            qrbox: { width: 250, height: 250 },
+            aspectRatio: 1.0,
+          };
+
+          startButton.style.display = "none";
+          stopButton.style.display = "block";
+          statusDiv.textContent = "Skaner jest aktywny...";
+
+          await html5QrcodeScanner.start(
+            { facingMode: "environment" },
+            qrConfig,
+            async (decodedText) => {
+              await stopScanner();
+              if (await sendUrl(decodedText)) {
+                manualUrlInput.value = decodedText;
+              }
+            },
+            (error) => {
+              // Ignorujemy błędy skanowania, bo pojawiają się często gdy nie ma kodu QR w kadrze
+              console.debug("Skanowanie:", error);
+            }
+          );
+        } catch (error) {
+          await stopScanner();
+          handleError(error);
+        }
+      });
+
+      stopButton.addEventListener("click", stopScanner);
+      window.addEventListener("beforeunload", stopScanner);
+      document.addEventListener("visibilitychange", () => {
+        if (document.hidden && html5QrcodeScanner) {
+          stopScanner();
+        }
+      });
+
+      submitUrlButton.addEventListener("click", async () => {
+        const url = manualUrlInput.value.trim();
+        if (!url) {
+          statusDiv.textContent = "Proszę wprowadzić URL";
+          return;
+        }
+
+        try {
+          new URL(url); // Sprawdź poprawność URL
+          await sendUrl(url);
+        } catch (error) {
+          if (error instanceof TypeError) {
+            statusDiv.textContent = "Wprowadzony URL jest nieprawidłowy";
+          } else {
+            handleError(error);
+          }
+        }
+      });
+
+      manualUrlInput.addEventListener("keypress", (e) => {
+        if (e.key === "Enter") {
+          submitUrlButton.click();
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/public/style_app.css b/public/style_app.css
new file mode 100644
index 0000000..10e4658
--- /dev/null
+++ b/public/style_app.css
@@ -0,0 +1,121 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --primary-color: #3498db;
+    --primary-hover: #2980b9;
+    --text-color: #2c3e50;
+    --background-color: #f5f7fa;
+    --shadow-color: rgba(0, 0, 0, 0.1);
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    background: linear-gradient(135deg, var(--background-color) 0%, #c3cfe2 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem;
+    color: var(--text-color);
+}
+
+.container {
+    max-width: 600px;
+    width: 100%;
+    background-color: white;
+    border-radius: 15px;
+    box-shadow: 0 4px 15px var(--shadow-color);
+    padding: 2rem;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+h1 {
+    font-size: 1.5rem;
+    color: var(--text-color);
+}
+
+#startBtn {
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 25px;
+    padding: 0.8rem 1.5rem;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    -webkit-tap-highlight-color: transparent;
+    align-self: center;
+}
+
+@media (hover: hover) {
+    #startBtn:hover {
+        background-color: var(--primary-hover);
+        transform: translateY(-2px);
+        box-shadow: 0 4px 15px var(--shadow-color);
+    }
+}
+
+#startBtn:active {
+    transform: translateY(1px);
+}
+
+#url {
+    color: var(--primary-color);
+    text-decoration: none;
+    font-size: 0.9rem;
+    word-break: break-all;
+}
+
+#url:hover {
+    text-decoration: underline;
+}
+
+/* Animacje */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.container {
+    animation: fadeIn 0.3s ease-in;
+}
+
+/* Dostosowania dla małych ekranów */
+@media (max-width: 480px) {
+    .container {
+        padding: 1.5rem;
+    }
+
+    h1 {
+        font-size: 1.3rem;
+    }
+
+    #startBtn {
+        padding: 0.7rem 1.2rem;
+        font-size: 0.9rem;
+    }
+}
+
+/* Ciemny motyw */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background-color: #1a1a1a;
+        --text-color: #ffffff;
+        --shadow-color: rgba(0, 0, 0, 0.3);
+    }
+
+    body {
+        background: #1a1a1a;
+    }
+
+    .container {
+        background-color: #2d2d2d;
+    }
+}
\ No newline at end of file
diff --git a/public/style_index.css b/public/style_index.css
new file mode 100644
index 0000000..90d6023
--- /dev/null
+++ b/public/style_index.css
@@ -0,0 +1,241 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --primary-color: #3498db;
+    --primary-hover: #2980b9;
+    --text-color: #2c3e50;
+    --background-color: #f5f7fa;
+    --border-color: #ddd;
+    --shadow-color: rgba(0, 0, 0, 0.1);
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    background: linear-gradient(135deg, var(--background-color) 0%, #c3cfe2 100%);
+    min-height: 100vh;
+    padding: 1rem;
+    color: var(--text-color);
+}
+
+.container {
+    max-width: 600px;
+    margin: 0 auto;
+    background-color: white;
+    border-radius: 15px;
+    box-shadow: 0 4px 15px var(--shadow-color);
+    padding: 1.5rem;
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 1rem;
+        margin: 0;
+    }
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 1.5rem;
+}
+
+button {
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 25px;
+    padding: 0.8rem 1.5rem;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    flex: 1;
+    min-width: 150px;
+    text-align: center;
+    -webkit-tap-highlight-color: transparent;
+}
+
+@media (hover: hover) {
+    button:hover {
+        background-color: var(--primary-hover);
+        transform: translateY(-2px);
+        box-shadow: 0 4px 15px var(--shadow-color);
+    }
+}
+
+button:active {
+    transform: translateY(1px);
+}
+
+.manual-input {
+    margin-bottom: 1.5rem;
+}
+
+label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: var(--text-color);
+    font-size: 0.9rem;
+}
+
+input[type="text"],
+input[type="number"],
+input[type="url"] {
+    width: 100%;
+    padding: 0.8rem;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    font-size: 1rem;
+    margin-bottom: 1rem;
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+input:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+}
+
+.zoom-control {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+    padding: 1rem;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+}
+
+#zoomSlider {
+    flex: 1;
+    -webkit-appearance: none;
+    appearance: none;
+    height: 4px;
+    background: var(--border-color);
+    border-radius: 2px;
+}
+
+#zoomSlider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    background: var(--primary-color);
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+#reader {
+    width: 100%;
+    margin: 1.5rem 0;
+    overflow: hidden;
+    border-radius: 8px;
+}
+
+.or-divider {
+    display: flex;
+    align-items: center;
+    margin: 2rem 0;
+    gap: 1rem;
+}
+
+.or-divider::before,
+.or-divider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background-color: var(--border-color);
+}
+
+.or-text {
+    color: #7f8c8d;
+    font-size: 0.9rem;
+    padding: 0 0.5rem;
+}
+
+#status {
+    margin-top: 1rem;
+    padding: 1rem;
+    border-radius: 8px;
+    background-color: #f8f9fa;
+    font-size: 0.9rem;
+}
+
+/* Dostosowania dla iOS */
+@supports (-webkit-touch-callout: none) {
+    input {
+        font-size: 16px; /* Zapobiega powiększaniu na iOS */
+    }
+}
+
+/* Ciemny motyw */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background-color: #1a1a1a;
+        --text-color: #ffffff;
+        --border-color: #333;
+        --shadow-color: rgba(0, 0, 0, 0.3);
+    }
+
+    body {
+        background: #1a1a1a;
+    }
+
+    .container {
+        background-color: #2d2d2d;
+    }
+
+    input[type="text"],
+    input[type="number"],
+    input[type="url"] {
+        background-color: #333;
+        color: white;
+    }
+
+    .zoom-control,
+    #status {
+        background-color: #333;
+    }
+}
+
+/* Animacje */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.container {
+    animation: fadeIn 0.3s ease-in;
+}
+
+/* Dostosowania dla małych ekranów */
+@media (max-width: 480px) {
+    body {
+        padding: 0.5rem;
+    }
+
+    .container {
+        border-radius: 10px;
+    }
+
+    button {
+        padding: 0.7rem 1.2rem;
+    }
+
+    label {
+        font-size: 0.85rem;
+    }
+
+    input[type="text"],
+    input[type="number"],
+    input[type="url"] {
+        padding: 0.7rem;
+        font-size: 0.9rem;
+    }
+}
\ No newline at end of file
diff --git a/readme.md b/readme.md
new file mode 100644
index 0000000..c672190
--- /dev/null
+++ b/readme.md
@@ -0,0 +1,38 @@
+# Fast Links - Quickly Open Links on Multiple Devices
+
+## Project Goal
+
+Fast Links was created to streamline teamwork and increase productivity when working with multiple devices. The application allows for instant sharing of links in real-time by creating virtual rooms where all participants see the same links.
+
+## Use Cases
+
+- **Online Meetings**: Quickly share materials, presentations, and documents.
+- **Teamwork**: Jointly browse websites, codes, and projects.
+- **Education**: Use for interactive presentations and collaborative problem-solving.
+
+## Features
+
+- **Creating Virtual Rooms**: Each user can create their own room and invite others.
+- **Adding Links**: Users add links that are immediately displayed on the screens of all room participants.
+- **Scanning QR Codes**: Add links by scanning a QR code.
+- **Scalability**: The application can handle any number of users and rooms.
+
+## How to Use
+
+1. **Installation**: Only Docker is required.
+2. **Running**: Execute the `run_container.sh` script, optionally specifying the port using the `-p` parameter.
+3. **Access**: Open the specified address in your browser.
+4. **Adding Links**: Enter the link in the input field and confirm.
+5. **Listening Mode**: Go to the `/app` page or specify a specific room ID using the `?id=` parameter.
+
+## Technologies
+
+- **Golang**: Efficient backend programming language.
+- **html5-qrcode**: Library for scanning QR codes in the browser.
+
+## Additional Suggestions
+
+- **Documentation**: Consider creating a more detailed guide to explain advanced configuration and usage options.
+- **User Interface**: Improving the UI could make the application more user-friendly.
+- **Testing**: Conduct comprehensive tests to ensure application stability and reliability.
+- **Security**: Ensure the security of the application, especially if it will be used to share sensitive data.
\ No newline at end of file
diff --git a/run_container.sh b/run_container.sh
new file mode 100755
index 0000000..5f05750
--- /dev/null
+++ b/run_container.sh
@@ -0,0 +1,50 @@
+#!/bin/sh
+
+# Author:Mateusz Kędziora https://mkedziora.pl
+
+# Nazwa projektu
+PROJECT_NAME="fast-links"
+
+# Domyślny port
+DEFAULT_PORT=8080
+
+# Funkcja wyświetlająca sposób użycia
+usage() {
+    echo "Użycie: $0 [-p port]"
+    echo "  -p port    Port na którym ma działać aplikacja (domyślnie: $DEFAULT_PORT)"
+    exit 1
+}
+
+# Przetwarzanie argumentów
+while getopts ":p:" opt; do
+    case ${opt} in
+        p )
+            PORT=$OPTARG
+            ;;
+        \? )
+            usage
+            ;;
+    esac
+done
+
+# Jeśli port nie został podany, użyj domyślnego
+PORT=${PORT:-$DEFAULT_PORT}
+
+# Zatrzymaj i usuń stary kontener, jeśli istnieje
+echo "Zatrzymywanie i usuwanie starego kontenera..."
+docker stop $PROJECT_NAME 2>/dev/null
+docker rm $PROJECT_NAME 2>/dev/null
+
+# Zbuduj nowy obraz
+echo "Budowanie nowego obrazu..."
+docker build -t $PROJECT_NAME .
+
+# Uruchom nowy kontener
+echo "Uruchamianie nowego kontenera na porcie $PORT..."
+docker run -d --name $PROJECT_NAME -p $PORT:8080 $PROJECT_NAME
+
+# Wyświetl informacje o uruchomionym kontenerze
+echo "Kontener uruchomiony. Szczegóły:"
+docker ps --filter name=$PROJECT_NAME
+
+echo "Aplikacja dostępna pod adresem: http://localhost:$PORT"
\ No newline at end of file