Merge branch 'next_button' into 'main'

add next button in filters

See merge request saburly/marketalarm/kivi-za-auta-react!23

kivi-cars/package-lock.json

@@ -11,9 +11,10 @@
         "@testing-library/jest-dom": "^5.16.2",
         "@testing-library/react": "^12.1.3",
         "@testing-library/user-event": "^13.5.0",
-        "nouislider": "^15.5.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-hook-form": "^7.29.0",
+        "react-router-dom": "^6.2.2",
         "react-scripts": "5.0.0",
         "web-vitals": "^2.1.4"
       }
@@ -7983,6 +7984,14 @@
         "he": "bin/he"
       }
     },
+    "node_modules/history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -11157,11 +11166,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/nouislider": {
-      "version": "15.5.1",
-      "resolved": "https://registry.npmjs.org/nouislider/-/nouislider-15.5.1.tgz",
-      "integrity": "sha512-V8LNPhLPXLNjkgXLfyzDRGDeKvzZeaiIx5YagMiHnOMqgcRzT75jqvEZYXbSrEffXouwcEShSd8Vllm2Nkwqew=="
-    },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -13169,6 +13173,21 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
       "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
     },
+    "node_modules/react-hook-form": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.29.0.tgz",
+      "integrity": "sha512-NcJqWRF6el5HMW30fqZRt27s+lorvlCCDbTpAyHoodQeYWXgQCvZJJQLC1kRMKdrJknVH0NIg3At6TUzlZJFOQ==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -13182,6 +13201,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.2.tgz",
+      "integrity": "sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==",
+      "dependencies": {
+        "history": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.2.tgz",
+      "integrity": "sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==",
+      "dependencies": {
+        "history": "^5.2.0",
+        "react-router": "6.2.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
@@ -21738,6 +21781,14 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -24027,11 +24078,6 @@
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
       "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A=="
     },
-    "nouislider": {
-      "version": "15.5.1",
-      "resolved": "https://registry.npmjs.org/nouislider/-/nouislider-15.5.1.tgz",
-      "integrity": "sha512-V8LNPhLPXLNjkgXLfyzDRGDeKvzZeaiIx5YagMiHnOMqgcRzT75jqvEZYXbSrEffXouwcEShSd8Vllm2Nkwqew=="
-    },
     "npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -25358,6 +25404,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
       "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
     },
+    "react-hook-form": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.29.0.tgz",
+      "integrity": "sha512-NcJqWRF6el5HMW30fqZRt27s+lorvlCCDbTpAyHoodQeYWXgQCvZJJQLC1kRMKdrJknVH0NIg3At6TUzlZJFOQ==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -25368,6 +25420,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.2.tgz",
+      "integrity": "sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.2.tgz",
+      "integrity": "sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.2.2"
+      }
+    },
     "react-scripts": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",

kivi-cars/package.json

@@ -6,9 +6,9 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
-    "nouislider": "^15.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
   },

kivi-cars/public/manifest.json

@@ -1,23 +1,23 @@
 {
   "short_name": "React App",
   "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
+  // "icons": [
+  //   {
+  //     "src": "favicon.ico",
+  //     "sizes": "64x64 32x32 24x24 16x16",
+  //     "type": "image/x-icon"
+  //   },
+  //   {
+  //     "src": "logo192.png",
+  //     "type": "image/png",
+  //     "sizes": "192x192"
+  //   },
+  //   {
+  //     "src": "logo512.png",
+  //     "type": "image/png",
+  //     "sizes": "512x512"
+  //   }
+  // ],
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",

kivi-cars/src/components/Button/StandardBtn.js

@@ -1,10 +1,22 @@
+import React from 'react'
 import './button.css'
 
 const StandardBtn = (props) => {
+
+    const {setData, filter} = props.data
+
+    const clickHandler = ( e ) => {
+        setData( prevState => ({
+            ...prevState,
+            "Category":{
+                [e.target.name]: e.target.value
+            }
+        }))
+    }
+
     return (
         <div className='standard-btn'>
-
-           <button className='standardBtn'>{props.title}</button>
+           <button name={filter} value={props.title} className='standardBtn' onClick={e => clickHandler(e)}>{props.title}</button>
         </div>
     )
 }

kivi-cars/src/components/Button/TitleBtn.js

@@ -0,0 +1,13 @@
+import './button.css'
+
+const StandardBtn = (props) => {
+
+    return (
+        <div className='standard-btn'>
+
+           <button value={props.title} className='standardBtn'>{props.title}</button>
+        </div>
+    )
+}
+
+export default StandardBtn

kivi-cars/src/components/Button/button.css

@@ -4,9 +4,9 @@
 }
 
 .standardBtn {
-    width:300px;
+    width: 300px;
     background-color: #02ADBA;
-    font-size: 15px;
+    font-size: 25px;
     padding: 7px 20px 7px 20px;
     color: white;
     border: #02ADBA;
@@ -31,11 +31,22 @@
     background-color:#9eedf3;
 }
 
