Skip to content

Instantly share code, notes, and snippets.

@iDavidMorales

iDavidMorales/view-code.php

Created October 31, 2025 20:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save iDavidMorales/46a5fa1d040148b92aad1a7cebb45729 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save iDavidMorales/46a5fa1d040148b92aad1a7cebb45729 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
view-code.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Entrada de Blog | Código Routicket #9762</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
/* --- CSS Estilo Blog --- */
body {
font-family: 'Roboto', sans-serif;
background-color: #f0f2f5;
color: #333;
margin: 0;
padding: 0;
}
.blog-container {
background-color: #fff;
max-width: 800px;
margin: 40px auto;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
/* Encabezado Principal */
#post-title {
color: #172b4d;
font-size: 2.5em;
margin-bottom: 10px;
line-height: 1.2;
}
/* Meta Información (Autor, Fecha) */
.post-meta {
display: flex;
align-items: center;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.author-photo {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
margin-right: 15px;
border: 2px solid #007bff; /* Color de marca Routicket */
}
.author-info strong {
display: block;
font-weight: 700;
color: #007bff;
}
.author-info span {
color: #6b778c;
font-size: 0.9em;
}
/* Imagen Destacada / Portada */
#featured-image {
width: 100%;
max-height: 400px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Contenido del Cuerpo (Descripción) */
.post-body p {
font-size: 1.1em;
line-height: 1.6;
margin-bottom: 25px;
color: #525f7f;
}
/* Sección de Detalles Adicionales */
.post-details {
margin-top: 40px;
padding-top: 20px;
border-top: 2px dashed #e9ecef;
}
.detail-item {
margin-bottom: 10px;
font-size: 1em;
}
.detail-item strong {
color: #172b4d;
margin-right: 5px;
}
.action-button {
display: inline-block;
background-color: #007bff;
color: white;
padding: 10px 20px;
border-radius: 6px;
text-decoration: none;
font-weight: 700;
margin-top: 20px;
transition: background-color 0.3s ease;
}
.action-button:hover {
background-color: #0056b3;
}
/* Mensajes de Estado */
#loading {
text-align: center;
font-style: italic;
color: #007bff;
padding: 20px;
}
#error-message {
color: red;
text-align: center;
font-weight: bold;
padding: 20px;
}
</style>
</head>
<body>
<div class="blog-container">
<div id="loading">Cargando contenido del blog...</div>
<div id="error-message" style="display: none;"></div>
<div id="post-content" style="display: none;">
<img id="featured-image" src="" alt="Imagen Destacada del Post">
<h1 id="post-title"></h1>
<div class="post-meta">
<img id="author-photo" src="" alt="Foto de Autor" class="author-photo">
<div class="author-info">
<strong>Publicado por: <span id="author-name"></span></strong>
<span>Fecha: <span id="post-date"></span> | Hora: <span id="post-time"></span></span>
</div>
</div>
<div class="post-body">
<p id="post-text"></p>
</div>
<a id="action-link" href="#" target="_blank" class="action-button">Ver Enlace Externo</a>
<div class="post-details">
<div class="detail-item"><strong>ID de Código:</strong> <span id="code-id"></span></div>
<div class="detail-item"><strong>ID de Usuario:</strong> <span id="user-id"></span></div>
<div class="detail-item"><strong>Link Original:</strong> <a id="routicket-link" href="#" target="_blank"></a></div>
</div>
</div>
</div>
<script>
// --- JavaScript para Cargar Datos de la API ---
const API_URL = 'https://routicket.com/api/dataCode.php?id_code=9762';
// Función principal para obtener y mostrar datos
async function loadBlogPost() {
const loading = document.getElementById('loading');
const errorMsg = document.getElementById('error-message');
const postContent = document.getElementById('post-content');
try {
const response = await fetch(API_URL);
if (!response.ok) {
throw new Error(`Error de red: ${response.statusText}`);
}
const data = await response.json();
const info = data[0]; // Tomamos el primer elemento del array
if (!info || !info.id) {
throw new Error("Respuesta de la API no válida o código no encontrado.");
}
// Ocultar carga y mostrar contenido
loading.style.display = 'none';
postContent.style.display = 'block';
// Insertar datos en los elementos del Blog
document.getElementById('post-title').textContent = info.text || 'Sin Título';
document.getElementById('author-photo').src = info.foto_perfil || 'URL_IMAGEN_POR_DEFECTO';
document.getElementById('author-name').textContent = info.nombre || 'Anónimo';
document.getElementById('post-date').textContent = info.fecha || 'N/A';
document.getElementById('post-time').textContent = info.hora || 'N/A';
document.getElementById('featured-image').src = info.foto_post || 'URL_IMAGEN_DE_RELLENO';
document.getElementById('featured-image').alt = info.text || 'Imagen del post';
document.getElementById('post-text').textContent = "Descripción del post: " + (info.text || 'No se proporcionó una descripción detallada para este código.'); // Usando 'text' como descripción
// Links de acción y detalles
const actionLink = info.embed || info.youtubeVideo || '#'; // Usamos embed como enlace principal de acción
document.getElementById('action-link').href = actionLink;
document.getElementById('code-id').textContent = info.id;
document.getElementById('user-id').textContent = info.user_id;
const routicketLinkElement = document.getElementById('routicket-link');
routicketLinkElement.href = info.link || '#';
routicketLinkElement.textContent = info.link ? "Ver en Routicket" : 'N/A';
} catch (error) {
loading.style.display = 'none';
errorMsg.textContent = `🚨 Error al cargar el post: ${error.message}.`;
errorMsg.style.display = 'block';
console.error('Error:', error);
}
}
// Ejecutar la función al cargar la página
document.addEventListener('DOMContentLoaded', loadBlogPost);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment