{"id":1654,"date":"2026-07-05T14:55:42","date_gmt":"2026-07-05T12:55:42","guid":{"rendered":"https:\/\/drumandbarr.com\/?page_id=1654"},"modified":"2026-07-05T14:56:16","modified_gmt":"2026-07-05T12:56:16","slug":"panel","status":"publish","type":"page","link":"https:\/\/drumandbarr.com\/es\/panel\/","title":{"rendered":"PANEL"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1654\" class=\"elementor elementor-1654\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a1a3bf5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a1a3bf5\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d0fb128\" data-id=\"d0fb128\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d97416d elementor-widget elementor-widget-html\" data-id=\"d97416d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Panel en Tiempo Real - Drum&Barr<\/title>\r\n<style>\r\n  body {\r\n    margin: 0;\r\n    font-family: 'Arial', sans-serif;\r\n    background: #111111;\r\n    color: #ffffff;\r\n    text-align: center;\r\n  }\r\n  header {\r\n    padding: 30px 20px 10px;\r\n    border-bottom: 3px solid #ff6a00;\r\n  }\r\n  h1 {\r\n    color: #ff6a00;\r\n    text-transform: uppercase;\r\n    font-weight: 800;\r\n    font-size: 2.2em;\r\n    letter-spacing: 1px;\r\n    margin: 0;\r\n  }\r\n  nav a {\r\n    margin: 0 10px;\r\n    color: #ffffff;\r\n    text-decoration: none;\r\n    font-weight: bold;\r\n    text-transform: uppercase;\r\n    font-size: 0.9em;\r\n  }\r\n  nav a:hover { color: #ff6a00; }\r\n\r\n  .panel {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n    gap: 25px;\r\n    max-width: 900px;\r\n    margin: 40px auto;\r\n    padding: 0 20px;\r\n  }\r\n  .card {\r\n    background: #000000;\r\n    border: 3px solid #ff6a00;\r\n    border-radius: 12px;\r\n    box-shadow: 0 6px 0 rgba(255,106,0,0.3);\r\n    padding: 30px 25px;\r\n    min-width: 260px;\r\n    flex: 1;\r\n  }\r\n  .label {\r\n    text-transform: uppercase;\r\n    font-size: 0.9em;\r\n    letter-spacing: 2px;\r\n    color: #cccccc;\r\n    margin-bottom: 12px;\r\n  }\r\n  .valor {\r\n    font-size: 2.4em;\r\n    font-weight: 900;\r\n    color: #ffffff;\r\n    transition: color 0.3s ease;\r\n  }\r\n  .updated-flash {\r\n    color: #ff6a00 !important;\r\n  }\r\n  .nota {\r\n    font-size: 0.7em;\r\n    color: #888;\r\n    margin-top: 10px;\r\n  }\r\n  .timestamp {\r\n    margin-top: 25px;\r\n    font-size: 0.8em;\r\n    color: #999;\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<header>\r\n  <h1>Panel en Tiempo Real<\/h1>\r\n  <nav>\r\n    <a href=\"\/\">Inicio<\/a>\r\n    <a href=\"\/panel\">Panel<\/a>\r\n  <\/nav>\r\n<\/header>\r\n\r\n<div class=\"panel\">\r\n  <div class=\"card\">\r\n    <div class=\"label\">Valor estimado del dominio<\/div>\r\n    <div class=\"valor\" id=\"valorDominio\">-- \u20ac<\/div>\r\n    <div class=\"nota\">Estimaci\u00f3n p\u00fablica, no es una valoraci\u00f3n financiera oficial<\/div>\r\n  <\/div>\r\n  <div class=\"card\">\r\n    <div class=\"label\">Tr\u00e1fico estimado (visitas\/mes)<\/div>\r\n    <div class=\"valor\" id=\"trafico\">--<\/div>\r\n    <div class=\"nota\">Basado en datos p\u00fablicos de estimaci\u00f3n de tr\u00e1fico<\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"timestamp\" id=\"timestamp\">Actualizado: --:--:--<\/div>\r\n\r\n<script>\r\n  \/\/ IMPORTANTE: aqu\u00ed debes conectar una fuente p\u00fablica real,\r\n  \/\/ por ejemplo una API de estimaci\u00f3n de dominios o de tr\u00e1fico\r\n  \/\/ (necesitar\u00e1s tu propia clave de API para esa fuente).\r\n  async function obtenerDatosPublicos() {\r\n    \/\/ Ejemplo de c\u00f3mo se conectar\u00eda a una API real:\r\n    \/\/ const res = await fetch('https:\/\/api-de-tasacion.com\/domain\/drumandbarr.com?key=TU_API_KEY');\r\n    \/\/ const data = await res.json();\r\n    \/\/ return { dominio: data.estimatedValue, trafico: data.monthlyVisits };\r\n\r\n    \/\/ Valores de ejemplo mientras no haya API conectada:\r\n    return {\r\n      dominio: (Math.random() * 5000 + 1000).toFixed(0),\r\n      trafico: Math.floor(Math.random() * 3000 + 500)\r\n    };\r\n  }\r\n\r\n  const dominioEl = document.getElementById('valorDominio');\r\n  const traficoEl = document.getElementById('trafico');\r\n  const timeEl = document.getElementById('timestamp');\r\n\r\n  async function actualizarPanel() {\r\n    const datos = await obtenerDatosPublicos();\r\n\r\n    dominioEl.textContent = datos.dominio + ' \u20ac';\r\n    traficoEl.textContent = datos.trafico;\r\n\r\n    [dominioEl, traficoEl].forEach(el => {\r\n      el.classList.add('updated-flash');\r\n      setTimeout(() => el.classList.remove('updated-flash'), 400);\r\n    });\r\n\r\n    const ahora = new Date();\r\n    timeEl.textContent = 'Actualizado: ' + ahora.toLocaleTimeString();\r\n  }\r\n\r\n  actualizarPanel();\r\n  setInterval(actualizarPanel, 20000); \/\/ cada 20 segundos\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Panel en Tiempo Real &#8211; Drum&#038;Barr Panel en Tiempo Real Inicio Panel Valor estimado del dominio &#8212; \u20ac Estimaci\u00f3n p\u00fablica, no es una valoraci\u00f3n financiera oficial Tr\u00e1fico estimado (visitas\/mes) &#8212; Basado en datos p\u00fablicos de estimaci\u00f3n de tr\u00e1fico Actualizado: &#8211;:&#8211;:&#8211;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-1654","page","type-page","status-publish","hentry"],"acf":[],"ticketed":false,"_links":{"self":[{"href":"https:\/\/drumandbarr.com\/es\/wp-json\/wp\/v2\/pages\/1654","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/drumandbarr.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/drumandbarr.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/drumandbarr.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/drumandbarr.com\/es\/wp-json\/wp\/v2\/comments?post=1654"}],"version-history":[{"count":3,"href":"https:\/\/drumandbarr.com\/es\/wp-json\/wp\/v2\/pages\/1654\/revisions"}],"predecessor-version":[{"id":1658,"href":"https:\/\/drumandbarr.com\/es\/wp-json\/wp\/v2\/pages\/1654\/revisions\/1658"}],"wp:attachment":[{"href":"https:\/\/drumandbarr.com\/es\/wp-json\/wp\/v2\/media?parent=1654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}