Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added responsiveness #4

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+140 −88
Open

Added responsiveness #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1510932
Added responsiveness
hemantwasthere Apr 19, 2023
b537c28
Optimized the UI
hemantwasthere Apr 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 client/src/Assets/images/logoAsset 1-8 1.png → client/src/Assets/images/logo.png
View file
Open in desktop
File renamed without changes
9 changes: 9 additions & 0 deletions client/src/Assets/images/love.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 ...rc/Assets/images/main pageAsset 2-8 1.png → client/src/Assets/images/match.png
View file
Open in desktop
File renamed without changes
0 ...Assets/images/Login SignUp PageAssest.png → client/src/Assets/images/signup.png
View file
Open in desktop
File renamed without changes
9 changes: 9 additions & 0 deletions client/src/Assets/images/small_heart.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 32 additions & 0 deletions client/src/Components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React from 'react'
import { BsSpotify } from 'react-icons/bs'
import { Link } from 'react-router-dom'
import logoIcon from "../Assets/images/logo.png"

function Navbar() {
return (
<nav className="flex justify-between items-center py-4 px-2 sm:px-8 bg-[#342B4A]">
<Link to="/">
<div className="flex items-center gap-2 text-2xl sm:text-3xl sm:gap-4 bg-[#342B4A] cursor-pointer">
<img src={logoIcon} alt="" className="w-10 sm:w-auto bg-transparent" />
<span className="font-bold text-white bg-transparent">SPINDER</span>
</div>
</Link>
<div className="flex items-center font-bold text-sm sm:text-lg gap-3 ">
<Link to="/login">
<button className="text-white sm:px-4 py-2 bg-[#342B4A] cursor-pointer hover:scale-110 transition duration-200 ease-in">
<BsSpotify className="inline-block mr-2" />
Log in
</button>
</Link>
<Link to="/signup">
<button className="bg-[#D93EBE] text-white px-[.5rem] sm:px-4 py-2 rounded-full cursor-pointer hover:scale-110 transition duration-200 ease-in">
Sign Up
</button>
</Link>
</div>
</nav>
)
}

export default Navbar
58 changes: 27 additions & 31 deletions client/src/Pages/HomePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,43 @@
//TODO - Add Responsiveness

import logoIcon from "../Assets/images/logoAsset 1-8 1.png"
import bgPhoto from '../Assets/images/main pageAsset 2-8 1.png'
import { BsSpotify } from 'react-icons/bs';
import { Link } from "react-router-dom"
import bgPhoto from '../Assets/images/match.png'
import heart from '../Assets/images/love.svg'
import small_heart from '../Assets/images/small_heart.svg'
import Navbar from "../Components/Navbar";
// import MyMusic from "../Assets/m.usic/真夜_-のドア〜stay-with-me-night-tempo-showa-groove-mix-svfromnet.com.mp3"
// import MyMusic from "../Assets/m.usic/fly-day-chinatown-mewna-remix-svfromnet.com (1).mp3"
// import MyMusic from "../Assets/m.usic/フライディ・チャイナタウン-泰葉-official-lyric-video-svfromnet.com.mp3"



