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

Jump to bottom

Fix: workflow #23

Merged
merged 5 commits into from
Oct 8, 2023
Merged

Fix: workflow #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5f2b684
Fix: workflow
MannuVilasara Oct 8, 2023
c784c56
created .preetierrc
MannuVilasara Oct 8, 2023
fe128bd
Fix: Workflow
MannuVilasara Oct 8, 2023
d7a3fb1
format lint.yml
MannuVilasara Oct 8, 2023
ce56b57
Merge branch 'master' into Patch
pooranjoyb Oct 8, 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
4 changes: 3 additions & 1 deletion .github/workflows/lint.yml
View file
Open in desktop
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
Open in desktop
File renamed without changes.
171 changes: 97 additions & 74 deletions src/Components/Player.jsx
View file
Open in desktop
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
Open in desktop
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
Loading