diff --git a/src/App.js b/src/App.js
index 08c19bc..99aeed1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,10 @@ import SignIn from './components/SignIn/SignIn';
import Register from './components/Register/Register';
import Home from './components/Home/Home';
import Page1 from './components/Page1/Page1';
+import Page2 from './components/Page2/Page2';
+import Page3 from './components/Page3/Page3';
+import Page4 from './components/Page4/Page4';
+import Page5 from './components/Page5/Page5';
function App() {
return (
@@ -13,6 +17,10 @@ function App() {
} />
} />
} />
+ } />
+ } />
+ } />
+ } />
);
diff --git a/src/components/GlobalStyles/Elements.js b/src/components/GlobalStyles/Elements.js
index dab64f1..3228229 100644
--- a/src/components/GlobalStyles/Elements.js
+++ b/src/components/GlobalStyles/Elements.js
@@ -231,19 +231,33 @@ export const PageContainer = styled.div`
min-height: 100vh;
`;
-// Form Container
+// Form Container (Aligned Horizontally)
export const FormContainer = styled.form`
display: flex;
- flex-direction: column;
- gap: 20px;
+ flex-direction: row; /* Align elements horizontally */
+ gap: 20px; /* Space between elements */
margin: 20px 0;
- align-items: center;
+ align-items: center; /* Center align the elements vertically */
+ justify-content: center; /* Center align the elements horizontally */
+ flex-wrap: wrap; /* Allow wrapping on smaller screens */
`;
+// Form Container (Aligned Vertically)
+export const FormContainer2 = styled.form`
+ display: flex;
+ flex-direction: column; /* Align elements horizontally */
+ gap: 20px; /* Space between elements */
+ margin: 20px 0;
+ align-items: center; /* Center align the elements vertically */
+ justify-content: center; /* Center align the elements horizontally */
+ flex-wrap: wrap; /* Allow wrapping on smaller screens */
+`;
+
+
// Select (Drop-Down Menu)
export const Select = styled.select`
padding: 10px;
- width: 200px;
+ width: 150px;
border-radius: 4px;
border: 1px solid ${({ theme }) => theme.colors.primary};
font-size: 16px;
@@ -269,4 +283,25 @@ export const TabImageAlt = styled.img`
height: 80%; /* Set a fixed height */
border-radius: 4px;
justify-content: center;
+`;
+
+export const Input = styled.input`
+ width: 150px;
+ padding: 10px 15px;
+ margin: 10px 0;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ font-size: 16px;
+ color: #333;
+ background-color: #f9f9f9;
+ outline: none;
+
+ &:focus {
+ border-color: #007bff;
+ box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+ }
+
+ &::placeholder {
+ color: #999;
+ }
`;
\ No newline at end of file
diff --git a/src/components/Page1/Page1.js b/src/components/Page1/Page1.js
index a90b5d4..b231a76 100644
--- a/src/components/Page1/Page1.js
+++ b/src/components/Page1/Page1.js
@@ -6,18 +6,27 @@ import {
PageTitle,
PageDescription,
FormContainer,
+ FormContainer2,
Select,
SubmitButton,
- TabImageAlt
+ TabImageAlt,
+ Input
} from '../GlobalStyles/Elements';
function Page1() {
const [selection, setSelection] = useState({
- option1: '',
- option2: '',
- option3: ''
+ country: '',
+ categoryId: '',
+ startDate: '14-11-17',
+ endDate: '14-06-18',
+ tag: ''
});
+ // Sample options (replace with your actual values)
+ const countries = ['USA', 'Canada', 'UK', 'Australia'];
+ const categories = ['1', '2', '10', '15', '17', '20', '22']; // Example category IDs
+
+ // Handle input changes
const handleChange = (e) => {
const { name, value } = e.target;
setSelection((prev) => ({
@@ -26,9 +35,31 @@ function Page1() {
}));
};
+ // Handle form submission
const handleSubmit = (e) => {
e.preventDefault();
- alert(`Selected options: ${selection.option1}, ${selection.option2}, ${selection.option3}`);
+
+ // Format date inputs if needed
+ const formattedStartDate = formatToOracleDate(selection.startDate);
+ const formattedEndDate = formatToOracleDate(selection.endDate);
+
+ // Construct query parameters
+ const query = {
+ country: selection.country || '%',
+ categoryId: selection.categoryId || null,
+ startDate: formattedStartDate,
+ endDate: formattedEndDate,
+ tag: selection.tag || '%'
+ };
+
+ alert(`Query Parameters: ${JSON.stringify(query)}`);
+ // You can now use `query` to make a request to your Oracle database.
+ };
+
+ // Helper function to format date to 'DD-MM-YY'
+ const formatToOracleDate = (date) => {
+ const [year, month, day] = date.split('-');
+ return `${day}-${month}-${year.slice(2)}`; // Convert 'YYYY-MM-DD' to 'DD-MM-YY'
};
return (
@@ -40,38 +71,66 @@ function Page1() {
{/* Page Title and Description */}
Page 1
- This page allows you to make selections from the drop-down menus.
+ Select your search criteria for trending videos.
{/* Form Section */}
-
+
+ {/* Submit Button */}
+ Submit
+ {/* Image Section */}
+
+
);
diff --git a/src/components/Page2/Page2.js b/src/components/Page2/Page2.js
new file mode 100644
index 0000000..2c505ea
--- /dev/null
+++ b/src/components/Page2/Page2.js
@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import {
+ PageContainer,
+ Header,
+ Icon,
+ PageTitle,
+ PageDescription,
+ FormContainer,
+ FormContainer2,
+ Select,
+ SubmitButton,
+ TabImageAlt,
+ Input
+} from '../GlobalStyles/Elements';
+
+function Page2() {
+ const [selection, setSelection] = useState({
+ country: '',
+ categoryId: '',
+ startDate: '14-11-17',
+ endDate: '14-06-18',
+ tag: ''
+ });
+
+ // Sample options (replace with your actual values)
+ const countries = ['USA', 'Canada', 'UK', 'Australia'];
+ const categories = ['1', '2', '10', '15', '17', '20', '22']; // Example category IDs
+
+ // Handle input changes
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setSelection((prev) => ({
+ ...prev,
+ [name]: value
+ }));
+ };
+
+ // Handle form submission
+ const handleSubmit = (e) => {
+ e.preventDefault();
+
+ // Format date inputs if needed
+ const formattedStartDate = formatToOracleDate(selection.startDate);
+ const formattedEndDate = formatToOracleDate(selection.endDate);
+
+ // Construct query parameters
+ const query = {
+ country: selection.country || '%',
+ categoryId: selection.categoryId || null,
+ startDate: formattedStartDate,
+ endDate: formattedEndDate,
+ tag: selection.tag || '%'
+ };
+
+ alert(`Query Parameters: ${JSON.stringify(query)}`);
+ // You can now use `query` to make a request to your Oracle database.
+ };
+
+ // Helper function to format date to 'DD-MM-YY'
+ const formatToOracleDate = (date) => {
+ const [year, month, day] = date.split('-');
+ return `${day}-${month}-${year.slice(2)}`; // Convert 'YYYY-MM-DD' to 'DD-MM-YY'
+ };
+
+ return (
+
+ {/* Logo and Navigation */}
+
+
+ {/* Page Title and Description */}
+ Page 2
+ Select your search criteria for trending videos.
+
+ {/* Form Section */}
+
+ {/* Country Dropdown */}
+
+
+ {/* Category ID Dropdown */}
+
+
+ {/* Start Date Input */}
+
+
+ {/* End Date Input */}
+
+
+ {/* Tag Input with Autocomplete (Basic Implementation) */}
+
+
+
+
+
+ {/* Submit Button */}
+ Submit
+
+ {/* Image Section */}
+
+
+
+
+ );
+}
+
+export default Page2;
diff --git a/src/components/Page3/Page3.js b/src/components/Page3/Page3.js
new file mode 100644
index 0000000..7c7ffbc
--- /dev/null
+++ b/src/components/Page3/Page3.js
@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import {
+ PageContainer,
+ Header,
+ Icon,
+ PageTitle,
+ PageDescription,
+ FormContainer,
+ FormContainer2,
+ Select,
+ SubmitButton,
+ TabImageAlt,
+ Input
+} from '../GlobalStyles/Elements';
+
+function Page3() {
+ const [selection, setSelection] = useState({
+ country: '',
+ categoryId: '',
+ startDate: '14-11-17',
+ endDate: '14-06-18',
+ tag: ''
+ });
+
+ // Sample options (replace with your actual values)
+ const countries = ['USA', 'Canada', 'UK', 'Australia'];
+ const categories = ['1', '2', '10', '15', '17', '20', '22']; // Example category IDs
+
+ // Handle input changes
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setSelection((prev) => ({
+ ...prev,
+ [name]: value
+ }));
+ };
+
+ // Handle form submission
+ const handleSubmit = (e) => {
+ e.preventDefault();
+
+ // Format date inputs if needed
+ const formattedStartDate = formatToOracleDate(selection.startDate);
+ const formattedEndDate = formatToOracleDate(selection.endDate);
+
+ // Construct query parameters
+ const query = {
+ country: selection.country || '%',
+ categoryId: selection.categoryId || null,
+ startDate: formattedStartDate,
+ endDate: formattedEndDate,
+ tag: selection.tag || '%'
+ };
+
+ alert(`Query Parameters: ${JSON.stringify(query)}`);
+ // You can now use `query` to make a request to your Oracle database.
+ };
+
+ // Helper function to format date to 'DD-MM-YY'
+ const formatToOracleDate = (date) => {
+ const [year, month, day] = date.split('-');
+ return `${day}-${month}-${year.slice(2)}`; // Convert 'YYYY-MM-DD' to 'DD-MM-YY'
+ };
+
+ return (
+
+ {/* Logo and Navigation */}
+
+
+ {/* Page Title and Description */}
+ Page 3
+ Select your search criteria for trending videos.
+
+ {/* Form Section */}
+
+ {/* Country Dropdown */}
+
+
+ {/* Category ID Dropdown */}
+
+
+ {/* Start Date Input */}
+
+
+ {/* End Date Input */}
+
+
+ {/* Tag Input with Autocomplete (Basic Implementation) */}
+
+
+
+
+
+ {/* Submit Button */}
+ Submit
+
+ {/* Image Section */}
+
+
+
+
+ );
+}
+
+export default Page3;
diff --git a/src/components/Page4/Page4.js b/src/components/Page4/Page4.js
new file mode 100644
index 0000000..defde0b
--- /dev/null
+++ b/src/components/Page4/Page4.js
@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import {
+ PageContainer,
+ Header,
+ Icon,
+ PageTitle,
+ PageDescription,
+ FormContainer,
+ FormContainer2,
+ Select,
+ SubmitButton,
+ TabImageAlt,
+ Input
+} from '../GlobalStyles/Elements';
+
+function Page4() {
+ const [selection, setSelection] = useState({
+ country: '',
+ categoryId: '',
+ startDate: '14-11-17',
+ endDate: '14-06-18',
+ tag: ''
+ });
+
+ // Sample options (replace with your actual values)
+ const countries = ['USA', 'Canada', 'UK', 'Australia'];
+ const categories = ['1', '2', '10', '15', '17', '20', '22']; // Example category IDs
+
+ // Handle input changes
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setSelection((prev) => ({
+ ...prev,
+ [name]: value
+ }));
+ };
+
+ // Handle form submission
+ const handleSubmit = (e) => {
+ e.preventDefault();
+
+ // Format date inputs if needed
+ const formattedStartDate = formatToOracleDate(selection.startDate);
+ const formattedEndDate = formatToOracleDate(selection.endDate);
+
+ // Construct query parameters
+ const query = {
+ country: selection.country || '%',
+ categoryId: selection.categoryId || null,
+ startDate: formattedStartDate,
+ endDate: formattedEndDate,
+ tag: selection.tag || '%'
+ };
+
+ alert(`Query Parameters: ${JSON.stringify(query)}`);
+ // You can now use `query` to make a request to your Oracle database.
+ };
+
+ // Helper function to format date to 'DD-MM-YY'
+ const formatToOracleDate = (date) => {
+ const [year, month, day] = date.split('-');
+ return `${day}-${month}-${year.slice(2)}`; // Convert 'YYYY-MM-DD' to 'DD-MM-YY'
+ };
+
+ return (
+
+ {/* Logo and Navigation */}
+
+
+ {/* Page Title and Description */}
+ Page 4
+ Select your search criteria for trending videos.
+
+ {/* Form Section */}
+
+ {/* Country Dropdown */}
+
+
+ {/* Category ID Dropdown */}
+
+
+ {/* Start Date Input */}
+
+
+ {/* End Date Input */}
+
+
+ {/* Tag Input with Autocomplete (Basic Implementation) */}
+
+
+
+
+
+ {/* Submit Button */}
+ Submit
+
+ {/* Image Section */}
+
+
+
+
+ );
+}
+
+export default Page4;
diff --git a/src/components/Page5/Page5.js b/src/components/Page5/Page5.js
new file mode 100644
index 0000000..ec705e5
--- /dev/null
+++ b/src/components/Page5/Page5.js
@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import {
+ PageContainer,
+ Header,
+ Icon,
+ PageTitle,
+ PageDescription,
+ FormContainer,
+ FormContainer2,
+ Select,
+ SubmitButton,
+ TabImageAlt,
+ Input
+} from '../GlobalStyles/Elements';
+
+function Page5() {
+ const [selection, setSelection] = useState({
+ country: '',
+ categoryId: '',
+ startDate: '14-11-17',
+ endDate: '14-06-18',
+ tag: ''
+ });
+
+ // Sample options (replace with your actual values)
+ const countries = ['USA', 'Canada', 'UK', 'Australia'];
+ const categories = ['1', '2', '10', '15', '17', '20', '22']; // Example category IDs
+
+ // Handle input changes
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setSelection((prev) => ({
+ ...prev,
+ [name]: value
+ }));
+ };
+
+ // Handle form submission
+ const handleSubmit = (e) => {
+ e.preventDefault();
+
+ // Format date inputs if needed
+ const formattedStartDate = formatToOracleDate(selection.startDate);
+ const formattedEndDate = formatToOracleDate(selection.endDate);
+
+ // Construct query parameters
+ const query = {
+ country: selection.country || '%',
+ categoryId: selection.categoryId || null,
+ startDate: formattedStartDate,
+ endDate: formattedEndDate,
+ tag: selection.tag || '%'
+ };
+
+ alert(`Query Parameters: ${JSON.stringify(query)}`);
+ // You can now use `query` to make a request to your Oracle database.
+ };
+
+ // Helper function to format date to 'DD-MM-YY'
+ const formatToOracleDate = (date) => {
+ const [year, month, day] = date.split('-');
+ return `${day}-${month}-${year.slice(2)}`; // Convert 'YYYY-MM-DD' to 'DD-MM-YY'
+ };
+
+ return (
+
+ {/* Logo and Navigation */}
+
+
+ {/* Page Title and Description */}
+ Page 5
+ Select your search criteria for trending videos.
+
+ {/* Form Section */}
+
+ {/* Country Dropdown */}
+
+
+ {/* Category ID Dropdown */}
+
+
+ {/* Start Date Input */}
+
+
+ {/* End Date Input */}
+
+
+ {/* Tag Input with Autocomplete (Basic Implementation) */}
+
+
+
+
+
+ {/* Submit Button */}
+ Submit
+
+ {/* Image Section */}
+
+
+
+
+ );
+}
+
+export default Page5;