+@media screen and (max-width: 900px) {
+    .standardBtn {
+        width: 250px;
+        background-color: #02ADBA;
+        font-size: 20px;
+        padding: 7px 20px 7px 20px;
+        color: white;
+        border: #02ADBA;
+    }
+  }
+
 @media screen and (max-width: 700px) {
     .standardBtn {
-        width: 200px;
+        width: 170px;
         background-color: #02ADBA;
-        font-size: 15px;
+        font-size: 20px;
         padding: 7px 20px 7px 20px;
         color: white;
         border: #02ADBA;
@@ -44,7 +55,7 @@
 
   
 
-  @media screen and (max-width: 400px) {
+  @media screen and (max-width: 420px) {
     .standardBtn {
         width: 150px;
         background-color: #02ADBA;

kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.js

@@ -1,17 +1,23 @@
 import './ButtonsToolbar.css';
+import { Link } from 'react-router-dom'
 import ArrowLeft from '../Button/leftBtn';
-import ArrowRigh from '../Button/rightBtn';
+// import ArrowRigh from '../Button/rightBtn';
 
 
 const ButtonsToolbar = (props) => {
     return (
         <div className='buttons-toolbar'>
             <div className='left-group'>
-                <ArrowLeft />
-            </div>
-            <div className='right-group'>
-                <ArrowRigh/>
+                <Link to={`${props.routes.prev}`}>
+                    <ArrowLeft />
+                </Link>
             </div>
+            {/* <div className='right-group'>
+                <Link to={`${props.routes.next}`}>
+                    <ArrowRigh/>
+                </Link>
+                
+            </div> */}
         </div>
     )
 } 

kivi-cars/src/components/CategoryBtns/categorybtns.css

@@ -0,0 +1,3 @@
+.category-btns {
+    margin-top: 50px;
+}

kivi-cars/src/components/CategoryBtns/categorybtns.js

@@ -1,16 +1,30 @@
 import './categorybtns.css'
 import StandardBtn from '../Button/StandardBtn'
+import { Link } from 'react-router-dom';
+import { useEffect, useState } from 'react';
 
-var auto = 'AUTO';
-var motor = 'MOTOR';
-var kamion = 'KAMION';
 
 const CategoryBtns = (props) => {
+
+    let auto = 'Auto';
+    let motor = 'Motor';
+    let kamion = 'Teretno vozilo';
+    let filter = 'Vozilo';
+
+    const {data, setData} = props.data;
+
     return ( 
         <div className='category-btns'>
-            <StandardBtn title={auto}/>
-            <StandardBtn title={motor}/>
-            <StandardBtn title={kamion}/>
+            <Link to='/filters'>
+                <StandardBtn title={auto} data={{data, setData, filter}}/>
+            </Link>
+            <Link to='/filters'>
+                <StandardBtn title={motor} data={{data, setData, filter}}/>
+            </Link>
+            <Link to='/filters'>
+                <StandardBtn title={kamion} data={{data, setData, filter}}/>
+            </Link>
+            
         </div>
     )
 

kivi-cars/src/components/EmailField/EmailField.js

@@ -0,0 +1,36 @@
+import React, { useRef, useState } from 'react';
+import validator from 'validator';
+import './EmailField.css';
+
+const EmailField = (props) => {
+    
+    const [emailError, setEmailError] = useState('')
+    const validateEmail = (e) => {
+        var email = e.target.value
+    
+        if (validator.isEmail(email)) {
+        setEmailError('Valid Email :)')
+        } else {
+        setEmailError('Enter valid Email!')
+        }
+    }
+    
+    return (
+
+        <div>
+            <hr/>
+            <div>
+                <h2>Unesite VAS Email</h2>
+               
+                <input type='text' id='userid' onChange={(e) => validateEmail(e)}></input>
+
+            </div>
+
+        </div>
+
+    );
+    }
+    
+    
+    
+export default EmailField;

kivi-cars/src/components/Filters.css

@@ -1,59 +0,0 @@
-@media only screen and (min-width: 601px) {
-    .container {
-        width: 80%;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        margin: auto;
-    }
-
-    .filters-tab {
-        width: 100%;
-        height: 48;
-    }
-
-    .filters-links{
-        margin-top: 2rem;
-        width: 100%;
-        display: flex;
-        flex-grow: 1;
-        flex-wrap: nowrap;
-        justify-content: space-evenly;
-        list-style-type: none;
-    }
-
-    .filters-links li {
-        text-align: center;
-        width: 7rem;
-        flex-grow: 1;
-        flex-wrap: nowrap;
-
-    }
-
-    .filters {
-        display: inline-block;
-        border-bottom: 2px solid #02adba;
-        width: 5rem;
-        padding: 1rem 10rem;
-        white-space: nowrap;
-        margin-left: auto;
-        font-size: 22px;
-    }
-
-    .filters a{
-        text-decoration: none;
-        color: #02adba;
-    }
-
-    .filters a:visited {
-        color: #02adba;
-    }
-
-    .cars-brands-models {
-        border: 2px solid blue;
-        width: 100%;
-    }
-
-}
-
-

kivi-cars/src/components/Filters.js

@@ -1,41 +0,0 @@
-import React from "react";
-import "./Filters.css";
-import Cars from "./cars";
-
-const Filters = () => {
-
-    const unsortedCars = Cars
-    const cars = unsortedCars.sort(unsortedCars.brand)
-
-
-
-    return(
-            <div className="container">
-                <div className="filters-tabs">
-                    <ul className="filters-links">
-                        <li className="filters">
-                            <a id="standard-filters" href="#">Filteri</a>
-                        </li> 
-                        <li className="filters">
-                            <a id="advanced-filters" href="#">Napredni filteri</a>
-                        </li>
-                    </ul>
-                </div>
-                <div className="container-standard">
-                    <div className="cars-brands-models">
-                        <label>Marka: </label>
-                        <select name="brands" id="brands">
-                            {cars.map(car => <option className="option-field" value={car.brand}>{car.brand}</option>)}
-                        </select>
-                    </div>
-                </div>
-                <div className="container-advanced">
-                    
-                </div>
-
-
-        </div>
-    )
-}
-
-export default Filters

kivi-cars/src/components/Filters/Advanced-filters.js

@@ -0,0 +1,55 @@
+import React from "react";
+import "./Filters.css";
+import Filter from "./Filter/Filter";
+import TitleBtn from "../Button/TitleBtn";
+import {Link} from 'react-router-dom';
+import Color from '../../data/color';
+import AirCondition from "../../data/air-condition";
+import Seats from "../../data/seats";
+import Sensors from "../../data/sensors";
+import Gearbox from "../../data/gearbox";
+import Lights from "../../data/lights";
+import Checkbox from "./Filter/Checkbox";
+import CheckBox from "../../data/checkbox";
+
+
+const AdvancedFilters = (props) => {
+
+    const {filters, setFilters} = props.data
+    const data1 = [Color, AirCondition, Seats, Gearbox, Sensors, Lights]
+    let index = 0
+
+
+    return(
+        <div className="filters-container">
+            <div className="filters-content">
+            {
+                data1.map(item => {
+                    index += 1;
+                    return(
+                        <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{filters, setFilters}}/>
+                    )
+                })
+            }
+            </div>
+            <div className="checkbox-content">
+            {
+                CheckBox.map(item => {
+                    index += 1;
+                    return(
+                        <Checkbox key={index} title={item} data={{filters, setFilters}}/>
+                    )
+                })
+            }
+            </div>
+
+            <div style={{marginTop: 50}}>
+                <Link to="/location">
+                    <TitleBtn title="Dalje" />
+                </Link>
+            </div>
+        </div>
+    )
+}
+
+export default AdvancedFilters

kivi-cars/src/components/Filters/Filter/Checkbox.js

@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+import './css/Checkbox.css';
+
+const Checkbox = (props) => {
+
+
+    const {setFilters} = props.data
+    const [isChecked, setIsChecked] = useState(true)
+
+
+    const changeHandler = ( event ) => {
+        setFilters(prevData => ({
+            ...prevData,
+            [event.target.name]: isChecked
+        }))
+    }
+
+    return(
+        <div className="checkbox-div">
+            <label className="checkbox-title" htmlFor={`${props.title}`}>{props.title}</label>
+            <input type="checkbox" name={props.title} className="checkbox" id={`${props.title}`} onChange={(e) => {changeHandler(e); setIsChecked(!isChecked)}}/>
+        </div>
+    )
+}
+
+export default Checkbox;

kivi-cars/src/components/Filters/Filter/DoubleFilter.js

@@ -0,0 +1,40 @@
+import React, {useEffect, useState} from "react";
+import "./css/DoubleFilter.css";
+
+const DoubleFilter = (props) => {
+
+    const {setFilters} = props.data
+    const [doubleFilterData, setDoubleFilterData] = useState({})
+
+    const changeHandler = ( e ) => {
+        setDoubleFilterData(prevData => ({
+            ...prevData,
+            [e.target.name]: e.target.value     
+        }))
+    }
+
+    useEffect(() => {
+        setFilters(prevData => ({
+            ...prevData,
+            [props.title]: doubleFilterData
+        }))
+    }, [doubleFilterData])
+
+    return (
+        <div className="doubleFilter-component">
+            <label htmlFor="filters-div">{props.title}</label>
+            <div className="double-filters" id="filters-div">
+                <div className="filter">
+                <label htmlFor="od" className="filter-info">Od</label>
+                <input placeholder="Unesite" id="od" name="Od" className="filter-number" type="number" min={props.fields.min} max={props.fields.max} onChange={(e) => changeHandler(e)}/>
+                </div>
+                <div className="filter"> 
+                <label htmlFor="do" className="filter-info">Do</label>
+                <input placeholder="Unesite" id="do" name="Do" className="filter-number" type="number" min={props.fields.min} max={props.fields.max} onChange={(e) => changeHandler(e)}/>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default DoubleFilter;

kivi-cars/src/components/Filters/Filter/Filter.js

@@ -0,0 +1,29 @@
+import React from "react";
+import './css/Filter.css';
+
+const Filter = (props) => {
+
+    const {setFilters} = props.data
+
+    const changeHandler = ( e ) => {
+        setFilters( prevData => ({
+            ...prevData,
+            [e.target.name]: e.target.value
+        }))
+    }
+
+    return(
+        <div className="filter-component">
+            <label htmlFor={props.ime} className="filter-name">{props.ime}</label>
+            <select className="dropdown-list" name={props.ime} id={props.ime} onChange={(e) => changeHandler(e)}>
+                {props.tipovi.map((tip, i) => {
+                    return (
+                        <option key={i} value={tip} name={tip}>{tip}</option>
+                    )
+                })}
+            </select>
+        </div>
+    )
+}
+
+export default Filter;

kivi-cars/src/components/Filters/Filter/LocationCheckbox.js

@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from "react";
+import './css/LocationCheckbox.css';
+
+const LocationCheckbox = (props) => {
+
+    const {setCheckboxStatus} = props.data;
+    const [checked, setChecked] = useState(true)
+
+    const changeHandler = (e) => {
+        setCheckboxStatus(prevStatus => ({
+            ...prevStatus,
+            [e.target.name]: checked
+        }))
+    }
+
+
+    return (
+        <div className="checkbox">
+            <label className="checkbox-title" htmlFor={props.title}>{props.title}</label>
+            <input className="check-box" type="checkbox" name={props.title} id={props.title} onChange={(e)=> {
+                setChecked(!checked)
+                changeHandler(e)
+                }}/>
+        </div>
+    )
+}
+
+export default LocationCheckbox;

kivi-cars/src/components/Filters/Filter/css/Checkbox.css

@@ -0,0 +1,24 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.checkbox-div{
+    padding: 0.5em;
+    text-align: center;
+}
+
+.checkbox-title{
+    margin-right: 0.5em
+}
+
+.checkbox{
+    width: 20px;
+    height: 20px;
+}
+
+@media only screen and (min-width: 541px){
+    .checkbox-div{
+        font-size: 1.5em;
+    }
+}

kivi-cars/src/components/Filters/Filter/css/DoubleFilter.css

@@ -0,0 +1,48 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.doubleFilter-component{
+    padding: 0.5em;
+    width: 100%;
+    box-sizing: border-box;
+    text-align: center;
+}
+
+label{
+    width: 100%;
+
+}
+
+.double-filters{
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-around;
+}
+
+.filter{
+    padding: 0.5em;
+}
+
+.filter input{
+    width: 6em;
+    height: 2em;
+    text-align: center;
+    border: 2px solid #02adba;
+    background-color: #fff;
+    border-radius: 5px;
+    margin-left: 0.5em;
+}
+
+@media only screen and (min-width: 541px) {
+    .doubleFilter-component{
+        font-size: 24px;
+    }
+
+    .filter input{
+        font-size: 20px;
+    }
+}

kivi-cars/src/components/Filters/Filter/css/Filter.css

@@ -0,0 +1,32 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.filter-component{
+    padding: 0.5em;
+    width: 50%;
+    box-sizing: border-box;
+    text-align: center;
+}
+
+.dropdown-list{
+    width: 10em;
+    height: 2em;
+    text-align: center;
+    border: 2px solid #02adba;
+    background-color: #fff;
+    border-radius: 5px;
+    margin-top: 0.25em;
+}
+
+@media only screen and (min-width: 541px) {
+    .filter-component{
+        font-size: 24px;
+    }
+
+    .dropdown-list{
+        margin-left: 1em;
+        font-size: 20px;
+    }
+}

kivi-cars/src/components/Filters/Filter/css/LocationCheckbox.css

@@ -0,0 +1,47 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.checkbox{
+    margin-top: 1em;
+    min-width: 60%;
+    height: 2em;
+    line-height: 1.5em;
+}
+
+.checkbox-title{
+    font-size: 16px;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.check-box{
+    zoom: 1.5;
+    position: relative;
+    top: 3px;
+}
+
+
+
+@media only screen and (min-width: 541px){
+    .checkbox{
+        min-width: 40%;
+        max-width: 50%;
+    }
+
+    .checkbox-title{
+        font-size: 18px;
+    }
+
+}
+
+@media only screen and (min-width: 921px){
+    .checkbox{
+        min-width: 30%;
+        max-width: 35%;
+    }
+
+    .checkbox-title{
+        font-size: 20px;
+    }
+}

kivi-cars/src/components/Filters/Filters.css

@@ -0,0 +1,49 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.filters-container{
+    width: 90%;
+    margin: auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.filters-content{
+    padding: 2em;
+    width: 90%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    border-bottom: 2px solid #02adba;
+}
+
+.checkbox-content{
+    padding: 2em 0.5em;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+@media only screen and (min-width: 541px){
+    .filters-content{
+        padding: 2em 5em;
+    }
+
+    
+
+    /* .checkbox-content{
+        width: ;
+    } */
+
+
+}
+
+
+

kivi-cars/src/components/Filters/Standard-filters.js

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from "react";
+import {Link} from 'react-router-dom';
+import "./Filters.css";
+import Filter from "./Filter/Filter";
+import DoubleFilter from "./Filter/DoubleFilter";
+import TitleBtn from "../Button/TitleBtn";
+import vehicleService from "../../services/vehicle-service";
+
+const StandardFilters = (props) => {
+
+    const {data, filters, setFilters} = props.data;
+    const [brandIndex, setBrandIndex] = useState(0);
+    let index = 0;
+    let details, marke;
+
+    details = vehicleService(data.Category.Vozilo);
+    const {show, brands, data1, data2, data3} = details;
+
+    const [model, setModel] = useState(show);
+
+
+    useEffect(() => {
+        if(filters.Marka)setBrandIndex(marke.indexOf(filters.Marka))
+    }, [filters])
+
+
+    marke = brands.map(marka => {return marka.brand})
+
+    return(
+        <div className="filters-container">
+            <Filter ime={"Marka"} tipovi={marke} data={{data, filters, setFilters}}/>
+            {model ? (<Filter ime={"Model"} tipovi={brands[brandIndex].models} data={{data, filters, setFilters}}/>): null}
+
+            {data1.map(item => {
+                index += 1;
+                return(
+                    <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{data, filters, setFilters}}/>
+                )
+            })}
+
+            {data2.map(item => {
+                index += 1;
+                return(
+                    <DoubleFilter key={index} title={item.title} fields={item.fields} data={{data, filters, setFilters}}/>
+                )
+            })}
+            
+            {data3.map(item => {
+                index += 1;
+                return(
+                    <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{data, filters, setFilters}}/>
+                )
+            })}
+
+            <div style={{marginTop: 50}}>
+                <Link to="/location">
+                    <TitleBtn title="Dalje" />
+                </Link>
+            </div>
+        </div>
+    )
+}
+
+export default StandardFilters

kivi-cars/src/components/FiltersNavbar/FiltersNav.css

@@ -0,0 +1,55 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+/* color:#02adba */
+
+.links-container ul li {
+    display: inline-block;
+}
+
+.active {
+    border-bottom: 3px solid #02adba;
+}
+
+.links-container{
+    background-color: #fff;
+    position: sticky;
+    top: 0;
+}
+
+.filters-links{
+    display: flex;
+    justify-content: space-around;
+    padding: 1em;
+    box-sizing: border-box;
+    text-align: center;
+}
+
+.filters-link{
+    padding: 0.5em 2.5em;
+    white-space: none;
+    flex-grow: 1;
+    cursor: pointer;
+}
+
+@media only screen and (min-width: 541px){
+    .filters-link {
+        line-height: 54px;
+        font-size: 26px;
+    }
+}
+
+@media only screen and (min-width: 921px){
+    .filters-link {
+        line-height: 54px;
+        font-size: 24px;
+
+    }
+
+    .filters-links {
+        width: 90%;
+        margin: auto;
+    }
+}

kivi-cars/src/components/FiltersNavbar/FiltersNav.js

@@ -0,0 +1,22 @@
+import './FiltersNav.css';
+
+const FiltersNav = (props) => {
+
+    const {toggle, setToggle} = props.toggle;
+
+
+    return(
+        <div className="links-container">
+            <ul className="filters-links">
+                <li className={toggle ? `filters-link active`: `filters-link`} onClick={() => setToggle(true)}>
+                    <p id="standard-filters" >Filteri</p>
+                </li> 
+                <li className={!toggle ? `filters-link active`: `filters-link`} onClick={() => setToggle(false)}>
+                    <p id="advanced-filters" >Napredni filteri</p>
+                </li>
+            </ul>
+        </div>
+    )
+}
+
+export default FiltersNav;

kivi-cars/src/components/Header/Header.css

@@ -11,16 +11,19 @@ header {
     resize: both;
     padding: 20px;
     font-size: 25px;
+    text-align:center;
 }
 
   @media screen and (max-width: 700px) {
     .title {
-        font-size: 20px;
+        font-size: 25px;
+        padding: auto;
+        
     }
   }
 
-@media screen and (max-width: 300px) {
+@media screen and (max-width: 350px) {
     .title {
-        font-size: 17px;
+        font-size: 20px;
     }
   }

kivi-cars/src/components/Location/LocationFilter.css

@@ -0,0 +1,21 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.locationFilter-div{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin: auto;
+    width: 80%;
+    padding: 3em;
+    border-bottom: 2px solid #02adba;
+}
+
+.location-title {
+    width: 30%;
+    font-size: 22px;
+    text-align: center;
+}
+

kivi-cars/src/components/Location/LocationFilter.js

@@ -0,0 +1,42 @@
+import React from "react";
+import './LocationFilter.css';
+import Location from "../../data/location";
+
+const LocationFilter = (props) => {
+
+    const {setLocationData} = props.data;
+
+    const clickHandler = (e) => {
+        setLocationData( prevData => ( {
+                ...prevData,
+                "kanton": e.target.value
+            }))
+    }
+
+
+    return (
+        <div className="locationFilter-div">
+            <label className="location-title" htmlFor={Location.ime}>Izaberite lokaciju:</label>
+            <select name={Location.ime} id={Location.ime} onChange={(e) => clickHandler(e) }>
+                <option value="Svi">Svi</option>
+                <optgroup label={Location.entiteti[0].entitet}>
+                    {Location.entiteti[0].kantoni.map((kanton, i) => {
+                        return(
+                            <option key={i} name="kanton" value={kanton.kanton}>{kanton.kanton}</option>
+                        )
+                    })}
+                </optgroup>
+                <optgroup label={Location.entiteti[1].entitet}>
+                    {Location.entiteti[1].kantoni.map((kanton, i) => {
+                        return(
+                            <option key={i} name="kanton" value={kanton.kanton}>{kanton.kanton}</option>
+                        )
+                    })}
+                </optgroup>
+                <option style={{fontWeight: "bold"}} name="distrikt" value={Location.entiteti[2].entitet}>{Location.entiteti[2].entitet}</option>
+            </select>
+        </div>
+    )
+}
+
+export default LocationFilter;

kivi-cars/src/containers/App.js

@@ -1,22 +1,40 @@
-import './App.css';
-import React from 'react';
-import Filters from '../components/Filters';
-import Header from '../components/Header/Header';
-import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
-import CategoryBtns from '../components/CategoryBtns/categorybtns'
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import './css/App.css';
+import { React, useEffect, useState } from 'react';
+import CategoryPage from './CategoryPage';
+import LandingPage from './LandingPage';
+import FiltersPage from './FiltersPage';
+import LocationPage from './LocationPage';
+import EmailPage from './EmailPage';
+import CongratsPage from './CongratsPage';
+import LinkR from '../data/routes';
+  
+
 function App() {
 
-  const naslov = 'Dobrodosli na stranicu kivi!'
+  // const info = 'Dobrodosli na stranicu kivi!'
+  const [data, setData] = useState({})
+
+  useEffect(() => {
+    console.log(data)
+  }, [data])
 
 
   return (
     <div className="App">
-      <Header header={naslov}/>
-      <ButtonsToolbar/>
-      <CategoryBtns/>
-      
+      <Router>
+        <Routes>
+        
+          <Route path='/' element={<LandingPage />} />
+          <Route path='category' element={<CategoryPage data={{data, setData}} routes={LinkR.category} />}/>
+          <Route path='filters' element={<FiltersPage data={{data, setData}} routes={LinkR.filters}/>}/>
+          <Route path='location' element={<LocationPage data={{data, setData}} routes={LinkR.location}/>}/>
+          <Route path='email' element={<EmailPage data={{data, setData}} routes={LinkR.email} />}/>
+          <Route path='congrats' element={<CongratsPage data={{data, setData}} routes={LinkR.congrats} />}/>
+        
+        </Routes>
+      </Router>
     </div>
- 
   );
 }
 

kivi-cars/src/containers/CategoryPage.js

@@ -0,0 +1,22 @@
+import Header from '../components/Header/Header';
+import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
+import CategoryBtns from '../components/CategoryBtns/categorybtns'
+import './css/CategoryPage.css'
+
+function CategoryPage(props) {
+
+  const {data, setData} = props.data
+
+  const naslov = 'IZABERITE KATEGORIJU'
+  return (
+    <div className="category">
+        <Header header={naslov}/>
+        <ButtonsToolbar routes={props.routes}/>
+        <div className='category-buttons'>
+          <CategoryBtns data={{data, setData}}/>
+        </div>
+    </div>
+  );
+}
+
+export default CategoryPage;

kivi-cars/src/containers/CongratsPage.js

@@ -0,0 +1,34 @@
+import Header from '../components/Header/Header';
+import TitleBtn from '../components/Button/TitleBtn';
+import './css/CongratsPage.css'
+import { Link } from 'react-router-dom';
+
+function CongratsPage() {
+
+  const naslov = 'ČESTITAMO!'
+  const btnTitle = 'NOVA PRETRAGA'
+
+  return (
+    <div className="congrats-page">
+      <Header header={naslov}/>
+      <div className='paragh-div'>
+          <div className='first-paragh'>
+              <h2 className='h2'>ČESTITAMO! Potvrđeni email je poslat na vašu email adresu.</h2>
+          </div>
+          <div className='second-paragh'>
+              <h2 className='h2'>Svi rezultati će u najkraćem roku biti poslani na vašu adresu.</h2>
+          </div>
+          <div className='third-paragh'>
+              <h1 className='h1'>Ako želite novu pretragu idete na</h1>
+          </div>
+          
+          <Link to='/'>
+            <TitleBtn title={btnTitle}/>
+          </Link>
+          
+      </div>
+    </div>
+  );
+}
+
+export default CongratsPage;

kivi-cars/src/containers/EmailPage.js

@@ -0,0 +1,96 @@
+import { useState, useEffect} from 'react';
+import './css/EmailPage.css'
+import Header from '../components/Header/Header';
+import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
+import StandardBtn from '../components/Button/StandardBtn';
+import TitleBtn from '../components/Button/TitleBtn';
+import { Link } from 'react-router-dom';
+
+
+function EmailPage(props) {
+
+    const {data, setData} = props.data
+    const [error, setError] = useState(false)
+
+
+    const [state, setState] = useState({
+        email: "",
+        confirmEmail: ""
+    })
+
+    const header = "SLANJE OBAVJEŠTENJA";
+    let title1 = 'Odmah';
+    let title2 = 'Dnevno';
+    let title3 = 'ZAVRŠI';
+    let errmsg = 'Email does not match!';
+    let filter = 'Slanje'
+
+
+    const emailCheck = (e, ec) => {
+        if(e !== "" && e === ec){
+            setError(false)
+            setData(prevData => ({
+                ...prevData,
+                "Email": state.email
+            }))
+            return error
+        }else {
+            setError(true)
+            return error
+        }
+    }
+
+    const updateInput = (event) => {
+        setState(prevState => ({
+            ...prevState,
+            [event.target.name]: event.target.value
+        }))
+    }
+
+    useEffect(() => {
+        emailCheck(state.email, state.confirmEmail)
+    }, [state])
+
+    return ( 
+        <div>
+            <Header header={header}/>
+            <ButtonsToolbar routes={props.routes}/>
+            <div className="info">
+                <h2 className='h2'>Slanje obavještenja</h2>
+            </div>
+            <div className='buttons-container'>
+                <StandardBtn data={{data, setData, filter}} title={title1}/>
+                <StandardBtn data={{data, setData, filter}} title={title2}/>
+            </div>
+            <div className='form'>
+                <form method="POST" id="form-email">
+                    <div className='email-div'>
+                        <input type="email" id="email" name='email' placeholder='vas.email@mail.com' required size='250' onChange={updateInput} />
+                        <input type="email" id="confirmEmail" name='confirmEmail' placeholder='potvrdite.email@mail.com' required size='250' onChange={updateInput} />
+                        <p style={{color: "red"}} >{error ? errmsg : null}</p>
+                    </div>
+
+                </form>
+            </div>
+            <div>
+                <h3 className='h3-2'>*U svakom trenutku možete prekinuti slanje objava kroz
+                    link u vašem emailu
+                </h3>
+            </div>
+            <div>
+                {error ? (<TitleBtn title={title3} /> ) : (
+                <Link to="/congrats">
+                    <TitleBtn title={title3} />    
+                </Link>
+                )}      
+            </div>
+        </div>
+        
+
+        
+
+
+     );
+}
+
+export default EmailPage;

kivi-cars/src/containers/FiltersPage.js

@@ -0,0 +1,41 @@
+import {React, useEffect, useState} from "react";
+import './css/FiltersPage.css';
+import Header from "../components/Header/Header";
+import ButtonsToolbar from "../components/ButtonsToolbar/ButtonsToolbar";
+import FiltersNav from '../components/FiltersNavbar/FiltersNav';
+import StandardFilters from "../components/Filters/Standard-filters";
+import AdvancedFilters from "../components/Filters/Advanced-filters";
+
+const FiltersPage = (props) => {
+
+    const naslov = "Filteri za pretrazivanje"
+    const [toggle, setToggle] = useState(true)
+    const [filters, setFilters] = useState({});
+    const {data, setData} = props.data
+    
+
+    useEffect(() => {
+        setData( prevData => ({
+            ...prevData,
+            "Filters": filters
+        }))
+    }, [filters])
+
+    const showFilters = (toggle) => {
+        if(toggle){
+            return <StandardFilters data={{data, filters, setFilters}}/>
+        }
+        return <AdvancedFilters data={{data, filters, setFilters}}/>;
+    }
+
+    return(
+        <div className="FiltersPage">
+            <Header header={naslov}/>
+            <ButtonsToolbar routes={props.routes}/> 
+            <FiltersNav toggle={{toggle, setToggle}}/>
+            {showFilters(toggle)}
+        </div>
+    )
+}
+
+export default FiltersPage;

kivi-cars/src/containers/LandingPage.js

@@ -0,0 +1,34 @@
+import logo  from '../assets/logo.png'
+import TitleBtn from '../components/Button/TitleBtn';
+import Header from '../components/Header/Header';
+import './css/LandingPage.css'
+import { Link } from 'react-router-dom';
+
+function LandingPage() {
+
+    const naslov = 'KIVI - CARS';
+    var naziv = 'KUPI';
+  
+    return (
+      <div className="landing-page">
+        <div className='logo-img'>
+            <img className='logo' alt='Logo-img' src={logo}/>
+        </div>
+
+        <Header className='header' header={naslov}/>
+        <div className='paragraph'>
+            <h2> Sva motorna vozila dostupna u oglasima </h2>
+            <h2> Na Vaš email </h2>
+            <h2 id='besplatno'> BESPLATNO </h2>
+            
+        </div>
+        <Link to='/category'>
+          <TitleBtn title={naziv}/>
+        </Link>
+        
+        
+      </div>
+    );
+  }
+  
+  export default LandingPage;

kivi-cars/src/containers/LocationPage.js

@@ -0,0 +1,87 @@
+import React, { useEffect, useState } from 'react';
+import './css/LocationPage.css';
+import Header from "../components/Header/Header";
+import Location from '../data/location';
+import LocationFilter from '../components/Location/LocationFilter';
+import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
+import LocationCheckbox from '../components/Filters/Filter/LocationCheckbox';
+import TitleBtn from '../components/Button/TitleBtn';
+import { Link } from 'react-router-dom';
+
+const LocationPage = (props) => {
+
+    const {data, setData} = props.data
+    const [locationData, setLocationData] = useState({})
+    const [locationInfo, setLocationInfo] = useState({"gradovi": []})
+    const [checkboxStatus, setCheckboxStatus] = useState({})
+    const [location, setLocation] = useState({});
+    const naslov = "Dodajte lokaciju"
+
+    let id = 0;
+
+    useEffect(() => {
+        if(locationData.kanton){
+            Location.entiteti.map(entity => {
+                return entity.kantoni.map(kantony => {
+                    if(locationData.kanton === kantony.kanton){
+                        return setLocationInfo({
+                            "entitet": entity.entitet,
+                            "kanton": kantony.kanton,
+                            "gradovi": kantony.gradovi
+                        })
+                    }
+                })
+            })
+        }setCheckboxStatus({})
+            console.log("locationInfo", locationInfo)
+    }, [locationData])
+
+    useEffect(() => {
+        if(locationData.kanton === 'Distrikt Brcko'){
+            setLocation(
+                {
+                "entitet": "Distrikt Brcko",
+                "kanton": "Distrikt Brcko",
+                "gradovi": "Brcko"
+                }
+            )
+        }else{
+            setLocation( prevData => ({
+                ...prevData,
+                "entitet": locationInfo.entitet,
+                "kanton": locationInfo.kanton,
+                "gradovi": checkboxStatus
+            }))}
+            console.log("location", location)
+    }, [checkboxStatus])
+
+    useEffect(() => {
+        setData( prevData => ({
+            ...prevData,
+            "Location": location
+        }))
+        console.log("data", data)
+    }, [location])
+
+    
+    return (
+        <div className='location-div'>
+            <Header header={naslov}/>
+            <ButtonsToolbar routes={props.routes}/>
+            <LocationFilter data={{setLocationData}}/>
+            <div className='checkbox-div'>
+                {locationInfo.gradovi.map((grad) => {
+                    id += 1
+                    return(
+                        <LocationCheckbox key={id} title={grad} data={{checkboxStatus, setCheckboxStatus}}/>
+                    )
+                })}
+            </div>
+            <Link to="/email">
+                <TitleBtn title="Naredna stranica"/>
+            </Link>
+        </div>
+    );
+}
+
+export default LocationPage

kivi-cars/src/containers/css/App.css

@@ -7,4 +7,8 @@
 .App{
   display: flex;
   flex-direction: column;
+}
+
+p, h1, h2, h3 ,h4 {
+  font-family: Arial, Helvetica, sans-serif;
 }

kivi-cars/src/containers/css/CongratsPage.css

@@ -0,0 +1,64 @@
+.paragh-div{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.first-paragh {
+    padding-top: 20px;
+    margin-top: 50px;
+}
+
+.second-paragh{
+    margin-bottom: 60px;
+    padding: 20px;
+}
+
+.third-paragh{
+    padding: 20px;
+    margin-bottom: 10px;
+}
+
+.h1 {
+    text-align: center;
+}
+
+.h2 {
+    text-align: center;
+}
+
+@media screen and (max-width: 800px) {
+    .h2 {
+        font-size: 20px;}
+  }
+
+
+@media screen and (max-width: 600px) {
+    .h2 {
+        font-size: 17px;}
+  }
+
+
+@media screen and (max-width: 300px) {
+    .h2 {
+        font-size: 15px;}
+  }
+
+  
+@media screen and (max-width: 800px) {
+    .h1 {
+        font-size: 27px;}
+  }
+
+
+@media screen and (max-width: 600px) {
+    .h1 {
+        font-size: 22px;}
+  }
+
+
+@media screen and (max-width: 300px) {
+    .h1 {
+        font-size: 18px;}
+  }

kivi-cars/src/containers/css/EmailPage.css

@@ -0,0 +1,78 @@
+.h2 {
+    margin-top: 1rem;
+    text-align: center;
+    font-size: 300;
+    font-weight: 300;
+}
+
+
+.h3 {
+    margin-top: 2rem;
+    text-align: center;
+    padding: 1rem;
+    font-size: 300;
+    font-weight: 300;
+}
+
+.h3-2 {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    text-align: center;
+    padding: 1rem;
+    font-size: 300;
+    font-weight: 300;
+}
+
+.buttons-container {
+    margin-top: 2rem;
+    display: flex;
+    justify-content:center;
+    gap: 20px;
+}
+
+#email {
+    width: 80%;
+    font-size: 15px;
+    padding: 20px;
+    margin: 10px;
+    border: hidden;
+    border-bottom: 1px solid lightslategrey;
+}
+#email:active {
+    width: 80%;
+    font-size: 15px;
+    padding: 20px;
+    margin: 10px;
+    border: hidden;
+    border-bottom: 1px solid lightslategrey;
+}
+
+#confirmEmail {
+    width: 80%;
+    font-size: 15px;
+    padding: 20px ;
+    margin: 10px;
+    border: hidden;
+    border-bottom: 1px solid lightslategrey;
+}
+
+.form {
+    margin-top: 1rem;
+}
+
+textarea:focus, input:focus{
+    outline: none;
+}
+
+.email-div{
+    max-width: 80%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: auto;
+    
+}
+
+.info{
+    display: flex;
+}

kivi-cars/src/containers/css/FiltersPage.css

@@ -0,0 +1,8 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+h1 {
+    color: black;   
+}

kivi-cars/src/containers/css/LandingPage.css

@@ -0,0 +1,33 @@
+.logo-img {
+    display: flex;
+    justify-content: center;
+    padding: 2rem 0 2rem 0;
+}
+
+
+.header {
+    margin-bottom: 100px;
+    display: flex;
+    justify-items: auto;
+   
+}
+.paragraph{
+    display: flex;
+    flex-direction: column;
+    padding: 3rem;
+    gap: 20px;
+   
+}
+h2{
+    display: flex;
+    margin: auto;
+    font-size: 300;
+    font-weight: 300;
+    padding: auto;
+    text-align: center;
+    
+}
+#besplatno{
+    font-weight: bold
+}
+

kivi-cars/src/containers/css/LocationPage.css

@@ -0,0 +1,19 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.checkbox-div{
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-content: center;
+}
+
+@media only screen and (min-width: 541px){
+    .checkbox-div{
+        flex-direction: row;
+        justify-content: space-around;
+    }
+}

kivi-cars/src/data/air-condition.js

@@ -0,0 +1,13 @@
+const AirCondition = {
+    "ime" : "Klima",
+    "tipovi" : [
+        "Odaberite",
+        "Jednozonska",
+        "Dvozonska",
+        "Trozonska",
+        "Četverozonska",
+        "Ostalo"
+    ]
+}
+
+export default AirCondition;

kivi-cars/src/data/checkbox.js

@@ -0,0 +1,38 @@
+const CheckBox = [
+    "ABS",
+    "ESP",
+    "Tempomat",
+    "Alarm",
+    "Airbag",
+    "Šiber",
+    "Servo volan",
+    "Koža",
+    "Klima",
+    "Centralna brava",
+    "Daljinsko zaključavanje",
+    "ISOFIX",
+    "Registrovan",
+    "Xenon",
+    "LED",
+    "Laser",
+    "Električni podizači stakala",
+    "Naslon za ruke", 
+    "Električni retrovizor",
+    "Start/Stop",
+    "Turbo",
+    "Stranac",   
+    "Pakring assistent",
+    "Senzor mrtvog ugla",
+    "Servisna knjiga",
+    "Komande na volanu",
+    "Navigacija",
+    "Grijanje sjedišta",
+    "Masažna sjedišta",
+    "Memorija sjedišta",
+    "Panorama",
+    "Ocarinjen",
+    "Udaren",
+    
+]
+
+export default CheckBox;

kivi-cars/src/data/color.js

@@ -0,0 +1,22 @@
+const Color = {
+    "ime": "Boja",
+    "tipovi": [
+        "Odaberite",
+        "Bež",
+        "Bijela",
+        "Bordo",
+        "Crna",
+        "Crvena",
+        "Ljubičasta",
+        "Narandžasta",
+        "Plava",
+        "Siva",
+        "Smeđa",
+        "Srebrena",
+        "Zelena",
+        "Zlatna",
+        "Žuta"
+    ]
+}
+
+export default Color;

kivi-cars/src/data/condition.js

@@ -0,0 +1,11 @@
+const Condition = {
+    "ime": "Stanje",
+    "tipovi": [
+        "Odaberite",
+        "Novo",
+        "Polovno",
+        "Udareno"
+    ]
+}
+
+export default Condition;

kivi-cars/src/data/cubes.js

@@ -0,0 +1,10 @@
+const Cubes = {
+    "title": "Kubikaza",
+    "fields": {
+        "min": 0.8,
+        "max": 6.2,
+        "step": 0.1
+    }
+}
+
+export default Cubes

kivi-cars/src/data/doors.js

@@ -0,0 +1,10 @@
+const Doors = {
+    "ime": "Broj vrata",
+    "tipovi" : [
+        "Odaberite",
+        "2/3",
+        "4/5"
+    ]
+}
+
+export default Doors;

kivi-cars/src/data/drive.js

@@ -0,0 +1,11 @@
+const Drive = {
+    "ime" : "Pogon",
+    "tipovi": [
+        "Odaberite",
+        "Prednji",
+        "Zadnji",
+        "Sva četiri"
+    ]
+}
+
+export default Drive;

kivi-cars/src/data/fuel.js

@@ -0,0 +1,14 @@
+const Fuel = {
+    "ime": "Gorivo",
+    "tipovi": [
+        "Odaberite",
+        "Dizel",
+        "Benzin",
+        "Benzin/Plin",
+        "Cng",
+        "Hybrid",
+        "Elektro"
+    ]
+}
+
+export default Fuel;

kivi-cars/src/data/gearbox.js

@@ -0,0 +1,16 @@
+const Gearbox = {
+    "ime": "Broj brzina",
+    "tipovi": [
+        "Odaberite",
+        "3+R",
+        "4+R",
+        "5+R",
+        "6+R",
+        "7+R",
+        "8+R",
+        "9+R",
+        "CVT"
+    ]
+}
+
+export default Gearbox;

kivi-cars/src/data/horsepower.js

@@ -0,0 +1,10 @@
+const HorsePower = {
+    "title": "Konjskih snaga",
+    "fields": {
+        "min": 0,
+        "max": 2000,
+        "step": 10
+    }
+}
+
+export default HorsePower

kivi-cars/src/data/kilometers.js

@@ -0,0 +1,10 @@
+const Kilometers = {
+    "title": "Kilometraza",
+    "fields": {
+        "min": 0,
+        "max": 1000000,
+        "step": 1000
+    }
+}
+
+export default Kilometers;

kivi-cars/src/data/kilowats.js

@@ -0,0 +1,10 @@
+const Kilowats = {
+    "title": "Kilovata",
+    "fields": {
+        "min": 0,
+        "max": 1000,
+        "step": 10
+    }
+}
+
+export default Kilowats

kivi-cars/src/data/lights.js

@@ -0,0 +1,13 @@
+const Lights = {
+    "ime": "Svjetla",
+    "tipovi": [
+        "Odaberite",
+        "Halogena",
+        "Xenon",
+        "Led",
+        "Laser",
+        "Ostalo"
+    ]
+}
+
+export default Lights;

kivi-cars/src/data/location.js

@@ -0,0 +1,231 @@
+const Location = {
+    "ime": "Lokacija",
+    "entiteti": [
+        {"entitet":"Federacija BiH",
+            "kantoni": [
+                {"kanton": "Sarajevo",
+                    "gradovi": [
+                        "Hadžići",
+                        "Ilidža",                       
+                        "Ilijaš",                       
+                        "Sarajevo - Centar",                       
+                        "Sarajevo-Novi Grad",                       
+                        "Sarajevo-Novo Sarajevo",                       
+                        "Sarajevo-Stari Grad",                       
+                        "Trnovo",                       
+                        "Vogošća"
+                    ]
+                },
+                {"kanton":"Unsko-sanski",
+                    "gradovi": [
+                        "Bihać",
+                        "Bosanska Krupa",                       
+                        "Bosanski Petrovac",                       
+                        "Bužim",                       
+                        "Cazin",                       
+                        "Ključ",                       
+                        "Sanski Most",                       
+                        "Velika Kladuša"
+                    ]
+                },
+                {"kanton": "Posavski",
+                    "gradovi": [
+                        "Domaljevac",
+                        "Odžak",                       
+                        "Orašje",                       
+                        "Šamac"
+                    ]
+                },                
+                {"kanton":"Tuzlanski",
+                    "gradovi": [
+                        "Banovići",
+                        "Doboj-Istok",                       
+                        "Gradačac",                       
+                        "Gračanica",                       
+                        "Kalesija",                       
+                        "Kladanj",                                        
+                        "Lukavac",                       
+                        "Sapna",
+                        "Srebrenik",                       
+                        "Teočak",                       
+                        "Tuzla",                       
+                        "Čelić",                       
+                        "Živinice"
+                    ]
+                },
+                {"kanton":"Zeničko-dobojski",
+                    "gradovi": [
+                        "Breza",
+                        "Doboj-Jug",                       
+                        "Kakanj",                       
+                        "Maglaj",                       
+                        "Olovo",                       
+                        "Tešanj",                       
+                        "Usora",                       
+                        "Vareš",                       
+                        "Visoko",                       
+                        "Zavidovići",                       
+                        "Zenica",                       
+                        "Žepče"
+                    ]
+                },
+                {"kanton":"Bosansko-podrinjski",
+                    "gradovi": [
+                        "Foča",
+                        "Goražde",                       
+                        "Pale"
+                    ]
+                },
+                {"kanton":"Srednjobosanski",
+                    "gradovi": [
+                        "Bugojno",
+                        "Busovača",                       
+                        "Dobretići",                       
+                        "Donji Vakuf",                       
+                        "Fojnica",                       
+                        "Gornji Vakuf - Uskoplje",                       
+                        "Jajce",                       
+                        "Kiseljak",                       
+                        "Kreševo",                       
+                        "Novi Travnik",                       
+                        "Travnik",                       
+                        "Vitez"
+                    ]
+                },
+                {"kanton":"Hercegovačko-neretvanski",
+                    "gradovi": [
+                        "Grad Mostar",
+                        "Jablanica",                       
+                        "Konjic",                       
+                        "Neum",                       
+                        "Prozor",                       
+                        "Ravno",                       
+                        "Stolac",                       
+                        "Čapljina",                       
+                        "Čitluk"
+                    ]
+                },
+                {"kanton":"Zapadno-hercegovački",
+                    "gradovi": [
+                        "Grude",
+                        "Ljubuški",                       
+                        "Posušje",                       
+                        "Široki Brijeg"
+                    ]
+                },
+                {"kanton":"Livanjski",
+                    "gradovi": [
+                        "Bosansko Grahovo",
+                        "Drvar",                       
+                        "Glamoč",                       
+                        "Kupres",                       
+                        "Livno",                       
+                        "Tomislavgrad"
+                    ]
+                }
+            ]
+        },
+        {"entitet":"Republika Srpska",
+            "kantoni": [
+                {"kanton":"Banjalučka",
+                    "gradovi": [
+                        "Banja Luka",
+                        "Gradiška",                       
+                        "Istočni Drvar",                       
+                        "Jezero",                       
+                        "Kneževo",                       
+                        "Kostajnica",                       
+                        "Kotor Varoš",                       
+                        "Kozarska Dubica",                       
+                        "Krupa na uni",                       
+                        "Kupres",                       
+                        "Laktaši",                       
+                        "Mrkonjić Grad",                       
+                        "Novi Grad",                       
+                        "Oštra Luka",                                               
+                        "Petrovac",                       
+                        "Prijedor",                       
+                        "Prnjavor",                       
+                        "Ribnik",                       
+                        "Srbac",                       
+                        "Čelinac",                       
+                        "Šipovo"
+                    ]
+                },
+                {"kanton":"Dobojsko-Bijeljinska",
+                    "gradovi": [
+                        "Bijeljina",
+                        "Brod",                       
+                        "Derventa",                       
+                        "Doboj",                       
+                        "Donji Žabar",                       
+                        "Lopare",                       
+                        "Lukavac",                       
+                        "Modriča",                       
+                        "Pelagićevo",                       
+                        "Petrovo",                       
+                        "Stanari",                       
+                        "Teslić",                       
+                        "Tešanj",                       
+                        "Tuzla",                      
+                        "Ugljevik",                       
+                        "Vukosavlje",                       
+                        "Šamac"
+                    ]
+                },
+                {"kanton":"Sarajevsko-Zvornička",
+                    "gradovi": [
+                        "Bratunac",
+                        "Han Pijesak",                       
+                        "Ilijaš",                       
+                        "Istočni Stari Grad",                       
+                        "Kasindo",                       
+                        "Kladanj",                       
+                        "Lukavica",                       
+                        "Milići",                       
+                        "Olovo",                       
+                        "Osmaci",                       
+                        "Pale",                       
+                        "Rogatica",                       
+                        "Rudo",                       
+                        "Sarajevo-Novi Grad",                       
+                        "Sokolac",                       
+                        "Srebrenica",                       
+                        "Trnovo",                       
+                        "Ustiprača",                       
+                        "Višegrad",                       
+                        "Vlasenica",                       
+                        "Zvornik",                       
+                        "Šekovići",                       
+                        "Žepa"
+                    ]
+                },
+                {"kanton":"Trebinjsko-Fočanska",
+                    "gradovi": [
+                        "Berkovići",
+                        "Bileća",                       
+                        "Foča",                       
+                        "Gacko",                       
+                        "Istočni Mostar",                       
+                        "Kalinovik",                       
+                        "Ljubinje",                       
+                        "Nevesinje",                       
+                        "Trebinje",                       
+                        "Čajniče"
+                    ]
+                }
+            ]
+        },
+        {"entitet":"Distrikt Brcko",
+            "kantoni": [
+                {"kanton": "Distrikt Brcko",
+                    "gradovi":[
+                        
+                    ]
+                }
+            ]
+        }
+    ]
+}
+
+export default Location;

kivi-cars/src/data/motors-brands.js

@@ -0,0 +1,45 @@
+const Motors = [
+    {"brand":"Izaberite"},
+    {"brand":"Aprilia"},
+    {"brand":"Benelli"},
+    {"brand":"BMW"},
+    {"brand":"Cagiva"},
+    {"brand":"Classe"},
+    {"brand":"CPI"},
+    {"brand":"Derbi"},
+    {"brand":"Ducati"},
+    {"brand":"Gilera"},
+    {"brand":"Harley Davidson"},
+    {"brand":"Honda"},
+    {"brand":"huatian"},
+    {"brand":"Husqvarna"},
+    {"brand":"Hyosung"},
+    {"brand":"Italjet"},
+    {"brand":"Jawa"},
+    {"brand":"kanuni"},
+    {"brand":"Kawasaki"},
+    {"brand":"Keeway"},
+    {"brand":"KTM"},
+    {"brand":"Kymco"},
+    {"brand":"LBC"},
+    {"brand":"Lifan"},
+    {"brand":"Malaguti"},
+    {"brand":"Moto Guzzi"},
+    {"brand":"Nitro"},
+    {"brand":"Panasonic"},
+    {"brand":"Peugeot"},
+    {"brand":"Piaggio"},
+    {"brand":"Puch"},
+    {"brand":"Qingqi"},
+    {"brand":"Sprint"},
+    {"brand":"Spyder"},
+    {"brand":"Suzuki"},
+    {"brand":"Tibra"},
+    {"brand":"Tomos"},
+    {"brand":"Triumph"},
+    {"brand":"Vespa"},
+    {"brand":"Yamaha"},
+    {"brand":"yamasaki"}
+]
+
+export default Motors;

kivi-cars/src/data/price.js

@@ -0,0 +1,10 @@
+const Price = {
+    "title": "Cijena",
+    "fields": {
+        "min": 0,
+        "max": 1000000,
+        "step": 500
+    }
+}
+
+export default Price;

kivi-cars/src/data/routes.js

@@ -0,0 +1,19 @@
+const LinkR = {
+    "category": {
+        "prev": "/",
+        "next": "/filters"
+    },
+    "filters": {
+        "prev": "/category",
+        "next": "/location"
+    },
+    "location": {
+        "prev": "/filters",
+        "next": "/email"
+    },  
+    "email": {
+        "prev": "/location",
+        "next": "/congrats"
+    }
+}
+export default LinkR;

kivi-cars/src/data/seats.js

@@ -0,0 +1,17 @@
+const Seats = {
+    "ime": "Sjedišta",
+    "tipovi": [
+        "Odaberite",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+        "7",
+        "8",
+        "Više"
+    ]
+}
+
+export default Seats;

kivi-cars/src/data/sensors.js

@@ -0,0 +1,12 @@
+const Sensors = {
+    "ime": "Senzori",
+    "tipovi": [
+        "Odaberite",
+        "naprijed",
+        "nazad",
+        "naprijed i nazad",
+        "nema"
+    ]
+}
+
+export default Sensors;

kivi-cars/src/data/transmission.js

@@ -0,0 +1,11 @@
+const Transmission = {
+    "ime": "Transmisija",
+    "tipovi": [
+        "Odaberite",
+        "Automatski mjenjač",
+        "Manuelni mjenjač",
+        "Polu-automatski mjenjač"
+    ]
+}
+
+export default Transmission

kivi-cars/src/data/trucks-brands.js

@@ -0,0 +1,85 @@
+const Trucks = [
+    {"brand":"Izaberite"},
+    {"brand":"Mercedes"},
+    {"brand":"MAN"},
+    {"brand":"Volkswagen"},
+    {"brand":"Iveco"},
+    {"brand":"TAM"},
+    {"brand":"Fiat"},
+    {"brand":"Mecedes"},
+    {"brand":"Volvo"},
+    {"brand":"Renault"},
+    {"brand":"Ford"},
+    {"brand":"Peugeot"},
+    {"brand":"Scania"},
+    {"brand":"Daf"},
+    {"brand":"Zastava"},
+    {"brand":"FAP"},
+    {"brand":"IMT"},
+    {"brand":"Citroen"},
+    {"brand":"MAGIRUS"},
+    {"brand":"steyr"},
+    {"brand":"Zetor"},
+    {"brand":"Opel"},
+    {"brand":"Nissan"},
+    {"brand":"mercedes benz"},
+    {"brand":"Schmitz"},
+    {"brand":"JCB"},
+    {"brand":"KOGEL"},
+    {"brand":"cat"},
+    {"brand":"Hyundai"},
+    {"brand":"MEILLER"},
+    {"brand":"TORPEDO"},
+    {"brand":"miller"},
+    {"brand":"Atlas"},
+    {"brand":"Schwarzmuller"},
+    {"brand":"Kia"},
+    {"brand":"traktor"},
+    {"brand":"Isuzu"},
+    {"brand":"LKT"},
+    {"brand":"Mitsubishi"},
+    {"brand":"Toyota"},
+    {"brand":"Saurer"},
+    {"brand":"John Deere"},
+    {"brand":"vw"},
+    {"brand":"Mazda"},
+    {"brand":"Škoda"},
+    {"brand":"Timberjack"},
+    {"brand":"Hafei"},
+    {"brand":"Hanomag"},
+    {"brand":"Massey Ferguson"},
+    {"brand":"Same"},
+    {"brand":"KRONE"},
+    {"brand":"Liebherr"},
+    {"brand":"Seat"},
+    {"brand":"hiab"},
+    {"brand":"O&K"},
+    {"brand":"URSUS"},
+    {"brand":"GAZ"},
+    {"brand":"Gorica"},
+    {"brand":"vw kombi"},
+    {"brand":"Tomo Vinkovic"},
+    {"brand":"Actros"},
+    {"brand":"Setra"},
+    {"brand":"Sprinter"},
+    {"brand":"Langendorf"},
+    {"brand":"ZettelMeyer"},
+    {"brand":"DEUTZ"},
+    {"brand":"Komatsu"},
+    {"brand":"TAM 110"},
+    {"brand":"Tatra"},
+    {"brand":"MF"},
+    {"brand":"BOSCH"},
+    {"brand":"Mercedea-Benz"},
+    {"brand":"Caddy"},
+    {"brand":"teretno"},
+    {"brand":"Mercedez Benz"},
+    {"brand":"motokultivator"},
+    {"brand":"kombi"},
+    {"brand":"CASE"},
+    {"brand":"TAM 75"},
+    {"brand":"CLARK"},
+    {"brand":"hurlimann"}
+]
+
+export default Trucks;

kivi-cars/src/data/type.js

@@ -0,0 +1,21 @@
+const Type = {
+    "ime": "Vrsta vozila",
+    "tipovi": [
+        "Odaberite",
+        "Karavan",
+        "Limuzina",
+        "Monovolumen",
+        "Malo auto",
+        "Sportback",
+        "Kombi",
+        "Kabriolet",
+        "Coupe",
+        "Terenac",
+        "Off-Road",
+        "Pickup",
+        "Oldtimer",
+        "Caddy"
+    ]
+}
+
+export default Type;

kivi-cars/src/data/year.js

@@ -0,0 +1,10 @@
+const Year = {
+    "title": "Godiste",
+    "fields": {
+        "min": 1960,
+        "max": new Date().getFullYear(),
+        "step": 1
+    }
+}
+
+export default Year;

kivi-cars/src/index.css

@@ -1,3 +1,7 @@
+html{
+  scroll-behavior: smooth;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

kivi-cars/src/services/vehicle-service.js

@@ -0,0 +1,50 @@
+import Cars from "../data/cars-brands";
+import Trucks from "../data/trucks-brands";
+import Motors from "../data/motors-brands"
+import Cubes from "../data/cubes";
+import Type from "../data/type";
+import Fuel from "../data/fuel";
+import Transmission from "../data/transmission";
+import Drive from "../data/drive";
+import Condition from "../data/condition";
+import Doors from "../data/doors";
+import Year from "../data/year";
+import Price from "../data/price";
+import HorsePower from "../data/horsepower";
+import Kilowats from "../data/kilowats";
+import Kilometers from "../data/kilometers";
+
+const vehicleService = (vehicle) => {
+        let data1, data2, data3, brands, show;
+        if(vehicle === "Auto"){
+            show = true;
+            data1 = [Fuel, Type]
+            data2 = [Price, Year, Kilometers, Cubes, HorsePower, Kilowats]
+            data3 = [Transmission, Drive, Condition, Doors]
+            brands = Cars.map(brand => {
+                return brand})
+        }
+        else if(vehicle === "Motor"){
+            show = false;
+            data1 = [Condition]
+            data2 = [Price, Year, Kilometers, Cubes, HorsePower, Kilowats]
+            data3 = []
+            brands = Motors.map(brand => {
+                return brand
+            })
+        }
+        else if(vehicle === "Teretno vozilo"){
+            show = false;
+            data1 = [Condition, Fuel]
+            data2 = [Price, Year, Kilometers, Cubes, HorsePower, Kilowats]
+            data3 = []
+            brands = Trucks.map(brand => {
+                return brand
+            })
+        }
+
+            
+    return {"show": show, "brands": brands, "data1": data1, "data2": data2, "data3": data3}
+}
+
+export default vehicleService;