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

Landing #47

Merged
merged 6 commits into from
Apr 4, 2024
Merged

Landing #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
65ad46c
Add landing page layout
Arejula11 Mar 3, 2024
c35f0f6
Add landing page layout and content
Arejula11 Mar 3, 2024
aa56a28
Update links and styles in HeaderMyUser and
Arejula11 Mar 4, 2024
f580df8
add landing
Arejula11 Apr 4, 2024
ac0b93f
Fix carousel navigation and add event listener for storage change
Arejula11 Apr 4, 2024
457af19
Merge branch 'main' into landing
Arejula11 Apr 4, 2024
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
2 changes: 0 additions & 2 deletions playbeat/src/components/HeaderMyUser.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,7 @@ import FlechaIzqHeader from "@/icons/FlechaIzqHeader.astro";
EDIT
</span>
</a>

<a href="/logout" class="bg-[#6985C0] flex flex-row items-center p-1 px-3 gap-1 w-max h-7 rounded-md font-semibold" >CERRAR SESIÓN</a>

</div>


Expand Down
29 changes: 29 additions & 0 deletions playbeat/src/layouts/LayoutLanding.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---


import { ViewTransitions } from 'astro:transitions';


interface Props {
title: string;
}

const { title } = Astro.props;

---


<!doctype html>
<html lang="en" class="bg-grey">
<head>
<meta charset="UTF-8" />
<meta name="description" content="PlayBeat" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/logo_blanco.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<ViewTransitions/>
</head>
<body >
<slot />
</body>
158 changes: 158 additions & 0 deletions playbeat/src/pages/home.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
---
import Layout from '../layouts/Layout.astro';

import Carrousel from '../components/Carrousel.astro';
import Header from '../components/Header.astro';
import Saludos from '../components/Saludos.svelte';
const Canciones = [
{vari:"wide",num:3,name:"Último escuchados",ref:"/podcast", items:[{audio:"Cancion1", descripcion:"Artista1"}, {audio:"Cancion2", descripcion:"Artista2"}, {audio:"Cancion3", descripcion:"Artista3"}, {audio:"Cancion4", descripcion:"Artista4"}, {audio:"Cancion5", descripcion:"Artista5"}, {audio:"audio6", descripcion:"Artista6"}, {audio:"audio7", descripcion:"Artista7"}, {audio:"audio8", descripcion:"Artista8"}, {audio:"audio9", descripcion:"Artista9"}, {audio:"audio10", descripcion:"Artista10"}, {audio:"audio11", descripcion:"Artista11"}, {audio:"audio12", descripcion:"Artista12"}, {audio:"audio13", descripcion:"Artista13"}, {audio:"audio14", descripcion:"Artista14"}, {audio:"audio15", descripcion:"Artista15"}, {audio:"audio16", descripcion:"Artista16"}, {audio:"audio17", descripcion:"Artista17"}, {audio:"audio18", descripcion:"Artista18"}, {audio:"audio19", descripcion:"Artista19"}, {audio:"audio20", descripcion:"Artista20"}, {audio:"audio21", descripcion:"Artista21"}, {audio:"audio22", descripcion:"Artista22"}, {audio:"audio23", descripcion:"Artista23"}, {audio:"audio24", descripcion:"Artista24"}, {audio:"audio25", descripcion:"Artista25"}, {audio:"audio26", descripcion:"Artista26"}, {audio:"audio27", descripcion:"Artista27"}, {audio:"audio28", descripcion:"Artista28"}, {audio:"audio29", descripcion:"Artista29"}, {audio:"audio30", descripcion:"Artista30"}, {audio:"audio31", descripcion:"Artista31"}, {audio:"audio32", descripcion:"Artista32"}]},
{num:5,name:"Para ti", ref:"/podcast", items:[{audio:"Cancion1", descripcion:"Artista1"}, {audio:"Cancion2", descripcion:"Artista2"}, {audio:"Cancion3", descripcion:"Artista3"}, {audio:"Cancion4", descripcion:"Artista4"}, {audio:"Cancion5", descripcion:"Artista5"}, {audio:"audio6", descripcion:"Artista6"}, {audio:"audio7", descripcion:"Artista7"}, {audio:"audio8", descripcion:"Artista8"}, {audio:"audio9", descripcion:"Artista9"}, {audio:"audio10", descripcion:"Artista10"}, {audio:"audio11", descripcion:"Artista11"}, {audio:"audio12", descripcion:"Artista12"}, {audio:"audio13", descripcion:"Artista13"}, {audio:"audio14", descripcion:"Artista14"}, {audio:"audio15", descripcion:"Artista15"}, {audio:"audio16", descripcion:"Artista16"}, {audio:"audio17", descripcion:"Artista17"}, {audio:"audio18", descripcion:"Artista18"}, {audio:"audio19", descripcion:"Artista19"}, {audio:"audio20", descripcion:"Artista20"}, {audio:"audio21", descripcion:"Artista21"}, {audio:"audio22", descripcion:"Artista22"}, {audio:"audio23", descripcion:"Artista23"}, {audio:"audio24", descripcion:"Artista24"}, {audio:"audio25", descripcion:"Artista25"}, {audio:"audio26", descripcion:"Artista26"}, {audio:"audio27", descripcion:"Artista27"}, {audio:"audio28", descripcion:"Artista28"}, {audio:"audio29", descripcion:"Artista29"}, {audio:"audio30", descripcion:"Artista30"}, {audio:"audio31", descripcion:"Artista31"}, {audio:"audio32", descripcion:"Artista32"}]},
{vari:"wide",num:3,name:"Podcast", ref:"/podcast",items:[{audio:"Cancion1", descripcion:"Artista1"}, {audio:"Cancion2", descripcion:"Artista2"}, {audio:"Cancion3", descripcion:"Artista3"}, {audio:"Cancion4", descripcion:"Artista4"}, {audio:"Cancion5", descripcion:"Artista5"}, {audio:"audio6", descripcion:"Artista6"}, {audio:"audio7", descripcion:"Artista7"}, {audio:"audio8", descripcion:"Artista8"}, {audio:"audio9", descripcion:"Artista9"}, {audio:"audio10", descripcion:"Artista10"}, {audio:"audio11", descripcion:"Artista11"}, {audio:"audio12", descripcion:"Artista12"}, {audio:"audio13", descripcion:"Artista13"}, {audio:"audio14", descripcion:"Artista14"}, {audio:"audio15", descripcion:"Artista15"}, {audio:"audio16", descripcion:"Artista16"}, {audio:"audio17", descripcion:"Artista17"}, {audio:"audio18", descripcion:"Artista18"}, {audio:"audio19", descripcion:"Artista19"}, {audio:"audio20", descripcion:"Artista20"}, {audio:"audio21", descripcion:"Artista21"}, {audio:"audio22", descripcion:"Artista22"}, {audio:"audio23", descripcion:"Artista23"}, {audio:"audio24", descripcion:"Artista24"}, {audio:"audio25", descripcion:"Artista25"}, {audio:"audio26", descripcion:"Artista26"}, {audio:"audio27", descripcion:"Artista27"}, {audio:"audio28", descripcion:"Artista28"}, {audio:"audio29", descripcion:"Artista29"}, {audio:"audio30", descripcion:"Artista30"}, {audio:"audio31", descripcion:"Artista31"}, {audio:"audio32", descripcion:"Artista32"}]},
{num:5,name:"Prueba", ref:"/podcast",items:[{audio:"Cancion1", descripcion:"Artista1"}, {audio:"Cancion2", descripcion:"Artista2"}, {audio:"Cancion3", descripcion:"Artista3"}, {audio:"Cancion4", descripcion:"Artista4"}, {audio:"Cancion5", descripcion:"Artista5"}, {audio:"audio6", descripcion:"Artista6"}, {audio:"audio7", descripcion:"Artista7"}, {audio:"audio8", descripcion:"Artista8"}, {audio:"audio9", descripcion:"Artista9"}, {audio:"audio10", descripcion:"Artista10"}, {audio:"audio11", descripcion:"Artista11"}, {audio:"audio12", descripcion:"Artista12"}, {audio:"audio13", descripcion:"Artista13"}, {audio:"audio14", descripcion:"Artista14"}, {audio:"audio15", descripcion:"Artista15"}, {audio:"audio16", descripcion:"Artista16"}, {audio:"audio17", descripcion:"Artista17"}, {audio:"audio18", descripcion:"Artista18"}, {audio:"audio19", descripcion:"Artista19"}, {audio:"audio20", descripcion:"Artista20"}, {audio:"audio21", descripcion:"Artista21"}, {audio:"audio22", descripcion:"Artista22"}, {audio:"audio23", descripcion:"Artista23"}, {audio:"audio24", descripcion:"Artista24"}, {audio:"audio25", descripcion:"Artista25"}, {audio:"audio26", descripcion:"Artista26"}, {audio:"audio27", descripcion:"Artista27"}, {audio:"audio28", descripcion:"Artista28"}, {audio:"audio29", descripcion:"Artista29"}, {audio:"audio30", descripcion:"Artista30"}, {audio:"audio31", descripcion:"Artista31"}, {audio:"audio32", descripcion:"Artista32"}]},
{num:4,name:"Prueba2", ref:"/podcast",items:[{audio:"Cancion1", descripcion:"Artista1"}, {audio:"Cancion2", descripcion:"Artista2"}, {audio:"Cancion3", descripcion:"Artista3"}, {audio:"Cancion4", descripcion:"Artista4"}, {audio:"Cancion5", descripcion:"Artista5"}, {audio:"audio6", descripcion:"Artista6"}, {audio:"audio7", descripcion:"Artista7"}, {audio:"audio8", descripcion:"Artista8"}, {audio:"audio9", descripcion:"Artista9"}, {audio:"audio10", descripcion:"Artista10"}, {audio:"audio11", descripcion:"Artista11"}, {audio:"audio12", descripcion:"Artista12"}, {audio:"audio13", descripcion:"Artista13"}, {audio:"audio14", descripcion:"Artista14"}, {audio:"audio15", descripcion:"Artista15"}, {audio:"audio16", descripcion:"Artista16"}, {audio:"audio17", descripcion:"Artista17"}, {audio:"audio18", descripcion:"Artista18"}, {audio:"audio19", descripcion:"Artista19"}, {audio:"audio20", descripcion:"Artista20"}, {audio:"audio21", descripcion:"Artista21"}, {audio:"audio22", descripcion:"Artista22"}, {audio:"audio23", descripcion:"Artista23"}, {audio:"audio24", descripcion:"Artista24"}, {audio:"audio25", descripcion:"Artista25"}, {audio:"audio26", descripcion:"Artista26"}, {audio:"audio27", descripcion:"Artista27"}, {audio:"audio28", descripcion:"Artista28"}, {audio:"audio29", descripcion:"Artista29"}, {audio:"audio30", descripcion:"Artista30"}, {audio:"audio31", descripcion:"Artista31"}, {audio:"audio32", descripcion:"Artista32"}]},
{num:5,name:"Prueba3", ref:"/podcast",items:[{audio:"Cancion1", descripcion:"Artista1"}, {audio:"Cancion2", descripcion:"Artista2"}, {audio:"Cancion3", descripcion:"Artista3"}, {audio:"Cancion4", descripcion:"Artista4"}, {audio:"Cancion5", descripcion:"Artista5"}, {audio:"audio6", descripcion:"Artista6"}, {audio:"audio7", descripcion:"Artista7"}, {audio:"audio8", descripcion:"Artista8"}, {audio:"audio9", descripcion:"Artista9"}, {audio:"audio10", descripcion:"Artista10"}, {audio:"audio11", descripcion:"Artista11"}, {audio:"audio12", descripcion:"Artista12"}, {audio:"audio13", descripcion:"Artista13"}, {audio:"audio14", descripcion:"Artista14"}, {audio:"audio15", descripcion:"Artista15"}, {audio:"audio16", descripcion:"Artista16"}, {audio:"audio17", descripcion:"Artista17"}, {audio:"audio18", descripcion:"Artista18"}, {audio:"audio19", descripcion:"Artista19"}, {audio:"audio20", descripcion:"Artista20"}, {audio:"audio21", descripcion:"Artista21"}, {audio:"audio22", descripcion:"Artista22"}, {audio:"audio23", descripcion:"Artista23"}, {audio:"audio24", descripcion:"Artista24"}, {audio:"audio25", descripcion:"Artista25"}, {audio:"audio26", descripcion:"Artista26"}, {audio:"audio27", descripcion:"Artista27"}, {audio:"audio28", descripcion:"Artista28"}, {audio:"audio29", descripcion:"Artista29"}, {audio:"audio30", descripcion:"Artista30"}, {audio:"audio31", descripcion:"Artista31"}, {audio:"audio32", descripcion:"Artista32"}]}
]

---

<Layout title="PlayBeat">

<div class=" flex flex-col w-full text-white">
<Header/>
<div class=" w-full h-full flex flex-col mt-16 p-1">
<Saludos />
{Canciones.map( (element, index) =>
{
return <Carrousel info={element} />
}

)}

</div>
</div>
<script is:inline>

document.addEventListener('astro:page-load', () => {

// Selecciona los elementos SVG y el carrusel
const leftArrow = document.querySelectorAll('.icon-tabler-chevron-compact-left');
const rightArrow = document.querySelectorAll('.icon-tabler-chevron-compact-right');
const carrusel = document.querySelectorAll('.carrusel') ;
if(leftArrow && rightArrow && carrusel){

for(let i = 0; i < carrusel.length; i++) {

leftArrow[i].addEventListener('click', () => {
let width = carrusel[i].offsetWidth;
carrusel[i].scrollBy({ left: -width, behavior: 'smooth' });
});

rightArrow[i].addEventListener('click', () => {
let width = carrusel[i].offsetWidth;
carrusel[i].scrollBy({ left: width, behavior: 'smooth' });
});
}
}
})
</script>
<script is:inline>
document.addEventListener('astro:after-swap', () => {
window.dispatchEvent(new Event('storageChange'));

});
</script>
</Layout>


