|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Premiumize</title> |
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet"> |
|
<style> |
|
* { |
|
box-sizing: border-box; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
body, html { |
|
height: 100%; |
|
font-family: 'Roboto', sans-serif; |
|
color: #ffffff; |
|
} |
|
body { |
|
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), |
|
url('/backdrop.jpg') no-repeat center center fixed; |
|
background-size: cover; |
|
} |
|
.container { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
min-height: 100%; |
|
padding: 20px; |
|
} |
|
.logo { |
|
font-size: 3rem; |
|
font-weight: 700; |
|
color: #e50914; |
|
margin-bottom: 2rem; |
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); |
|
} |
|
.content-wrapper { |
|
background-color: rgba(0, 0, 0, 0.6); |
|
backdrop-filter: blur(10px); |
|
border-radius: 4px; |
|
padding: 40px; |
|
width: 100%; |
|
max-width: 450px; |
|
height: fit-content; |
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
} |
|
h1 { |
|
font-size: 2rem; |
|
font-weight: 700; |
|
margin-bottom: 28px; |
|
text-align: center; |
|
} |
|
.input-container { |
|
position: relative; |
|
margin-bottom: 16px; |
|
} |
|
.input { |
|
width: 100%; |
|
height: 50px; |
|
background-color: rgba(51, 51, 51, 0.8); |
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
border-radius: 4px; |
|
color: white; |
|
padding: 16px 20px 0; |
|
font-size: 1rem; |
|
outline: none; |
|
} |
|
.input:focus { |
|
background-color: rgba(69, 69, 69, 0.8); |
|
border-color: rgba(255, 255, 255, 0.3); |
|
} |
|
.input-label { |
|
position: absolute; |
|
top: 50%; |
|
left: 20px; |
|
transform: translateY(-50%); |
|
transition: all 0.1s ease; |
|
color: #8c8c8c; |
|
pointer-events: none; |
|
} |
|
.input:focus + .input-label, |
|
.input:not(:placeholder-shown) + .input-label { |
|
top: 7px; |
|
font-size: 0.7rem; |
|
} |
|
.btn { |
|
width: 100%; |
|
height: 50px; |
|
background-color: #e50914; |
|
color: white; |
|
border: none; |
|
border-radius: 4px; |
|
font-size: 1rem; |
|
font-weight: 700; |
|
margin: 24px 0 12px; |
|
cursor: pointer; |
|
transition: background-color 0.2s; |
|
} |
|
.btn:hover { |
|
background-color: #f40612; |
|
} |
|
.info { |
|
color: #737373; |
|
font-size: 0.9rem; |
|
margin-top: 16px; |
|
background-color: rgba(0, 0, 0, 0.6); |
|
padding: 20px; |
|
border-radius: 4px; |
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
} |
|
.addon-url { |
|
width: 100%; |
|
background-color: rgba(51, 51, 51, 0.8); |
|
color: white; |
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
padding: 10px; |
|
margin-top: 10px; |
|
border-radius: 4px; |
|
word-break: break-all; |
|
display: none; |
|
} |
|
.buttons-container { |
|
display: flex; |
|
gap: 10px; |
|
margin-top: 10px; |
|
} |
|
.action-btn { |
|
background-color: #e50914; |
|
color: white; |
|
border: none; |
|
padding: 10px 20px; |
|
border-radius: 4px; |
|
cursor: pointer; |
|
transition: background-color 0.2s; |
|
flex: 1; |
|
font-weight: 700; |
|
} |
|
.action-btn:hover { |
|
background-color: #f40612; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<div class="logo">Premiumize</div> |
|
<div class="content-wrapper"> |
|
<h1>Stremio Addon Installation</h1> |
|
<div class="input-container"> |
|
<input type="text" id="pr-key" class="input" placeholder=" " required> |
|
<label for="pr-key" class="input-label">Premiumize API Key</label> |
|
</div> |
|
<button class="btn" onclick="generateAddonUrl()">GENERATE</button> |
|
<div id="addon-url" class="addon-url"></div> |
|
<div class="info"> |
|
<h3>How to get API Keys:</h3> |
|
<p><strong>Premiumize:</strong> Visit <a href="https://www.premiumize.me/account" target="_blank">https://www.premiumize.me/account</a></p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
function generateAddonUrl() { |
|
const prKey = document.getElementById('pr-key').value.trim(); |
|
|
|
if (!prKey) { |
|
alert('Please enter the API key'); |
|
return; |
|
} |
|
|
|
|
|
const protocol = window.location.protocol; |
|
const hostname = window.location.host; |
|
const baseUrl = `${protocol}//${hostname}`; |
|
|
|
|
|
const addonUrl = `${baseUrl}/pr=${prKey}/manifest.json`; |
|
|
|
|
|
const stremioUrl = `stremio://${hostname}/pr=${prKey}/manifest.json`; |
|
|
|
const urlDiv = document.getElementById('addon-url'); |
|
urlDiv.style.display = 'block'; |
|
urlDiv.innerHTML = ` |
|
<p>Your addon URL:</p> |
|
<p>${addonUrl}</p> |
|
<div class="buttons-container"> |
|
<button onclick="window.location.href='${stremioUrl}'" class="action-btn">Install in Stremio</button> |
|
<button onclick="copyToClipboard('${addonUrl}')" class="action-btn">Copy URL</button> |
|
</div> |
|
`; |
|
} |
|
|
|
function copyToClipboard(text) { |
|
navigator.clipboard.writeText(text).then(() => { |
|
alert('URL copied to clipboard!'); |
|
}).catch(err => { |
|
console.error('Failed to copy text: ', err); |
|
alert('Failed to copy URL. Please copy it manually.'); |
|
}); |
|
} |
|
</script> |
|
</body> |
|
</html> |
|
|
