inicjalizacja projektu dodanie nowych stylow itp
This commit is contained in:
mateusz779
commit
e587c7a59c
27
Dockerfile
Normal file
27
Dockerfile
Normal file
@ -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"]
|
||||||
175
main.go
Normal file
175
main.go
Normal file
@ -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)
|
||||||
|
}
|
||||||
87
public/app.html
Normal file
87
public/app.html
Normal file
@ -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>
|
||||||
301
public/index.html
Normal file
301
public/index.html
Normal file
@ -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>
|
||||||
121
public/style_app.css
Normal file
121
public/style_app.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
241
public/style_index.css
Normal file
241
public/style_index.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
38
readme.md
Normal file
38
readme.md
Normal file
@ -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.
|
||||||
50
run_container.sh
Executable file
50
run_container.sh
Executable file
@ -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"
|
||||||
Loading…
Reference in New Issue
Block a user