<style>

.carrusel{
scrollbar-width: none;
--ancho-padre: 100%;
}
.hijo{
min-width: calc(var(--ancho-padre) / 4);
}



.button {
background-color: black;
border: 2px solid black;
border-radius: 30px;
width: 30px;
height: 30px;
border: none;
color: white;
font-weight: semibold;
cursor: pointer;
padding: 8px;
}
.buttonOculto {
background-color: black;
border: 2px solid black;
border-radius: 30px;
width: 30px;
height: 30px;
border: none;
color: white;
font-weight: semibold;
cursor: pointer;
padding: 8px;
display:none;
}



.div {
position: relative;
display: inline-block;
}

.dropdown {
display: none;
position: absolute;
background-color: #2f2f2f;

min-width: 100px;
border-radius: 10px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 100;
}

.dropdown span {
color: white;

padding: 12px 16px;

text-decoration: none;
display: flex;
cursor: pointer;
font-weight: normal;
font-size: medium;
}

.dropdown span{
border-top: .5px solid white;

}
.dropdown span:first-child{
border-top: 0px;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
.dropdown span:last-child{

border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}

.dropdown span:hover {background-color: #6e6e6e;}

.button:focus ~ .dropdown {display: flex; flex-direction: column;}
.button:focus ~ .buttonOculto {display: flex; position:absolute; top: 0; left: 0;}




</style>
Loading