Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/pooranjoyb/BeatBridge
Browse files Browse the repository at this point in the history
  • Loading branch information
@pooranjoyb
pooranjoyb committed Oct 8, 2023
2 parents 7aaa6b8 + 562cc7b commit b8b9844
Show file tree
Hide file tree
Showing 4 changed files with 119 additions and 75 deletions.
4 changes: 3 additions & 1 deletion .github/workflows/lint.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,16 @@ jobs:
name: Run linters
runs-on: ubuntu-latest

permissions: write-all

steps:
- name: Check out Git repository
uses: actions/checkout@v3

- name: Set up Node.js
uses: actions/setup-node@v1
with:
node-version: 14
node-version: 20

# ESLint and Prettier must be in `package.json`
- name: Install Node.js dependencies
Expand Down
0 .github/workflows/.prettierrc → .prettierrc
View file
File renamed without changes.
171 changes: 97 additions & 74 deletions src/Components/Player.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import "../App.css";
import Background from "/Background.png";
export default function Player() {
const [isFullScreen, setIsFullScreen] = useState(false);
const [clock, setClock] = useState(new Date);
const [clock, setClock] = useState(new Date());

const toggleFullScreen = () => {
const element = document.querySelector(".fullscreen-div");

Expand Down Expand Up @@ -32,76 +32,89 @@ export default function Player() {
}
setIsFullScreen(!isFullScreen);
}
};
};

useEffect(() => {
const intervalId = setInterval(() => {
setClock(new Date());
}, 1000);

return () => clearInterval(intervalId);
}, []);
}, []);
return (
<>
<div className="w-full bg-cover bg-center" style={{backgroundImage:`url(${Background})` }}>
<div className="text-center text-white">
<h1 className="font-normal text-7xl inline mt-5 pr-2">
BEAT{" "}
</h1>
<h1 className="inline border-b-4 pt-6 font-serif tracking-tight border-white text-5xl">
Bridge
</h1>
</div>

<div className="absolute inset-0 mt-48">

<div class="mx-auto w-[50rem] shadow-lg">
<div class="flex items-center w-full h-12 rounded-lg focus-within:shadow-lg bg-white">
<div class="grid place-items-center h-full w-12 text-gray-300">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</div>
<div
className="w-full bg-cover bg-center"
style={{ backgroundImage: `url(${Background})` }}
>
<div className="text-center text-white">
<h1 className="font-normal text-7xl inline mt-5 pr-2">BEAT </h1>
<h1 className="inline border-b-4 pt-6 font-serif tracking-tight border-white text-5xl">
Bridge
</h1>
</div>

<input
class="peer h-full w-full outline-none text-sm text-gray-700 pr-2 rounded-lg"
type="text"
id="search"
placeholder="Search your favourite music..."
/>
<div className="absolute inset-0 mt-48">
<div class="mx-auto w-[50rem] shadow-lg">
<div class="flex items-center w-full h-12 rounded-lg focus-within:shadow-lg bg-white">
<div class="grid place-items-center h-full w-12 text-gray-300">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</div>

<input
class="peer h-full w-full outline-none text-sm text-gray-700 pr-2 rounded-lg"
type="text"
id="search"
placeholder="Search your favourite music..."
/>
</div>
</div>
</div>
</div>


<div className="flex items-center justify-center h-screen bg-red-lightest">
<div className={`fullscreen-div relative ${isFullScreen ? 'fullscreen-styles' : ' bg-white shadow-lg rounded-lg w-[50rem]'}`}>
<div className={`${isFullScreen ? 'clock' : 'no-clock'}`}>
<div
className={`fullscreen-div relative ${
isFullScreen
? "fullscreen-styles"
: " bg-white shadow-lg rounded-lg w-[50rem]"
}`}
>
<div className={`${isFullScreen ? "clock" : "no-clock"}`}>
<div className="time">
{clock.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: true })}
{clock.toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
hour12: true,
})}
</div>
</div>
<div className={`${isFullScreen ? 'flex-style' : 'flex'}`}>
<div className={`${isFullScreen ? 'image' : ''}`}>
<div className={`${isFullScreen ? "flex-style" : "flex"}`}>
<div className={`${isFullScreen ? "image" : ""}`}>
<img
className="w-full rounded hidden md:block m-2"
src="https://tailwindcss.com/img/card-top.jpg"
alt="Album Pic"
/>
</div>
<div className= {`w-full ${isFullScreen ? 'music' : ' p-8 pb-0'}`}>
<div className={`${isFullScreen ? 'title' : 'flex justify-between'}`}>
<div className={`w-full ${isFullScreen ? "music" : " p-8 pb-0"}`}>
<div
className={`${
isFullScreen ? "title" : "flex justify-between"
}`}
>
<div>
<h3 className="text-2xl text-grey-darkest font-medium">
A Sky Full of Stars
Expand All @@ -119,26 +132,39 @@ export default function Player() {
</svg>
</div>
<div className="text-red-lighter">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 9l10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 11-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553z" />
</svg>

<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 9l10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 11-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553z"
/>
</svg>
</div>
<div className="text-red-lighter" onClick={toggleFullScreen}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
</svg>

<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
/>
</svg>
</div>

</div>

<div className="flex justify-between items-center mt-8">
<div className="text-grey-darker">
<svg
Expand Down Expand Up @@ -191,18 +217,15 @@ export default function Player() {
</svg>
</div>
</div>
<div className="flex justify-between text-sm text-grey-darker" >
<p>0:40</p>
<p>4:20</p>

</div>

<div className="flex justify-between text-sm text-grey-darker">
<p>0:40</p>
<p>4:20</p>
</div>
</div>
</div>

</div>
</div>
</div>
</div>
</>
);
}
19 changes: 19 additions & 0 deletions src/tailwindcss/output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1158,6 +1158,17 @@ video {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

@media (min-width: 768px) {
.md\:block {
display: block;
}
}
.fullscreen-styles {
background-image: url("https://tailwindcss.com/img/card-top.jpg");
background-size: cover;
background-repeat: no-repeat;
color: white;

.ease-in-out{
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
Expand All @@ -1168,6 +1179,14 @@ video {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.music {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
border-radius: 10px;
width: 60%;
margin: auto;
padding: 20px;
.hover\:bg-gray-200:hover{
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
Expand Down

0 comments on commit b8b9844

Please sign in to comment.