diff --git a/frontend/src/assets/02-34-11-741_512.gif b/frontend/src/assets/02-34-11-741_512.gif new file mode 100644 index 00000000..4384a78e Binary files /dev/null and b/frontend/src/assets/02-34-11-741_512.gif differ diff --git a/frontend/src/assets/13306cc5121a7f1a546dcd301ee79787.jpg b/frontend/src/assets/13306cc5121a7f1a546dcd301ee79787.jpg new file mode 100644 index 00000000..a5bba6bb Binary files /dev/null and b/frontend/src/assets/13306cc5121a7f1a546dcd301ee79787.jpg differ diff --git a/frontend/src/assets/gettyimages-1354372881-612x612.jpg b/frontend/src/assets/gettyimages-1354372881-612x612.jpg new file mode 100644 index 00000000..ad18b36c Binary files /dev/null and b/frontend/src/assets/gettyimages-1354372881-612x612.jpg differ diff --git a/frontend/src/assets/message-send.svg b/frontend/src/assets/message-send.svg new file mode 100644 index 00000000..3e414a8f --- /dev/null +++ b/frontend/src/assets/message-send.svg @@ -0,0 +1,19 @@ + + + + + + + + + \ No newline at end of file diff --git a/frontend/src/assets/sendimage.jpeg b/frontend/src/assets/sendimage.jpeg new file mode 100644 index 00000000..f75b9ab9 Binary files /dev/null and b/frontend/src/assets/sendimage.jpeg differ diff --git a/frontend/src/assets/tenor.gif b/frontend/src/assets/tenor.gif new file mode 100644 index 00000000..27ea72b5 Binary files /dev/null and b/frontend/src/assets/tenor.gif differ diff --git a/frontend/src/assets/wance-paleri-s7gyjnH7Ulk-unsplash-scaled.webp b/frontend/src/assets/wance-paleri-s7gyjnH7Ulk-unsplash-scaled.webp new file mode 100644 index 00000000..181f4eb1 Binary files /dev/null and b/frontend/src/assets/wance-paleri-s7gyjnH7Ulk-unsplash-scaled.webp differ diff --git a/frontend/src/components/ChatBot.jsx b/frontend/src/components/ChatBot.jsx index 7ba8f9fd..838b436d 100644 --- a/frontend/src/components/ChatBot.jsx +++ b/frontend/src/components/ChatBot.jsx @@ -3,6 +3,8 @@ import React, { useState, useEffect, useRef } from 'react'; import styled from 'styled-components'; import { AiOutlineClose } from 'react-icons/ai'; // Import the close icon import bot from '../assets/1_YOViITfBkahHTwGGkKsQdg.png'; // Import the bot image +import sendmessage from '../assets/message-send.svg'; // Import the sendmessage image +import chatbackground from '../assets/02-34-11-741_512.gif'; // Import the sendmessage image const Chatbot = () => { @@ -108,7 +110,7 @@ const Chatbot = () => { onChange={handleInputChange} onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()} /> - Send + )} @@ -122,12 +124,13 @@ const ChatbotContainer = styled.div` max-width: 500px; margin: 0 auto; background-color: #121212; - border-radius: 15px; + border-radius: 50px; box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5); font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; justify-content: flex-end; + `; const ToggleContainer = styled.div` @@ -166,24 +169,36 @@ const ToggleButton = styled.div` const ChatWindow = styled.div` display: flex; flex-direction: column; + border-radius: 25px; justify-content: space-between; height: 600px; + overflow: hidden; /* Hide overflow content when closed */ + transition: height 0.5s ease; /* Smooth transition for height */ position: relative; + background-image: url(${chatbackground}); /* Set the imported image as background */ + + `; + const CloseIcon = styled.div` position: absolute; top: 10px; right: 20px; cursor: pointer; - font-size: 24px; - color: #FFFFFFF; - transition: color 0.3s ease; + font-size: 28px; + color: #ff4d4f; /* Soft red for the default close icon */ + transition: color 0.3s ease, transform 0.2s ease; &:hover { - color: #FFA500; /* Lighter golden on hover */ + color: #ffa07a; /* Soft coral on hover */ + transform: scale(1.5); /* Slight zoom on hover */ } + + `; + + const ChatHistory = styled.div` padding: 20px; background-color: #1c1c1c; /* Dark gray background for chat history */ @@ -228,9 +243,12 @@ const ChatMessage = styled.div` ? 'linear-gradient(135deg, #001f3f, #0056b3)' : 'linear-gradient(135deg, #a0d4ff, #4ca1ff)'}; color: ${({ from }) => (from === 'bot' ? 'white' : '#333333')}; + + float: ${({ from }) => (from === 'bot' ? 'left' : 'right')}; /* Floating bot to the left, user to the right */ + clear: both; /* Ensures proper spacing between messages */ align-self: ${({ from }) => (from === 'bot' ? 'flex-start' : 'flex-end')}; transition: background 0.3s ease, transform 0.2s ease; - + &:hover { background: ${({ from }) => from === 'bot' @@ -241,6 +259,7 @@ const ChatMessage = styled.div` `; + const ChatInput = styled.div` display: flex; align-items: center; @@ -268,26 +287,24 @@ const InputField = styled.input` `; const SendButton = styled.button` - padding: 15px 20px; - background: linear-gradient(135deg, #001f3f, #0056b3); /* Dark blue gradient */ - color: white; /* White text */ + width: 50px; + height: 50px; + background-image: url(${sendmessage});no-repeat center center; + background-size: contain; border: none; border-radius: 10px; cursor: pointer; - font-size: 16px; - font-weight: bold; transition: background 0.3s ease, transform 0.2s ease; - + &:hover { - background: linear-gradient(135deg, #003366, #007bff); /* Slightly lighter blue on hover */ transform: scale(1.05); } &:active { - background: linear-gradient(135deg, #002147, #0056b3); /* Even darker on click */ transform: scale(0.98); } `; -export default Chatbot; + +export default Chatbot; \ No newline at end of file diff --git a/frontend/src/components/StockForecastingPage/ForecastNowButton.jsx b/frontend/src/components/StockForecastingPage/ForecastNowButton.jsx index dbae3d76..389f7f73 100644 --- a/frontend/src/components/StockForecastingPage/ForecastNowButton.jsx +++ b/frontend/src/components/StockForecastingPage/ForecastNowButton.jsx @@ -1,3 +1,4 @@ +/* eslint-disable no-unused-vars */ // ForecastNowButton.js import React from 'react'; import styled, { keyframes } from 'styled-components'; @@ -24,33 +25,26 @@ const ForecastNowButton = ({ onClick }) => { const ForecastNow = styled.button` font-size: 1.5rem; color: #ffffff; - background-color: #01182b; + background-color: #004080; /* Dark blue background */ border: none; - border-radius: 8px; + border-radius: 50px; /* Rounded button */ padding: 15px 30px; - z-index: 9999; - animation: ${bounceForecast} 2s infinite; - position: fixed; - bottom: 20px; - right: 20px; cursor: pointer; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), - 0 0 20px rgba(0, 200, 255, 0.6), /* Glow effect */ - 0 0 40px rgba(0, 200, 255, 0.4); /* Glow spread */ - transition: transform 0.2s ease, box-shadow 0.2s ease; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Shadow for depth */ + transition: background-color 0.3s, transform 0.3s; /* Smooth transitions */ &:hover { - transform: scale(1.1); /* Slight zoom on hover */ - box-shadow: 0 4px 20px rgba(0, 200, 255, 0.8), /* Enhanced glow on hover */ - 0 0 60px rgba(0, 200, 255, 0.6); + background-color: #0050a0; /* Lighter blue on hover */ + transform: scale(1.05); /* Slightly enlarge on hover */ } &:active { - transform: scale(1); /* Reset zoom when clicked */ - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), - 0 0 20px rgba(0, 200, 255, 0.6), /* Glow remains when clicked */ - 0 0 40px rgba(0, 200, 255, 0.4); + transform: scale(0.95); /* Slightly shrink when clicked */ } + + display: flex; /* Center icon and text */ + align-items: center; + justify-content: center; `; export default ForecastNowButton; diff --git a/frontend/src/components/StockForecastingPage/ForecastSummary.jsx b/frontend/src/components/StockForecastingPage/ForecastSummary.jsx index d873c36e..38f11b1a 100644 --- a/frontend/src/components/StockForecastingPage/ForecastSummary.jsx +++ b/frontend/src/components/StockForecastingPage/ForecastSummary.jsx @@ -23,6 +23,7 @@ const ForecastSummary = ({ predictedPrices }) => { return ( +

