Reto

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XenAdmin - Geleceğin Yönetim Merkezi</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap');

:root {
--primary-color: #00ffff;
--secondary-color: #ff00ff;
--tertiary-color: #ffff00;
--background-color: #000033;
--text-color: #ffffff;
--accent-color: #ff9900;
--success-color: #00ff00;
--error-color: #ff0000;
--warning-color: #ffff00;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body, html {
font-family: 'Roboto', sans-serif;
background-color: var(--background-color);
color: var(--text-color);
overflow: hidden;
height: 100vh;
width: 100vw;
}

#app-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.holographic {
background: rgba(0, 255, 255, 0.1);
border: 1px solid rgba(0, 255, 255, 0.3);
box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 30px;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.holographic:hover {
box-shadow: 0 0 40px rgba(0, 255, 255, 0.8);
transform: scale(1.05);
}

.neon-element {
position: relative;
color: var(--primary-color);
text-shadow: 0 0 10px var(--primary-color);
transition: all 0.3s ease;
}

.neon-element::before, .neon-element::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--primary-color);
z-index: -1;
filter: blur(15px);
opacity: 0.5;
transition: all 0.3s ease;
}

.neon-element:hover {
color: var(--background-color);
text-shadow: none;
}

.neon-element:hover::before, .neon-element:hover::after {
filter: blur(20px);
opacity: 1;
}

#dashboard {
display: none;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
padding: 40px;
width: 100%;
height: 100%;
overflow-y: auto;
}

.widget {
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 25px;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
overflow: hidden;
}

.widget:hover {
transform: translateY(-10px) rotate3d(1, 1, 1, 5deg);
box-shadow: 0 15px 30px rgba(0, 255, 255, 0.2);
}

