Ignore:
Timestamp:
12/12/24 17:06:06 (5 weeks ago)
Author:
stefan toskovski <stefantoska84@…>
Branches:
main
Parents:
d565449
Message:

Pred finalna verzija

Location:
imaps-frontend/src/pages/IMaps
Files:
1 added
1 deleted
8 edited

Legend:

Unmodified
Added
Removed

  • imaps-frontend/src/pages/IMaps/IMaps.jsx

    rd565449 r0c6b92a  
    44import styles from "./IMaps.module.css";
    55import Home from "./components/pages/Home";
     6import Profile from "../../components/Profile/Profile";
     7import Logo from "../../components/Logo/Logo";
     8import Cards from "./components/Cards";
    69
    710function IMaps() {
    811  return (
    9     <>
    10       <div className={styles.home}>
    11         <Navbar></Navbar>
    12         <Home></Home>
    13       </div>
    14     </>
     12    <div className="homebg">
     13      <Navbar></Navbar>
     14      <Home></Home>
     15    </div>
    1516  );
    1617}

  • imaps-frontend/src/pages/IMaps/IMaps.module.css

    rd565449 r0c6b92a  
    55html,
    66body {
    7   overflow: auto;
    8   overflow-x: hidden;
     7  margin: 0;
    98}

  • imaps-frontend/src/pages/IMaps/components/Button.css

    rd565449 r0c6b92a  
     1@import url(https://fonts.googleapis.com/css?family=Exo:500);
    12:root {
    2   --primary: #fff;
     3  --primary: #252627;
    34}
    45
    56.btn {
    67  padding: 8px 20px;
    7 
     8  font-family: exo, sans-serif;
    89  border-radius: 20px;
    910  outline: none;
    … …  
    1415.btn--primary {
    1516  background-color: var(--primary);
    16 
    17   color: #242424;
     17  color: #ffffff;
    1818  border: 1px solid var(--primary);
    1919}
    … …  
    2424  color: #fff;
    2525  padding: 8px 20px;
    26   border: 1px solid var(--primary);
     26  /* border: 1px solid var(--primary); */
    2727  transition: all 0.3s ease-out;
    2828}
    … …  
    3030.btn--medium {
    3131  padding: 8px 20px;
    32   font-size: 18px;
     32  font-size: 22px;
    3333}
    3434
    3535.btn--large {
    3636  padding: 12px 26px;
    37   font-size: 20px;
     37  font-size: 24px;
    3838}
    3939
    … …  
    4141.btn--medium:hover {
    4242  transition: all 0.3s ease-out;
    43   background: #fff;
    44   color: #242424;
     43  background: #ffffffc2;
     44  color: #000000;
    4545  transition: 250ms;
    4646}

  • imaps-frontend/src/pages/IMaps/components/HeroSection.css

    rd565449 r0c6b92a  
     1@import url(https://fonts.googleapis.com/css?family=Exo:500);
     2
    13video {
    24  object-fit: cover;
    … …  
    79}
    810
     11
     12
     13
    914.hero-container {
    10   background: url("../images/img-home.jpg") center center/cover no-repeat;
    1115  height: 100vh;
    1216  width: 100%;
    … …  
    1519  justify-content: center;
    1620  align-items: center;
    17   box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.4);
     21
    1822  object-fit: contain;
     23
     24
     25
    1926}
    2027
    … …  
    2330  font-size: 100px;
    2431  margin-top: -100px;
     32  font-family: exo, sans-serif;
     33  text-transform: uppercase;
     34  text-shadow: 1px 1px 0px #ef404e,
     35  1px 2px 0px #ef404e,
     36  1px 3px 0px #ef404e,
     37  1px 4px 0px #ef404e,
     38  1px 5px 0px #ef404e,
     39  1px 6px 0px #ef404e,
     40  1px 10px 5px rgba(16, 16, 16, 0.5),
     41  1px 15px 10px rgba(16, 16, 16, 0.4),
     42  1px 20px 30px rgba(16, 16, 16, 0.3),
     43  1px 25px 50px rgba(16, 16, 16, 0.2);
    2544}
    2645

  • imaps-frontend/src/pages/IMaps/components/HeroSection.jsx

    rd565449 r0c6b92a  
    77function HeroSection() {
    88  return (
    9     <div className="hero-container">
    10       <h1>Map Your World</h1>
    11       <p>Create and explore detailed indoor maps.</p>
    12       <div className="hero-btns">
    13         <Link to="/Maps/FinkiMaps/Draw">
    14           <Button className="btns" buttonStyle="btn--outline" buttonSize="btn--large">
    15             Create maps
    16           </Button>
    17         </Link>
    18         <Link to="/Maps">
    19           <Button
    20             className="btns"
    21             buttonStyle="btn--primary"
    22             buttonSize="btn--large"
    23             onClick={console.log("hey")}
    24           >
    25             Browse Maps <i className="far fa-play-circle" />
    26           </Button>
    27         </Link>
     9      <div className="hero-container">
     10          <h1>Map Your World</h1>
     11          <p>Create and explore detailed indoor maps.</p>
     12          <div className="hero-btns">
     13              <Link to="/myMaps">
     14                  <Button className="btns" buttonStyle="btn--outline" buttonSize="btn--large">
     15                      Create maps
     16                  </Button>
     17              </Link>
     18              <Link to="/Maps">
     19                  <Button
     20                      className="btns"
     21                      buttonStyle="btn--primary"
     22                      buttonSize="btn--large"
     23                  >
     24                      Browse Maps <i className="far fa-play-circle"/>
     25                  </Button>
     26              </Link>
     27          </div>
    2828      </div>
    29     </div>
    3029  );
    3130}

  • imaps-frontend/src/pages/IMaps/components/Navbar.css

    rd565449 r0c6b92a  
    1 .navbar {
    2   background: linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%);
    3   height: 80px;
     1.modern-navbar {
     2  /*background-color: #ffffff;*/
     3  /*background: linear-gradient(*/
     4  /*        90deg,*/
     5  /*        #fafafa 0%,*/
     6  /*        #c07e7e 25%,*/
     7  /*        #af2525 50%,*/
     8  /*        #443a3a 75%,*/
     9  /*        #8d1010 100%*/
     10  /*);*/
     11  /*background: linear-gradient(to right, #ffffff, #c12c2c);*/
     12  /*background: linear-gradient(90deg, #3b3131, #ffffff);*/
     13  background: linear-gradient(90deg, #9b1818, #efefef);
     14  color: #ffffff;
     15  /*color: #333333;*/
    416  display: flex;
    517  justify-content: center;
    618  align-items: center;
    7   font-size: 1.2rem;
     19  padding: 0.8rem 1.5rem;
     20  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    821  position: sticky;
    922  top: 0;
    10   z-index: 999;
    11 }
    12 
    13 .pad-bot {
    14   /* padding-bottom: 1.5rem; */
     23  z-index: 1000;
     24  border-radius: 8px;
     25  margin: 5px;
    1526}
    1627
    1728.navbar-container {
    1829  display: flex;
    19   justify-content: center;
     30  justify-content: space-between;
    2031  align-items: center;
    2132  width: 100%;
     33  max-width: 1200px;
    2234}
    2335
    24 .navbar-logo {
    25   color: #fff;
    26   justify-self: start;
    27   margin-left: 20px;
    28   cursor: pointer;
    29   text-decoration: none;
    30   font-size: 2rem;
     36.navbar-left {
    3137  display: flex;
    3238  align-items: center;
     39  gap: 1rem;
    3340}
    3441
    35 .fa-typo3 {
    36   margin-left: 0.5rem;
    37   font-size: 1.8rem;
     42.navbar-title {
     43  font-size: 1.6rem;
     44  font-weight: 700;
     45  color: #ffffff;
     46  margin: 0;
     47  font-family: "exo", sans-serif;
    3848}
    3949
    40 .nav-menu {
    41   display: grid;
    42   grid-template-columns: repeat(4, auto);
    43   grid-gap: 10px;
    44   list-style: none;
    45   text-align: center;
    46   width: 70vw;
    47   justify-content: end;
    48   margin-right: 2rem;
     50.navbar-right {
     51  display: flex;
     52  align-items: center;
     53  gap: 1rem;
    4954}
    5055
    51 .nav-item {
    52   height: 80px;
     56.navbar-btn {
     57  padding: 0.4rem 1.5rem;
     58  font-size: 0.9rem;
     59  border: 2px solid transparent;
     60  border-radius: 20px;
     61  text-decoration: none;
     62  color: #ffffff;
     63  font-weight: 500;
     64  transition: all 0.3s ease-in-out;
     65  font-family: "exo", sans-serif;
     66  cursor: pointer;
     67  margin-left: 4em;
     68  margin-right: 1em;
    5369}
    5470
    55 .nav-links {
    56   color: #fff;
    57   display: flex;
    58   align-items: center;
    59   text-decoration: none;
    60   padding: 0.5rem 1rem;
    61   height: 100%;
     71.navbar-login {
     72  background-color: #252627;
     73  border: 2px solid #3f3232;
    6274}
    6375
    64 .nav-links:hover {
    65   border-bottom: 4px solid #fff;
    66   transition: all 0.2s ease-out;
     76.navbar-login:hover {
     77  background-color: #ffffff;
     78  color: #212121;
     79  border: 1px solid rgba(19, 18, 18, 0.82);
    6780}
    6881
    69 .fa-bars {
    70   color: #fff;
     82.navbar-signup {
     83  background-color: #252627;
     84  color: #ffffff;
     85  border: 2px solid #343a40;
    7186}
    7287
    73 .nav-links-mobile {
    74   display: none;
     88.navbar-signup:hover {
     89  background-color: #ffffff;
     90  color: #343a40;
     91  border: 2px solid #343a40;
    7592}
    76 
    77 .menu-icon {
    78   display: none;
    79 }
    80 
    81 @media screen and (max-width: 960px) {
    82   .NavbarItems {
    83     position: relative;
    84   }
    85 
    86   .nav-menu {
    87     display: flex;
    88     flex-direction: column;
    89     width: 100%;
    90     height: 90vh;
    91     position: absolute;
    92     top: 80px;
    93     left: -100%;
    94     opacity: 1;
    95     transition: all 0.5s ease;
    96   }
    97 
    98   .nav-menu.active {
    99     background: #242222;
    100     left: 0;
    101     opacity: 1;
    102     transition: all 0.5s ease;
    103     z-index: 1;
    104   }
    105 
    106   .nav-links {
    107     text-align: center;
    108     padding: 2rem;
    109     width: 100%;
    110     display: table;
    111   }
    112 
    113   .nav-links:hover {
    114     background-color: #fff;
    115     color: #242424;
    116     border-radius: 0;
    117   }
    118 
    119   .navbar-logo {
    120     position: absolute;
    121     top: 0;
    122     left: 0;
    123     transform: translate(25%, 50%);
    124   }
    125 
    126   .menu-icon {
    127     display: block;
    128     position: absolute;
    129     top: 0;
    130     right: 0;
    131     transform: translate(-100%, 60%);
    132     font-size: 1.8rem;
    133     cursor: pointer;
    134   }
    135 
    136   .fa-times {
    137     color: #fff;
    138     font-size: 2rem;
    139   }
    140 
    141   .nav-links-mobile {
    142     display: block;
    143     text-align: center;
    144     margin: 2rem auto;
    145     border-radius: 4px;
    146     width: 80%;
    147     text-decoration: none;
    148     font-size: 1.5rem;
    149     background-color: transparent;
    150     color: #fff;
    151     padding: 14px 20px;
    152     border: 1px solid #fff;
    153     transition: all 0.3s ease-out;
    154   }
    155 
    156   .nav-links-mobile:hover {
    157     background: #fff;
    158     color: #242424;
    159     transition: 250ms;
    160   }
    161 }

  • imaps-frontend/src/pages/IMaps/components/Navbar.jsx

    rd565449 r0c6b92a  
    1 import React, { useState, useEffect } from "react";
    2 import { Button } from "./Button";
     1import React, {useContext, useState} from "react";
     2import { Link } from "react-router-dom";
     3import logo_icon from "../../../assets/logo_icon.png";
     4//import { AuthContext } from "../../../components/AuthContext/AuthContext";
     5import Logo from "../../../components/Logo/Logo.jsx";
     6import Profile from "../../../components/Profile/Profile.jsx";
     7import {useAppContext} from "../../../components/AppContext/AppContext.jsx";
    38import "./Navbar.css";
    4 import { Link } from "react-router-dom";
    5 import logo from "../../../assets/logo_icon.png";
    69
    710function Navbar() {
    … …  
    1215  const closeMobileMenu = () => setClick(false);
    1316
    14   const showButton = () => {
    15     if (window.innerWidth <= 960) {
    16       setButton(false);
    17     } else {
    18       setButton(true);
    19     }
    20   };
     17  const { isAuthenticated } = useAppContext();
    2118
    22   useEffect(() => {
    23     showButton();
    24   }, []);
     19    return (
     20        <nav className="modern-navbar">
     21            <div className="navbar-container">
     22                {/* Left Section - Logo and Title */}
     23                <div className="navbar-left">
     24                    <Logo position="relative"/>
     25                    <h1 className="navbar-title">iMaps</h1>
     26                </div>
    2527
    26   window.addEventListener("resize", showButton);
    27 
    28   return (
    29     <>
    30       <nav className="navbar">
    31         <div className="navbar-container">
    32           <a href="#" className="navbar-logo pad-bot" onClick={closeMobileMenu}>
    33             iMaps
    34           </a>
    35           <div className="menu-icon" onClick={handleClick}>
    36             <i className={click ? "fas fa-times" : "fas fa-bars"} />
    37           </div>
    38           <ul className={click ? "nav-menu active" : "nav-menu"}>
    39             <Link to="/Signup">
    40               <li className="nav-item">
    41                 <a href="#" className="nav-links" onClick={closeMobileMenu}>
    42                   SignUp
    43                 </a>
    44               </li>
    45             </Link>
    46           </ul>
    47           <div className="pad-bot">
    48             <Link to="/Login">{button && <Button buttonStyle="btn--outline">LOG IN</Button>}</Link>
    49           </div>
    50         </div>
    51       </nav>
    52     </>
    53   );
     28                {/* Right Section - Login/Signup or Profile */}
     29                <div className="navbar-right">
     30                    {isAuthenticated ? (
     31                        <Profile position="relative"/>
     32                    ) : (
     33                        <>
     34                            <Link to="/Login" className="navbar-btn navbar-login">
     35                                Log In
     36                            </Link>
     37                            <Link to="/Signup" className="navbar-btn navbar-signup">
     38                                Sign Up
     39                            </Link>
     40                        </>
     41                    )}
     42                </div>
     43            </div>
     44        </nav>
     45    );
    5446}
    5547

  • imaps-frontend/src/pages/IMaps/components/pages/Home.jsx

    rd565449 r0c6b92a  
    11import React from "react";
    2 import "./Home.css";
    3 import Cards from "../Cards";
    4 import HeroSection from "../HeroSection";
    5 import Footer from "../Footer";
     2import "./Home.scss";
     3import { Link } from "react-router-dom";
     4import { Button } from "../Button.jsx";
     5import Cards from "../Cards.jsx";
     6import Footer from "../Footer.jsx";
     7import sl from "../../../../assets/bg-home-light-gray.png"
    68
    79function Home() {
    810  return (
    9     <>
    10       <div className="home">
    11         <HeroSection />
    12         {/* <Cards /> */}
    13         <Footer />
     11    <div className="home">
     12      <div className="hero-container">
     13        <h1>Map Your World</h1>
     14        <h2 className="description">Create and explore detailed indoor maps.</h2>
     15        <div className="hero-btns">
     16          <Link to="/myMaps">
     17            <Button className="btns" buttonSize="btn--large">
     18              Create Maps
     19            </Button>
     20          </Link>
     21          <Link to="/Maps">
     22            <Button className="btns" buttonSize="btn--large">
     23              Browse Maps <i className="far fa-play-circle" />
     24            </Button>
     25          </Link>
     26        </div>
    1427      </div>
    15     </>
     28      <Cards />
     29      <Footer></Footer>
     30    </div>
    1631  );
    1732}
Note: See TracChangeset for help on using the changeset viewer.