diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000000000000000000000000000000000..fe95ac31387e1a48595296c3eaad1417c7955c52
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+ "editor.formatOnPaste": true,
+ "editor.formatOnSave": true
+}
\ No newline at end of file
diff --git a/components/Andreas Animation.gif b/components/Andreas Animation.gif
new file mode 100644
index 0000000000000000000000000000000000000000..e5019733ea2bda1b43bbff4d26337c8c12954412
Binary files /dev/null and b/components/Andreas Animation.gif differ
diff --git a/components/Hydro.png b/components/Hydro.png
new file mode 100644
index 0000000000000000000000000000000000000000..a713f3e180d470f79eaa7042ecbe4563d1f61e2a
Binary files /dev/null and b/components/Hydro.png differ
diff --git a/components/Hydrotwo.png b/components/Hydrotwo.png
new file mode 100644
index 0000000000000000000000000000000000000000..3534e2e6a6508f04bc3031890e3c38310056b857
Binary files /dev/null and b/components/Hydrotwo.png differ
diff --git a/components/Navigation-bar.png b/components/Navigation-bar.png
new file mode 100644
index 0000000000000000000000000000000000000000..50a2d6a0a748be34ae8c37e34f939fc3750079f5
Binary files /dev/null and b/components/Navigation-bar.png differ
diff --git a/components/Next-Button.png b/components/Next-Button.png
new file mode 100644
index 0000000000000000000000000000000000000000..500ddb19d94619919f19ae2b6a4ba2b0e50fbe37
Binary files /dev/null and b/components/Next-Button.png differ
diff --git a/components/Solair_side.png b/components/Solair_side.png
new file mode 100644
index 0000000000000000000000000000000000000000..f32d7fa03ed9b597f3f374acdea054300247fdfc
Binary files /dev/null and b/components/Solair_side.png differ
diff --git a/components/Solaire.png b/components/Solaire.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8d3dfa4309b56b3447352a7184147d924f238a6
Binary files /dev/null and b/components/Solaire.png differ
diff --git a/components/Wind.png b/components/Wind.png
new file mode 100644
index 0000000000000000000000000000000000000000..32c3a282031d16b2e4bc3e2837d474a4e51d48c9
Binary files /dev/null and b/components/Wind.png differ
diff --git a/pages/2ndPage.js b/pages/2ndPage.js
index 92bc0e11599f92423074b062205236f26c93fe65..db667a381eced417f8c521ded21038c1967d32c6 100644
--- a/pages/2ndPage.js
+++ b/pages/2ndPage.js
@@ -1,44 +1,51 @@
-import React, { useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
+import React, { useState } from "react";
+import { useRouter } from "next/router";
-function ApiPage() {
- const [data, setData] = useState(null);
- const router = useRouter();
+const ThirdPage = () => {
+ const [animate, setAnimate] = useState(false);
+ const [clickCount, setClickCount] = useState(0); // Track button clicks
+ const [bubbleText, setBubbleText] = useState(
+ "Diese Solarplatinen fangen das Licht der Sonne ein und wandeln es durch den Photovoltaischen Effekt in elektrische Energie um, die wir für Häuser Geräte und alles andere nutzen."
+ ); // Speech bubble text
+ const router = useRouter(); //Macht das man Seite Wechseln Kann
+ const handleNavigate = () => {
+ // Geht zur Zweiten Seite
+ router.push("/3rdPage");
+ };
- useEffect(() => {
- fetch('https://jsonplaceholder.typicode.com/comments')
- .then((response) => response.json())
- .then((data) => setData(data.slice(0, 10))) // Ersten 10 Daten
- .catch((error) => console.error('Error fetching data:', error));
- }, []);
-
- const handleBack = () => {
- router.push('/'); // Zurück zur Start Seite
+ const triggerAnimation = () => {
+ if (clickCount === 1) {
+ handleNavigate(); // Redirect to the next page
+ } else {
+ setAnimate(true);
+ setClickCount(clickCount + 1);
+ setBubbleText(
+ "Die Sonne erzeugt keine Abgase und hinterlässt keine schädlichen Rückstände. Dieser Glorreichee Ball aus Feuer wird in gegenzatz zu Fossilen Brennstoffen noch für Millarden von Jahren brennen. Ein Wahres Symbol der Ewigekeit"
+ ); // Update speech bubble text
+ }
};
return (
- <div className='Second-Page'>
- <h1>API Seite</h1>
- {data && data.length > 0 ? ( // Prüft ob data frei ist und ob es sachen hat
- <div>
- <h2>Ersten 10 Kommentare von der API:</h2>
- <button onClick={handleBack}>Start Seite</button>
- <ul>
- {data.map((item) => (
- <li key={item.id}>
- <p><strong>Kommentar:</strong> {item.body}</p>
- </li>
- ))}
- </ul>
+ <div className="Second-Page">
+ <header className="header">
+ <div className="header-text"></div>
+ <div className="header-links">
+ <a href="/">Home Page</a>
+ <a href="/2ndPage">Solar Energy</a>
+ <a href="/3rdPage">Wind Energy</a>
+ <a href="/4thPage">Hydro Energy</a>
+ <a href="/SearchPage">Search Page</a>
+ </div>
+ </header>
+
+ <div className={`solair-side-img ${animate ? "animate" : ""}`}>
+ <img src="../components/Solair_side.png" alt="Solair Side" />
+ <div className={`speech-bubble-container ${animate ? "animate" : ""}`}>
+ <div className="speech-bubble">{bubbleText}</div>
</div>
- ) : (
- <p>Loading...</p>
- )}
+ </div>
+ <button onClick={triggerAnimation} className="next-button"></button>
</div>
);
-}
-
-//<p><strong>Email:</strong> {item.name}</p> //Name
-//<p><strong>Email:</strong> {item.email}</p> //Email
-
-export default ApiPage;
+};
+export default ThirdPage;
diff --git a/pages/3rdPage.js b/pages/3rdPage.js
new file mode 100644
index 0000000000000000000000000000000000000000..212bbf7f3b71db3e675e4ecd36df56831cf098be
--- /dev/null
+++ b/pages/3rdPage.js
@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+
+function ThirdPage() {
+ const [bubbleText, setBubbleText] = useState(
+ "Diese Gigantischen Maschinen nutzten die Kraft des Windes um Energie erzeugen, indem es ihre gigantischen Rotorblätter zu drehen bringt.Diese Bewegung wird in einem Generator in Strom umgewandelt. Einfach, sauber und *unendlich verfügbar. – *solange der Wind weht!"
+ );
+ const [clickCount, setClickCount] = useState(0);
+ const router = useRouter();
+ const handleNavigate = () => {
+ // Geht zur Zweiten Seite
+ router.push("/4thPage");
+ };
+
+ const triggerSpeech = () => {
+ if (clickCount === 1) {
+ handleNavigate(); // Redirect to the next page
+ } else {
+ setClickCount(clickCount + 1);
+ setBubbleText(
+ "Größe ist hier der Schlüssel. Je größer die Blätter, desto mehr Wind kann einfangen und in Energie umwandelt werden. Manche Turbinen reichen bis zu 200 Meter in den Himmel!"
+ ); // Update speech bubble text
+ }
+ };
+
+ return (
+ <div className="third-Page">
+ <header className="header">
+ <div className="header-text"></div>
+ <div className="header-links">
+ <a href="/">Home Page</a>
+ <a href="/2ndPage">Solar Energy</a>
+ <a href="/3rdPage">Wind Energy</a>
+ <a href="/4thPage">Hydro Energy</a>
+ <a href="/SearchPage">Search Page</a>
+ </div>
+ </header>
+
+ <div className="speech-bubble-2">{bubbleText}</div>
+ <button onClick={triggerSpeech} className="next-button"></button>
+ </div>
+ );
+}
+
+export default ThirdPage;
diff --git a/pages/4thPage.js b/pages/4thPage.js
new file mode 100644
index 0000000000000000000000000000000000000000..000e6fbf26d8a0acd948de5077f920364ef785e4
--- /dev/null
+++ b/pages/4thPage.js
@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+
+function fourthPage() {
+ const router = useRouter();
+ const handleNavigate = () => {
+ // Geht zur Zweiten Seite
+ router.push("/5thPage");
+ };
+
+ return (
+ <div className="fourth-page">
+ <header className="header">
+ <div className="header-text"></div>
+ <div className="header-links">
+ <a href="/">Home Page</a>
+ <a href="/2ndPage">Solar Energy</a>
+ <a href="/3rdPage">Wind Energy</a>
+ <a href="/4thPage">Hydro Energy</a>
+ <a href="/SearchPage">Search Page</a>
+ </div>
+ </header>
+ <button onClick={handleNavigate} className="next-button"></button>
+ </div>
+ );
+}
+export default fourthPage;
diff --git a/pages/5thPage.js b/pages/5thPage.js
new file mode 100644
index 0000000000000000000000000000000000000000..02c12a767ab3b2aeb6c2df0cebcf9d2e4e41de78
--- /dev/null
+++ b/pages/5thPage.js
@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+
+function fifthPage() {
+ const router = useRouter();
+ const handleNavigate = () => {
+ // Geht zur Zweiten Seite
+ router.push("/SearchPage");
+ };
+
+ return (
+ <div className="fifth-page">
+ <header className="header">
+ <div className="header-text"></div>
+ <div className="header-links">
+ <a href="/">Home Page</a>
+ <a href="/2ndPage">Solar Energy</a>
+ <a href="/3rdPage">Wind Energy</a>
+ <a href="/4thPage">Hydro Energy</a>
+ <a href="/SearchPage">Search Page</a>
+ </div>
+ </header>
+ <button onClick={handleNavigate} className="next-button"></button>
+ </div>
+ );
+}
+export default fifthPage;
diff --git a/pages/SearchPage.js b/pages/SearchPage.js
new file mode 100644
index 0000000000000000000000000000000000000000..05dcd345483a425307c155918b54dde9a57c4f01
--- /dev/null
+++ b/pages/SearchPage.js
@@ -0,0 +1,45 @@
+import EnergyOptionCard from "../components/EnergyOptionCard";
+import { useEffect, useState } from "react";
+import React from "react";
+function SearchPage() {
+ const [energyOptions, setEnergyOptions] = useState([]);
+
+ useEffect(() => {
+ async function fetchEnergyOptions() {
+ const res = await fetch("/api/energy-options");
+ const data = await res.json();
+ if (data.success) {
+ setEnergyOptions(data.data);
+ }
+ }
+
+ fetchEnergyOptions();
+ }, []);
+
+ return (
+ <div className="search-page">
+ <header className="header">
+ <div className="header-text"></div>
+ <div className="header-links">
+ <a href="/">Home Page</a>
+ <a href="/2ndPage">Solar Energy</a>
+ <a href="/3rdPage">Wind Energy</a>
+ <a href="/4thPage">Thermal Energy</a>
+ <a href="/SearchPage">Search Page</a>
+ </div>
+ </header>
+ <h1>Search Page</h1>
+ <div className="search-bar">
+ <input type="text" placeholder="Energy options" />
+ <input type="text" placeholder="Location" />
+ <button>Search</button>
+ </div>
+ <div className="energy-options-container">
+ {energyOptions.map((option, index) => (
+ <EnergyOptionCard key={index} {...option} />
+ ))}
+ </div>
+ </div>
+ );
+}
+export default SearchPage;
diff --git a/pages/index.js b/pages/index.js
index bd378a9617773ed5f1a36d6fe5a15f7a9f3aa1a6..81c470384234f7cb7127cefdbe62a42528404e13 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,7 +1,7 @@
-import React from 'react';
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-import EnergyOptionCard from '../components/EnergyOptionCard';
+import React from "react";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import EnergyOptionCard from "../components/EnergyOptionCard";
/*function StartPage() {
const router = useRouter(); //Macht das man Seite Wechseln Kann
@@ -21,28 +21,25 @@ import EnergyOptionCard from '../components/EnergyOptionCard';
);
}*/
function StartPage() {
- const [energyOptions, setEnergyOptions] = useState([]);
-
- useEffect(() => {
- async function fetchEnergyOptions() {
- const res = await fetch('/api/energy-options');
- const data = await res.json();
- if (data.success) {
- setEnergyOptions(data.data);
- }
- }
-
- fetchEnergyOptions();
- }, []);
+ const router = useRouter();
+ const handleNavigate = () => {
+ // Geht zur Zweiten Seite
+ router.push("/2ndPage");
+ };
return (
<div className="start-page">
- <h1>Green Energy Options</h1>
- <div className="energy-options-container">
- {energyOptions.map((option, index) => (
- <EnergyOptionCard key={index} {...option} />
- ))}
- </div>
+ <header className="header">
+ <div className="header-text"></div>
+ <div className="header-links">
+ <a href="/">Home Page</a>
+ <a href="/2ndPage">Solar Energy</a>
+ <a href="/3rdPage">Wind Energy</a>
+ <a href="/4thPage">Hydro Energy</a>
+ <a href="/SearchPage">Search Page</a>
+ </div>
+ </header>
+ <button onClick={handleNavigate} className="next-button"></button>
</div>
);
}
diff --git a/styles/global.css b/styles/global.css
index 624242bbdad87ed29ba4ef345f381a15b12af114..245a21e710e58b3748c3e1ea6132296420b9e95d 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -2,41 +2,147 @@ html,
body {
padding: 0;
margin: 0;
- font-family:
- Inter,
- -apple-system,
- BlinkMacSystemFont,
- Segoe UI,
- Roboto,
- Oxygen,
- Ubuntu,
- Cantarell,
- Fira Sans,
- Droid Sans,
- Helvetica Neue,
- sans-serif;
-}
-
-.start-page
-{
+ height: 100%; /* Ensure the body takes the full height */
+ overflow-x: hidden; /* Prevent horizontal overflow */
+ font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+ Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+@media (max-width: 768px) {
+ .header-text {
+ font-size: 1.2rem; /* Reduce font size */
+ }
+ .header-links {
+ gap: 10px; /* Reduce spacing between links */
+ }
+ .header {
+ height: 80px; /* Reduce header height */
+ }
+}
+
+.start-page,
+.Second-Page,
+.search-page,
+.fourth-page,
+.fifth-page,
+.third-Page {
overflow: hidden;
margin: 0;
- height: 100vh;
- background-image: url(../components/StartPageimg.png);
+ height: 100vh; /* Use full viewport height */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
+ display: flex;
+ flex-direction: column;
}
-.Second-Page
-{
- overflow: hidden;
- margin: 0;
- height: 100vh;
+.start-page {
+ background-image: url(../components/StartPageimg.png);
+}
+
+.Second-Page {
background-image: url(../components/Secondimg.png);
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
+}
+
+.third-Page {
+ background-image: url(../components/Wind.png);
+}
+
+.fourth-page {
+ background-image: url(../components/Hydro.png);
+}
+
+.fifth-page {
+ background-image: url(../components/Hydrotwo.png);
+}
+
+.search-page {
+ background-color: #bbbbbb;
+}
+
+.solair-side-img {
+ position: fixed;
+ top: 20%; /* Initial position relative to window size */
+ left: 5%; /* Initial position relative to window size */
+ transition: all 1s ease; /* Smooth transition */
+}
+
+.solair-side-img.animate {
+ top: 50%; /* New position relative to window size */
+ left: calc(100% - 30%); /* Ensure it does not go beyond the window */
+}
+
+.solair-side-img img {
+ content: url(../components/Solair_side.png);
+ max-width: 30%;
+ height: auto;
+ transform: scaleX(-1); /* Flip horizontally */
+}
+
+.solair-side-img.animate img {
+ transform: rotate(55deg) scaleX(1); /* Rotate and flip horizontally */
+}
+
+.speech-bubble-2-container {
+ position: relative;
+ top: 0; /* Position relative to the image */
+ left: 0; /* Position relative to the image */
+ /*transform: none !important; /* Prevent rotation and flipping */
+}
+
+.speech-bubble-2 {
+ position: relative;
+ top: 50%;
+ left: 35%;
+ transform: translate(-50%, -50%);
+ width: 300px;
+ padding: 10px;
+ background: rgba(255, 255, 255, 0.5); /* Transparent background */
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ z-index: 10;
+ color: #000; /* Ensure text is not transparent */
+}
+
+.speech-bubble-2::after {
+ content: "";
+ position: absolute;
+ bottom: 100%;
+ left: 20px;
+ border-width: 10px;
+ border-style: solid;
+ border-color: transparent transparent rgba(255, 255, 255, 0.5) transparent; /* Transparent background */
+}
+
+.speech-bubble-container {
+ position: absolute;
+ top: 10%; /* Initial position relative to the image */
+ left: 30%; /* Initial position relative to the image */
+ transition: all 1s ease; /* Smooth transition */
+}
+
+.speech-bubble-container.animate {
+ top: 40%; /* New position relative to the image */
+ left: calc(100% - 320px); /* Ensure it does not go beyond the window */
+}
+
+.speech-bubble {
+ width: 300px;
+ padding: 10px;
+ background: rgba(255, 255, 255, 0.5);
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ color: #000;
+}
+
+.speech-bubble::after {
+ content: "";
+ position: absolute;
+ bottom: 100%;
+ left: 20px;
+ border-width: 10px;
+ border-style: solid;
+ border-color: transparent transparent #fff transparent;
}
a {
@@ -56,8 +162,8 @@ img {
.energy-options-container {
display: flex;
flex-wrap: wrap;
- justify-content: center; /* Center items horizontally */
- gap: 20px; /* Space between cards */
+ justify-content: center; /* Center items horizontally */
+ gap: 20px; /* Space between cards */
margin-top: 20px;
}
@@ -67,8 +173,8 @@ img {
padding: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, background-color 0.3s ease;
- cursor: pointer; /* Makes it look like a button */
- width: 250px; /* Set width for each card */
+ cursor: pointer; /* Makes it look like a button */
+ width: 250px; /* Set width for each card */
text-align: left;
display: flex;
flex-direction: column;
@@ -87,3 +193,57 @@ img {
font-size: 1rem;
color: rgb(3, 3, 3);
}
+
+.next-button {
+ background: url(../components/Next-Button.png);
+ background-size: contain;
+ background-repeat: no-repeat;
+ width: 100px; /* Use the image's standard width */
+ height: 40px; /* Use the image's standard height */
+ border: none; /* Remove default button border */
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ cursor: pointer; /* Change cursor to pointer */
+}
+
+.header {
+ background-image: url(../components/Navigation-bar.png);
+ display: flex;
+ align-items: center;
+ justify-content: space-between; /* Keep text and links on opposite ends */
+ padding: 10px 5%; /* Use consistent padding */
+ background-repeat: no-repeat;
+ background-size: contain;
+ width: 100%; /* Full width */
+ height: auto; /* Fixed height */
+ z-index: 10; /* Keep header above other elements */
+ position: fixed; /* Fix the header to the top */
+ top: 0;
+ left: 0;
+}
+
+.header-text {
+ font-size: 1.5rem; /* Consistent font size */
+ color: #333;
+ white-space: nowrap; /* Prevent text from wrapping */
+ flex-shrink: 0; /* Prevent shrinking of text when resizing */
+}
+
+.header-links {
+ display: flex;
+ gap: 15px;
+ align-items: center; /* Keep links vertically aligned in the center */
+ flex-shrink: 0; /* Prevent shrinking of links when resizing */
+}
+
+.header-links a {
+ color: #000000;
+ text-decoration: none;
+ font-size: 1rem;
+ white-space: nowrap; /* Prevent wrapping of links */
+}
+
+.header-links a:hover {
+ text-decoration: underline;
+}