+
5-Day Forecast
{forecast.map((day, index) => (
-
+
Date: {new Date(day.dt_txt).toLocaleDateString()}
- Temp:{day.main.temp} °C
+ Temp: {day.main.temp} °C
Condition: {day.weather[0].description}
-
))}
)}
-
+
);
}
-
-
diff --git a/src/styles/About.css b/src/styles/About.css
new file mode 100644
index 0000000..9b11a75
--- /dev/null
+++ b/src/styles/About.css
@@ -0,0 +1,90 @@
+/* About Page Styles */
+.about-container {
+ min-height: 100vh;
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ padding: 2rem;
+ }
+
+ .about-header {
+ background-color: white;
+ padding: 3rem;
+ border-radius: 1.5rem;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+ margin-top: 2rem;
+ max-width: 40rem;
+ width: 100%;
+ }
+
+ .about-title {
+ font-size: 2.5rem;
+ font-weight: 700;
+ color: #3182ce;
+ }
+
+ .about-description {
+ color: #4a5568;
+ margin-top: 1rem;
+ font-size: 1.125rem;
+ }
+
+ .about-features {
+ margin-top: 3rem;
+ max-width: 40rem;
+ width: 100%;
+ }
+
+ .features-title {
+ font-size: 2rem;
+ font-weight: 700;
+ color: #3182ce;
+ }
+
+ .features-list {
+ list-style-type: disc;
+ color: #8a8a8a;
+ margin-top: 1rem;
+ padding-left: 2rem;
+ font-size: 1.125rem;
+ list-style: none;
+ }
+
+ .about-team {
+ margin-top: 3rem;
+ max-width: 40rem;
+ width: 100%;
+ }
+
+ .team-title {
+ font-size: 2rem;
+ font-weight: 700;
+ color: #3182ce;
+ }
+
+ .team-description {
+ color: #8a8a8a;
+ margin-top: 1rem;
+ font-size: 1.125rem;
+ }
+
+ .about-footer {
+ margin-top: 3rem;
+ font-size: 1rem;
+ color: #b38aff;
+ }
+
+ @media (min-width: 768px) {
+ .about-container {
+ padding: 4rem;
+ }
+
+ .about-header,
+ .about-features,
+ .about-team {
+ max-width: 60rem;
+ }
+ }
+
\ No newline at end of file
diff --git a/src/styles/App.css b/src/styles/App.css
new file mode 100644
index 0000000..27a61d7
--- /dev/null
+++ b/src/styles/App.css
@@ -0,0 +1,8 @@
+#root {
+ max-width: 1280px;
+ margin: 0 auto;
+}
+body {
+ min-height: 100vh;
+ background: linear-gradient(90deg, #4facfe, #00f2fe);
+}
diff --git a/src/styles/Home.css b/src/styles/Home.css
new file mode 100644
index 0000000..30c610f
--- /dev/null
+++ b/src/styles/Home.css
@@ -0,0 +1,281 @@
+/* General page styles */
+body {
+ font-family: 'Arial', sans-serif;
+ }
+
+ .min-h-screen {
+ min-height: 100vh;
+ }
+
+ .bg-gradient-to-r {
+ background: linear-gradient(90deg, #4facfe, #00f2fe);
+ }
+
+ .text-center {
+ text-align: center;
+ }
+
+ .text-gray-600 {
+ color: #4a5568;
+ }
+
+ .text-gray-500 {
+ color: #6b7280;
+ }
+
+ .text-blue-600 {
+ color: #3182ce;
+ }
+
+ .mt-10 {
+ margin-top: 2.5rem;
+ }
+
+ .mt-6 {
+ margin-top: 1.5rem;
+ }
+
+ /* Hero Section */
+ .bg-white {
+ background-color: #ffffff;
+ }
+
+ .rounded-2xl {
+ border-radius: 1.5rem;
+ }
+
+ .shadow-xl {
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+ }
+
+ .max-w-lg {
+ max-width: 32rem;
+ }
+
+ .w-full {
+ width: 100%;
+ }
+
+ .hover\:bg-blue-700:hover {
+ background-color: #2b6cb0;
+ }
+
+ .transition-all {
+ transition: all 0.3s ease;
+ }
+
+ .duration-300 {
+ transition-duration: 300ms;
+ }
+
+ /* Activity Cards */
+ .grid {
+ display: grid;
+ }
+
+ .grid-cols-1 {
+ grid-template-columns: repeat(1, 1fr);
+ }
+
+ .md\:grid-cols-3 {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+ .gap-6 {
+ gap: 1.5rem;
+ }
+
+ .p-6 {
+ padding: 1.5rem;
+ }
+
+ .card {
+ padding: 1.25rem;
+ background-color: white;
+ border-radius: 1rem;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s ease;
+ }
+
+ .card:hover {
+ transform: scale(1.05);
+ }
+
+ .card h2 {
+ font-size: 1.25rem;
+ font-weight: 600;
+ margin-top: 0.5rem;
+ }
+
+ .card p {
+ color: #4a5568;
+ font-size: 0.875rem;
+ margin-top: 0.25rem;
+ }
+
+ /* Weather Theme Section */
+ .weather-icon {
+ transition: transform 0.3s ease;
+ }
+
+ .weather-icon:hover {
+ transform: rotate(15deg);
+ }
+
+ .weather-text {
+ font-size: 1.125rem;
+ font-weight: 500;
+ margin-top: 0.5rem;
+ }
+
+ /* Footer */
+ footer {
+ margin-top: 2.5rem;
+ font-size: 0.875rem;
+ }
+
+ /* Animation Effects */
+ .fade-in {
+ animation: fadeIn 1s ease-in-out;
+ }
+
+ @keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ transform: translateY(-20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ /* Button hover animation */
+ .btn-hover {
+ transition: background-color 0.3s ease, transform 0.3s ease;
+ }
+
+ .btn-hover:hover {
+ background-color: #2b6cb0;
+ transform: translateY(-3px);
+ }
+
+ /* Homepage Container */
+ .homepage-container {
+ min-height: 100vh;
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ padding: 1.5rem;
+ }
+
+ /* Hero Section */
+ .hero-section {
+ background-color: white;
+ padding: 2.5rem;
+ border-radius: 1.5rem;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+ margin-top: 2.5rem;
+ max-width: 32rem;
+ width: 100%;
+ }
+
+ .hero-title {
+ font-size: 2rem;
+ font-weight: 700;
+ color: #3182ce;
+ }
+
+ .hero-subtitle {
+ color: #4a5568;
+ margin-top: 0.5rem;
+ }
+
+ /* Button */
+ .explore-btn {
+ margin-top: 1.5rem;
+ background-color: #3182ce;
+ transition: background-color 0.3s ease, transform 0.3s ease;
+ }
+
+ .explore-btn:hover {
+ background-color: #2b6cb0;
+ transform: translateY(-3px);
+ }
+
+ /* Activities Section */
+ .activities-section {
+ display: grid;
+ grid-template-columns: repeat(1, 1fr);
+ gap: 1.5rem;
+ margin-top: 2.5rem;
+ max-width: 64rem;
+ }
+
+ @media (min-width: 768px) {
+ .activities-section {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ }
+
+ /* Activity Card */
+ .activity-card {
+ padding: 1.25rem;
+ background-color: white;
+ border-radius: 1rem;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s ease;
+ }
+
+ .activity-card:hover {
+ transform: scale(1.05);
+ }
+
+ .activity-title {
+ font-size: 1.25rem;
+ font-weight: 600;
+ margin-top: 0.5rem;
+ }
+
+ .activity-description {
+ color: #8a8a8a;
+ font-size: 0.875rem;
+ margin-top: 0.25rem;
+ }
+
+ /* Weather Theme */
+ .weather-theme {
+ margin-top: 1.5rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .weather-icon-sunny {
+ color: #f6ad55;
+ }
+
+ .weather-icon-cloudy {
+ color: #718096;
+ }
+
+ .weather-icon-snowy {
+ color: #63b3ed;
+ }
+
+ .weather-text {
+ color: #4a5568;
+ margin-top: 0.5rem;
+ font-size: 1.125rem;
+ font-weight: 500;
+ }
+
+ /* Footer */
+ .footer {
+ margin-top: 2.5rem;
+ color: #b38aff;
+ font-size: 0.875rem;
+ }
+
\ No newline at end of file
diff --git a/src/styles/ThemeProvider.jsx b/src/styles/ThemeProvider.jsx
new file mode 100644
index 0000000..53d9dfc
--- /dev/null
+++ b/src/styles/ThemeProvider.jsx
@@ -0,0 +1,102 @@
+import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+
+// Light theme configuration
+export const lightTheme = createTheme({
+ palette: {
+ mode: 'light',
+ primary: {
+ main: '#50a2b9',
+ contrastText: '#0a0e0f',
+ },
+ secondary: {
+ main: '#95cfdf',
+ contrastText: '#0a0e0f',
+ },
+ accent: {
+ main: '#ff9800', // Custom accent color
+ },
+ divider: '#64c3dd',
+ background: {
+ default: '#f5f9fa',
+ paper: '#ffffff',
+ },
+ text: {
+ primary: 'rgb(10, 14, 15)',
+ secondary: 'rgba(10, 14, 15, 0.6)',
+ disabled: 'rgba(10, 14, 15, 0.38)',
+ hint: 'rgb(100, 195, 221)',
+ },
+ },
+ typography: {
+ fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+ h1: {
+ fontWeight: 'bold',
+ color: '#000',
+ },
+ body1: {
+ color: '#333',
+ },
+ },
+ components: {
+ MuiButton: {
+ styleOverrides: {
+ root: {
+ textAlign: 'center',
+ boxShadow: '0 3px 3px 0 rgba(0, 0, 0, 0.3)',
+ },
+ },
+ },
+ },
+});
+
+export const darkTheme = createTheme({
+ palette: {
+ mode: 'dark',
+ primary: {
+ main: '#50a2b9',
+ contrastText: '#0a0e0f',
+ },
+ secondary: {
+ main: '#95cfdf',
+ contrastText: '#0a0e0f',
+ },
+ accent: {
+ main: '#ff9800', // Custom accent color
+ },
+ divider: '#64c3dd',
+ background: {
+ default: '#303030',
+ paper: '#424242',
+ },
+ text: {
+ primary: '#ffffff',
+ secondary: '#bdbdbd',
+ disabled: 'rgba(255, 255, 255, 0.38)',
+ hint: 'rgb(100, 195, 221)',
+ },
+ },
+ typography: {
+ fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+ h1: {
+ fontWeight: 'bold',
+ color: '#fff',
+ },
+ body1: {
+ color: '#ccc',
+ },
+ },
+ components: {
+ MuiButton: {
+ styleOverrides: {
+ root: {
+ textAlign: 'center',
+ boxShadow: '0 3px 3px 0 rgba(0, 0, 0, 0.3)',
+ },
+ },
+ },
+ },
+});
+
+export const ThemeProvider = ({ children, theme }) => {
+ return
{children};
+};
\ No newline at end of file
diff --git a/src/styles/Weather.css b/src/styles/Weather.css
new file mode 100644
index 0000000..8ae72cd
--- /dev/null
+++ b/src/styles/Weather.css
@@ -0,0 +1,103 @@
+/* Container Styling */
+.container {
+ width: 100%;
+ max-width: 600px;
+ margin: 50px auto;
+ padding: 20px;
+ border: 1px solid #ccc;
+ border-radius: 1.5rem;
+ background-color: #ffffff;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+ color:rgb(19, 19, 19);
+ }
+
+ .title {
+ font-size: 2rem;
+ font-weight: 700;
+ color: #3182ce;
+ }
+
+ /* Search Input & Button */
+ .input-container {
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+ margin-bottom: 20px;
+ }
+
+ input[type="text"] {
+ width: 70%;
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ font-size: 1em;
+ }
+
+ button {
+ padding: 10px 15px;
+ border: none;
+ border-radius: 4px;
+ background-color: #2b6cb0;
+ color: white;
+ font-size: 1em;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ }
+
+ button:hover {
+ background-color: #215686;
+ }
+
+ /* Loading and Error Styles */
+ p {
+ font-size: 1.1em;
+ }
+
+ .error {
+ color: red;
+ font-weight: bold;
+ }
+
+ /* Weather Display */
+ .weather-info {
+ margin-top: 20px;
+ }
+
+ .weather-info h2 {
+ font-size: 1.5em;
+ margin-bottom: 15px;
+ color: #3182ce;
+ }
+
+ .weather-info p {
+ font-size: 1.2em;
+ margin-bottom: 10px;
+ }
+
+ .weather-info .temp {
+ font-weight: bold;
+ font-size: 1.5em;
+ }
+
+ .weather-info .condition {
+ font-style: italic;
+ }
+
+ /* Forecast Styling */
+ .forecast {
+ margin-top: 20px;
+ }
+
+ .forecast h2 {
+ font-size: 1.5em;
+ margin-bottom: 15px;
+ color: #3182ce;
+ }
+
+ .forecast .forecast-day {
+ margin-bottom: 10px;
+ }
+
+ .forecast .forecast-day p {
+ font-size: 1.1em;
+ }
\ No newline at end of file