File: /var/www/html/xfacil.desafio.com.py/resources/views/welcome.blade-bk.php
<?php
use App\Models\Modal;
$popup=Modal::first();
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: sans-serif;
background: url('/imgsystem/fondopagina2.jpg') no-repeat center center fixed;
background-size: cover;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
input[type=radio] {
display: none;
}
.card {
position: absolute;
width: 60%;
height: 100%;
left: 0;
right: 0;
margin: auto;
transition: transform .4s ease;
cursor: pointer;
}
.container {
width: 100%;
max-width: 800px;
max-height: 600px;
height: 100%;
transform-style: preserve-3d;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.cards {
position: relative;
width: 100%;
height: 100%;
margin-bottom: 20px;
}
img {
width: 100%;
height: 100%;
border-radius: 10px;
object-fit: cover;
}
#item-1:checked ~ .cards #song-3, #item-2:checked ~ .cards #song-1, #item-3:checked ~ .cards #song-2 {
transform: translatex(-40%) scale(.8);
opacity: .4;
z-index: 0;
}
#item-1:checked ~ .cards #song-2, #item-2:checked ~ .cards #song-3, #item-3:checked ~ .cards #song-1 {
transform: translatex(40%) scale(.8);
opacity: .4;
z-index: 0;
}
#item-1:checked ~ .cards #song-1, #item-2:checked ~ .cards #song-2, #item-3:checked ~ .cards #song-3 {
transform: translatex(0) scale(1);
opacity: 1;
z-index: 1;
img {
box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
}
}
.player {
background-color: #fff;
border-radius: 8px;
min-width: 320px;
padding: 16px 10px;
}
.upper-part {
position: relative;
display: flex;
align-items: center;
margin-bottom: 12px;
height: 36px;
overflow: hidden;
}
.play-icon{ margin-right: 10px; }
.song-info {
width: calc(100% - 32px);
display: block;
}
.song-info .title {
color: #403d40;
font-size: 14px;
line-height: 24px;
}
.sub-line {
display: flex;
justify-content: space-between;
width: 100%;
}
.subtitle, .time {
font-size: 12px;
line-height: 16px;
color: #c6c5c6;
}
.time {
font-size: 12px;
line-height: 16px;
color: #a5a5a5;
font-weight: 500;
margin-left: auto;
}
.progress-bar {
height: 3px;
width: 100%;
background-color: #e9efff;
border-radius: 2px;
overflow: hidden;
}
.progress {
display: block;
position: relative;
width: 60%;
height: 100%;
background-color: #2992dc;
border-radius: 6px;
}
.info-area {
width: 100%;
position: absolute;
top: 0;
left: 30px;
transition: transform .4s ease-in;
}
.btn-wrap {
position: relative;
display: inline-block;
text-decoration: none;
}
.btn-ir {
background-color: #00aaff; /* Celeste */
color: white;
font-size: 16px;
padding: 12px 24px;
border-radius: 25px;
font-weight: bold;
border: none;
cursor: pointer;
position: relative;
z-index: 1;
padding-right: 40px;
}
.btn-wrap .circle {
position: absolute;
top: 50%;
right: -15px; /* sobresale 50% del círculo */
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: #008ecc;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
z-index: 2;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
transition: background-color 0.3s ease;
}
.btn-wrap:hover .btn-ir {
background-color: #008ecc;
}
.btn-wrap:hover .circle {
background-color: #006f99;
}
</style>
</head>
<body>
<div class="container">
<input type="radio" name="slider" id="item-1" checked>
<input type="radio" name="slider" id="item-2">
<input type="radio" name="slider" id="item-3">
<div class="cards">
<label class="card" for="item-1" id="song-1">
<img src="/imgsystem/CARRUSEL1.jpg" alt="song">
</label>
<label class="card" for="item-2" id="song-2">
<img src="/imgsystem/CARRUSEL2.jpg" alt="song">
</label>
<label class="card" for="item-3" id="song-3">
<img src="/imgsystem/CARRUSEL2.jpg" alt="song">
</label>
</div>
<a id="test" href="https://itae.metiri.la/metiri/portal/index.php?portcod=14" class="btn-wrap">
<div class="btn-ir">Ir</div>
<span class="circle">›</span>
</a>
</div>
<script>
const checkbox1 = document.getElementById('item-1');
const checkbox2 = document.getElementById('item-2');
const checkbox3 = document.getElementById('item-3');
const link = document.getElementById('test');
checkbox1.addEventListener('change', function() {
if (checkbox1.checked) {
// Cambia el href cuando el checkbox está seleccionado
link.href = "https://itae.metiri.la/metiri/portal/index.php?portcod=14";
}
});
checkbox2.addEventListener('change', function() {
if (checkbox2.checked) {
// Cambia el href cuando el checkbox está seleccionado
link.href = "https://xfacil.desafio.com.py/xfacil";
}
});
checkbox3.addEventListener('change', function() {
if (checkbox3.checked) {
// Cambia el href cuando el checkbox está seleccionado
link.href = "https://xfacil.desafio.com.py/e-learning";
}
});
</script>
@if($popup->estado == 1)
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{{$popup->nombre}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" align="center">
@if($popup->tipo == 'imagen')
<img src="{{ asset('modal/'.$popup->enlace) }}" width="100%"><br>
@elseif($popup->tipo == 'video')
<video src="{{ asset('modal/'.$popup->enlace) }}" controls width="100%"></video><br>
@endif
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<script>
$('#modal').modal('show')
</script>
@endif
</body>
</html>