.loader {
width: 50px;
height: 50px;
border: 5px solid var(--primary-color);
border-top: 5px solid var(--secondary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {
#dashboard {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div id="app-container">
<div id="login" class="holographic">
<h1 class="neon-element">XenAdmin</h1>
<form id="login-form">
<input type="text" placeholder="Kullanıcı Adı" required>
<input type="password" placeholder="Şifre" required>
<button type="submit" class="neon-element">Giriş</button>
</form>
</div>

initThreeJS() {
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
this.renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(this.renderer.domElement);

this.camera.position.z = 5;

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
this.scene.add(ambientLight);

const pointLight = new THREE.PointLight(0x00ffff, 1, 100);
pointLight.position.set(10, 10, 10);
this.scene.add(pointLight);
}

initAudio() {
this.sound = new Howl({
src: ['https://example.com/background-music.mp3'],
loop: true,
volume: 0.5
});

this.sfx = {
click: new Howl({ src: ['https://example.com/click.mp3'] }),
alert: new Howl({ src: ['https://example.com/alert.mp3'] }),
success: new Howl({ src: ['https://example.com/success.mp3'] })
};
}

async initAI() {
this.model = await tf.loadLayersModel('https://example.com/tfjs_model/model.json');
}

bindEvents() {
document.getElementById('login-form').addEventListener('submit', (e) => {
e.preventDefault();
this.sfx.click.play();
this.login();
});

window.addEventListener('resize', () => this.onWindowResize());
}

createParticles() {
const particlesGeometry = new THREE.BufferGeometry();
const particlesCount = 10000;

const posArray = new Float32Array(particlesCount * 3);
const colorArray = new Float32Array(particlesCount * 3);

for (let i = 0; i < particlesCount * 3; i++) {
posArray[i] = (Math.random() - 0.5) * 10;
colorArray[i] = Math.random();
}

particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colorArray, 3));

const particlesMaterial = new THREE.PointsMaterial({
size: 0.005,
vertexColors: true,
blending: THREE.AdditiveBlending
});

this.particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
this.scene.add(this.particlesMesh);
}

login() {
this.sound.play();
gsap.to('#login', {
opacity: 0,
y: -100,
duration: 1,
ease: 'power3.out',
onComplete: () => {
document.getElementById('login').style.display = 'none';
this.loadDashboard();
}
});
}

loadDashboard() {
const dashboard = document.getElementById('dashboard');
dashboard.style.display = 'grid';

const widgets = [
{ title: 'Sistem Durumu', type: 'chart' },
{ title: 'Aktif Kullanıcılar', type: 'counter' },
{ title: 'Güvenlik Uyarıları', type: 'list' },
{ title: 'Performans Analizi', type: 'chart' },
{ title: 'AI Tahminleri', type: 'ai' },
{ title: 'Ağ Trafiği', type: 'network' }
];

widgets.forEach((widget, index) => {
const widgetElement = document.createElement('div');
widgetElement.className = 'widget holographic';
widgetElement.innerHTML = `<h2>${widget.title}</h2>`;

gsap.from(widgetElement, {
opacity: 0,
y: 50,
duration: 1,
delay: index * 0.2,
ease: 'power3.out'
});

switch(widget.type) {
case 'chart':
this.createChart(widgetElement);
break;
case 'counter':
this.createCounter(widgetElement);
break;
case 'list':
this.createList(widgetElement);
break;
case 'ai':
this.createAIPrediction(widgetElement);
break;
case 'network':
this.createNetworkGraph(widgetElement);
break;
}

dashboard.appendChild(widgetElement);
});
}

createChart(element) {
const canvas = document.createElement('canvas');
element.appendChild(canvas);

new Chart(canvas, {
type: 'line',
data: {
labels: ['1', '2', '3', '4', '5', '6'],
datasets: [{
label: 'Veri',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'rgb(0, 255, 255)',
tension: 0.1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
animation: {
duration: 2000,
easing: 'easeOutQuart'
}
}
});
}

createCounter(element) {
const counter = document.createElement('div');
counter.className = 'counter neon-element';
counter.textContent = '0';
element.appendChild(counter);

gsap.to(counter, {
textContent: Math.floor(Math.random() * 1000) + 500,
duration: 3,
ease: 'power3.out',
snap: { textContent: 1 },
onUpdate: function() {
counter.textContent = Math.round(counter.textContent);
}
});
}

createList(element) {
const list = document.createElement('ul');
element.appendChild(list);

const items = ['Kritik Uyarı', 'Yüksek CPU Kullanımı', 'Disk Alanı Azalıyor', 'Şüpheli Giriş Denemesi', 'Güncelleme Gerekli'];
items.forEach((item, index) => {
const li = document.createElement('li');
li.textContent = item;
li.style.opacity = 0;
list.appendChild(li);

gsap.to(li, {
opacity: 1,
x: 20,
duration: 0.5,
delay: index * 0.2,
ease: 'power3.out'
});
});
}

async createAIPrediction(element) {
const predictionElement = document.createElement('div');
predictionElement.textContent = 'AI tahmini yükleniyor...';
element.appendChild(predictionElement);

const inputData = tf.tensor2d([[0.1, 0.2, 0.3, 0.4]]);
const prediction = this.model.predict(inputData);
const result = await prediction.data();

predictionElement.textContent = `AI Tahmini: ${result[0].toFixed(2)}`;

gsap.from(predictionElement, {
opacity: 0,
y: 20,
duration: 1,
ease: 'power3.out'
});
}

createNetworkGraph(element) {
const svg = d3.select(element).append('svg')
.attr('width', '100%')
.attr('height', '200');

const data = {
nodes: [
{id: 'A'}, {id: 'B'}, {id: 'C'}, {id: 'D'}, {id: 'E'}
],
links: [
{source: 'A', target: 'B'}, {source: 'B', target: 'C'},
{source: 'C', target: 'D'}, {source: 'D', target: 'E'},
{source: 'E', target: 'A'}
]
};

const simulation = d3.forceSimulation(data.nodes)
.force('link',

const simulation = d3.forceSimulation(data.nodes)
.force('link', d3.forceLink(data.links).id(d => d.id))
.force('charge', d3.forceManyBody().strength(-50))
.force('center', d3.forceCenter(100, 100));

const link = svg.append('g')
.selectAll('line')
.data(data.links)
.enter().append('line')
.attr('stroke', '#00ffff')
.attr('stroke-opacity', 0.6);

const node = svg.append('g')
.selectAll('circle')
.data(data.nodes)
.enter().append('circle')
.attr('r', 5)
.attr('fill', '#ff00ff');

simulation.on('tick', () => {
link
.attr('x1', d => d.source.x)
.attr('y1', d => d.source.y)
.attr('x2', d => d.target.x)
.attr('y2', d => d.target.y);

node
.attr('cx', d => d.x)
.attr('cy', d => d.y);
});
}

onWindowResize() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
}

animate() {
requestAnimationFrame(() => this.animate());

this.particlesMesh.rotation.x += 0.001;
this.particlesMesh.rotation.y += 0.002;

this.renderer.render(this.scene, this.camera);
}
}

// XenAdmin uygulamasını başlat
const xenAdmin = new XenAdmin();
</script>
</body>
</html>

Online Notepad

Ücretsiz Online Not Defteri

Reto