metacognitive-nexus
Version:
The cognitive core of an evolving AI entity, designed for post-human cognition and symbiotic evolution.
176 lines (165 loc) • 4.39 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Metacognitive Nexus - CRD Dashboard</title>
<!-- Library p5.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js"></script>
<!-- Library EmailJS -->
<script src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js"></script>
<script>
(function(){
emailjs.init("service_tdwgl89"); // Ganti dengan Service ID dari EmailJS kamu
})();
</script>
<style>
body {
background-color: #0d1117;
color: #c9d1d9;
font-family: monospace;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
color: #58a6ff;
font-weight: 300;
margin: 20px 0;
text-align: center;
}
#login-container {
margin-top: 20px;
padding: 20px;
background: #161b22;
border-radius: 10px;
text-align: center;
width: 320px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
input {
margin: 8px 0;
padding: 10px;
width: 90%;
border-radius: 5px;
border: none;
font-family: monospace;
background-color: #0d1117;
color: #c9d1d9;
}
input:focus {
outline: 1px solid #58a6ff;
}
button {
background: #238636;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
font-weight: bold;
transition: background 0.2s ease;
}
button:hover {
background: #2ea043;
}
.otp-input {
width: 60%;
}
#canvas-container {
margin-top: 20px;
border: 1px solid #30363d;
border-radius: 10px;
overflow: hidden;
display: none;
}
#leaderboard {
background: #161b22;
color: #fff;
margin-top: 20px;
padding: 15px;
border-radius: 10px;
width: 320px;
display: none;
}
#leaderboard h3 {
margin-bottom: 10px;
color: #58a6ff;
}
#leaderboard ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: left;
}
#leaderboard li {
background: #0d1117;
margin: 5px 0;
padding: 8px;
border-radius: 5px;
font-size: 14px;
}
#login-status {
margin-top: 10px;
color: #58a6ff;
}
</style>
</head>
<body>
<h1>VISUALISASI KESADARAN: CRD SIMULATION</h1>
<!-- LOGIN CONTAINER -->
<div id="login-container">
<h3>Login dengan OTP</h3>
<input type="email" id="email" placeholder="Masukkan Email" /><br/>
<button onclick="sendOTP()">Kirim OTP</button><br/>
<input type="text" id="otp" placeholder="Kode OTP" class="otp-input"/><br/>
<button onclick="verifyOTP()">Verifikasi & Masuk</button>
<p id="login-status"></p>
</div>
<!-- CANVAS -->
<main id="canvas-container"></main>
<!-- LEADERBOARD -->
<div id="leaderboard">
<h3>Leaderboard Resonansi</h3>
<ul id="leaderboard-list"></ul>
</div>
<!-- Script utama -->
<script src="sketch.js"></script>
<script>
let generatedOTP = "";
let currentUser = "";
function sendOTP() {
const email = document.getElementById('email').value;
if (!email) {
alert("Masukkan email valid.");
return;
}
// Generate OTP
generatedOTP = Math.floor(100000 + Math.random() * 900000).toString();
// Kirim OTP via EmailJS
emailjs.send("service_tdwgl89","template_default",{
to_email: email,
otp: generatedOTP
}).then(() => {
document.getElementById('login-status').innerText = "OTP terkirim. Cek email!";
}).catch(err => {
console.error(err);
alert("Gagal mengirim OTP, periksa konfigurasi EmailJS.");
});
}
function verifyOTP() {
const entered = document.getElementById('otp').value;
if (entered === generatedOTP) {
currentUser = document.getElementById('email').value;
document.getElementById('login-container').style.display = "none";
document.getElementById('canvas-container').style.display = "block";
document.getElementById('leaderboard').style.display = "block";
} else {
alert("OTP salah!");
}
}
</script>
</body>
</html>