Highest Price

Price: ${highest}

@@ -31,7 +32,7 @@ const ForecastSummary = ({ predictedPrices }) => {

Lowest Price

Price: ${lowest}

 - + {/* CSV Download Button */} {/* CSV Icon */} @@ -39,6 +40,7 @@ const ForecastSummary = ({ predictedPrices }) => { Download as CSV + ); }; @@ -47,107 +49,124 @@ export default ForecastSummary; // Styled Components -const SummaryContainer = styled.div` - display: flex; - flex-direction: column; - margin-right: 220px; - gap: 20px; - padding: 20px; - background: rgba(255, 255, 255, 0.1); - border-radius: 8px; - color: #ffffff; - - @media (max-width: 768px) { - margin-right: 0; - padding: 10px; - } +const SummaryBoxAll = styled.div` + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + margin-top: 20px; + font-size: 1.2rem; + background: #004080; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; +`; - @media (max-width: 480px) { - padding: 5px; - } +const SummaryContainer = styled.div` + width: 40%; + display: flex; + flex-direction: column; + margin-right: 20px; + gap: 20px; + padding: 20px; + background: rgba(255, 255, 255, 0.1); + border-radius: 8px; + color: #ffffff; + + @media (max-width: 768px) { + margin-right: 0; + padding: 10px; + } + + @media (max-width: 480px) { + padding: 5px; + } `; const SummaryBox = styled.div` - background: rgba(0, 0, 0, 0.5); - padding: 15px; - border-radius: 8px; - text-align: center; + background: rgba(0, 0, 0, 0.5); + padding: 15px; + border-radius: 8px; + text-align: center; +width: 100%; +height: 90%; + h2 { + margin-bottom: 10px; + font-size: 1.2rem; + } + + p { + margin: 5px 0; + font-size: 1rem; + } + + @media (max-width: 768px) { + padding: 10px; h2 { - margin-bottom: 10px; - font-size: 1.2rem; + font-size: 1rem; } p { - margin: 5px 0; - font-size: 1rem; + font-size: 0.9rem; } + } - @media (max-width: 768px) { - padding: 10px; + @media (max-width: 480px) { + padding: 8px; - h2 { - font-size: 1rem; - } - - p { - font-size: 0.9rem; - } + h2 { + font-size: 0.9rem; } - @media (max-width: 480px) { - padding: 8px; - - h2 { - font-size: 0.9rem; - } - - p { - font-size: 0.8rem; - } + p { + font-size: 0.8rem; } + } `; const CSVDownloadButton = styled.div` - display: flex; - align-items: center; - justify-content: center; - gap: 10px; - margin-top: 20px; - font-size: 1.2rem; - background: #004080; - padding: 10px 20px; - border-radius: 5px; - cursor: pointer; - - svg { - font-size: 1.5rem; - } - - a { - color: #ffffff; - text-decoration: none; - } + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + margin-top: 20px; + font-size: 1.2rem; + background: #004080; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + + svg { + font-size: 1.5rem; + } + + a { + color: #ffffff; + text-decoration: none; + } - &:hover { - background: #0050a0; - } + &:hover { + background: #0050a0; + } - @media (max-width: 768px) { - font-size: 1rem; - padding: 8px 16px; + @media (max-width: 768px) { + font-size: 1rem; + padding: 8px 16px; - svg { - font-size: 1.2rem; - } + svg { + font-size: 1.2rem; } + } - @media (max-width: 480px) { - font-size: 0.9rem; - padding: 6px 12px; + @media (max-width: 480px) { + font-size: 0.9rem; + padding: 6px 12px; - svg { - font-size: 1rem; - } + svg { + font-size: 1rem; } + } `; + +export { SummaryBoxAll, SummaryContainer, SummaryBox, CSVDownloadButton }; diff --git a/frontend/src/components/StockForecastingPage/ForecastedPricesChart.jsx b/frontend/src/components/StockForecastingPage/ForecastedPricesChart.jsx index e5340028..74289169 100644 --- a/frontend/src/components/StockForecastingPage/ForecastedPricesChart.jsx +++ b/frontend/src/components/StockForecastingPage/ForecastedPricesChart.jsx @@ -59,6 +59,7 @@ const ChartContainer = styled.div` max-width: 700px; /* Limit the width on larger screens */ margin: 0 auto; padding: 10px; + margine-left: 20px; background-color: rgba(0, 0, 0, 0.5); border-radius: 10px; color: white; diff --git a/frontend/src/components/StockForecastingPage/Header.jsx b/frontend/src/components/StockForecastingPage/Header.jsx index f90ca738..51a46011 100644 --- a/frontend/src/components/StockForecastingPage/Header.jsx +++ b/frontend/src/components/StockForecastingPage/Header.jsx @@ -3,24 +3,35 @@ import styled from 'styled-components'; const HeaderContainer = styled.div` text-align: center; - margin-bottom: 20px; + margin-bottom: 30px; + padding: 20px; + background: rgba(0, 0, 0, 0.6); /* Slightly transparent background */ + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); `; const Title = styled.h1` - font-size: 2rem; - color: #ffffff; /* Light text color for dark background */ + font-size: 2.5rem; + color: #f0f0f0; /* Light, elegant text color */ + font-weight: 600; + letter-spacing: 2px; /* Adds a slight spread to the letters */ + margin-bottom: 10px; `; const Slogan = styled.p` - font-size: 1.2rem; - color: #cccccc; /* Lighter text color for slogan */ + font-size: 1.3rem; + color: #a8a8a8; /* Subtle grey for a softer feel */ + font-weight: 300; + margin-bottom: 0; + line-height: 1.6; /* Enhances readability */ + font-style: italic; `; const Header = () => { return ( - Stock Forecast Page - Predict real-time market stock data + Predict Future Trends + Stay ahead with real-time market insights ); }; diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx index 8f0d71e6..4b7aa51d 100644 --- a/frontend/src/pages/Dashboard.jsx +++ b/frontend/src/pages/Dashboard.jsx @@ -6,6 +6,7 @@ import TickerTape from '../components/Dashboard_Components/TickerTape.jsx'; import GainersChart from '../components/Dashboard_Components/GainersChart.jsx'; import NewsComponent from '../services/NewsService.jsx'; import Chatbot from '../components/ChatBot'; +import backgroundimage from '../assets/02-34-11-741_512.gif'; // Import the sendmessage image const Dashboard = () => { const [isBouncing, setIsBouncing] = useState(true); // To control bounce animation @@ -42,6 +43,7 @@ const DashboardContainer = styled.div` min-height: 100vh; /* Full height */ padding: 20px; color: #fff; /* Ensure text is readable */ + background-image: url(${backgroundimage}); /* Set the imported image as background */ `; const MainContent = styled.main` diff --git a/frontend/src/pages/StockForecastPage.jsx b/frontend/src/pages/StockForecastPage.jsx index ae625a97..700951c3 100644 --- a/frontend/src/pages/StockForecastPage.jsx +++ b/frontend/src/pages/StockForecastPage.jsx @@ -93,14 +93,18 @@ const StockForecastPage = () => { )} + +{selectedStock && } - {selectedStock && } + + {/* Flex container for side-by-side components */} {predictedPrices.length > 0 && ( + )} @@ -112,7 +116,14 @@ const StockForecastPage = () => { export default StockForecastPage; // Styled components - +const ForecastNowButtonContainer = styled.div` + position: fixed; /* Use fixed positioning */ + bottom: 20px; /* Distance from the bottom */ + right: 20px; /* Distance from the right */ + display: flex; + justify-content: center; + z-index: 9999; /* Ensure it appears above other content */ +`; const bounce = keyframes` 0%, 20%, 50%, 80%, 100% { transform: translateY(0); @@ -167,6 +178,7 @@ const AnimatedIcon = styled.div` align-items: center; width: 100px; height: 100px; + svg { font-size: 3rem; @@ -197,12 +209,20 @@ const StockInfoContainer = styled.div` const ForecastContainer = styled.div` display: flex; + flex-direction: row; justify-content: space-between; - gap: 20px; + gap: 50px; margin-top: 20px; - @media (max-width: 768px) { - flex-direction: column; + /* Make sure the left side takes 2/3 of the width and the right side 1/3 */ + & > .left { + flex-basis: 66.66%; /* 2/3 of the width */ + background-color: #f0f0f0; /* Optional: set background for visibility */ + } + + & > .right { + flex-basis: 33.33%; /* 1/3 of the width */ + background-color: #d0d0d0; /* Optional: set background for visibility */ } `;