theis.gaedigk/weather-app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat: update HTML structure and add logo for Weather App; remove unused SVG from WeatherCard

Browse Source
This commit is contained in:
theis.gaedigk
2025-07-31 17:27:50 +02:00
parent e3915a0ca4
commit a39e22fab9
5 changed files with 14 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/index.html
View File

@@ -1,10 +1,14 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link
rel="icon"
type="image/svg+xml"
href="./src/assets/cloud-sun-fill.svg"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>Weather App</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

4
frontend/src/assets/cloud-sun-fill.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-sun-fill" viewBox="0 0 16 16">
<path d="M11.473 11a4.5 4.5 0 0 0-8.72-.99A3 3 0 0 0 3 16h8.5a2.5 2.5 0 0 0 0-5z"/>
<path d="M10.5 1.5a.5.5 0 0 0-1 0v1a.5.5 0 0 0 1 0zm3.743 1.964a.5.5 0 1 0-.707-.707l-.708.707a.5.5 0 0 0 .708.708zm-7.779-.707a.5.5 0 0 0-.707.707l.707.708a.5.5 0 1 0 .708-.708zm1.734 3.374a2 2 0 1 1 3.296 2.198q.3.423.516.898a3 3 0 1 0-4.84-3.225q.529.017 1.028.129m4.484 4.074c.6.215 1.125.59 1.522 1.072a.5.5 0 0 0 .039-.742l-.707-.707a.5.5 0 0 0-.854.377M14.5 6.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 632 B

3
frontend/src/components/Header.tsx
View File

@@ -2,6 +2,7 @@ import React from "react";
import ChangeAPI from "./ChangeAPI"; import ChangeAPI from "./ChangeAPI";
import { useState } from "react"; import { useState } from "react";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import logo from "../assets/cloud-sun-fill.svg";
const Header: React.FC = () => { const Header: React.FC = () => {
const [apiCard, setApiCard] = useState(false); const [apiCard, setApiCard] = useState(false);
@@ -12,7 +13,7 @@ const Header: React.FC = () => {
<header className="bg-gradient-to-r from-blue-700 via-blue-600 to-blue-500 text-white shadow-lg py-8 px-6 flex items-center justify-between rounded-b-3xl"> <header className="bg-gradient-to-r from-blue-700 via-blue-600 to-blue-500 text-white shadow-lg py-8 px-6 flex items-center justify-between rounded-b-3xl">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<img <img
src="/favicon.ico" src={logo}
alt="Weather App Logo" alt="Weather App Logo"
className="w-10 h-10 drop-shadow-lg" className="w-10 h-10 drop-shadow-lg"
/> />

9
frontend/src/components/WeatherData.tsx
View File

@@ -16,15 +16,6 @@ const WeatherData: React.FC = () => {
<div className="flex justify-center items-center min-h-[60vh]"> <div className="flex justify-center items-center min-h-[60vh]">
<div className="bg-white/90 p-10 rounded-2xl shadow-2xl min-w-[320px] text-center border-2 border-blue-200"> <div className="bg-white/90 p-10 rounded-2xl shadow-2xl min-w-[320px] text-center border-2 border-blue-200">
<h2 className="text-3xl font-bold mb-2 text-blue-700 flex items-center justify-center gap-2"> <h2 className="text-3xl font-bold mb-2 text-blue-700 flex items-center justify-center gap-2">
<svg
className="w-7 h-7 text-blue-400"
fill="none"
stroke="currentColor"
strokeWidth="2"
viewBox="0 0 24 24"
>
<path d="M3 12a9 9 0 0118 0A9 9 0 013 12z" />
</svg>
{weatherData?.name} {weatherData?.name}
</h2> </h2>
<p className="text-5xl font-extrabold mb-2 text-blue-900"> <p className="text-5xl font-extrabold mb-2 text-blue-900">

11
frontend/src/components/WeatherForm.tsx
View File

@@ -48,16 +48,7 @@ const WeatherCard: React.FC = () => {
return ( return (
<div className="w-full max-w-lg mx-auto bg-white/80 rounded-2xl shadow-xl p-8 mt-8"> <div className="w-full max-w-lg mx-auto bg-white/80 rounded-2xl shadow-xl p-8 mt-8">
<h2 className="text-3xl font-bold mb-4 text-blue-700 flex items-center gap-2"> <h2 className="text-3xl font-bold mb-4 text-blue-700 flex items-center gap-2">
<svg Weather
className="w-8 h-8 text-blue-400"
fill="none"
stroke="currentColor"
strokeWidth="2"
viewBox="0 0 24 24"
>
<path d="M3 12a9 9 0 0118 0A9 9 0 013 12z" />
</svg>
Weather Card
</h2> </h2>
<p className="mb-2 text-gray-600"> <p className="mb-2 text-gray-600">
Current weather will be displayed here. Current weather will be displayed here.