added license

changed logo
added icon
2026-04-15 19:39:03 +02:00 · 2026-03-26 23:31:52 +01:00 · 2026-03-26 23:06:20 +01:00 · 2025-11-26 19:28:15 +01:00 · 2025-08-03 23:47:32 +02:00 · 2025-08-03 22:21:46 +02:00
16 changed files with 96 additions and 36 deletions
@@ -112,3 +112,5 @@ backend/public/uploads/
 config/
 secrets/
 keys/
 icon/
@@ -0,0 +1,6 @@
 Copyright (c) 2026 Theis Gaedigk
 All rights reserved.
 This source code is not to be copied, modified, or distributed in any form
 without explicit written permission from the author.
@@ -0,0 +1,9 @@
 ## Release Notes
 ### New Features
 - Changed **web panel** backend, so you don't need to set the API key anymore. [Web Panel](https://weather.the1s.de)
 - You can now see the **last updated** time in the web panel.
 ### Improvements
 - Changed Website Icons to lucide react icons
 - Changed overall handling of the panel
@@ -3,13 +3,8 @@ services:
    container_name: frontend
    build: ./frontend
    ports:
-      - "7002:7002"
+      - "7002:80"
-    environment:
+    restart: always
      - CHOKIDAR_USEPOLLING=true
    volumes:
      - ./frontend:/app
      - /app/node_modules
    restart: unless-stopped
 #  backend:
 #   container_name: backend
 #  build: ./backend
@@ -1,12 +1,19 @@
-FROM node:20-alpine
+FROM node:22-alpine AS builder
 WORKDIR /app
-COPY package*.json ./
+COPY package.json package-lock.json ./
-RUN npm install
+RUN npm ci
 COPY . .
 RUN npm run build
-EXPOSE 7002
+FROM nginx:alpine AS runner
-CMD ["npm", "run", "dev"]
+WORKDIR /usr/share/nginx/html
 COPY --from=builder /app/dist .
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]
@@ -1,12 +1,8 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link
+    <link rel="icon" type="image/png" href="/icon_weather-app_dark.png" />
      rel="icon"
      type="image/svg+xml"
      href="./src/assets/cloud-sun-fill.png"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Weather App</title>
  </head>
@@ -0,0 +1,18 @@
 server {
  listen 80;
  server_name _;
  root /usr/share/nginx/html;
  index index.html;
  location / {
    try_files $uri $uri/ /index.html;
  }
  location ~* \.(?:js|mjs|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
    expires 1y;
    access_log off;
    add_header Cache-Control "public, immutable";
    try_files $uri =404;
  }
 }
@@ -1 +0,0 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
@@ -53,7 +53,7 @@ const ChangeAPI: React.FC<Props> = ({ currentAPIKey, onClose }) => {
        </div>
        <button
          type="submit"
-          className="bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-6 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
+          className="cursor-pointer bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-6 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
          onClick={handleUpdate}
        >
          Update API Key
@@ -47,7 +47,7 @@ const ChangePreferences: React.FC<Props> = ({ onClose }) => {
            Temperature Unit
          </label>
          <select
-            className="w-full border-2 border-blue-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 transition"
+            className="cursor-pointer w-full border-2 border-blue-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 transition"
            value={unit}
            onChange={(e) => setUnit(e.target.value)}
          >
@@ -63,7 +63,7 @@ const ChangePreferences: React.FC<Props> = ({ onClose }) => {
            Theme
          </label>
          <select
-            className="w-full border-2 border-blue-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 transition"
+            className="cursor-pointer w-full border-2 border-blue-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 transition"
            value={theme}
            onChange={(e) => setTheme(e.target.value)}
          >
@@ -77,7 +77,7 @@ const ChangePreferences: React.FC<Props> = ({ onClose }) => {
        {/* Submit */}
        <button
          type="submit"
-          className="w-full bg-gradient-to-r from-blue-600 to-blue-400 text-white py-3 rounded-xl font-bold text-lg shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all focus:outline-none focus:ring-2 focus:ring-blue-400"
+          className="cursor-pointer w-full bg-gradient-to-r from-blue-600 to-blue-400 text-white py-3 rounded-xl font-bold text-lg shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all focus:outline-none focus:ring-2 focus:ring-blue-400"
        >
          Save Preferences
        </button>
@@ -3,7 +3,7 @@ import ChangeAPI from "./ChangeAPI";
 import ChangePreferences from "./ChangePreferences";
 import { useState } from "react";
 import Cookies from "js-cookie";
-import logo from "../assets/cloud-sun-fill.png";
+import logo from "/icon_weather-app_default.png";
 import { Github, KeyRound, Settings2 } from "lucide-react";
 const Header: React.FC = () => {
@@ -21,14 +21,14 @@ const Header: React.FC = () => {
            className="w-10 h-10 drop-shadow-lg"
          />
          <h1 className="text-4xl font-extrabold tracking-wide drop-shadow-lg">
-            Weather App
+            Weather App - <strong>Local hosted</strong>
          </h1>
        </div>
        <div className="flex items-center gap-4">
          {" "}
          {/* Added container for buttons */}
          <button
-            className="bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2"
+            className="cursor-pointer bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2"
            onClick={() => setApiCard(true)}
          >
            <span className="flex items-center gap-2">
@@ -37,7 +37,7 @@ const Header: React.FC = () => {
            </span>
          </button>
          <button
-            className="bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2"
+            className="cursor-pointer bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2"
            onClick={() => setPreferencesCard(true)}
          >
            <span className="flex items-center gap-2">
@@ -50,7 +50,7 @@ const Header: React.FC = () => {
            target="_blank"
            rel="noopener noreferrer"
          >
-            <button className="bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2">
+            <button className="cursor-help bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2">
              <span className="flex items-center gap-2">
                <Github /> Docs
              </span>
@@ -1,5 +1,6 @@
 import React from "react";
 import { Sunrise, Sunset } from "lucide-react";
 import { getDateTime } from "../utils/utils";
 const WeatherData: React.FC = () => {
  const weatherRaw = localStorage.getItem("weather");
@@ -75,6 +76,11 @@ const WeatherData: React.FC = () => {
                : "--:--"}
            </span>
          </div>
          <div className="flex items-center gap-3">
            <span className="text-base text-gray-600 italic font-semibold">
              Last updated: {getDateTime()}
            </span>
          </div>
        </div>
      </div>
    </div>
@@ -9,7 +9,6 @@ import { X } from "lucide-react";
 const WeatherCard: React.FC = () => {
  const [city, setCity] = useState("");
  const [loading, setLoading] = useState(false);
  const [weatherData, setWeatherData] = useState(false);
  const getAPIKey = () => Cookies.get("apiKey") || "";
  const getUnit = () => localStorage.getItem("unit") || "metric";
@@ -20,13 +19,10 @@ const WeatherCard: React.FC = () => {
  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setLoading(true);
    toast
      .promise(fetchWeather(city, getAPIKey(), getUnit()), {
        pending: "Fetching weather data...",
        success: "Weather data loaded successfully!",
        error:
          "Failed to load weather data. Please check your entered city name. (Error: x4040)",
      })
      .then(() => {
        if (localStorage.getItem("weather")) {
@@ -34,7 +30,6 @@ const WeatherCard: React.FC = () => {
        } else {
          setWeatherData(false);
        }
        setLoading(false);
      });
  };
@@ -55,6 +50,9 @@ const WeatherCard: React.FC = () => {
      <p className="mb-2 text-gray-600">
        Current weather will be displayed here.
      </p>
      <p className="mb-2 text-gray-600">
        <strong>Make sure to set your API key in the header section.</strong>
      </p>
      <form onSubmit={handleSubmit} className="flex flex-col gap-4 mt-4">
        <label htmlFor="city" className="font-medium text-gray-700">
          Enter City:
@@ -72,7 +70,7 @@ const WeatherCard: React.FC = () => {
        <div className="flex items-center gap-2">
          <button
            type="submit"
-            className="flex-1 bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-4 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
+            className="cursor-pointer flex-1 bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-4 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
          >
            Get Weather
          </button>
@@ -83,7 +81,7 @@ const WeatherCard: React.FC = () => {
                setWeatherData(false);
                localStorage.removeItem("weather");
              }}
-              className="flex-shrink-0 bg-red-500 hover:bg-red-600 text-white rounded-xl p-3 shadow-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-400"
+              className="cursor-pointer flex-shrink-0 bg-red-500 hover:bg-red-600 text-white rounded-xl p-3 shadow-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-400"
              aria-label="Close weather data"
            >
              <X />
@@ -0,0 +1,24 @@
 export const getDateTime = () => {
  const now = new Date();
  const day = now.getDate();
  const month = now.toLocaleString("en-GB", { month: "long" });
  const hours = now.getHours().toString().padStart(2, "0");
  const minutes = now.getMinutes().toString().padStart(2, "0");
  // Ordinal suffix
  const getOrdinal = (n: number) => {
    if (n > 3 && n < 21) return "th";
    switch (n % 10) {
      case 1:
        return "st";
      case 2:
        return "nd";
      case 3:
        return "rd";
      default:
        return "th";
    }
  };
  return `${day}${getOrdinal(day)} ${month}, ${hours}:${minutes}`;
 };
Author	SHA1	Message	Date
theis.gaedigk	a261ce8090	added license	2026-04-15 19:39:03 +02:00
theis.gaedigk	1b83ed51cb	changed logo	2026-03-26 23:31:52 +01:00
theis.gaedigk	6f839a67f4	added icon	2026-03-26 23:06:20 +01:00
theis.gaedigk	04c82dd9d4	added react build	2025-11-26 19:28:15 +01:00
theis.gaedigk	20bee1018c	fixed bug: Error handling when submitting form with wrong api key	2025-08-03 23:47:32 +02:00
theis.gaedigk	f32ddd837b	feat: update release notes to include last updated time feature in web panel	2025-08-03 22:21:46 +02:00
theis.gaedigk	38ef97b553	feat: add last updated timestamp to WeatherData component	2025-08-03 22:21:19 +02:00
theis.gaedigk	ff77629a01	feat: add release notes with new features and improvements	2025-08-03 19:52:35 +02:00
theis.gaedigk	4c42bd94ea	fix: add cursor pointer to buttons for better UX and update WeatherForm instructions	2025-08-03 19:45:01 +02:00
theis.gaedigk	784822fa9a	removed loading state and fixed bug with that	2025-08-03 03:27:32 +02:00
		`@@ -1 +0,0 @@`
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>