<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ÑE’ÊTECH UEP - Repositorio Académico y Tecnológico</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- FontAwesome para iconos -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-blue: #1e3a8a;
--accent-orange: #f97316;
--light-bg: #f8fafc;
--text-dark: #1e293b;
--white: #ffffff;
--gray-border: #e2e8f0;
--danger-red: #ef4444;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
scroll-behavior: smooth;
}
body {
background-color: var(--light-bg);
color: var(--text-dark);
line-height: 1.6;
}
/* Header y Menú de Navegación */
header {
background-color: var(--white);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-blue);
text-decoration: none;
display: flex;
align-items: center;
gap: 0.5rem;
}
.logo span {
color: var(--accent-orange);
}
.nav-menu {
display: flex;
list-style: none;
gap: 1.5rem;
align-items: center;
}
.nav-menu a {
text-decoration: none;
color: var(--text-dark);
font-weight: 500;
transition: color 0.3s;
}
.nav-menu a:hover {
color: var(--accent-orange);
}
.admin-link {
background-color: var(--primary-blue);
color: var(--white) !important;
padding: 0.4rem 0.8rem;
border-radius: 0.4rem;
}
/* Secciones Principales */
section {
padding: 6rem 2rem 4rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
/* Sección Inicio (Hero) */
.hero {
background: linear-gradient(135deg, var(--primary-blue) 0%, #1e40af 100%);
color: var(--white);
text-align: center;
padding: 8rem 2rem 6rem 2rem;
border-radius: 0 0 2rem 2rem;
margin-top: 60px;
}
.hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
font-weight: 700;
}
.hero h1 span {
color: var(--accent-orange);
}
.hero p {
font-size: 1.25rem;
max-width: 700px;
margin: 0 auto 2rem auto;
opacity: 0.9;
}
.btn {
display: inline-block;
background-color: var(--accent-orange);
color: var(--white);
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
text-decoration: none;
font-weight: 600;
border: none;
cursor: pointer;
transition: background 0.3s;
}
.btn:hover {
background-color: #ea580c;
}
.btn-danger {
background-color: var(--danger-red);
}
.btn-danger:hover {
background-color: #dc2626;
}
/* Títulos de sección */
.section-title {
text-align: center;
margin-bottom: 3rem;
}
.section-title h2 {
font-size: 2.25rem;
color: var(--primary-blue);
margin-bottom: 0.5rem;
}
.section-title p {
color: #64748b;
}
/* Presentación del Proyecto */
.about-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.about-card {
background: var(--white);
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
border-top: 4px solid var(--accent-orange);
}
.about-card i {
font-size: 2rem;
color: var(--primary-blue);
margin-bottom: 1rem;
}
.about-card h3 {
margin-bottom: 0.75rem;
color: var(--primary-blue);
}
/* Tarjetas de Artículos Académicos y Podcasts */
.grid-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
}
.card {
background: var(--white);
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid var(--gray-border);
}
.card-header {
background-color: var(--primary-blue);
color: var(--white);
padding: 1.5rem;
}
.badge {
display: inline-block;
background-color: var(--accent-orange);
color: var(--white);
font-size: 0.75rem;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
margin-bottom: 0.5rem;
font-weight: 600;
}
.card-body {
padding: 1.5rem;
flex-grow: 1;
}
.card-body h3 {
font-size: 1.25rem;
margin-bottom: 0.5rem;
color: var(--primary-blue);
}
.card-meta {
font-size: 0.85rem;
color: #64748b;
margin-bottom: 1rem;
display: flex;
gap: 1rem;
}
.card-footer {
padding: 1rem 1.5rem;
background-color: #f1f5f9;
border-top: 1px solid var(--gray-border);
display: flex;
justify-content: space-between;
align-items: center;
}
/* Reproductor de Audio Simulado */
.podcast-player {
background: #f8fafc;
border: 1px solid var(--gray-border);
border-radius: 0.5rem;
padding: 0.75rem;
display: flex;
align-items: center;
gap: 1rem;
margin-top: 1rem;
}
.podcast-player i {
font-size: 1.5rem;
color: var(--accent-orange);
}
.progress-bar {
flex-grow: 1;
height: 6px;
background: var(--gray-border);
border-radius: 3px;
position: relative;
}
.progress {
width: 35%;
height: 100%;
background: var(--primary-blue);
border-radius: 3px;
}
/* Panel de Administración */
#admin-panel {
display: none;
background: var(--white);
padding: 3rem 2rem;
border-radius: 1rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
margin: 6rem auto 2rem auto;
max-width: 800px;
}
.admin-form-group {
margin-bottom: 1.5rem;
}
.admin-form-group label {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--primary-blue);
}
.admin-form-group input, .admin-form-group textarea, .admin-form-group select {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--gray-border);
border-radius: 0.5rem;
font-size: 1rem;
}
.admin-section-box {
background: #f8fafc;
border: 1px solid var(--gray-border);
padding: 1.5rem;
border-radius: 0.5rem;
margin-bottom: 2rem;
}
/* Información Institucional */
.institutional {
background-color: var(--primary-blue);
color: var(--white);
text-align: center;
padding: 4rem 2rem;
border-radius: 1rem;
margin: 4rem auto;
}
.institutional h2 {
margin-bottom: 1rem;
color: var(--white);
}
.institutional p {
max-width: 800px;
margin: 0 auto;
opacity: 0.9;
}
/* Pie de página */
footer {
background-color: #0f172a;
color: var(--white);
text-align: center;
padding: 2.5rem 2rem;
font-size: 0.9rem;
}
footer p {
opacity: 0.8;
margin-bottom: 0.5rem;
}
</style>
</head>
<body>
<!-- Header y Menú de Navegación -->
<header>
<div class="nav-container">
<a href="#inicio" class="logo"><i class="fa-solid fa-graduation-cap"></i>ÑE’ÊTECH <span>UEP</span></a>
<ul class="nav-menu">
<li><a href="#inicio">Inicio</a></li>
<li><a href="#proyecto">El Proyecto</a></li>
<li><a href="#articulos">Artículos</a></li>
<li><a href="#podcasts">Podcasts</a></li>
<li><a href="#institucional">UEP Gutenberg</a></li>
<li><a href="#" onclick="solicitarAccesoAdmin(event)" class="admin-link"><i class="fa-solid fa-lock"></i> Admin</a></li>
</ul>
</div>
</header>
<!-- 1. Página Principal o Sección de Inicio -->
<section id="inicio" class="hero" style="margin-top: 0;">
<h1 id="main-title">Bienvenido a <span>ÑE’ÊTECH UEP</span></h1>
<p id="main-subtitle">Un espacio digital académico, tecnológico y creativo dedicado a difundir la producción intelectual, artículos científicos y podcasts de estudiantes de años superiores.</p>
<a href="#proyecto" class="btn">Conocer el Proyecto</a>
</section>
<!-- PANEL DE ADMINISTRADOR (Oculto hasta autenticarse) -->
<div id="admin-panel">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
<h2 style="color: var(--primary-blue);"><i class="fa-solid fa-screwdriver-wrench"></i> Panel de Administración</h2>
<button onclick="cerrarAdmin()" class="btn btn-danger" style="padding: 0.4rem 1rem; font-size: 0.85rem;">Cerrar Panel</button>
</div>
<!-- Subir Artículo -->
<div class="admin-section-box">
<h3 style="margin-bottom: 1rem; color: var(--primary-blue);">➕ Publicar Nuevo Artículo Académico</h3>
<div class="admin-form-group">
<label>Título del Artículo</label>
<input type="text" id="nuevo-art-titulo" placeholder="Ej: Avances de la Robótica Educativa">
</div>
<div class="admin-form-group">
<label>Categoría / Área Temática</label>
<input type="text" id="nuevo-art-cat" placeholder="Ej: Tecnología e Innovación">
</div>
<div class="admin-form-group">
<label>Autor / Curso</label>
<input type="text" id="nuevo-art-autor" placeholder="Ej: Juan Pérez - 3er Año">
</div>
<div class="admin-form-group">
<label>Resumen o Descripción</label>
<textarea id="nuevo-art-desc" rows="3" placeholder="Breve descripción del artículo..."></textarea>
</div>
<button onclick="agregarArticulo()" class="btn">Publicar Artículo</button>
</div>
<!-- Subir Podcast -->
<div class="admin-section-box">
<h3 style="margin-bottom: 1rem; color: var(--primary-blue);">🎙️ Publicar Nuevo Podcast</h3>
<div class="admin-form-group">
<label>Título del Episodio</label>
<input type="text" id="nuevo-pod-titulo" placeholder="Ej: Episodio 03: Inteligencia Artificial">
</div>
<div class="admin-form-group">
<label>Autor / Club</label>
<input type="text" id="nuevo-pod-autor" placeholder="Ej: Club de Informática">
</div>
<div class="admin-form-group">
<label>Descripción del Audio</label>
<textarea id="nuevo-pod-desc" rows="3" placeholder="De qué trata el episodio..."></textarea>
</div>
<button onclick="agregarPodcast()" class="btn">Publicar Podcast</button>
</div>
</div>
<!-- 2. Presentación del Proyecto -->
<section id="proyecto">
<div class="section-title">
<h2>Presentación del Proyecto</h2>
<p>Conoce la esencia, propósito e importancia de nuestra iniciativa estudiantil</p>
</div>
<div class="about-grid">
<div class="about-card">
<i class="fa-solid fa-bullseye"></i>
<h3>¿Qué es ÑE’ÊTECH UEP?</h3>
<p>Es una plataforma digital colaborativa diseñada por la comunidad estudiantil para centralizar, visibilizar y promover ensayos, artículos académicos y formatos de audio (podcasts) desarrollados en cursos superiores.</p>
</div>
<div class="about-card">
<i class="fa-solid fa-lightbulb"></i>
<h3>Propósito Principal</h3>
<p>Fomentar la investigación, el pensamiento crítico y el uso de la tecnología como herramientas clave para compartir el conocimiento generado dentro del aula hacia toda la comunidad educativa.</p>
</div>
<div class="about-card">
<i class="fa-solid fa-globe"></i>
<h3>Importancia Tecnológica</h3>
<p>Proveer un entorno digital accesible rompe las barreras físicas del aula, permitiendo que trabajos de alta calidad académica perduren en el tiempo y sirvan de inspiración a las próximas generaciones.</p>
</div>
</div>
</section>
<!-- 3. Sección de Artículos Académicos -->
<section id="articulos">
<div class="section-title">
<h2>Artículos Académicos</h2>
<p>Investigaciones y ensayos destacados elaborados por estudiantes</p>
</div>
<div class="grid-cards" id="contenedor-articulos">
<!-- Artículo 1 -->
<div class="card" data-id="1">
<div class="card-header">
<span class="badge">Tecnología e Innovación</span>
<h3>Inteligencia Artificial en la Educación Secundaria</h3>
</div>
<div class="card-body">
<div class="card-meta">
<span><i class="fa-regular fa-user"></i> 3er Año - Grupo A</span>
<span><i class="fa-regular fa-calendar"></i> Octubre 2026</span>
</div>
<p>Análisis sobre el impacto de las herramientas de IA generativa en el desarrollo de competencias de programación y redacción crítica en estudiantes.</p>
</div>
<div class="card-footer">
<small>Autor: Juan Pérez</small>
<button onclick="eliminarElemento(this)" class="btn btn-danger" style="padding: 0.2rem 0.5rem; font-size: 0.75rem; display:none;" class="btn-eliminar-admin">Eliminar</button>
</div>
</div>
<!-- Artículo 2 -->
<div class="card" data-id="2">
<div class="card-header">
<span class="badge">Ciencias Sociales</span>
<h3>Sostenibilidad Urbana en el Paraguay del Siglo XXI</h3>
</div>
<div class="card-body">
<div class="card-meta">
<span><i class="fa-regular fa-user"></i> 2do Año - Grupo B</span>
<span><i class="fa-regular fa-calendar"></i> Septiembre 2026</span>
</div>
<p>Estudio de campo enfocado en las alternativas de movilidad urbana sostenible y gestión de residuos en áreas metropolitanas.</p>
</div>
<div class="card-footer">
<small>Autora: María Gómez</small>
<button onclick="eliminarElemento(this)" class="btn btn-danger" style="padding: 0.2rem 0.5rem; font-size: 0.75rem; display:none;" class="btn-eliminar-admin">Eliminar</button>
</div>
</div>
</div>
</section>
<!-- 4. Sección de Podcasts -->
<section id="podcasts">
<div class="section-title">
<h2>Podcasts Estudiantiles</h2>
<p>Discusiones, entrevistas y análisis en formato de audio</p>
</div>
<div class="grid-cards" id="contenedor-podcasts">
<!-- Podcast 1 -->
<div class="card" data-id="1">
<div class="card-header" style="background-color: var(--accent-orange);">
<span class="badge" style="background-color: var(--primary-blue);">Episodio 01</span>
<h3>Voces del Saber: El Futuro de la Ciberseguridad</h3>
</div>
<div class="card-body">
<div class="card-meta">
<span><i class="fa-regular fa-user"></i> Podcast Club Tecnológico</span>
<span><i class="fa-regular fa-clock"></i> 14 min</span>
</div>
<p>Una charla profunda sobre los retos éticos y prácticos de proteger la información personal en redes sociales y entornos educativos.</p>
<div class="podcast-player">
<i class="fa-solid fa-play"></i>
<div class="progress-bar">
<div class="progress"></div>
</div>
<span style="font-size: 0.75rem; color: #64748b;">14:20</span>
</div>
</div>
<div class="card-footer">
<small>Conducción: Equipo TICs</small>
<button onclick="eliminarElemento(this)" class="btn btn-danger" style="padding: 0.2rem 0.5rem; font-size: 0.75rem; display:none;">Eliminar</button>
</div>
</div>
</div>
</section>
<!-- 7. Información Institucional Básica -->
<section id="institucional">
<div class="institutional">
<h2>UEP Campus Gutenberg</h2>
<p>El proyecto ÑE’ÊTECH UEP se desarrolla en el marco de la asignatura de Informática, impulsando el propósito formativo de la institución: formar profesionales y líderes íntegros, creativos y con alta capacidad de adaptación tecnológica y compromiso social.</p>
</div>
</section>
<!-- 8. Pie de Página -->
<footer>
<p><strong>Proyecto:</strong> ÑE’ÊTECH UEP</p>
<p><strong>Año:</strong> 2026 | <strong>Curso:</strong> [Tu Curso / Grado]</p>
<p><strong>Responsable:</strong> [Tu Nombre o Grupo]</p>
<p style="margin-top: 1rem; font-size: 0.8rem; opacity: 0.6;">Referencia Institucional: UEP Campus Gutenberg — Área de Informática</p>
</footer>
<!-- Script de Autenticación y Administración -->
<script>
function solicitarAccesoAdmin(e) {
e.preventDefault();
let usuario = prompt("Ingrese el usuario de administrador:");
let password = prompt("Ingrese la contraseña:");
if (usuario === "Neetecadmin" && password === "Lizmaymatyohiro") {
alert("¡Acceso concedido! Panel de administración abierto.");
document.getElementById("admin-panel").style.display = "block";
// Mostrar botones de eliminación para el admin
let botonesEliminar = document.querySelectorAll(".card-footer .btn-danger");
botonesEliminar.forEach(btn => btn.style.display = "inline-block");
window.location.hash = "#admin-panel";
} else {
alert("Credenciales incorrectas. Acceso denegado.");
}
}
function cerrarAdmin() {
document.getElementById("admin-panel").style.display = "none";
window.location.hash = "#inicio";
}
function agregarArticulo() {
let titulo = document.getElementById("nuevo-art-titulo").value;
let cat = document.getElementById("nuevo-art-cat").value;
let autor = document.getElementById("nuevo-art-autor").value;
let desc = document.getElementById("nuevo-art-desc").value;
if(!titulo || !autor) {
alert("Por favor completa al menos el título y el autor.");
return;
}
let contenedor = document.getElementById("contenedor-articulos");
let nuevaCard = document.createElement("div");
nuevaCard.className = "card";
nuevaCard.innerHTML = `
<div class="card-header">
<span class="badge">${cat || 'Académico'}</span>
<h3>${titulo}</h3>
</div>
<div class="card-body">
<div class="card-meta">
<span><i class="fa-regular fa-user"></i> ${autor}</span>
<span><i class="fa-regular fa-calendar"></i> Reciente</span>
</div>
<p>${desc || 'Sin descripción detallada.'}</p>
</div>
<div class="card-footer">
<small>Autor: ${autor}</small>
<button onclick="eliminarElemento(this)" class="btn btn-danger" style="padding: 0.2rem 0.5rem; font-size: 0.75rem;">Eliminar</button>
</div>
`;
contenedor.appendChild(nuevaCard);
alert("¡Artículo agregado exitosamente!");
// Limpiar campos
document.getElementById("nuevo-art-titulo").value = "";
document.getElementById("nuevo-art-cat").value = "";
document.getElementById("nuevo-art-autor").value = "";
document.getElementById("nuevo-art-desc").value = "";
}
function agregarPodcast() {
let titulo = document.getElementById("nuevo-pod-titulo").value;
let autor = document.getElementById("nuevo-pod-autor").value;
let desc = document.getElementById("nuevo-pod-desc").value;
if(!titulo || !autor) {
alert("Por favor completa al menos el título y el autor.");
return;
}
let contenedor = document.getElementById("contenedor-podcasts");
let nuevaCard = document.createElement("div");
nuevaCard.className = "card";
nuevaCard.innerHTML = `
<div class="card-header" style="background-color: var(--accent-orange);">
<span class="badge" style="background-color: var(--primary-blue);">Podcast Nuevo</span>
<h3>${titulo}</h3>
</div>
<div class="card-body">
<div class="card-meta">
<span><i class="fa-regular fa-user"></i> ${autor}</span>
<span><i class="fa-regular fa-clock"></i> 10 min</span>
</div>
<p>${desc || 'Episodio subido mediante el panel de administración.'}</p>
<div class="podcast-player">
<i class="fa-solid fa-play"></i>
<div class="progress-bar"><div class="progress" style="width: 10%;"></div></div>
<span style="font-size: 0.75rem; color: #64748b;">10:00</span>
</div>
</div>
<div class="card-footer">
<small>Conducción: ${autor}</small>
<button onclick="eliminarElemento(this)" class="btn btn-danger" style="padding: 0.2rem 0.5rem; font-size: 0.75rem;">Eliminar</button>
</div>
`;
contenedor.appendChild(nuevaCard);
alert("¡Podcast agregado exitosamente!");
// Limpiar campos
document.getElementById("nuevo-pod-titulo").value = "";
document.getElementById("nuevo-pod-autor").value = "";
document.getElementById("nuevo-pod-desc").value = "";
}
function eliminarElemento(btn) {
let tarjeta = btn.closest(".card");
if(confirm("¿Estás seguro de eliminar este elemento?")) {
tarjeta.remove();
}
}
</script>
</body>
</html>