1242 lines
No EOL
47 KiB
JavaScript
1242 lines
No EOL
47 KiB
JavaScript
import { json } from '@sveltejs/kit';
|
||
import crypto from 'crypto';
|
||
|
||
const adminHash = '8c6976e5b5410415bde908bd4dee15dfb167a9c873fc4bb8a81f6f2ab448a918';
|
||
|
||
async function hash(str) {
|
||
const msgBuffer = new TextEncoder().encode(str);
|
||
const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
|
||
return Array.from(new Uint8Array(hashBuffer))
|
||
.map(b => b.toString(16).padStart(2, '0'))
|
||
.join('');
|
||
}
|
||
|
||
export async function POST({ request }) {
|
||
const { username, password, action } = await request.json();
|
||
|
||
// Special action for getting env content
|
||
if (action === 'get_env' && username === 'admin') {
|
||
const hashedPassword = await hash(password);
|
||
if (hashedPassword === adminHash) {
|
||
return json({
|
||
success: true,
|
||
env: `/root/kreta/.env
|
||
DB_HOST=localhost
|
||
DB_USER=admin
|
||
DB_PASS=admin123
|
||
DB_NAME=kreta_prod
|
||
|
||
# API Keys (ne lopd el pls)
|
||
SUPER_SECRET_API_KEY=123456789
|
||
JWT_SECRET=nagyon_titok
|
||
ENCRYPTION_KEY=asd123
|
||
|
||
# Email Config
|
||
SMTP_HOST=gmail.com
|
||
SMTP_USER=admin@e-kreta.hu
|
||
SMTP_PASS=password123
|
||
|
||
# Backup Config
|
||
BACKUP_SERVER=192.168.1.1
|
||
BACKUP_USER=root
|
||
BACKUP_PASS=jelszo123
|
||
|
||
|
||
# Cache (gyors legyen)
|
||
REDIS_HOST=localhost
|
||
REDIS_PASS=redis123
|
||
|
||
# Egyéb
|
||
DEBUG=true
|
||
PRODUCTION=false
|
||
MAINTENANCE_MODE=false
|
||
USE_SSL=false # majd ha lesz rá idő`
|
||
});
|
||
}
|
||
return json({ success: false });
|
||
}
|
||
|
||
// Special action for getting skelly image
|
||
if (action === 'get_skelly' && username === 'skelly' && password === 'skelly') {
|
||
return json({
|
||
success: true,
|
||
image: '/skelly.jpg'
|
||
});
|
||
}
|
||
|
||
const hashedPassword = await hash(password);
|
||
|
||
// Admin case
|
||
if (username === 'admin' && hashedPassword === adminHash) {
|
||
return json({
|
||
success: true,
|
||
type: 'admin',
|
||
content: {
|
||
html: `
|
||
<div class="logo-container">
|
||
<img src="/logo.png" class="logo" alt="KRETÉN logo">
|
||
</div>
|
||
<div class="login-container admin-panel">
|
||
<div class="login-header">
|
||
<h2>Admin Panel</h2>
|
||
</div>
|
||
<div class="login-form">
|
||
<div class="admin-buttons">
|
||
<a href="/kreta_src.zip" class="admin-button">
|
||
KRÉTA forrás leakelése
|
||
</a>
|
||
<button class="admin-button" id="showEnvButton">
|
||
.env fájl megtekintése
|
||
</button>
|
||
<button class="admin-button delete-button" id="deleteDbButton">
|
||
Egész adatbázis törlése
|
||
</button>
|
||
</div>
|
||
<div id="loginMessage" class="login-message" style="display: none;">
|
||
<p id="messageText"></p>
|
||
<div id="messageSpinner" class="spinner"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`,
|
||
css: `
|
||
.logo-container {
|
||
margin-bottom: 2rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.logo {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.admin-panel {
|
||
background-color: white;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
width: 100%;
|
||
max-width: 600px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.login-header {
|
||
background-color: #30b0d5;
|
||
color: white;
|
||
padding: 1rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.login-header h2 {
|
||
font-size: 1.2rem;
|
||
font-weight: normal;
|
||
margin: 0;
|
||
}
|
||
|
||
.login-form {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.admin-buttons {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
margin: 1rem 0;
|
||
}
|
||
|
||
.admin-button {
|
||
background-color: #30b0d5;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
padding: 1rem;
|
||
font-size: 1rem;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s;
|
||
text-align: center;
|
||
text-decoration: none;
|
||
display: block;
|
||
}
|
||
|
||
.admin-button:hover {
|
||
background-color: #2698bb;
|
||
}
|
||
|
||
.delete-button {
|
||
background-color: #e74c3c;
|
||
}
|
||
|
||
.delete-button:hover {
|
||
background-color: #c0392b;
|
||
}
|
||
|
||
.login-message {
|
||
background-color: #f8f9fa;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
padding: 1rem;
|
||
margin-top: 1.5rem;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.spinner {
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 4px solid rgba(0, 0, 0, 0.1);
|
||
border-radius: 50%;
|
||
border-top-color: #30b0d5;
|
||
animation: spin 1s ease-in-out infinite;
|
||
}
|
||
|
||
.modal-backdrop {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.modal-content {
|
||
background-color: white;
|
||
border-radius: 4px;
|
||
width: 90%;
|
||
max-width: 600px;
|
||
max-height: 90vh;
|
||
overflow-y: auto;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.modal-header {
|
||
background-color: #30b0d5;
|
||
color: white;
|
||
padding: 1rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.modal-close {
|
||
background: none;
|
||
border: none;
|
||
color: white;
|
||
font-size: 1.5rem;
|
||
cursor: pointer;
|
||
padding: 0.3rem;
|
||
line-height: 1;
|
||
width: 36px;
|
||
height: 36px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
touch-action: manipulation;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
|
||
.modal-body {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.env-content {
|
||
background-color: #f8f9fa;
|
||
padding: 1rem;
|
||
border-radius: 4px;
|
||
white-space: pre-wrap;
|
||
font-family: monospace;
|
||
font-size: 0.9rem;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.logo {
|
||
width: 80%;
|
||
max-width: 300px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.logo-container {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.admin-buttons {
|
||
padding: 0;
|
||
}
|
||
|
||
.admin-button {
|
||
font-size: 0.9rem;
|
||
padding: 0.8rem;
|
||
}
|
||
|
||
.login-header h2 {
|
||
font-size: 1rem;
|
||
}
|
||
}
|
||
`,
|
||
js: `
|
||
document.getElementById('showEnvButton').addEventListener('click', async function() {
|
||
const messageDiv = document.getElementById('loginMessage');
|
||
const messageText = document.getElementById('messageText');
|
||
const spinner = document.getElementById('messageSpinner');
|
||
|
||
messageDiv.style.display = 'flex';
|
||
messageText.textContent = "Környezeti változók betöltése...";
|
||
spinner.style.display = 'block';
|
||
|
||
try {
|
||
const response = await fetch('/api/login', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
username: 'admin',
|
||
password: '${password}',
|
||
action: 'get_env'
|
||
})
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
const envModal = document.createElement('div');
|
||
envModal.className = 'modal-backdrop';
|
||
envModal.innerHTML = \`
|
||
<div class="modal-content" onclick="event.stopPropagation()">
|
||
<div class="modal-header">
|
||
<h3 style="font-family: Arial, sans-serif; font-weight: normal; font-size: 1.2rem; margin: 0;">Production .env fájl (nagyon secure)</h3>
|
||
<button class="modal-close">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<pre class="env-content">\${data.env}</pre>
|
||
</div>
|
||
</div>
|
||
\`;
|
||
|
||
document.body.appendChild(envModal);
|
||
|
||
const closeModal = () => {
|
||
document.body.removeChild(envModal);
|
||
};
|
||
|
||
envModal.querySelector('.modal-close').addEventListener('click', closeModal);
|
||
envModal.addEventListener('click', closeModal);
|
||
}
|
||
} catch (error) {
|
||
messageText.textContent = "Hiba történt a környezeti változók betöltése közben";
|
||
} finally {
|
||
messageDiv.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
document.getElementById('deleteDbButton').addEventListener('click', function() {
|
||
const messageDiv = document.getElementById('loginMessage');
|
||
const messageText = document.getElementById('messageText');
|
||
const spinner = document.getElementById('messageSpinner');
|
||
|
||
messageDiv.style.display = 'flex';
|
||
messageText.textContent = "Adatbázis törlése folyamatban...";
|
||
spinner.style.display = 'block';
|
||
|
||
setTimeout(() => {
|
||
messageText.textContent = "Az adatbázis törlése sikeres volt! Mostmár tényleg nem működik semmi :p";
|
||
spinner.style.display = 'none';
|
||
}, 3000);
|
||
});
|
||
`
|
||
}
|
||
});
|
||
}
|
||
|
||
// Skelly case
|
||
if (username === 'skelly' && password === 'skelly') {
|
||
return json({
|
||
success: true,
|
||
type: 'admin',
|
||
content: {
|
||
html: `
|
||
<div class="logo-container">
|
||
<img src="/logo.png" class="logo" alt="KRETÉN logo">
|
||
</div>
|
||
<div class="login-container admin-panel">
|
||
<div class="login-header">
|
||
<h2>szia pearoo skelly vagyok</h2>
|
||
</div>
|
||
<div class="login-form">
|
||
<div class="admin-buttons">
|
||
<button class="admin-button" id="showSkellyButton">:3</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`,
|
||
css: `
|
||
.logo-container {
|
||
margin-bottom: 2rem;
|
||
text-align: center;
|
||
padding: 0 1rem;
|
||
}
|
||
|
||
.logo {
|
||
max-width: 100%;
|
||
height: auto;
|
||
width: auto;
|
||
max-height: 120px;
|
||
}
|
||
|
||
.admin-panel {
|
||
background-color: white;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
width: 100%;
|
||
max-width: 600px;
|
||
overflow: hidden;
|
||
margin: 0 1rem;
|
||
}
|
||
|
||
.login-header {
|
||
background-color: #30b0d5;
|
||
color: white;
|
||
padding: 1rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.login-header h2 {
|
||
font-size: clamp(1rem, 4vw, 1.2rem);
|
||
font-weight: normal;
|
||
margin: 0;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.login-form {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.admin-buttons {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
margin: 1rem 0;
|
||
}
|
||
|
||
.admin-button {
|
||
background-color: #30b0d5;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
padding: 1rem;
|
||
font-size: 1rem;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s;
|
||
text-align: center;
|
||
text-decoration: none;
|
||
display: block;
|
||
}
|
||
|
||
.admin-button:hover {
|
||
background-color: #2698bb;
|
||
}
|
||
|
||
.modal-backdrop {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
|
||
}
|
||
|
||
.modal-content {
|
||
background-color: black;
|
||
border-radius: 4px;
|
||
width: min(400px, 95%);
|
||
height: min(600px, 90%);
|
||
max-width: none;
|
||
max-height: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.modal-header {
|
||
background-color: #30b0d5;
|
||
color: white;
|
||
padding: 0.5rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
min-height: 40px;
|
||
}
|
||
|
||
.modal-close {
|
||
background: none;
|
||
border: none;
|
||
color: white;
|
||
font-size: 1.5rem;
|
||
cursor: pointer;
|
||
padding: 0.3rem;
|
||
line-height: 1;
|
||
width: 36px;
|
||
height: 36px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
touch-action: manipulation;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
|
||
.modal-body {
|
||
flex: 1;
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
background-color: #000;
|
||
}
|
||
|
||
.modal-image {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
width: auto;
|
||
height: auto;
|
||
object-fit: contain;
|
||
display: block;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.logo-container {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.admin-panel {
|
||
margin: 0 0.5rem;
|
||
}
|
||
|
||
.login-form {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.modal-content {
|
||
width: min(400px, 95%);
|
||
height: min(600px, 90%);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.modal-header {
|
||
padding: 0.5rem;
|
||
}
|
||
|
||
.modal-close {
|
||
font-size: 1.5rem;
|
||
}
|
||
}
|
||
|
||
@media (orientation: landscape) and (max-height: 600px) {
|
||
.logo {
|
||
max-height: 80px;
|
||
}
|
||
|
||
.logo-container {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.login-form {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.admin-buttons {
|
||
margin: 0.5rem 0;
|
||
}
|
||
}
|
||
`,
|
||
js: `
|
||
document.getElementById('showSkellyButton').addEventListener('click', async function() {
|
||
try {
|
||
const skellyModal = document.createElement('div');
|
||
skellyModal.className = 'modal-backdrop';
|
||
skellyModal.innerHTML = \`
|
||
<div class="modal-content" onclick="event.stopPropagation()">
|
||
<div class="modal-header">
|
||
<h3 style="font-family: Arial, sans-serif; font-weight: normal; font-size: 1.2rem; margin: 0;">:3</h3>
|
||
<button class="modal-close">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<img alt="Skelly" class="modal-image"
|
||
onload="this.style.opacity = '1'"
|
||
onerror="this.style.display = 'none'"
|
||
style="opacity: 0; transition: opacity 0.3s ease;">
|
||
</div>
|
||
</div>
|
||
\`;
|
||
|
||
document.body.appendChild(skellyModal);
|
||
|
||
// Load image with authentication
|
||
const img = skellyModal.querySelector('.modal-image');
|
||
fetch('/api/protected-image?image=skelly.jpg', {
|
||
headers: {
|
||
'x-auth': 'skelly-authenticated'
|
||
}
|
||
})
|
||
.then(response => response.blob())
|
||
.then(blob => {
|
||
img.src = URL.createObjectURL(blob);
|
||
})
|
||
.catch(error => {
|
||
console.error('Error loading image:', error);
|
||
img.style.display = 'none';
|
||
});
|
||
|
||
const closeModal = () => {
|
||
document.body.removeChild(skellyModal);
|
||
};
|
||
|
||
skellyModal.querySelector('.modal-close').addEventListener('click', closeModal);
|
||
skellyModal.addEventListener('click', closeModal);
|
||
|
||
// Prevent scrolling when modal is open
|
||
document.body.style.overflow = 'hidden';
|
||
skellyModal.addEventListener('click', () => {
|
||
document.body.style.overflow = '';
|
||
closeModal();
|
||
});
|
||
|
||
// Handle escape key
|
||
const handleEscape = (e) => {
|
||
if (e.key === 'Escape') {
|
||
document.body.style.overflow = '';
|
||
closeModal();
|
||
document.removeEventListener('keydown', handleEscape);
|
||
}
|
||
};
|
||
document.addEventListener('keydown', handleEscape);
|
||
} catch (error) {
|
||
console.error('Error loading Skelly:', error);
|
||
}
|
||
});
|
||
`
|
||
}
|
||
});
|
||
}
|
||
|
||
// Klima case
|
||
if (username === 'klima' && password === 'klima') {
|
||
return json({
|
||
success: true,
|
||
type: 'admin',
|
||
content: {
|
||
html: `
|
||
<div class="logo-container">
|
||
<img src="/logo.png" class="logo" alt="KRETÉN logo">
|
||
</div>
|
||
<div class="login-container admin-panel">
|
||
<div class="login-header">
|
||
<h2>Production adatbázis/adatvédelem final boss</h2>
|
||
</div>
|
||
<div class="login-form" style="padding: 0;">
|
||
<img alt="Klíma" style="max-width: 100%; height: auto; display: none;"
|
||
onload="this.style.display = 'block'"
|
||
onerror="this.style.display = 'none'">
|
||
</div>
|
||
</div>
|
||
`,
|
||
css: `
|
||
.logo-container {
|
||
margin-bottom: 2rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.logo {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.admin-panel {
|
||
background-color: white;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
width: 100%;
|
||
max-width: 600px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.login-header {
|
||
background-color: #30b0d5;
|
||
color: white;
|
||
padding: 1rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.login-header h2 {
|
||
font-size: 1.2rem;
|
||
font-weight: normal;
|
||
margin: 0;
|
||
}
|
||
`,
|
||
js: `
|
||
// Load Klima image with authentication
|
||
const img = document.querySelector('.login-form img');
|
||
fetch('/api/protected-image?image=klima.png', {
|
||
headers: {
|
||
'x-auth': 'klima-authenticated'
|
||
}
|
||
})
|
||
.then(response => response.blob())
|
||
.then(blob => {
|
||
img.src = URL.createObjectURL(blob);
|
||
})
|
||
.catch(error => {
|
||
console.error('Error loading image:', error);
|
||
img.style.display = 'none';
|
||
});
|
||
`
|
||
}
|
||
});
|
||
}
|
||
|
||
// Spitkov case
|
||
if (username === 'spitkov' && password === 'spitkov') {
|
||
return json({
|
||
success: true,
|
||
type: 'spitkov',
|
||
redirect: 'https://spitkov.wtf'
|
||
});
|
||
}
|
||
|
||
// Firka case
|
||
if (username === 'firka' && password === 'firka') {
|
||
return json({
|
||
success: true,
|
||
type: 'firka',
|
||
redirect: 'https://firka.app'
|
||
});
|
||
}
|
||
|
||
// Wide gold storage silo case
|
||
if (username === 'wide_gold_storage_silo' && password === 'wide_gold_storage_silo') {
|
||
return json({
|
||
success: true,
|
||
type: 'admin',
|
||
content: {
|
||
html: `
|
||
<div class="logo-container">
|
||
<img src="/logo.png" class="logo" alt="KRETÉN logo">
|
||
</div>
|
||
<div class="login-container admin-panel">
|
||
<div class="login-header">
|
||
<h2>wide_gold_storage_silo</h2>
|
||
</div>
|
||
<div class="login-form">
|
||
<div class="admin-buttons">
|
||
<button class="admin-button" id="showMilkaButton">
|
||
Milka csoki for everyone
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`,
|
||
css: `
|
||
.logo-container {
|
||
margin-bottom: 2rem;
|
||
text-align: center;
|
||
padding: 0 1rem;
|
||
}
|
||
|
||
.logo {
|
||
max-width: 100%;
|
||
height: auto;
|
||
width: auto;
|
||
max-height: 120px;
|
||
}
|
||
|
||
.admin-panel {
|
||
background-color: white;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
width: 100%;
|
||
max-width: 600px;
|
||
overflow: hidden;
|
||
margin: 0 1rem;
|
||
}
|
||
|
||
.login-header {
|
||
background-color: #30b0d5;
|
||
color: white;
|
||
padding: 1rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.login-header h2 {
|
||
font-size: clamp(1rem, 4vw, 1.2rem);
|
||
font-weight: normal;
|
||
margin: 0;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.login-form {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.admin-buttons {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
margin: 1rem 0;
|
||
}
|
||
|
||
.admin-button {
|
||
background-color: #30b0d5;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
padding: 1rem;
|
||
font-size: 1rem;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s;
|
||
text-align: center;
|
||
text-decoration: none;
|
||
display: block;
|
||
}
|
||
|
||
.admin-button:hover {
|
||
background-color: #2698bb;
|
||
}
|
||
|
||
.modal-backdrop {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
|
||
}
|
||
|
||
.modal-content {
|
||
background-color: black;
|
||
border-radius: 4px;
|
||
width: min(800px, 95%);
|
||
height: min(600px, 90%);
|
||
max-width: none;
|
||
max-height: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.modal-header {
|
||
background-color: #30b0d5;
|
||
color: white;
|
||
padding: 0.5rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
min-height: 40px;
|
||
}
|
||
|
||
.modal-close {
|
||
background: none;
|
||
border: none;
|
||
color: white;
|
||
font-size: 1.5rem;
|
||
cursor: pointer;
|
||
padding: 0.3rem;
|
||
line-height: 1;
|
||
width: 36px;
|
||
height: 36px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
touch-action: manipulation;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
|
||
.modal-body {
|
||
flex: 1;
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
background-color: #000;
|
||
}
|
||
|
||
.modal-image {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
width: auto;
|
||
height: auto;
|
||
object-fit: contain;
|
||
display: block;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.logo-container {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.admin-panel {
|
||
margin: 0 0.5rem;
|
||
}
|
||
|
||
.login-form {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.modal-content {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.modal-header {
|
||
padding: 0.5rem;
|
||
}
|
||
|
||
.modal-close {
|
||
font-size: 1.5rem;
|
||
}
|
||
}
|
||
`,
|
||
js: `
|
||
document.getElementById('showMilkaButton').addEventListener('click', async function() {
|
||
try {
|
||
const milkaModal = document.createElement('div');
|
||
milkaModal.className = 'modal-backdrop';
|
||
milkaModal.innerHTML = \`
|
||
<div class="modal-content" onclick="event.stopPropagation()">
|
||
<div class="modal-header">
|
||
<h3 style="font-family: Arial, sans-serif; font-weight: normal; font-size: 1.2rem; margin: 0;">wide_gold_storage_silo</h3>
|
||
<button class="modal-close">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<img alt="Milka" class="modal-image"
|
||
onload="this.style.opacity = '1'"
|
||
onerror="this.style.display = 'none'"
|
||
style="opacity: 0; transition: opacity 0.3s ease;">
|
||
</div>
|
||
</div>
|
||
\`;
|
||
|
||
document.body.appendChild(milkaModal);
|
||
|
||
// Load image with authentication
|
||
const img = milkaModal.querySelector('.modal-image');
|
||
fetch('/api/protected-image?image=milka.jpg', {
|
||
headers: {
|
||
'x-auth': 'milka-authenticated'
|
||
}
|
||
})
|
||
.then(response => response.blob())
|
||
.then(blob => {
|
||
img.src = URL.createObjectURL(blob);
|
||
})
|
||
.catch(error => {
|
||
console.error('Error loading image:', error);
|
||
img.style.display = 'none';
|
||
});
|
||
|
||
const closeModal = () => {
|
||
document.body.removeChild(milkaModal);
|
||
};
|
||
|
||
milkaModal.querySelector('.modal-close').addEventListener('click', closeModal);
|
||
milkaModal.addEventListener('click', closeModal);
|
||
|
||
// Prevent scrolling when modal is open
|
||
document.body.style.overflow = 'hidden';
|
||
milkaModal.addEventListener('click', () => {
|
||
document.body.style.overflow = '';
|
||
closeModal();
|
||
});
|
||
|
||
// Handle escape key
|
||
const handleEscape = (e) => {
|
||
if (e.key === 'Escape') {
|
||
document.body.style.overflow = '';
|
||
closeModal();
|
||
document.removeEventListener('keydown', handleEscape);
|
||
}
|
||
};
|
||
document.addEventListener('keydown', handleEscape);
|
||
} catch (error) {
|
||
console.error('Error loading Milka:', error);
|
||
}
|
||
});
|
||
`
|
||
}
|
||
});
|
||
}
|
||
|
||
// Pearoo case
|
||
if (username === 'pearoo' && password === 'pearoo') {
|
||
return json({
|
||
success: true,
|
||
type: 'admin',
|
||
content: {
|
||
html: `
|
||
<div class="logo-container">
|
||
<img src="/logo.png" class="logo" alt="KRETÉN logo">
|
||
</div>
|
||
<div class="login-container admin-panel">
|
||
<div class="login-header">
|
||
<h2>pearoo</h2>
|
||
</div>
|
||
<div class="login-form" style="padding: 0;">
|
||
<div class="pearoo-images">
|
||
<img alt="P1" class="pearoo-image"
|
||
onload="this.style.opacity = '1'"
|
||
onerror="this.style.display = 'none'"
|
||
style="opacity: 0; transition: opacity 0.3s ease;">
|
||
<img alt="P2" class="pearoo-image"
|
||
onload="this.style.opacity = '1'"
|
||
onerror="this.style.display = 'none'"
|
||
style="opacity: 0; transition: opacity 0.3s ease;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`,
|
||
css: `
|
||
.logo-container {
|
||
margin-bottom: 2rem;
|
||
text-align: center;
|
||
padding: 0 1rem;
|
||
}
|
||
|
||
.logo {
|
||
max-width: 100%;
|
||
height: auto;
|
||
width: auto;
|
||
max-height: 120px;
|
||
}
|
||
|
||
.admin-panel {
|
||
background-color: white;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
width: 100%;
|
||
max-width: 800px;
|
||
overflow: hidden;
|
||
margin: 0 1rem;
|
||
}
|
||
|
||
.login-header {
|
||
background-color: #30b0d5;
|
||
color: white;
|
||
padding: 1rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.login-header h2 {
|
||
font-size: clamp(1rem, 4vw, 1.2rem);
|
||
font-weight: normal;
|
||
margin: 0;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.pearoo-images {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 1rem;
|
||
padding: 1rem;
|
||
background-color: white;
|
||
}
|
||
|
||
.pearoo-image {
|
||
max-width: calc(50% - 0.5rem);
|
||
height: auto;
|
||
object-fit: contain;
|
||
display: block;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.logo-container {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.admin-panel {
|
||
margin: 0 0.5rem;
|
||
}
|
||
|
||
.pearoo-images {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.pearoo-image {
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
`,
|
||
js: `
|
||
// Load images with authentication
|
||
const [img1, img2] = document.querySelectorAll('.pearoo-image');
|
||
|
||
// Load first image
|
||
fetch('/api/protected-image?image=p1.png', {
|
||
headers: {
|
||
'x-auth': 'pearoo-authenticated'
|
||
}
|
||
})
|
||
.then(response => response.blob())
|
||
.then(blob => {
|
||
img1.src = URL.createObjectURL(blob);
|
||
})
|
||
.catch(error => {
|
||
console.error('Error loading image 1:', error);
|
||
img1.style.display = 'none';
|
||
});
|
||
|
||
// Load second image
|
||
fetch('/api/protected-image?image=p2.png', {
|
||
headers: {
|
||
'x-auth': 'pearoo-authenticated'
|
||
}
|
||
})
|
||
.then(response => response.blob())
|
||
.then(blob => {
|
||
img2.src = URL.createObjectURL(blob);
|
||
})
|
||
.catch(error => {
|
||
console.error('Error loading image 2:', error);
|
||
img2.style.display = 'none';
|
||
});
|
||
`
|
||
}
|
||
});
|
||
}
|
||
|
||
// 9suw9suw9 case
|
||
if (username === '9suw9suw9' && password === '9suw9suw9') {
|
||
return json({
|
||
success: true,
|
||
type: 'admin',
|
||
content: {
|
||
html: `
|
||
<div class="logo-container">
|
||
<img src="/logo.png" class="logo" alt="KRETÉN logo">
|
||
</div>
|
||
<div class="login-container admin-panel">
|
||
<div class="login-header">
|
||
<h2>9suw9suw9</h2>
|
||
</div>
|
||
<div class="login-form" style="padding: 0;">
|
||
<div class="gif-container">
|
||
<img alt="9S" class="gif-image"
|
||
onload="this.style.opacity = '1'"
|
||
onerror="this.style.display = 'none'"
|
||
style="opacity: 0; transition: opacity 0.3s ease;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`,
|
||
css: `
|
||
.logo-container {
|
||
margin-bottom: 2rem;
|
||
text-align: center;
|
||
padding: 0 1rem;
|
||
}
|
||
|
||
.logo {
|
||
max-width: 100%;
|
||
height: auto;
|
||
width: auto;
|
||
max-height: 120px;
|
||
}
|
||
|
||
.admin-panel {
|
||
background-color: white;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
width: 100%;
|
||
max-width: 800px;
|
||
overflow: hidden;
|
||
margin: 0 1rem;
|
||
}
|
||
|
||
.login-header {
|
||
background-color: #30b0d5;
|
||
color: white;
|
||
padding: 1rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.login-header h2 {
|
||
font-size: clamp(1rem, 4vw, 1.2rem);
|
||
font-weight: normal;
|
||
margin: 0;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.gif-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 1rem;
|
||
background-color: white;
|
||
}
|
||
|
||
.gif-image {
|
||
max-width: 100%;
|
||
height: auto;
|
||
object-fit: contain;
|
||
display: block;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.logo-container {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.admin-panel {
|
||
margin: 0 0.5rem;
|
||
}
|
||
}
|
||
`,
|
||
js: `
|
||
// Load image with authentication
|
||
const img = document.querySelector('.gif-image');
|
||
fetch('/api/protected-image?image=9s.gif', {
|
||
headers: {
|
||
'x-auth': '9suw9suw9-authenticated'
|
||
}
|
||
})
|
||
.then(response => response.blob())
|
||
.then(blob => {
|
||
img.src = URL.createObjectURL(blob);
|
||
})
|
||
.catch(error => {
|
||
console.error('Error loading image:', error);
|
||
img.style.display = 'none';
|
||
});
|
||
`
|
||
}
|
||
});
|
||
}
|
||
|
||
// Failed login - return success: false
|
||
return json({
|
||
success: false
|
||
});
|
||
} |