PORTAL2
user :
admin
123456
password
admin123
12345
12345678
qwerty
qwerty123
abc123
admin1234
123456789
1234567%
1234#4
paswornya :
pass123
password123
admin2024
admin2025
admin01
admin1
administrator
root
root123
user
user123
login
login123
welcome
welcome123
guest
guest123
test
test123
smk
smk123
motor
motor123
bengkel
bengkel123
informatika
informatika123
cdi
cdi123
arduinouno
arduino123
tkj
tkj123
sekolah
sekolah123
indonesia
indonesia123
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Suryobot - SMK Kebon Jeruk</title>
<style>
:root {
--arduino-teal: #00979d;
--accent-yellow: #ffcc00;
--dark-bg: #07101d;
--glass-bg: rgba(255, 255, 255, 0.03);
--glass-border: rgba(255, 255, 255, 0.08);
}
body {
background-color: var(--dark-bg);
background-image:
radial-gradient(circle at 50% 50%, rgba(0, 151, 157, 0.1) 0%, transparent 50%);
font-family: 'Inter', 'Segoe UI', sans-serif;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
color: #e6f1ff;
}
.particles {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
.login-card {
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 2rem; /* Ukuran padding diperkecil */
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
border: 1px solid var(--glass-border);
width: 90%;
max-width: 320px; /* Lebar maksimal diperkecil dari 400px */
position: relative;
text-align: center;
animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
.robot-icon {
width: 50px; /* Ukuran logo diperkecil */
height: 50px;
margin-bottom: 1rem;
fill: var(--arduino-teal);
filter: drop-shadow(0 0 8px var(--arduino-teal));
}
h2 {
margin: 0;
font-size: 1.4rem; /* Ukuran teks diperkecil */
letter-spacing: 2px;
font-weight: 800;
}
h3 {
margin: 0.3rem 0 1.5rem 0;
font-size: 0.7rem; /* Ukuran teks diperkecil */
color: var(--arduino-teal);
text-transform: uppercase;
letter-spacing: 1px;
}
.hint-container {
background: rgba(0, 0, 0, 0.4);
border-radius: 8px;
padding: 8px 12px;
margin-bottom: 1.5rem;
border-left: 2px solid var(--accent-yellow);
text-align: left;
}
.hint-text {
font-size: 0.7rem;
color: #8892b0;
margin: 0;
}
.input-wrapper {
margin-bottom: 1rem;
text-align: left;
}
label {
font-size: 0.65rem;
color: #555e7d;
margin-bottom: 6px;
display: block;
text-transform: uppercase;
}
input {
width: 100%;
padding: 10px 12px; /* Padding input diperkecil */
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--glass-border);
border-radius: 8px;
color: white;
font-size: 0.9rem;
outline: none;
transition: 0.3s;
box-sizing: border-box;
}
input:focus {
border-color: var(--arduino-teal);
}
button {
width: 100%;
padding: 12px;
background: var(--arduino-teal);
border: none;
border-radius: 8px;
color: #000;
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
transition: 0.3s;
text-transform: uppercase;
margin-top: 5px;
}
button:hover {
filter: brightness(1.2);
box-shadow: 0 0 15px rgba(0, 151, 157, 0.3);
}
#hasil {
margin-top: 1rem;
padding: 8px;
border-radius: 6px;
font-size: 0.75rem;
min-height: 18px;
display: none;
}
.status-success { background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid #10b98133; display: block !important; }
.status-error { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid #ef444433; display: block !important; }
.shake { animation: shake 0.4s ease; }
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
</style>
</head>
<body>
<div class="particles" id="particles"></div>
<div class="login-card" id="card">
<!-- Logo Robotika Baru (SVG Robot Head) -->
<svg class="robot-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3v-8a3 3 0 0 1 3-3h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2M9 13a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1m6 0a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1M7.5 18a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5h-9z"/>
</svg>
<h2>SURYOBOT</h2>
<h3>SMK Kebon Jeruk</h3>
<div class="hint-container">
<p class="hint-text"><strong>Node:</strong> Attacker Simulation (Aman)</p>
</div>
<div class="input-wrapper">
<label>ID Akses</label>
<input type="text" id="username" placeholder="Username" autocomplete="off">
</div>
<div class="input-wrapper">
<label>Kode Sandi</label>
<input type="password" id="password" placeholder="Password" autocomplete="off">
</div>
<button onclick="validateLogin()">Login System</button>
<div id="hasil"></div>
</div>
<script>
// Partikel latar belakang yang lebih halus
const particlesContainer = document.getElementById('particles');
for (let i = 0; i < 20; i++) {
const dot = document.createElement('div');
dot.style.position = 'absolute';
dot.style.width = '1px';
dot.style.height = '1px';
dot.style.background = 'rgba(0, 151, 157, 0.4)';
dot.style.top = Math.random() * 100 + '%';
dot.style.left = Math.random() * 100 + '%';
particlesContainer.appendChild(dot);
}
function speak(text) {
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const msg = new SpeechSynthesisUtterance(text);
msg.lang = 'id-ID';
msg.rate = 1.1;
window.speechSynthesis.speak(msg);
}
}
function validateLogin() {
const user = document.getElementById("username").value.trim();
const pass = document.getElementById("password").value.trim();
const hasil = document.getElementById("hasil");
const card = document.getElementById("card");
hasil.className = "";
card.classList.remove("shake");
if (user === "abc123" && pass === "root123") {
const t = "selamat kamu berhasil";
hasil.innerHTML = "ACCESS GRANTED";
hasil.classList.add("status-success");
speak(t);
} else {
const t = "coba lagi anda belum beruntung";
hasil.innerHTML = "ACCESS DENIED";
hasil.classList.add("status-error");
card.classList.add("shake");
speak(t);
}
}
document.addEventListener('keypress', (e) => { if (e.key === 'Enter') validateLogin(); });
</script>
</body>
</html>
REVISI
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Suryobot - SMK Kebon Jeruk</title>
<style>
:root {
--arduino-teal: #00979d;
--accent-yellow: #ffcc00;
--dark-bg: #07101d;
--glass-bg: rgba(255, 255, 255, 0.03);
--glass-border: rgba(255, 255, 255, 0.08);
}
body {
background-color: var(--dark-bg);
background-image:
radial-gradient(circle at 50% 50%, rgba(0, 151, 157, 0.1) 0%, transparent 50%);
font-family: 'Inter', 'Segoe UI', sans-serif;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
color: #e6f1ff;
}
.particles {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
.login-card {
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 2rem;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
border: 1px solid var(--glass-border);
width: 90%;
max-width: 320px;
position: relative;
text-align: center;
animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
.robot-icon {
width: 50px;
height: 50px;
margin-bottom: 1rem;
fill: var(--arduino-teal);
filter: drop-shadow(0 0 8px var(--arduino-teal));
}
h2 {
margin: 0;
font-size: 1.4rem;
letter-spacing: 2px;
font-weight: 800;
}
h3 {
margin: 0.3rem 0 1.5rem 0;
font-size: 0.7rem;
color: var(--arduino-teal);
text-transform: uppercase;
letter-spacing: 1px;
}
.hint-container {
background: rgba(0, 0, 0, 0.4);
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 1.5rem;
border-left: 2px solid var(--accent-yellow);
text-align: left;
}
.hint-text {
font-size: 0.65rem;
color: #8892b0;
margin: 0;
line-height: 1.4;
}
.input-wrapper {
margin-bottom: 1rem;
text-align: left;
}
label {
font-size: 0.65rem;
color: #555e7d;
margin-bottom: 6px;
display: block;
text-transform: uppercase;
}
input {
width: 100%;
padding: 10px 12px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--glass-border);
border-radius: 8px;
color: white;
font-size: 0.9rem;
outline: none;
transition: 0.3s;
box-sizing: border-box;
}
input:focus {
border-color: var(--arduino-teal);
}
button {
width: 100%;
padding: 12px;
background: var(--arduino-teal);
border: none;
border-radius: 8px;
color: #000;
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
transition: 0.3s;
text-transform: uppercase;
margin-top: 5px;
}
button:hover {
filter: brightness(1.2);
box-shadow: 0 0 15px rgba(0, 151, 157, 0.3);
}
#hasil {
margin-top: 1rem;
padding: 8px;
border-radius: 6px;
font-size: 0.75rem;
min-height: 18px;
display: none;
}
.status-success { background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid #10b98133; display: block !important; }
.status-error { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid #ef444433; display: block !important; }
.shake { animation: shake 0.4s ease; }
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
</style>
</head>
<body>
<div class="particles" id="particles"></div>
<div class="login-card" id="card">
<svg class="robot-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3v-8a3 3 0 0 1 3-3h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2M9 13a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1m6 0a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1M7.5 18a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5h-9z"/>
</svg>
<h2>SURYOBOT</h2>
<h3>SMK Kebon Jeruk</h3>
<div class="hint-container">
<p class="hint-text">
<strong>Node:</strong> Kalian adalah tim keamanan bengkel digital berbasis IoT. Ada ancaman pembobolan sistem database pelanggan.
</p>
</div>
<div class="input-wrapper">
<label>ID Akses</label>
<input type="text" id="username" placeholder="Username" autocomplete="off">
</div>
<div class="input-wrapper">
<label>Kode Sandi</label>
<input type="password" id="password" placeholder="Password" autocomplete="off">
</div>
<button onclick="validateLogin()">Login System</button>
<div id="hasil"></div>
</div>
<script>
const particlesContainer = document.getElementById('particles');
for (let i = 0; i < 20; i++) {
const dot = document.createElement('div');
dot.style.position = 'absolute';
dot.style.width = '1px';
dot.style.height = '1px';
dot.style.background = 'rgba(0, 151, 157, 0.4)';
dot.style.top = Math.random() * 100 + '%';
dot.style.left = Math.random() * 100 + '%';
particlesContainer.appendChild(dot);
}
function speak(text) {
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const msg = new SpeechSynthesisUtterance(text);
msg.lang = 'id-ID';
msg.rate = 1.1;
window.speechSynthesis.speak(msg);
}
}
function validateLogin() {
const user = document.getElementById("username").value.trim();
const pass = document.getElementById("password").value.trim();
const hasil = document.getElementById("hasil");
const card = document.getElementById("card");
hasil.className = "";
card.classList.remove("shake");
if (user === "abc123" && pass === "root123") {
const t = "selamat kamu berhasil";
hasil.innerHTML = "ACCESS GRANTED";
hasil.classList.add("status-success");
speak(t);
} else {
const t = "coba lagi anda belum beruntung";
hasil.innerHTML = "ACCESS DENIED";
hasil.classList.add("status-error");
card.classList.add("shake");
speak(t);
}
}
document.addEventListener('keypress', (e) => { if (e.key === 'Enter') validateLogin(); });
</script>
</body>
</html>
Comments
Post a Comment