1 <style>2 html, body {3 font-size: 120%;4 font-family: 'Arial', sans-serif;5 margin: 0;6 padding: 0;7 background-color: #f9fafb;8 color: #333;9 }10 #days {11 clear: both;12 }13 #days div {14 padding: 8px;15 cursor: pointer;16 border-radius: 4px;17 margin-bottom: 4px;18 transition: background-color 0.3s, color 0.3s;19 }20 #days div:hover {21 background-color: #e3f2fd;22 color: #166fcb;23 }24 #days div.selected {25 color: white;26 background-color: #166fcb;27 }28 .button {29 padding: 10px 20px;30 border-radius: 6px;31 border: none;32 background-color: #166fcb;33 color: white;34 font-size: 1rem;35 cursor: pointer;36 transition: background-color 0.3s;37 }38 .button:hover {39 background-color: #005bb5;40 }41 .header {42 font-size: 2rem;43 text-align: center;44 padding: 20px 0;45 background-color: #166fcb;46 color: white;47 }48 .textarea-container {49 margin-right: 180px;50 padding: 20px;51 background-color: white;52 border-radius: 8px;53 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);54 }55 textarea {56 width: 100%;57 height: 300px;58 font-size: 1rem;59 border: 1px solid #ccc;60 border-radius: 6px;61 padding: 10px;62 box-sizing: border-box;63 resize: none;64 }65 #auth-loading {66 text-align: center;67 margin: 50px 0;68 font-size: 1.5rem;69 }70 #auth-out, #auth-bye {71 text-align: center;72 padding: 20px;73 }74 #auth-out img {75 margin: 20px 0;76 border: 2px solid #166fcb;77 border-radius: 8px;78 }79 </style>80 81 <div class="header">Mi Mundo</div>82 83 <div id="auth-loading">Cargando...</div>84 <div id="auth-in" style="display: none;">85 <div style="float: right; padding: 16px;">86 <span id="auth-name"></span> <button id="salir" class="button">Salir</button>87 </div>88 89 <div id="days" style="float: right; width: 160px; padding: 10px; background-color: #f1f1f1; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);"></div>90 <div class="textarea-container">91 <textarea id="textarea" placeholder="Escribe tu historia de hoy..."></textarea>92 93 <div style="text-align: center; padding: 16px 0;">94 <button id="save" class="button">Guardar</button>95 </div>96 </div>97 </div>98 <div id="auth-out" style="display: none;">99 <p>¡Bienvenido a Mi Mundo!</p>100 <img id="login-qr" alt="Código QR para iniciar sesión">101 <br><br>102 <button class="button" id="entrar">Entrar</button>103 </div>104 <div id="auth-bye" style="display: none;">105 <p>¡Gracias por visitar Mi Mundo!</p>106 </div>107 108 <script>109 let days = {};110 111 function login() {112 return fetch("/api/me")113 .then(resp => resp.json())114 }115 116 function refreshAuth(me) {117 if (me.error == null || true) {118 document.getElementById("auth-in").style.display = "block";119 document.getElementById("auth-out").style.display = "none";120 document.getElementById("auth-name").textContent = "Conectado como " + me.name;121 loadData();122 } else {123 document.getElementById("auth-in").style.display = "none";124 document.getElementById("auth-out").style.display = "block";125 }126 }127 128 refreshAuth({name:"Fulanez"})129 document.getElementById("auth-loading").style.display = "none";130 131 let me = login()132 .then(function(json){133 console.log(json);134 document.getElementById("auth-loading").style.display = "none";135 refreshAuth(json);136 });137 138 function loadNote(date) {139 fetch("/api/notes/" + encodeURIComponent(date))140 .then(resp => resp.json())141 .then(function(json){142 document.getElementById("textarea").value = json.text;143 });144 }145 146 function checkLogin() {147 const timer = setInterval(function(){148 login().then(function(json){149 if (json.error == null) {150 refreshAuth(json);151 clearInterval(timer);152 }153 });154 }, 1000);155 }156 157 158 function loadData() {159 loadNote("today");160 let json = [161 {"date":"ayer"},162 {"date":"hoy"},163 {"date":"mañana"},164 ];165 for (let i in json) {166 let entry = json[i];167 let date = entry.date;168 let div = document.createElement("div");169 div.textContent = date;170 document.getElementById("days").appendChild(div);171 days[date] = div;172 }173 }174 175 document.getElementById("save").addEventListener("click", function (){176 var text = document.getElementById("textarea").value;177 fetch("/api/notes", {178 method: "POST",179 body: JSON.stringify({ text }),180 });181 }, false);182 183 document.getElementById("entrar").addEventListener("click", function (){184 document.getElementById("login-qr").src = "/api/login?v=" + Math.random();185 checkLogin();186 document.getElementById("entrar").style.display = "none";187 }, false);188 189 document.getElementById("salir").addEventListener("click", function (){190 fetch("/api/logout")191 .then(function(json){192 document.getElementById("auth-in").style.display = "none";193 document.getElementById("auth-bye").style.display = "block";194 });195 }, false);196 </script>197 Enlace
El enlace para compartir es: