<!
DOCTYPE
 
html
>
<
html
 
lang
=
"es"
>

<
head
>
    
<
meta
 
charset
=
"UTF-8"
>
    
<
title
>
Grupo 16
</
title
>
    
<
script
 
src
=
"https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"
></
script
>
    
<!-- Bootstrap CSS -->
    
<
link
 
href
=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
 
rel
=
"stylesheet"
>

    
<!-- Foundation CSS -->
    
<
link
 
rel
=
"stylesheet"
 
href
=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css"
>

    
<!-- Materialize CSS (Material Design) -->
    
<
link
 
href
=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
 
rel
=
"stylesheet"
>
    
<
style
>
        
*
 {
            
margin
: 
0
;
            
box-sizing
: border-box;
        }

        
html
 {
            
scroll-behavior
: smooth;
        }

        
section
 {
            
scroll-margin-top
: 
80px
;
            
/* Ajusta este valor al alto de tu navbar + el margen que quieras */
        }

        
body
 {
            
font-family
: 
'Segoe UI'
, Tahoma, Geneva, Verdana, sans-serif;
            
background-color
: #f9f9f9;
            
margin
: 
0
;
            
padding-inline-start
: 
20px
;
        }

        
/* Estilos de la navbar */
        
.navbar
 {
            
position
: fixed;
            
top
: 
0
;
            
left
: 
0
;
            
right
: 
0
;
            
z-index
: 
999
;
            
display
: flex;
            
justify-content
: space-between;
            
align-items
: center;
            
height
: 
70px
;
            
background-color
: white;
            
padding
: 
0
 
40px
;
        }

        
.logo
 
img
 {
            
height
: 
50px
;
        }

        
.menu
 {
            
display
: flex;
            
height
: 
100%
;
        }

        
.menu
 
a
 {
            
position
: relative;
            
display
: flex;
            
align-items
: center;
            
height
: 
100%
;
            
padding
: 
0
 
20px
;
            
text-decoration
: none;
            
font-weight
: bold;
            
color
: #555;
            
z-index
: 
1
;
        }

        
.menu
 
a::before
 {
            
content
: 
''
;
            
position
: fixed;
            
/* importante: ocupa toda la pantalla horizontalmente */
            
left
: 
0
;
            
top
: 
0
;
            
width
: 
100vw
;
            
height
: 
70px
;
            
background-color
: rgba(
0
, 
0
, 
0
, 
0.05
);
            
z-index
: 
-1
;
            
opacity
: 
0
;
            
pointer-events
: none;
            
transition
: opacity 
0.3s
;
        }

        
.menu
 
a:hover::before
 {
            
top
: inherit;
            
transform
: translateY(
-100%
);
            
/* reseteamos si top no funciona */
            
opacity
: 
1
;
        }

        
.menu
 
a:hover
 {
            
color
: #004080;
        }

        
.menu
 
a.active
 {
            
color
: #004080;
        }

        
/* Estilos para el home slide */
        
.home-slide
 {
            
position
: relative;
            
width
: 
100%
;
            
height
: 
400px
;
            
background-color
: #333;
            
color
: white;
            
display
: flex;
            
justify-content
: center;
            
align-items
: center;
            
overflow
: hidden;

        }

        
.home-slide
 
.slide
 {
            
position
: absolute;
            
width
: 
100%
;
            
height
: 
100%
;
            
background-image
: url(
'./assets/img/facultad.jpg'
);
            
/* Reemplaza esta ruta con tu propia imagen */
            
background-size
: cover;
            
background-position
: center;
            
transition
: opacity 
1s
 ease;
            
opacity
: 
1
;
        }

        
.home-slide
 
.slide.fade
 {
            
opacity
: 
0
;
        }

        
.home-slide
 
.text
 {
            
font-size
: 
2rem
;
            
font-weight
: bold;
            
z-index
: 
1
;
            
color
: white;
        }

        
.logo
 {
            
width
: 
150px
;
            
height
: auto;
        }

        
.titulo
 {
            
font-weight
: bold;
        }


/* Estilos para el botón */
        
#goTopBtn
 {
            
position
: fixed;
            
bottom
: 
40px
;
            
right
: 
40px
;
            
z-index
: 
1000
;
            
background-color
: #004080;
            
color
: white;
            
border
: none;
            
padding
: 
12px
 
16px
;
            
border-radius
: 
50%
;
            
font-size
: 
20px
;
            
cursor
: pointer;
            
box-shadow
: 
0
 
4px
 
6px
 rgba(
0
, 
0
, 
0
, 
0.2
);
            
transition
: opacity 
0.3s
 ease;
            
display
: none;
        }

        
#goTopBtn:hover
 {
            
background-color
: #0056b3;
        }

        
footer
 {
            
background-color
: #f8f9fa;
            
padding
: 
20px
 
0
;
            
text-align
: center;
            
font-size
: 
14px
;
            
color
: #6c757d;
            
border-top
: 
1px
 solid #dee2e6;
        }

        
footer
 
p
 {
            
margin
: 
0
;
        }

        
footer
 
strong
 {
            
color
: #343a40;
        }
    
</
style
>
</
head
>

<
body
>

    
<
nav
 
class
=
"navbar"
>
        
<
div
 
class
=
"logo"
>
            
<
img
 
src
=
"./assets/img/logo-grupo.jpg"
 
alt
=
"Logo del grupo 16 sc"
>
        
</
div
>
        
<
div
 
class
=
"menu"
>
            
<
a
 
href
=
"#"
 
class
=
"active"
>
INICIO
</
a
>
            
<
a
 
href
=
"#curriculum"
>
CURRICULUM
</
a
>
            
<
a
 
href
=
"#musica-video"
>
MUSICA Y VIDEOS
</
a
>
            
<
a
 
href
=
"#estadistica"
>
ESTADISTICA
</
a
>
            
<
a
 
href
=
"#contacto"
>
CONTACTOS
</
a
>
        
</
div
>
    
</
nav
>

    
<!-- Sección Home Slide -->
    
<
div
 
class
=
"home-slide"
>
        
<
div
 
class
=
"slide"
 
id
=
"slide1"
></
div
>
        
<
div
 
class
=
"slide fade"
 
id
=
"slide2"
></
div
>
        
<
div
 
class
=
"text"
>
Bienvenidos a Nuestro Sitio Web
</
div
>
    
</
div
>
    
<!-- formulario -->
    
<
div
 
id
=
"contacto"
 
class
=
"grid-container mt-5"
>
        
<
div
 
class
=
"grid-x grid-padding-x"
>
            
<
div
 
class
=
"cell medium-8 medium-offset-2"
>
                
<
div
 
class
=
"card-panel z-depth-3"
>
                    
<
h4
 
class
=
"center-align"
>
Formulario de Contacto
</
h4
>
                    
<
form
>

                        
<!-- Nombre -->
                        
<
div
 
class
=
"input-field"
>
                            
<
input
 
id
=
"nombre"
 
type
=
"text"
 
class
=
"validate"
 
required
>
                            
<
label
 
for
=
"nombre"
>
Nombre
</
label
>
                        
</
div
>

                        
<!-- Correo electrónico -->
                        
<
div
 
class
=
"input-field"
>
                            
<
input
 
id
=
"email"
 
type
=
"email"
 
class
=
"validate"
 
required
>
                            
<
label
 
for
=
"email"
>
Correo Electrónico
</
label
>
                        
</
div
>

                        
<!-- Celular -->
                        
<
div
 
class
=
"input-field"
>
                            
<
input
 
id
=
"celular"
 
type
=
"tel"
 
class
=
"validate"
 
required
>
                            
<
label
 
for
=
"celular"
>
Celular
</
label
>
                        
</
div
>

                        
<!-- Fecha de nacimiento -->
                        
<
div
 
class
=
"input-field"
>
                            
<
input
 
id
=
"fecha"
 
type
=
"date"
 
class
=
"validate"
 
required
>
                            
<
label
 
for
=
"fecha"
 
class
=
"active"
>
Fecha de Nacimiento
</
label
>
                        
</
div
>

                        
<!-- País -->
                        
<
div
 
class
=
"input-field"
>
                            
<
select
 
id
=
"pais"
 
required
>
                                
<
option
 
value
=
""
 
disabled
 
selected
>
Selecciona tu país
</
option
>
                                
<
option
 
value
=
"ag"
>
Antigua y Barbuda
</
option
>
                                
<
option
 
value
=
"ar"
>
Argentina
</
option
>
                                
<
option
 
value
=
"bs"
>
Bahamas
</
option
>
                                
<
option
 
value
=
"bb"
>
Barbados
</
option
>
                                
<
option
 
value
=
"bz"
>
Belice
</
option
>
                                
<
option
 
value
=
"bo"
>
Bolivia
</
option
>
                                
<
option
 
value
=
"br"
>
Brasil
</
option
>
                                
<
option
 
value
=
"ca"
>
Canadá
</
option
>
                                
<
option
 
value
=
"cl"
>
Chile
</
option
>
                                
<
option
 
value
=
"co"
>
Colombia
</
option
>
                                
<
option
 
value
=
"cr"
>
Costa Rica
</
option
>
                                
<
option
 
value
=
"cu"
>
Cuba
</
option
>
                                
<
option
 
value
=
"dm"
>
Dominica
</
option
>
                                
<
option
 
value
=
"ec"
>
Ecuador
</
option
>
                                
<
option
 
value
=
"sv"
>
El Salvador
</
option
>
                                
<
option
 
value
=
"us"
>
Estados Unidos
</
option
>
                                
<
option
 
value
=
"gd"
>
Granada
</
option
>
                                
<
option
 
value
=
"gt"
>
Guatemala
</
option
>
                                
<
option
 
value
=
"gy"
>
Guyana
</
option
>
                                
<
option
 
value
=
"ht"
>
Haití
</
option
>
                                
<
option
 
value
=
"hn"
>
Honduras
</
option
>
                                
<
option
 
value
=
"jm"
>
Jamaica
</
option
>
                                
<
option
 
value
=
"mx"
>
México
</
option
>
                                
<
option
 
value
=
"ni"
>
Nicaragua
</
option
>
                                
<
option
 
value
=
"pa"
>
Panamá
</
option
>
                                
<
option
 
value
=
"py"
>
Paraguay
</
option
>
                                
<
option
 
value
=
"pe"
>
Perú
</
option
>
                                
<
option
 
value
=
"do"
>
República Dominicana
</
option
>
                                
<
option
 
value
=
"kn"
>
San Cristóbal y Nieves
</
option
>
                                
<
option
 
value
=
"lc"
>
Santa Lucía
</
option
>
                                
<
option
 
value
=
"vc"
>
San Vicente y las Granadinas
</
option
>
                                
<
option
 
value
=
"sr"
>
Surinam
</
option
>
                                
<
option
 
value
=
"tt"
>
Trinidad y Tobago
</
option
>
                                
<
option
 
value
=
"uy"
>
Uruguay
</
option
>
                                
<
option
 
value
=
"ve"
>
Venezuela
</
option
>
                            
</
select
>

                            
<
label
 
for
=
"pais"
>
País
</
label
>
                        
</
div
>
                        
<!-- Archivo: Imagen o Video -->
                        
<
div
 
class
=
"file-field input-field"
>
                            
<
div
 
class
=
"btn blue"
>
                                
<
span
>
Subir Archivo
</
span
>
                                
<
input
 
type
=
"file"
 
accept
=
"image/*,video/*"
 
required
>
                            
</
div
>
                            
<
div
 
class
=
"file-path-wrapper"
>
                                
<
input
 
class
=
"file-path validate"
 
type
=
"text"
                                    
placeholder
=
"Selecciona una imagen o video"
>
                            
</
div
>
                        
</
div
>

                        
<!-- Botón -->
                        
<
div
 
class
=
"center-align"
>
                            
<
button
 
class
=
"btn waves-effect waves-light blue"
 
type
=
"submit"
>
Enviar
</
button
>
                        
</
div
>

                    
</
form
>
                
</
div
>
            
</
div
>
        
</
div
>
    
</
div
>

    
<!-- Botón Go to Top -->
    
<
button
 
id
=
"goTopBtn"
 
title
=
"Ir arriba"
>
↑
</
button
>
    
<
footer
>
        
<
p
>
&copy; UAGRM - 2025 Todos los derechos reservados. Desarrollado por el alumno 
<
strong
>
Luis Enrique Orellana
                Zapata
</
strong
>
.
</
p
>
        
<
p
><
strong
>
Tecnologías Web 
</
strong
>
- Grupo 16 sc.
</
p
>
    
</
footer
>
</
body
>
<
script
 
src
=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
></
script
>
<
script
 
src
=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"
></
script
>
<
script
 
src
=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"
></
script
>
<
script
>
    
// Inicializar los select de Materialize
    document.addEventListener(
'DOMContentLoaded'
, 
function
 () {
        
var
 elems = document.querySelectorAll(
'select'
);
        M.FormSelect.init(elems);
    });
</
script
>
<
script
>
  document.addEventListener(
'DOMContentLoaded'
, 
function
 () {
    
// Inicializar selects de Materialize
    
var
 selects = document.querySelectorAll(
'select'
);
    M.FormSelect.init(selects);

    
// Validación del archivo
    
const
 form = document.querySelector(
'form'
);
    
const
 fileInput = form.querySelector(
'input[type="file"]'
);

    form.addEventListener(
'submit'
, 
function
 (e) {
      
const
 file = fileInput.files[
0
];
      
if
 (file) {
        
const
 fileType = file.type;
        
if
 (!fileType.startsWith(
"image/"
) && !fileType.startsWith(
"video/"
)) {
          e.preventDefault();
          alert(
"Solo se permiten archivos de imagen o video."
);
          fileInput.value = 
''
; 
// Limpiar archivo no válido
        }
      }
    });
  });
</
script
>

</
html
>