{"id":765,"date":"2025-12-28T14:32:47","date_gmt":"2025-12-28T14:32:47","guid":{"rendered":"https:\/\/5.olasdevida.es\/?page_id=765"},"modified":"2025-12-28T14:34:00","modified_gmt":"2025-12-28T14:34:00","slug":"per28-12-2","status":"publish","type":"page","link":"https:\/\/5.olasdevida.es\/index.php\/per28-12-2\/","title":{"rendered":"per28\/12\/2"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nPanel V\u00eddeos PRO \u00b7 Olas de Vida<\/title>\r\n\r\n<style>\r\n:root{\r\n --bg:#020617;--card:#0f172a;--border:#1e293b;--text:#e5e7eb;\r\n --muted:#94a3b8;--accent:#0ea5e9;--danger:#ef4444;--success:#10b981;--warn:#f59e0b;\r\n}\r\n*{box-sizing:border-box;margin:0;padding:0}\r\nbody{\r\n font-family:system-ui,-apple-system,sans-serif;\r\n background:var(--bg);\r\n color:var(--text);\r\n padding:20px;\r\n}\r\n\r\n\/* Toast *\/\r\n#toast{\r\n position:fixed;\r\n bottom:24px;\r\n left:50%;\r\n transform:translateX(-50%);\r\n background:#10b981;\r\n color:#000;\r\n padding:10px 24px;\r\n border-radius:999px;\r\n font-weight:600;\r\n z-index:9999;\r\n opacity:0;\r\n transition:all .25s;\r\n}\r\n#toast.show{\r\n opacity:1;\r\n transform:translateX(-50%) translateY(-8px);\r\n}\r\n\r\n\/* LOGIN pantalla completa *\/\r\n.lock-overlay{\r\n position:fixed;\r\n inset:0;\r\n background:rgba(2,6,23,.96);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n z-index:9990;\r\n}\r\n.lock-card{\r\n background:var(--card);\r\n padding:2.5rem;\r\n border-radius:1.75rem;\r\n border:1px solid var(--border);\r\n width:90%;\r\n max-width:420px;\r\n text-align:center;\r\n box-shadow:0 30px 80px rgba(0,0,0,.85);\r\n}\r\n.pass-input{\r\n width:100%;\r\n padding:0.9rem 1.1rem;\r\n border-radius:0.9rem;\r\n border:2px solid #475569;\r\n background:#020617;\r\n color:#e5e7eb;\r\n font-size:1.1rem;\r\n margin:1.4rem 0 0.5rem;\r\n}\r\n.pass-input:focus{\r\n outline:none;\r\n border-color:var(--accent);\r\n box-shadow:0 0 0 3px rgba(14,165,233,.4);\r\n}\r\n.btn{\r\n padding:0.9rem 2rem;\r\n border:none;\r\n border-radius:999px;\r\n background:var(--accent);\r\n color:#020617;\r\n font-weight:700;\r\n cursor:pointer;\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:0.4rem;\r\n transition:.18s;\r\n}\r\n.btn:hover{\r\n transform:translateY(-2px);\r\n}\r\n\r\n\/* Panel principal *\/\r\n.panel{\r\n display:none;\r\n background:radial-gradient(circle at top,#0f172a,#020617 55%);\r\n padding:2rem 2.2rem;\r\n border-radius:1.8rem;\r\n border:1px solid var(--border);\r\n max-width:1200px;\r\n margin:0 auto;\r\n box-shadow:0 20px 60px rgba(0,0,0,.65);\r\n}\r\n.panel-header{\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n gap:1rem;\r\n margin-bottom:1.5rem;\r\n}\r\n.title{\r\n font-size:2rem;\r\n font-weight:800;\r\n background:linear-gradient(90deg,#0ea5e9,#7dd3fc);\r\n -webkit-background-clip:text;\r\n background-clip:text;\r\n color:transparent;\r\n}\r\n.badge{\r\n font-size:0.8rem;\r\n text-transform:uppercase;\r\n letter-spacing:.08em;\r\n color:var(--muted);\r\n}\r\n\r\n\/* Bot\u00f3n salir *\/\r\n.btn-exit{\r\n padding:0.6rem 1.3rem;\r\n border-radius:999px;\r\n border:none;\r\n background:var(--danger);\r\n color:#fff;\r\n font-size:0.9rem;\r\n font-weight:600;\r\n cursor:pointer;\r\n}\r\n\r\n\/* Stats *\/\r\n.stats{\r\n display:grid;\r\n grid-template-columns:repeat(auto-fit,minmax(180px,1fr));\r\n gap:1rem;\r\n margin-bottom:1.8rem;\r\n}\r\n.stat{\r\n background:rgba(15,23,42,.9);\r\n border-radius:1.1rem;\r\n border:1px solid var(--border);\r\n padding:1rem 1.2rem;\r\n}\r\n.stat-label{\r\n font-size:0.8rem;\r\n text-transform:uppercase;\r\n letter-spacing:.08em;\r\n color:var(--muted);\r\n}\r\n.stat-value{\r\n margin-top:0.4rem;\r\n font-size:1.6rem;\r\n font-weight:700;\r\n color:var(--accent);\r\n}\r\n\r\n\/* Layout principal: reproductor + resto *\/\r\n.main{\r\n display:grid;\r\n grid-template-columns:1.4fr 1.3fr;\r\n gap:1.5rem;\r\n}\r\n@media (max-width:900px){\r\n .main{grid-template-columns:1fr}\r\n}\r\n\r\n\/* Bloques *\/\r\n.block{\r\n background:rgba(15,23,42,.9);\r\n border-radius:1.3rem;\r\n border:1px solid var(--border);\r\n padding:1.4rem 1.5rem;\r\n}\r\n.block-title{\r\n font-size:1rem;\r\n font-weight:600;\r\n margin-bottom:0.8rem;\r\n color:var(--accent);\r\n}\r\n\r\n\/* Reproductor *\/\r\n.player-wrap{\r\n border-radius:1rem;\r\n overflow:hidden;\r\n background:#000;\r\n position:relative;\r\n padding-top:56.25%; \/* 16:9 *\/\r\n}\r\n.player-wrap iframe{\r\n position:absolute;\r\n inset:0;\r\n width:100%;\r\n height:100%;\r\n border:0;\r\n}\r\n\r\n\/* Tabla *\/\r\n.table-wrap{\r\n max-height:260px;\r\n overflow:auto;\r\n border-radius:1rem;\r\n border:1px solid #1f2937;\r\n}\r\ntable{\r\n width:100%;\r\n border-collapse:collapse;\r\n font-size:0.9rem;\r\n}\r\nthead{\r\n position:sticky;\r\n top:0;\r\n background:#020617;\r\n z-index:1;\r\n}\r\nth,td{\r\n padding:0.55rem 0.6rem;\r\n border-bottom:1px solid #1f2937;\r\n}\r\nth{\r\n text-align:left;\r\n font-size:0.75rem;\r\n text-transform:uppercase;\r\n letter-spacing:.08em;\r\n color:#94a3b8;\r\n}\r\ntbody tr:hover{\r\n background:rgba(15,118,110,.12);\r\n}\r\n.actions{\r\n white-space:nowrap;\r\n}\r\n.actions button{\r\n border:none;\r\n padding:0.2rem 0.7rem;\r\n border-radius:999px;\r\n font-size:0.75rem;\r\n margin-right:0.25rem;\r\n cursor:pointer;\r\n}\r\n.btn-view{background:#1e293b;color:#e5e7eb;}\r\n.btn-edit{background:var(--warn);color:#111827;}\r\n.btn-delete{background:var(--danger);color:#f9fafb;}\r\n\r\n\/* Inputs *\/\r\ninput[type=\"text\"],textarea{\r\n width:100%;\r\n padding:0.7rem 0.85rem;\r\n border-radius:0.9rem;\r\n border:1px solid #374151;\r\n background:#020617;\r\n color:#e5e7eb;\r\n font-size:0.9rem;\r\n margin-bottom:0.7rem;\r\n}\r\ninput[type=\"text\"]:focus,textarea:focus{\r\n outline:none;\r\n border-color:var(--accent);\r\n box-shadow:0 0 0 2px rgba(14,165,233,.35);\r\n}\r\ntextarea{min-height:80px;resize:vertical}\r\n.btn-row{\r\n display:flex;\r\n justify-content:flex-end;\r\n gap:0.7rem;\r\n margin-top:0.4rem;\r\n}\r\n.btn-secondary{\r\n padding:0.55rem 1.1rem;\r\n border-radius:999px;\r\n border:1px solid #4b5563;\r\n background:#020617;\r\n color:#e5e7eb;\r\n font-size:0.8rem;\r\n cursor:pointer;\r\n}\r\n.btn-primary-sm{\r\n padding:0.55rem 1.2rem;\r\n border-radius:999px;\r\n border:none;\r\n background:var(--accent);\r\n color:#02121f;\r\n font-size:0.8rem;\r\n font-weight:600;\r\n cursor:pointer;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"toast\"><\/div>\r\n\r\n<!-- LOGIN -->\r\n<div class=\"lock-overlay\" id=\"lock\">\r\n <div class=\"lock-card\">\r\n <h2 style=\"font-size:2rem;font-weight:800;margin-bottom:0.2rem;\">Olas de Vida<\/h2>\r\n <p style=\"color:var(--muted);font-size:0.9rem;\">Panel de Control de V\u00eddeos PRO<\/p>\r\n\r\n <div style=\"position:relative;display:flex;align-items:center;gap:0.5rem;\">\r\n <input\r\n type=\"password\"\r\n id=\"pass\"\r\n class=\"pass-input\"\r\n placeholder=\"Contrase\u00f1a (olas2025)\"\r\n autocomplete=\"off\"\r\n style=\"padding-right:2.2rem;\"\r\n \/>\r\n <!-- Punto azul: mostrar\/ocultar -->\r\n <button\r\n type=\"button\"\r\n id=\"togglePass\"\r\n style=\"\r\n width:26px;\r\n height:26px;\r\n border-radius:999px;\r\n border:none;\r\n background:#0ea5e9;\r\n cursor:pointer;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n flex-shrink:0;\r\n color:#020617;\r\n font-size:14px;\r\n font-weight:700;\r\n \"\r\n title=\"Mostrar \/ ocultar contrase\u00f1a\"\r\n >\r\n \u2022\r\n <\/button>\r\n <\/div>\r\n\r\n <button class=\"btn\" id=\"enter\">\r\n ACCEDER\r\n <\/button>\r\n\r\n <p id=\"error\" style=\"color:#fca5a5;margin-top:0.8rem;height:1.2rem;font-weight:600;font-size:0.9rem;\"><\/p>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- PANEL CON REPRODUCTOR -->\r\n<div class=\"panel\" id=\"panel\">\r\n <div class=\"panel-header\">\r\n <div>\r\n <div class=\"title\">Panel V\u00eddeos PRO<\/div>\r\n <div class=\"badge\">Olas de Vida \u00b7 Videoteca interna<\/div>\r\n <\/div>\r\n <button class=\"btn-exit\" onclick=\"window.location.href='https:\/\/olasdevida.es'\">\r\n Salir\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-label\">Total v\u00eddeos<\/div>\r\n <div class=\"stat-value\" id=\"total\">0<\/div>\r\n <\/div>\r\n <div class=\"stat\">\r\n <div class=\"stat-label\">\u00daltima actualizaci\u00f3n<\/div>\r\n <div class=\"stat-value\" id=\"last\">\u2014<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"main\">\r\n <!-- Columna izquierda: reproductor + listado -->\r\n <div>\r\n <div class=\"block\" style=\"margin-bottom:1rem;\">\r\n <div class=\"block-title\">Reproductor<\/div>\r\n <div class=\"player-wrap\">\r\n <iframe\r\n id=\"player\"\r\n src=\"https:\/\/www.youtube.com\/embed\/dQw4w9WgXcQ\"\r\n allowfullscreen\r\n ><\/iframe>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"block\">\r\n <div class=\"block-title\">Listado de v\u00eddeos<\/div>\r\n <div class=\"table-wrap\">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th>#<\/th>\r\n <th>T\u00edtulo<\/th>\r\n <th>ID YouTube<\/th>\r\n <th>Acciones<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"tbody\"><\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Columna derecha: formulario -->\r\n <div class=\"block\">\r\n <div class=\"block-title\" id=\"formTitle\">A\u00f1adir nuevo v\u00eddeo<\/div>\r\n <form id=\"form\">\r\n <input type=\"text\" id=\"title\" placeholder=\"T\u00edtulo del v\u00eddeo\" required \/>\r\n <input type=\"text\" id=\"url\" placeholder=\"URL completa o ID de YouTube\" required \/>\r\n <textarea id=\"desc\" placeholder=\"Descripci\u00f3n (opcional)\"><\/textarea>\r\n\r\n <div class=\"btn-row\">\r\n <button type=\"button\" class=\"btn-secondary\" id=\"clear\">Limpiar<\/button>\r\n <button type=\"submit\" class=\"btn-primary-sm\" id=\"saveBtn\">Guardar<\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst PASSWORD = \"olas2025\";\r\nconst STORAGE_KEY = \"olasdevida_videos_v1\";\r\n\r\nconst DEFAULT_VIDEOS = [\r\n { id:1, title:\"Bienvenidos a Olas de Vida\", desc:\"Presentaci\u00f3n general\", youtubeId:\"dQw4w9WgXcQ\" },\r\n { id:2, title:\"Nutrici\u00f3n oncol\u00f3gica\", desc:\"Pautas b\u00e1sicas\", youtubeId:\"9bZkp7q19f0\" },\r\n];\r\n\r\nlet videos = [];\r\nlet editMode = false;\r\nlet selectedIndex = null;\r\n\r\n\/\/ Toast\r\nfunction showToast(message){\r\n const t = document.getElementById(\"toast\");\r\n t.textContent = message;\r\n t.classList.add(\"show\");\r\n setTimeout(()=>t.classList.remove(\"show\"), 2200);\r\n}\r\n\r\n\/\/ Util\r\nfunction extractId(u){\r\n if(!u) return \"\";\r\n u = u.trim();\r\n if(\/^[a-zA-Z0-9_-]{10,12}$\/.test(u)) return u;\r\n const m = u.match(\/(?:v=|youtu\\\\.be\\\\\/|embed\\\\\/)([a-zA-Z0-9_-]{10,12})\/);\r\n return m ? m[1] : \"\";\r\n}\r\n\r\n\/\/ Datos\r\nfunction loadVideos(){\r\n try{\r\n const raw = localStorage.getItem(STORAGE_KEY);\r\n videos = raw ? JSON.parse(raw) : [...DEFAULT_VIDEOS];\r\n if(!Array.isArray(videos)) videos = [...DEFAULT_VIDEOS];\r\n }catch(e){\r\n videos = [...DEFAULT_VIDEOS];\r\n }\r\n}\r\n\r\nfunction saveVideos(){\r\n localStorage.setItem(STORAGE_KEY, JSON.stringify(videos));\r\n localStorage.setItem(STORAGE_KEY+\"_last\", new Date().toISOString());\r\n renderTable();\r\n showToast(\"Guardado\");\r\n}\r\n\r\n\/\/ Cambiar v\u00eddeo en el iframe\r\nfunction setPlayerVideo(youtubeId){\r\n const iframe = document.getElementById(\"player\");\r\n if(!iframe || !youtubeId) return;\r\n iframe.src = \"https:\/\/www.youtube.com\/embed\/\" + youtubeId;\r\n}\r\n\r\n\/\/ Tabla\r\nfunction renderTable(){\r\n const tbody = document.getElementById(\"tbody\");\r\n tbody.innerHTML = \"\";\r\n\r\n videos.forEach((v, i)=>{\r\n const tr = document.createElement(\"tr\");\r\n tr.innerHTML = `\r\n <td>${i+1}<\/td>\r\n <td>${v.title}<\/td>\r\n <td style=\"font-family:monospace;color:#7dd3fc\">${v.youtubeId}<\/td>\r\n <td class=\"actions\">\r\n <button class=\"btn-view\">Ver<\/button>\r\n <button class=\"btn-edit\">Editar<\/button>\r\n <button class=\"btn-delete\">Borrar<\/button>\r\n <\/td>\r\n `;\r\n tr.querySelector(\".btn-view\").onclick = ()=>setPlayerVideo(v.youtubeId);\r\n tr.querySelector(\".btn-edit\").onclick = ()=>editVideo(i);\r\n tr.querySelector(\".btn-delete\").onclick = ()=>{\r\n if(confirm(\"\u00bfBorrar este v\u00eddeo?\")){\r\n videos.splice(i,1);\r\n saveVideos();\r\n \/\/ si borras el que est\u00e1 sonando, podr\u00edas actualizar el player\r\n }\r\n };\r\n tbody.appendChild(tr);\r\n });\r\n\r\n document.getElementById(\"total\").textContent = videos.length;\r\n const last = localStorage.getItem(STORAGE_KEY+\"_last\");\r\n document.getElementById(\"last\").textContent = last\r\n ? new Date(last).toLocaleString(\"es-ES\")\r\n : \"\u2014\";\r\n\r\n \/\/ Asegurar que siempre haya algo cargado en el reproductor\r\n if(videos.length){\r\n setPlayerVideo(videos[0].youtubeId);\r\n }\r\n}\r\n\r\n\/\/ Form\r\nfunction editVideo(index){\r\n const v = videos[index];\r\n selectedIndex = index;\r\n editMode = true;\r\n document.getElementById(\"formTitle\").textContent = \"Editar v\u00eddeo\";\r\n document.getElementById(\"saveBtn\").textContent = \"Actualizar\";\r\n document.getElementById(\"title\").value = v.title;\r\n document.getElementById(\"url\").value = v.youtubeId;\r\n document.getElementById(\"desc\").value = v.desc || \"\";\r\n}\r\n\r\nfunction resetForm(){\r\n document.getElementById(\"form\").reset();\r\n editMode = false;\r\n selectedIndex = null;\r\n document.getElementById(\"formTitle\").textContent = \"A\u00f1adir nuevo v\u00eddeo\";\r\n document.getElementById(\"saveBtn\").textContent = \"Guardar\";\r\n}\r\n\r\n\/\/ Login\r\nfunction setupLogin(){\r\n const lock = document.getElementById(\"lock\");\r\n const panel = document.getElementById(\"panel\");\r\n const passInput = document.getElementById(\"pass\");\r\n const error = document.getElementById(\"error\");\r\n const enterBtn = document.getElementById(\"enter\");\r\n const togglePassBtn = document.getElementById(\"togglePass\");\r\n\r\n function doLogin(){\r\n const value = passInput.value.trim();\r\n if(value === PASSWORD){\r\n lock.style.display = \"none\";\r\n panel.style.display = \"block\";\r\n loadVideos();\r\n renderTable();\r\n showToast(\"\u00a1Bienvenido al Panel PRO!\");\r\n error.textContent = \"\";\r\n }else{\r\n error.textContent = \"Contrase\u00f1a incorrecta\";\r\n }\r\n }\r\n\r\n enterBtn.addEventListener(\"click\", doLogin);\r\n passInput.addEventListener(\"keydown\", (e)=>{\r\n if(e.key === \"Enter\") doLogin();\r\n });\r\n\r\n \/\/ Bot\u00f3n azul: mostrar\/ocultar contrase\u00f1a\r\n if(togglePassBtn){\r\n togglePassBtn.addEventListener(\"click\", ()=>{\r\n if(passInput.type === \"password\"){\r\n passInput.type = \"text\";\r\n togglePassBtn.textContent = \"\u2022\";\r\n }else{\r\n passInput.type = \"password\";\r\n togglePassBtn.textContent = \"\u2022\";\r\n }\r\n passInput.focus();\r\n });\r\n }\r\n\r\n setTimeout(()=>passInput.focus(), 300);\r\n}\r\n\r\n\/\/ Arranque\r\nwindow.addEventListener(\"load\", ()=>{\r\n setupLogin();\r\n\r\n document.getElementById(\"form\").addEventListener(\"submit\", (e)=>{\r\n e.preventDefault();\r\n const title = document.getElementById(\"title\").value.trim();\r\n const url = document.getElementById(\"url\").value.trim();\r\n const desc = document.getElementById(\"desc\").value.trim();\r\n const youtubeId = extractId(url);\r\n\r\n if(!title || !youtubeId){\r\n alert(\"T\u00edtulo o ID de YouTube inv\u00e1lidos.\");\r\n return;\r\n }\r\n\r\n if(editMode && selectedIndex !== null){\r\n videos[selectedIndex] = { ...videos[selectedIndex], title, desc, youtubeId };\r\n }else{\r\n const newId = videos.length ? Math.max(...videos.map(v=>v.id))+1 : 1;\r\n videos.push({ id:newId, title, desc, youtubeId });\r\n }\r\n\r\n saveVideos();\r\n resetForm();\r\n });\r\n\r\n document.getElementById(\"clear\").addEventListener(\"click\", resetForm);\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Panel V\u00eddeos PRO \u00b7 Olas de Vida Olas de Vida Panel de Control de V\u00eddeos PRO \u2022 ACCEDER Panel V\u00eddeos PRO Olas de Vida \u00b7 Videoteca interna Salir Total v\u00eddeos 0 \u00daltima actualizaci\u00f3n \u2014 Reproductor Listado de v\u00eddeos # T\u00edtulo ID YouTube Acciones A\u00f1adir nuevo v\u00eddeo Limpiar Guardar<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-765","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages\/765","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/comments?post=765"}],"version-history":[{"count":4,"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages\/765\/revisions"}],"predecessor-version":[{"id":769,"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages\/765\/revisions\/769"}],"wp:attachment":[{"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/media?parent=765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}