Skip to content
GitLab
Commit 2fcf6e38 authored by Weiser's avatar Weiser
Browse files

Updates

parent a419b9f6
Hide whitespace changes
Inline Side-by-side
frontend/old/indexold.html deleted 100644 → 0
View file @ a419b9f6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles/styles.css" />
<title>Wetter App</title>
</head>
<body>
<div class="container">
<div class="box">
<h1>Wetterdaten abrufen</h1>
<div class="filter">
<label for="city">Stadt:</label>
<input type="text" id="city" placeholder="Stadt" /><br />
<label for="start">Startdatum:</label>
<input type="date" id="start" value="2024-04-24" /><br />
<label for="end">Enddatum:</label>
<input type="date" id="end" value="2024-05-08" /><br />
<label for="storage">Speicherort:</label>
<select id="storage">
<option value="local">Lokal</option>
<option value="database">Datenbank</option></select><br />
<label for="format">Datenformat:</label>
<select id="format">
<option value="json">JSON</option>
<option value="csv">CSV</option>
<option value="xml">XML</option></select
><br />
<button onclick="getData()">Daten abrufen</button>
</div>
</div>
<div class="box">
<h2>Wetterdaten</h2>
<pre id="weatherData"></pre>
</div>
</div>
<script type="text/javascript" src="scripts/script.js"></script>
</body>
</html>
frontend/old/script.js deleted 100644 → 0
View file @ a419b9f6
function getData() {
const city = document.getElementById("city").value;
const start = document.getElementById("start").value;
const end = document.getElementById("end").value;
const storageOption = document.getElementById("storage").value;
const formatOption = document.getElementById("format").value;
const apiKey = "1244099aeaee4b179e6111803241304";
const apiUrl = `https://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${city}&aqi=no`;
fetch(apiUrl)
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => {
// Wetterdaten anzeigen
document.getElementById("weatherData").innerText = JSON.stringify(
data,
null,
2
);
})
.catch((error) => {
console.error("There was a problem with the fetch operation:", error);
});
}
frontend/old/styles.css deleted 100644 → 0
View file @ a419b9f6
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.box {
margin-bottom: 20px;
}
.filter label {
display: block;
margin-bottom: 5px;
}
.filter input[type="text"],
.filter select {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.filter button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.filter button:hover {
background-color: #0056b3;
}
#weatherData {
white-space: pre-wrap; /* Umbruch von langen Zeilen */
}
frontend/src/components/contact4.js
View file @ 2fcf6e38
......@@ -23,9 +23,6 @@ const Contact4 = (props) => {
<div className="contact4-contact-info">
<div className="contact4-content2">
<h3 className="contact4-text3 thq-heading-3">Email</h3>
<p className="contact4-text4 thq-body-large">
{props.content3}
</p>
</div>
<span className="contact4-email thq-body-small">
{props.email1}
......@@ -42,9 +39,6 @@ const Contact4 = (props) => {
<div className="contact4-contact-info1">
<div className="contact4-content4">
<h3 className="contact4-text5 thq-heading-3">Phone</h3>
<p className="contact4-text6 thq-body-large">
{props.content4}
</p>
</div>
<span className="contact4-phone thq-body-small">
{props.phone1}
......@@ -61,9 +55,6 @@ const Contact4 = (props) => {
<div className="contact4-contact-info2">
<div className="contact4-content6">
<h3 className="contact4-text7 thq-heading-3">Office</h3>
<p className="contact4-text8 thq-body-large">
{props.content5}
</p>
</div>
<span className="contact4-address thq-body-small">
{props.address1}
......@@ -77,18 +68,13 @@ const Contact4 = (props) => {
}
Contact4.defaultProps = {
email1: 'info@weatherapp.com',
email1: '22kaen1bdi@hft-stuttgart.de',
content2: 'Get in touch with us today!',
address1: '123 Weather Street, City, Country',
address1: 'Schellingstraße 24, 70174 Stuttgart, Germany',
heading1: 'Contact Us',
content1: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ',
content1: 'Contact our dear founder directly!',
phone1: '+123-456-7890',
content3:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in ero.',
content4:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in ero.',
content5:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in ero.',
}
Contact4.propTypes = {
......@@ -98,9 +84,7 @@ Contact4.propTypes = {
heading1: PropTypes.string,
content1: PropTypes.string,
phone1: PropTypes.string,
content3: PropTypes.string,
content4: PropTypes.string,
content5: PropTypes.string,
}
export default Contact4
frontend/src/components/cta1.js
View file @ 2fcf6e38
......@@ -30,10 +30,10 @@ const CTA1 = (props) => {
}
CTA1.defaultProps = {
action1: 'Get Weather Updates',
heading1: 'Plan Your Day with Accurate Weather Forecasts',
action1: 'Weather history',
heading1: 'What was the Weather like yesterday?',
content1:
'Stay informed about the weather conditions in your city or any location worldwide.',
'You can Download Historical Weather Data as far as 1940!',
action2: 'Try Now',
}
......
frontend/src/components/faq1.css deleted 100644 → 0
View file @ a419b9f6
.faq1-faq7 {
display: flex;
overflow: hidden;
position: relative;
align-items: center;
flex-direction: column;
}
.faq1-max-width {
gap: var(--dl-space-space-fiveunits);
display: flex;
align-items: center;
flex-direction: column;
}
.faq1-text1 {
text-align: center;
}
.faq1-list-item1 {
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.faq1-faq1-question {
font-style: normal;
text-align: center;
font-weight: 600;
}
.faq1-list-item2 {
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.faq1-faq2-question {
font-style: normal;
text-align: center;
font-weight: 600;
}
.faq1-list-item3 {
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.faq1-faq3-question {
font-style: normal;
text-align: center;
font-weight: 600;
}
.faq1-list-item4 {
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.faq1-faq4-question {
font-style: normal;
text-align: center;
font-weight: 600;
}
.faq1-list-item5 {
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.faq1-faq5-question {
font-style: normal;
text-align: center;
font-weight: 600;
}
.faq1-content1 {
gap: 16px;
display: flex;
align-self: stretch;
align-items: center;
flex-direction: column;
}
.faq1-text3 {
text-align: center;
}
.faq1-container {
display: flex;
position: relative;
}
@media(max-width: 991px) {
.faq1-max-width {
gap: var(--dl-space-space-oneandhalfunits);
}
}
@media(max-width: 767px) {
.faq1-text1 {
text-align: left;
}
.faq1-list {
gap: var(--dl-space-space-twounits);
}
.faq1-button {
width: 100%;
}
}
frontend/src/components/faq1.js deleted 100644 → 0
View file @ a419b9f6
import React from 'react'
import PropTypes from 'prop-types'
import './faq1.css'
const FAQ1 = (props) => {
return (
<div className="faq1-faq7 thq-section-padding">
<div className="faq1-max-width thq-section-max-width">
<div className="thq-flex-column">
<h2 className="thq-heading-2">{props.heading1}</h2>
<p className="faq1-text1 thq-body-large">{props.content1}</p>
</div>
<div className="thq-flex-column faq1-list">
<div className="faq1-list-item1">
<p className="faq1-faq1-question thq-body-large">
{props.faq1Question}
</p>
<span className="thq-body-small">{props.faq1Answer}</span>
</div>
<div className="faq1-list-item2">
<p className="faq1-faq2-question thq-body-large">
{props.faq2Question}
</p>
<span className="thq-body-small">{props.faq2Answer}</span>
</div>
<div className="faq1-list-item3">
<p className="faq1-faq3-question thq-body-large">
{props.faq3Question}
</p>
<span className="thq-body-small">{props.faq3Answer}</span>
</div>
<div className="faq1-list-item4">
<p className="faq1-faq4-question thq-body-large">
{props.faq4Question}
</p>
<span className="thq-body-small">{props.faq4Answer}</span>
</div>
<div className="faq1-list-item5">
<p className="faq1-faq5-question thq-body-large">
{props.faq5Question}
</p>
<span className="thq-body-small">{props.faq5Answer}</span>
</div>
</div>
<div className="thq-flex-column">
<div className="faq1-content1">
<h2 className="thq-heading-2">{props.heading2}</h2>
<p className="faq1-text3 thq-body-large">{props.content2}</p>
</div>
<div className="faq1-container">
<button className="thq-button-outline faq1-button">
<span className="thq-body-small">{props.action1}</span>
</button>
</div>
</div>
</div>
</div>
)
}
FAQ1.defaultProps = {
faq4Answer:
'Yes, you can view the weather forecast for the upcoming days to plan ahead.',
faq5Question: 'How accurate is the weather data provided?',
action1: 'Contact',
faq1Question: 'How do I search for weather information?',
faq4Question: 'Can I view the weather forecast for multiple days?',
faq3Answer:
'Yes, the weather information is updated in real-time to provide you with the most accurate data.',
faq3Question: 'Is the weather information updated in real-time?',
content1:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.',
content2: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ',
heading2: 'Still have a question?',
heading1: 'FAQs',
faq5Answer:
'The weather data is sourced from reliable sources to provide accurate and up-to-date information.',
faq1Answer:
'You can input the city and country, or the latitude and longitude of the city in the search bar to get weather information.',
faq2Answer:
'Yes, you can create an account and save your favorite cities for quick access to their weather information.',
faq2Question: 'Can I save my favorite cities for quick access?',
}
FAQ1.propTypes = {
faq4Answer: PropTypes.string,
faq5Question: PropTypes.string,
action1: PropTypes.string,
faq1Question: PropTypes.string,
faq4Question: PropTypes.string,
faq3Answer: PropTypes.string,
faq3Question: PropTypes.string,
content1: PropTypes.string,
content2: PropTypes.string,
heading2: PropTypes.string,
heading1: PropTypes.string,
faq5Answer: PropTypes.string,
faq1Answer: PropTypes.string,
faq2Answer: PropTypes.string,
faq2Question: PropTypes.string,
}
export default FAQ1
frontend/src/components/footer15.js
View file @ 2fcf6e38
......@@ -39,28 +39,33 @@ const Footer15 = (props) => {
<svg
viewBox="0 0 877.7142857142857 1024"
className="thq-icon-small"
onClick={() => window.open("https://www.facebook.com/HFTStuttgart/?locale=de_DE", "_blank")}
>
<path d="M713.143 73.143c90.857 0 164.571 73.714 164.571 164.571v548.571c0 90.857-73.714 164.571-164.571 164.571h-107.429v-340h113.714l17.143-132.571h-130.857v-84.571c0-38.286 10.286-64 65.714-64l69.714-0.571v-118.286c-12-1.714-53.714-5.143-101.714-5.143-101.143 0-170.857 61.714-170.857 174.857v97.714h-114.286v132.571h114.286v340h-304c-90.857 0-164.571-73.714-164.571-164.571v-548.571c0-90.857 73.714-164.571 164.571-164.571h548.571z"></path>
</svg>
<svg
viewBox="0 0 877.7142857142857 1024"
className="thq-icon-small"
onClick={() => window.open("https://www.instagram.com/hft_stuttgart/", "_blank")}
>
<path d="M585.143 512c0-80.571-65.714-146.286-146.286-146.286s-146.286 65.714-146.286 146.286 65.714 146.286 146.286 146.286 146.286-65.714 146.286-146.286zM664 512c0 124.571-100.571 225.143-225.143 225.143s-225.143-100.571-225.143-225.143 100.571-225.143 225.143-225.143 225.143 100.571 225.143 225.143zM725.714 277.714c0 29.143-23.429 52.571-52.571 52.571s-52.571-23.429-52.571-52.571 23.429-52.571 52.571-52.571 52.571 23.429 52.571 52.571zM438.857 152c-64 0-201.143-5.143-258.857 17.714-20 8-34.857 17.714-50.286 33.143s-25.143 30.286-33.143 50.286c-22.857 57.714-17.714 194.857-17.714 258.857s-5.143 201.143 17.714 258.857c8 20 17.714 34.857 33.143 50.286s30.286 25.143 50.286 33.143c57.714 22.857 194.857 17.714 258.857 17.714s201.143 5.143 258.857-17.714c20-8 34.857-17.714 50.286-33.143s25.143-30.286 33.143-50.286c22.857-57.714 17.714-194.857 17.714-258.857s5.143-201.143-17.714-258.857c-8-20-17.714-34.857-33.143-50.286s-30.286-25.143-50.286-33.143c-57.714-22.857-194.857-17.714-258.857-17.714zM877.714 512c0 60.571 0.571 120.571-2.857 181.143-3.429 70.286-19.429 132.571-70.857 184s-113.714 67.429-184 70.857c-60.571 3.429-120.571 2.857-181.143 2.857s-120.571 0.571-181.143-2.857c-70.286-3.429-132.571-19.429-184-70.857s-67.429-113.714-70.857-184c-3.429-60.571-2.857-120.571-2.857-181.143s-0.571-120.571 2.857-181.143c3.429-70.286 19.429-132.571 70.857-184s113.714-67.429 184-70.857c60.571-3.429 120.571-2.857 181.143-2.857s120.571-0.571 181.143 2.857c70.286 3.429 132.571 19.429 184 70.857s67.429 113.714 70.857 184c3.429 60.571 2.857 120.571 2.857 181.143z"></path>
</svg>
<svg
viewBox="0 0 950.8571428571428 1024"
className="thq-icon-small"
onClick={() => window.open("https://twitter.com/Hftonline", "_blank")}
>
<path d="M925.714 233.143c-25.143 36.571-56.571 69.143-92.571 95.429 0.571 8 0.571 16 0.571 24 0 244-185.714 525.143-525.143 525.143-104.571 0-201.714-30.286-283.429-82.857 14.857 1.714 29.143 2.286 44.571 2.286 86.286 0 165.714-29.143 229.143-78.857-81.143-1.714-149.143-54.857-172.571-128 11.429 1.714 22.857 2.857 34.857 2.857 16.571 0 33.143-2.286 48.571-6.286-84.571-17.143-148-91.429-148-181.143v-2.286c24.571 13.714 53.143 22.286 83.429 23.429-49.714-33.143-82.286-89.714-82.286-153.714 0-34.286 9.143-65.714 25.143-93.143 90.857 112 227.429 185.143 380.571 193.143-2.857-13.714-4.571-28-4.571-42.286 0-101.714 82.286-184.571 184.571-184.571 53.143 0 101.143 22.286 134.857 58.286 41.714-8 81.714-23.429 117.143-44.571-13.714 42.857-42.857 78.857-81.143 101.714 37.143-4 73.143-14.286 106.286-28.571z"></path>
</svg>
<svg
viewBox="0 0 877.7142857142857 1024"
className="thq-icon-small"
onClick={() => window.open("https://www.linkedin.com/school/hochschule-f%C3%BCr-technik-stuttgart-%E2%80%93-university-of-applied-sciences/", "_blank")}
>
<path d="M135.429 808h132v-396.571h-132v396.571zM276 289.143c-0.571-38.857-28.571-68.571-73.714-68.571s-74.857 29.714-74.857 68.571c0 37.714 28.571 68.571 73.143 68.571h0.571c46.286 0 74.857-30.857 74.857-68.571zM610.286 808h132v-227.429c0-121.714-65.143-178.286-152-178.286-70.857 0-102.286 39.429-119.429 66.857h1.143v-57.714h-132s1.714 37.143 0 396.571v0h132v-221.714c0-11.429 0.571-23.429 4-32 9.714-23.429 31.429-48 68-48 47.429 0 66.286 36 66.286 89.714v212zM877.714 237.714v548.571c0 90.857-73.714 164.571-164.571 164.571h-548.571c-90.857 0-164.571-73.714-164.571-164.571v-548.571c0-90.857 73.714-164.571 164.571-164.571h548.571c90.857 0 164.571 73.714 164.571 164.571z"></path>
</svg>
<svg viewBox="0 0 1024 1024" className="thq-icon-small">
<svg viewBox="0 0 1024 1024" className="thq-icon-small"
onClick={() => window.open("https://www.youtube.com/channel/UCi0_JfF2qMZbOhOnNH5PyHA", "_blank")}>
<path d="M406.286 644.571l276.571-142.857-276.571-144.571v287.429zM512 152c215.429 0 358.286 10.286 358.286 10.286 20 2.286 64 2.286 102.857 43.429 0 0 31.429 30.857 40.571 101.714 10.857 82.857 10.286 165.714 10.286 165.714v77.714s0.571 82.857-10.286 165.714c-9.143 70.286-40.571 101.714-40.571 101.714-38.857 40.571-82.857 40.571-102.857 42.857 0 0-142.857 10.857-358.286 10.857v0c-266.286-2.286-348-10.286-348-10.286-22.857-4-74.286-2.857-113.143-43.429 0 0-31.429-31.429-40.571-101.714-10.857-82.857-10.286-165.714-10.286-165.714v-77.714s-0.571-82.857 10.286-165.714c9.143-70.857 40.571-101.714 40.571-101.714 38.857-41.143 82.857-41.143 102.857-43.429 0 0 142.857-10.286 358.286-10.286v0z"></path>
</svg>
</div>
......@@ -91,7 +96,7 @@ Footer15.defaultProps = {
copyright: "© 2024 Weather Applikation. All rights reserved.",
privacyLink: "Privacy Policy",
termsLink: "Terms of Use",
logoSrc: "../frontend/public/external/HFT-Logo.png",
logoSrc: "/public/external/HFT-Logo.png",
content2: "Stay updated with the latest weather information.",
logoAlt: "HFT-Logo",
content1: "Get accurate weather forecasts for any location.",
......
frontend/src/components/navbar4.js
View file @ 2fcf6e38
......@@ -21,15 +21,18 @@ const Navbar4 = (props) => {
>
{props.link1}
</span>
<span className="thq-link thq-body-small">{props.link2}</span>
<span className="thq-link thq-body-small">{props.link3}</span>
<span className="thq-link thq-body-small"
onClick={() => (window.location.href = "/about")}>{props.link2}</span>
<span className="thq-link thq-body-small"
onClick={() => (window.location.href = "/contact")}>{props.link3}</span>
<span
className="thq-link thq-body-small"
onClick={() => (window.location.href = "/data")}
>
{props.link4}
</span>
<span className="thq-link thq-body-small">{props.link5}</span>
<span className="thq-link thq-body-small"
onClick={() => (window.location.href = "/historicalweather")}>{props.link5}</span>
</nav>
<div className="navbar4-buttons">
<button className="thq-button-filled">{props.action1}</button>
......@@ -42,8 +45,8 @@ const Navbar4 = (props) => {
};
Navbar4.defaultProps = {
link5: "Link5",
link4: "Data",
link5: "Historical weather",
link4: "Current Weather",
link3: "Contact",
link2: "About",
link1: "Home",
......
frontend/src/index.js
View file @ 2fcf6e38
......@@ -10,14 +10,20 @@ import {
import "./style.css";
import Home from "./views/home";
import Data from "./views/data";
import About from "./views/about";
import Contact from "./views/contact";
import NotFound from "./views/not-found";
import Historicalweather from "./views/historicalweather";
const App = () => {
return (
<Router>
<Switch>
<Route component={Home} exact path="/" />
<Route component={About} exact path="/about" />
<Route component={Contact} exact path="/contact" />
<Route component={Data} exact path="/data" />
<Route component={Historicalweather} exact path="/historicalweather" />
<Route component={NotFound} path="**" />
<Redirect to="**" />
</Switch>
......
frontend/src/views/about.js 0 → 100644
View file @ 2fcf6e38
import React from "react";
import Navbar4 from "../components/navbar4";
import Footer15 from "../components/footer15";
import "./home.css";
const About = (props) => {
//JS Code
return (
<div className="home-container">
<div className="home-navbar1">
<Navbar4 rootClassName="navbar4-root-class-name"></Navbar4>
</div>
<div className="home-footer11">
<Footer15></Footer15>
</div>
</div>
);
};
export default About;
\ No newline at end of file
frontend/src/views/contact.js 0 → 100644
View file @ 2fcf6e38
import React from "react";
import Navbar4 from "../components/navbar4";
import Footer15 from "../components/footer15";
import "./home.css";
const Contact = (props) => {
//JS Code
return (
<div className="home-container">
<div className="home-navbar1">
<Navbar4 rootClassName="navbar4-root-class-name"></Navbar4>
</div>
<div className="home-footer11">
<Footer15></Footer15>
</div>
</div>
);
};
export default Contact;
\ No newline at end of file
frontend/src/views/historicalweather.js 0 → 100644
View file @ 2fcf6e38
import React from "react";
import Navbar4 from "../components/navbar4";
import Footer15 from "../components/footer15";
import "./home.css";
const Historicalweather = (props) => {
//JS Code
return (
<div className="home-container">
<div className="home-navbar1">
<Navbar4 rootClassName="navbar4-root-class-name"></Navbar4>
</div>
<div className="home-footer11">
<Footer15></Footer15>
</div>
</div>
);
};
export default Historicalweather;
\ No newline at end of file
frontend/src/views/home.js
View file @ 2fcf6e38
......@@ -10,7 +10,6 @@ import Features17 from "../components/features17";
import Features18 from "../components/features18";
import Features171 from "../components/features171";
import CTA1 from "../components/cta1";
import FAQ1 from "../components/faq1";