Roku Remote<title> <script src="https://cdn.tailwindcss.com"></script> <style> body { background-color: #0f172a; touch-action: manipulation; } .btn-purple { background-color: #6d28d9; border-radius: 1rem; height: 64px; display: flex; align-items: center; justify-content: center; } .btn-purple:active { background-color: #4c1d95; transform: scale(0.9); } .btn-gray { background-color: #334155; border-radius: 0.75rem; height: 56px; } </style> </head> <body class="text-slate-100 flex flex-col items-center p-6"> <div class="w-full max-w-xs text-center"> <h1 class="text-2xl font-bold mb-6 text-purple-400">Roku Remote</h1> <input id="ip" type="text" placeholder="10.0.0.xxx" class="w-full p-4 rounded-xl bg-slate-800 border border-slate-700 text-center mb-2 outline-none"> <button onclick="save()" class="w-full bg-emerald-600 py-2 rounded-lg font-bold text-xs mb-8">SAVE IP</button> <div class="grid grid-cols-3 gap-4 mb-8"> <div></div><button onclick="send('keypress/up')" class="btn-purple text-xl">▲</button><div></div> <button onclick="send('keypress/left')" class="btn-purple text-xl">◀</button> <button onclick="send('keypress/select')" class="btn-purple font-bold">OK</button> <button onclick="send('keypress/right')" class="btn-purple text-xl">▶</button> <div></div><button onclick="send('keypress/down')" class="btn-purple text-xl">▼</button><div></div> </div> <div class="grid grid-cols-3 gap-3 mb-8"> <button onclick="send('keypress/back')" class="btn-gray text-xs font-bold">BACK</button> <button onclick="send('keypress/home')" class="btn-gray text-xs font-bold">HOME</button> <button onclick="send('keypress/info')" class="btn-gray text-xs font-bold">INFO</button> </div> <div class="grid grid-cols-4 gap-2"> <button onclick="send('launch/12')" class="bg-red-600 h-12 rounded-lg text-[9px] font-black">NETFLIX</button> <button onclick="send('launch/837')" class="bg-white text-black h-12 rounded-lg text-[9px] font-black">YOUTUBE</button> <button onclick="send('launch/13')" class="bg-blue-600 h-12 rounded-lg text-[9px] font-black">PRIME</button> <button onclick="send('launch/2285')" class="bg-green-600 h-12 rounded-lg text-[9px] font-black">HULU</button> </div> </div> <form id="rokuForm" method="POST" target="hiddenFrame" style="display:none;"></form> <iframe name="hiddenFrame" style="display:none;"></iframe> <script> function save() { localStorage.setItem('roku_ip', document.getElementById('ip').value.trim()); alert("IP Saved!"); } function send(path) { const ip = localStorage.getItem('roku_ip') || document.getElementById('ip').value; if (!ip) return alert("Enter IP"); const form = document.getElementById('rokuForm'); // Construct the exact URL the Roku expects form.action = `http://${ip}:8060/${path}`; // This sends a real POST request, which fixes the 404/405 errors form.submit(); console.log("POST sent to: " + form.action); } window.onload = () => { document.getElementById('ip').value = localStorage.getItem('roku