export default function Home(){
export default function Home() {
return (
//todo curson pointer
//todo login signup ke icons
<div className="w-full min-h-screen bg-[#342B4A] ">
<nav className="flex justify-between items-center py-4 px-8 bg-[#342B4A]">
<Link to="/">
<div className="flex items-center bg-[#342B4A] cursor-pointer">
<img src={logoIcon} alt="" className="w-auto mr-4 h-[60px] bg-transparent" />
<span className="font-bold text-white text-[30px] bg-transparent">SPINDER</span>
</div>
</Link>
<div className="flex items-center font-bold text-[20px] ">
<Link to="/login">
<button className= "text-white px-7 py-2 bg-[#342B4A] cursor-pointer hover:scale-110 transition duration-300 ease-in">
<BsSpotify className="inline-block mr-2" />
Log in
</button>
</Link>
<Link to="/signup">
<button className="bg-[#D93EBE] text-white px-4 py-2 rounded-full cursor-pointer hover:scale-110 transition duration-300 ease-in">
Sign Up
</button>
</Link>
<div className="min-h-screen h-screen bg-[#342B4A] ">
<Navbar />

<div className="w-full flex flex-col justify-center items-center gap-10 mt-10 sm:mt-3">
<div className="w-3/5 animate-pulse text-4xl sm:text-5xl font-[600] text-white text-center leading-tight bg-transparent flex flex-col gap-1 sm:gap-2 relative">
<span>Discover your perfect</span>
<span>match based on the</span>
<span>music you love</span>
<div className='absolute -bottom-10 left-36 hidden 2xl:inline-flex'>
<img src={heart} alt="" />
</div>
<div className='absolute bottom-5 left-28 hidden 2xl:inline-flex'>
<img src={small_heart} alt="" />
</div>
<div className='absolute -bottom-10 right-36 hidden 2xl:inline-flex rotate-[65deg]'>
<img src={heart} alt="" />
</div>
<div className='absolute bottom-5 right-28 hidden 2xl:inline-flex rotate-[65deg]'>
<img src={small_heart} alt="" />
</div>
</div>
</nav>
<div className="text-center py-20 bg-transparent animate-pulse">
<div className="text-[58px] font-[600] text-white text-center leading-tight w-full max-w-2xl absolute top-1/3 left-1/2 transform -translate-x-1/2 -translate-y-[150px] bg-transparent">
Discover your perfect match based on the music you love
<div className="w-2/4 sm:w-1/4 absolute bottom-0 bg-transparent">
<img src={bgPhoto} alt="" className="" />
</div>
</div>
<img src={bgPhoto} alt="" className="absolute left-1/2 top-1/2 -translate-x-1/2 bottom-0 w-465 h-[400px] bg-transparent" />
</div>
)
}
2 changes: 1 addition & 1 deletion client/src/Pages/LandingPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default function LandingPage() {
return (
<div className="bg-[#1CDF63] p-4 text-2xl font-[500] leading-10 h-full w-full flex flex-col items-center justify-center">
<pre className='text-sm'>I Finally Did It Giezz😭😭😭</pre>
<div className="flex flex-col items-center justify-center mb-10">
<div className="flex flex-col items-center justify-center my-10">
<img
src={userProfile.profileImage}
alt={userProfile.name}
Expand Down
59 changes: 31 additions & 28 deletions client/src/Pages/Login.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React from "react";
import logoIcon from "../Assets/images/logoAsset 1-8 1.png"
import logoIcon from "../Assets/images/logo.png"
import { BsSpotify } from 'react-icons/bs';
import { Link } from "react-router-dom"
import bgPhoto from "../Assets/images/Login SignUp PageAssest.png"
import bgPhoto from "../Assets/images/signup.png"
import { loginEndpointURL } from "../Components/SpotifyAuth";

// const client_id = "e2df6d5c04ba4d00b805b7403407979c"
// const client_secret = "8f0b72ea56104982808262ff8635b839"

export default function Login(){
export default function Login() {

//for accessing spotify tracks and songs on it (user independent / no auth reqd)
// const [spotifyAccessToken , setSpotifyAccessToken] = React.useState('')
Expand All @@ -26,34 +26,37 @@ export default function Login(){


return (
<div className="bg-gray-300 overflow-hidden">
<div className="w-screen min-h-screen my-4 mx-8 flex relative ">
<div className="w-1/2 h-full"> {/* LEFT Side*/}
<div>
<Link to="/">
<div className="flex items-center cursor-pointer">
<img src={logoIcon} alt="" className="w-auto mr-4 h-[60px] bg-transparent" />
<span className="font-bold text-[#342B4A] text-[30px] bg-transparent">SPINDER</span>
</div>
</Link>
</div>
<div className="flex flex-col justify-center items-center mt-[200px]">
<h1 className="text-4xl font-[800] text-[#342B4A]">Get Started</h1>
<p className="mt-3 text-lg font-medium text-[#6B7280]">Create your account.</p>
<div className="mt-8 flex flex-col">
<a href={loginEndpointURL}>
<button className= "text-white px-6 py-3 bg-[#1ED760] font-[500] cursor-pointer rounded-full hover:bg-green-500">
<BsSpotify className=" h-[20px] inline-block mr-4" />
<span className="font-bold leading-tight">Log in with Spotify</span>
</button>
</a>
<div className="bg-gray-300">
<div className="p-4 h-screen items-center sm:justify-normal sm:items-start sm:py-0 sm:pl-8 sm:pr-4 flex flex-col sm:flex-row">
<div className="w-full sm:w-1/2 sm:mt-4"> {/* LEFT Side*/}
<div>
<Link to="/">
<div className="flex items-center gap-2 text-xl sm:gap-4 cursor-pointer">
<img src={logoIcon} alt="" className="w-10 sm:w-auto bg-transparent" />
<span className="font-bold text-[#342B4A] bg-transparent">SPINDER</span>
</div>
</Link>
</div>
<div className="flex flex-col justify-center items-center my-8 sm:mt-[200px]">
<h1 className="text-4xl font-[800] text-[#342B4A]">Get Started</h1>
<p className="mt-3 text-lg font-medium text-[#6B7280]">Create your account.</p>
<div className="mt-8 flex flex-col">
<a href={loginEndpointURL}>
<button className="text-white px-6 py-3 bg-[#1ED760] font-[500] cursor-pointer rounded-full hover:bg-green-500">
<BsSpotify className=" h-[20px] inline-block mr-4" />
<span className="font-bold leading-tight">Log in with Spotify</span>
</button>
</a>
</div>
</div>
</div>
<div className="w-1/2 h-screen relative hidden sm:inline-flex overflow-hidden"> {/* RIGHT Side desktop*/}
<img src={bgPhoto} alt="" className="absolute w-full top-4 left-0 h-[95%] rounded-md" />
</div>
<div className="sm:hidden w-[40%] pb-[2rem]"> {/* RIGHT Side mobile*/}
<img src={bgPhoto} alt="" className="rounded-md" />
</div>
</div>
<div className="w-1/2 h-screen relative"> {/* RIGHT Side*/}
<img src={bgPhoto} alt="" className="absolute top-0 left-0 h-full w-[670px] pb-[2rem] rounded-md" />
</div>
</div>
</div>
)
}
59 changes: 31 additions & 28 deletions client/src/Pages/Signup.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,43 @@
import logoIcon from "../Assets/images/logoAsset 1-8 1.png"
import logoIcon from "../Assets/images/logo.png"
import { BsSpotify } from 'react-icons/bs';
import { Link } from "react-router-dom"
import bgPhoto from "../Assets/images/Login SignUp PageAssest.png"
import bgPhoto from "../Assets/images/signup.png"
import { loginEndpointURL } from "../Components/SpotifyAuth";


export default function Signup(){
export default function Signup() {
return (
<div className="bg-gray-300 overflow-hidden">
<div className="w-full min-h-screen my-4 mx-8 flex relative">
<div className="w-1/2 h-full"> {/* LEFT Side*/}
<div>
<Link to="/">
<div className="flex items-center cursor-pointer">
<img src={logoIcon} alt="" className="w-auto mr-4 h-[60px] bg-transparent" />
<span className="font-bold text-[#342B4A] text-[30px] bg-transparent">SPINDER</span>
</div>
</Link>
</div>
<div className="flex flex-col justify-center items-center mt-[200px]">
<h1 className="text-4xl font-[800] text-[#342B4A]">Welcome Back !</h1>
<p className="mt-3 text-lg font-medium text-[#6B7280]">Login To Continue</p>
<div className="mt-8 flex flex-col space-y-2">
<a href={loginEndpointURL}>
<button className= "text-white px-6 py-3 bg-[#1ED760] font-[500] cursor-pointer rounded-full hover:bg-green-500">
<BsSpotify className=" h-[20px] inline-block mr-4" />
<span className="font-bold leading-tight">Continue With Spotify</span>
</button>
</a>
<div className="bg-gray-300">
<div className="p-4 h-screen items-center sm:justify-normal sm:items-start sm:py-0 sm:pl-8 sm:pr-4 flex flex-col sm:flex-row">
<div className="w-full sm:w-1/2 sm:mt-4"> {/* LEFT Side*/}
<div>
<Link to="/">
<div className="flex items-center gap-2 text-xl sm:gap-4 cursor-pointer">
<img src={logoIcon} alt="" className="w-10 sm:w-auto bg-transparent" />
<span className="font-bold text-[#342B4A] bg-transparent">SPINDER</span>
</div>
</Link>
</div>
<div className="flex flex-col justify-center items-center my-8 sm:mt-[200px]">
<h1 className="text-4xl font-[800] text-[#342B4A]">Welcome Back !</h1>
<p className="mt-3 text-lg font-medium text-[#6B7280]">Login To Continue</p>
<div className="mt-8 flex flex-col">
<a href={loginEndpointURL}>
<button className="text-white px-6 py-3 bg-[#1ED760] font-[500] cursor-pointer rounded-full hover:bg-green-500">
<BsSpotify className=" h-[20px] inline-block mr-4" />
<span className="font-bold leading-tight">Continue With Spotify</span>
</button>
</a>
</div>
</div>
</div>
<div className="w-1/2 h-screen relative hidden sm:inline-flex overflow-hidden"> {/* RIGHT Side desktop*/}
<img src={bgPhoto} alt="" className="absolute w-full top-4 left-0 h-[95%] rounded-md" />
</div>
<div className="sm:hidden w-[40%] pb-[2rem]"> {/* RIGHT Side mobile*/}
<img src={bgPhoto} alt="" className="rounded-md" />
</div>
</div>
<div className="w-1/2 h-screen relative"> {/* RIGHT Side*/}
<img src={bgPhoto} alt="" className="absolute top-0 left-0 h-full w-[670px] pb-[2rem] rounded-md" />
</div>
</div>
</div>
)
}