Combine both these html code into a single code- code-1 <!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>NexaHub: Games & Apps Dashboard</title>
<!-- Content Security Policy to prevent XSS -->
<meta http-equiv="Content-Security-Policy" content="
default-src 'self';
script-src 'self' [Link]
style-src 'self' [Link] 'unsafe-inline';
frame-src [Link] [Link]
" />
<script src="[Link]
<script>
// SHA-256 hashing function for secure password check
async function hashPassword(password) {
const encoder = new TextEncoder();
const data = [Link](password);
const hashBuffer = await [Link]('SHA-256', data);
const hashArray = [Link](new Uint8Array(hashBuffer));
return [Link](b => [Link](16).padStart(2, '0')).join('');
// Hashed password for '58932'
const ownerPassHash =
'cf5e4a84f3d498fb2de55c5a2269524e32210e9cc5d48c5f4a1f3ae5035a0610';
async function checkOwnerPassword(input) {
const inputHash = await hashPassword(input);
return inputHash === ownerPassHash;
async function tryOwnerLogin() {
const pass = prompt('Enter owner password:');
if (!pass) return alert('Password required!');
if (await checkOwnerPassword(pass)) {
alert('Access granted!');
[Link]('owner').[Link] = 'block';
toggleSection('owner');
} else {
alert('Wrong password!');
// Calculator with safe evaluation (no eval)
function calculate() {
const input = [Link]('calc').value;
try {
// Simple math expression validation
if (/^[0-9+\-*/().\s]+$/.test(input)) {
// Use Function constructor safely to calculate
const result = Function(`"use strict"; return (${input})`)();
[Link]('calcResult').textContent = 'Result: ' + result;
} else {
throw new Error('Invalid characters');
} catch {
[Link]('calcResult').textContent = 'Invalid expression';
function saveNotes() {
const notes = [Link]('notes').value;
[Link]('savedNotes', notes);
alert('Notes saved!');
[Link] = () => {
[Link]('notes').value = [Link]('savedNotes') || '';
[Link]('owner').[Link] = 'none';
// Show games section by default
toggleSection('games');
};
function toggleSection(section) {
['games', 'utilities', 'custom', 'creative', 'funzones', 'owner'].forEach(id => {
const el = [Link](id);
if(el) {
if (id === 'custom' || id === 'owner' || id === section) {
[Link] = (id === section) ? 'block' : 'none';
} else {
[Link] = 'grid';
});
</script>
</head>
<body class="bg-gradient-to-r from-indigo-500 via-purple-600 to-pink-500 text-gray-900
min-h-screen">
<div class="container mx-auto p-6">
<!-- Introduction Section with CEO Name Only -->
<div class="bg-white bg-opacity-90 p-8 rounded-xl shadow-lg mb-8 text-center max-w-xl
mx-auto">
<h1 class="text-5xl font-extrabold mb-4 text-purple-800">Welcome to NexaHub</h1>
<p class="text-2xl mb-6 text-gray-700">Your all-in-one platform for games, apps, creativity,
and more.</p>
<p class="text-xl italic font-semibold text-gray-900">CEO: <span
class="text-purple-700">KV Adwait</span></p>
</div>
<!-- Navigation -->
<div class="flex justify-center gap-4 mb-6 flex-wrap">
<button onclick="toggleSection('games')" class="bg-indigo-700 hover:bg-indigo-900
text-white px-5 py-3 rounded-lg transition">Games</button>
<button onclick="toggleSection('utilities')" class="bg-green-600 hover:bg-green-800
text-white px-5 py-3 rounded-lg transition">Utilities</button>
<button onclick="toggleSection('custom')" class="bg-purple-700 hover:bg-purple-900
text-white px-5 py-3 rounded-lg transition">Create Your App</button>
<button onclick="toggleSection('creative')" class="bg-pink-600 hover:bg-pink-800 text-white
px-5 py-3 rounded-lg transition">Creative Studio</button>
<button onclick="toggleSection('funzones')" class="bg-yellow-600 hover:bg-yellow-800
text-white px-5 py-3 rounded-lg transition">Fun Zones</button>
<button onclick="tryOwnerLogin()" class="bg-red-600 hover:bg-red-800 text-white px-5 py-3
rounded-lg transition">Owner Dashboard</button>
</div>
<!-- Games Section -->
<div id="games" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<a href="[Link] target="_blank" class="bg-white p-4 rounded-xl shadow
hover:shadow-lg transition">
<h2 class="text-xl font-semibold mb-2"> 🐍 Play Snake</h2>
<p>Classic snake game in your browser.</p>
</a>
<div class="bg-white p-4 rounded-xl shadow hover:shadow-lg transition col-span-full">
<h2 class="text-xl font-semibold mb-2"> 🧱 Tetris (Embedded)</h2>
<iframe src="[Link] width="100%" height="400"
class="rounded"></iframe>
</div>
</div>
<!-- Utilities Section -->
<div id="utilities" class="hidden grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mt-6">
<div class="bg-white p-4 rounded-xl shadow hover:shadow-lg transition">
<h2 class="text-xl font-semibold mb-2"> 🧮 Calculator</h2>
<input id="calc" class="border p-2 w-full mb-2 rounded" placeholder="Enter expression
(e.g. 2+2)" />
<button onclick="calculate()" class="bg-indigo-700 text-white px-3 py-1 rounded
hover:bg-indigo-900 transition">Calculate</button>
<p id="calcResult" class="mt-2 font-bold"></p>
</div>
<div class="bg-white p-4 rounded-xl shadow hover:shadow-lg transition">
<h2 class="text-xl font-semibold mb-2"> 📝 Notes</h2>
<textarea id="notes" class="w-full border p-2 rounded" rows="4" placeholder="Write your
notes..."></textarea>
<button onclick="saveNotes()" class="mt-2 bg-green-600 text-white px-3 py-1 rounded
hover:bg-green-800 transition">Save</button>
</div>
<div class="bg-white p-4 rounded-xl shadow hover:shadow-lg transition">
<h2 class="text-xl font-semibold mb-2"> 🌤️ Weather (Demo)</h2>
<p>Use a weather API here to show real-time weather based on user location.</p>
</div>
</div>
<!-- Custom App Creator Section -->
<div id="custom" class="hidden mt-6 max-w-4xl mx-auto">
<div class="bg-white p-6 rounded-xl shadow">
<h2 class="text-2xl font-bold mb-4">🔧 Create Your Own App</h2>
<textarea id="customAppCode" class="w-full border p-2 mb-4 rounded" rows="6"
placeholder="Write simple HTML or JavaScript code here..."></textarea>
<button onclick="renderCustomApp()" class="bg-purple-700 text-white px-4 py-2 rounded
hover:bg-purple-900 transition">Render App</button>
<div id="customAppPreview" class="mt-4 border p-4 rounded bg-gray-50
min-h-[200px]"></div>
</div>
</div>
<!-- Creative Studio Section -->
<div id="creative" class="hidden mt-6 max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3
gap-6">
<!-- Invitation Creator -->
<div class="bg-white p-4 rounded-xl shadow hover:shadow-lg transition">
<h2 class="text-xl font-semibold mb-2">🎉 Invitation Creator</h2>
<textarea id="invitationText" class="w-full border p-2 rounded mb-2" rows="5"
placeholder="Write your invitation text here..."></textarea>
<button onclick="generateInvitation()" class="bg-pink-600 text-white px-3 py-1 rounded
hover:bg-pink-800 transition">Generate</button>
<div id="invitationPreview" class="mt-2 p-2 border rounded bg-gray-50
min-h-[100px]"></div>
</div>
<!-- Presentation Creator -->
<div class="bg-white p-4 rounded-xl shadow hover:shadow-lg transition">
<h2 class="text-xl font-semibold mb-2">📊 Presentation Creator</h2>
<textarea id="presentationText" class="w-full border p-2 rounded mb-2" rows="5"
placeholder="Write your presentation notes here..."></textarea>
<button onclick="generatePresentation()" class="bg-pink-600 text-white px-3 py-1 rounded
hover:bg-pink-800 transition">Generate</button>
<div id="presentationPreview" class="mt-2 p-2 border rounded bg-gray-50
min-h-[100px]"></div>
</div>
<!-- Poster Creator -->
<div class="bg-white p-4 rounded-xl shadow hover:shadow-lg transition">
<h2 class="text-xl font-semibold mb-2">🖼️ Poster Creator</h2>
<textarea id="posterText" class="w-full border p-2 rounded mb-2" rows="5"
placeholder="Write your poster text here..."></textarea>
<button onclick="generatePoster()" class="bg-pink-600 text-white px-3 py-1 rounded
hover:bg-pink-800 transition">Generate</button>
<div id="posterPreview" class="mt-2 p-2 border rounded bg-gray-50 min-h-[100px]"></div>
</div>
</div>
<!-- Fun Zones Section -->
<div id="funzones" class="hidden mt-6 max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3
gap-6">
<!-- Drawing Section -->
<div class="bg-white p-4 rounded-xl shadow hover:shadow-lg transition">
<h2 class="text-xl font-semibold mb-2"> 🎨 Drawing Pad</h2>
<canvas id="drawingCanvas" width="300" height="200" class="border rounded
w-full"></canvas>
<button onclick="clearCanvas()" class="mt-2 bg-blue-600 text-white px-3 py-1 rounded
hover:bg-blue-800 transition">Clear</button>
</div>
<!-- Joke Creator -->
<div class="bg-white p-4 rounded-xl shadow hover:shadow-lg transition">
<h2 class="text-xl font-semibold mb-2"> 😂 Joke Creator</h2>
<textarea id="jokeInput" class="w-full border p-2 rounded mb-2" rows="3"
placeholder="Write a joke setup here..."></textarea>
<button onclick="createJoke()" class="bg-yellow-600 text-white px-3 py-1 rounded
hover:bg-yellow-800 transition">Create Joke</button>
<div id="jokeOutput" class="mt-2 p-2 border rounded bg-gray-50 min-h-[50px]"></div>
</div>
<!-- Quiz Builder -->
<div class="bg-white p-4 rounded-xl shadow hover:shadow-lg transition">
<h2 class="text-xl font-semibold mb-2"> 📝 Quiz Builder</h2>
<textarea id="quizInput" class="w-full border p-2 rounded mb-2" rows="4"
placeholder="Write question and answers in format: Q?|A1|A2|A3|CorrectAnswer"></textarea>
<button onclick="buildQuiz()" class="bg-green-600 text-white px-3 py-1 rounded
hover:bg-green-800 transition">Build Quiz</button>
<div id="quizOutput" class="mt-2 p-2 border rounded bg-gray-50 min-h-[150px]
overflow-auto"></div>
</div>
</div>
<!-- Owner Dashboard -->
<div id="owner" class="hidden mt-6 max-w-4xl mx-auto p-6 bg-white rounded-xl shadow-lg">
<h2 class="text-3xl font-bold mb-4 text-red-600">Owner Dashboard</h2>
<p><strong>Active Users:</strong> <span id="activeUsers">0</span></p>
<p><strong>System Logs:</strong></p>
<textarea id="systemLogs" class="w-full h-48 border p-2 rounded mt-2"
readonly></textarea>
</div>
</div>
<script>
// Render Custom App
function renderCustomApp() {
const code = [Link]('customAppCode').value;
// Sanitize basic script tags to prevent XSS
const sanitizedCode = [Link](/<script.*?>.*?<\/script>/gi, '');
[Link]('customAppPreview').innerHTML = sanitizedCode;
}
// Invitation Generator
function generateInvitation() {
const text = [Link]('invitationText').value;
[Link]('invitationPreview').textContent = ` 🎉 Invitation:\n${text}`;
}
// Presentation Generator
function generatePresentation() {
const text = [Link]('presentationText').value;
[Link]('presentationPreview').textContent = ` 📊 Presentation
Notes:\n${text}`;
// Poster Generator
function generatePoster() {
const text = [Link]('posterText').value;
[Link]('posterPreview').textContent = ` 🖼️ Poster Content:\n${text}`;
}
// Drawing Pad Logic
const canvas = [Link]('drawingCanvas');
const ctx = canvas ? [Link]('2d') : null;
let drawing = false;
function startDraw(e) {
drawing = true;
[Link]();
[Link]([Link], [Link]);
}
function draw(e) {
if (!drawing) return;
[Link]([Link], [Link]);
[Link]();
function endDraw() {
drawing = false;
function clearCanvas() {
if(ctx) {
[Link](0, 0, [Link], [Link]);
if (canvas) {
[Link]('mousedown', startDraw);
[Link]('mousemove', draw);
[Link]('mouseup', endDraw);
[Link]('mouseleave', endDraw);
[Link] = 2;
[Link] = '#4f46e5'; // Indigo color
// Joke Creator Logic
function createJoke() {
const input = [Link]('jokeInput').[Link]();
if(!input) {
[Link]('jokeOutput').textContent = 'Please write a joke setup.';
return;
// Simple canned punchline example
const punchlines = [
"Why did the scarecrow win an award? Because he was outstanding in his field!",
"I'm reading a book on anti-gravity. It's impossible to put down!",
"Why don’t scientists trust atoms? Because they make up everything!"
];
const punchline = punchlines[[Link]([Link]() * [Link])];
[Link]('jokeOutput').textContent = `${input}\n\nPunchline: ${punchline}`;
// Quiz Builder Logic
function buildQuiz() {
const input = [Link]('quizInput').[Link]();
if(!input) {
[Link]('quizOutput').textContent = 'Please enter quiz data.';
return;
// Parse each line of quiz: Q?|A1|A2|A3|CorrectAnswer
const lines = [Link]('\n');
let html = '';
[Link]((line, index) => {
const parts = [Link]('|');
if([Link] < 5) return;
const [question, ...answers] = parts;
const correctAnswer = [Link]();
html += `<div class="mb-4 border-b pb-2">`;
html += `<p class="font-semibold">${index+1}. ${question}</p>`;
[Link]((ans, i) => {
html += `<label class="block">
<input type="radio" name="q${index}" value="${ans}" /> ${ans}
</label>`;
});
html += `</div>`;
});
html += `<button onclick="checkQuizAnswers()" class="bg-green-700 text-white px-4 py-2
rounded hover:bg-green-900 transition">Submit Answers</button>`;
[Link]('quizOutput').innerHTML = html;
// Store correct answers for checking
[Link] = [Link](line => {
const parts = [Link]('|');
return [Link] >= 5 ? parts[[Link] - 1] : null;
});
function checkQuizAnswers() {
let score = 0;
const total = [Link];
for(let i=0; i<total; i++) {
const selected = [Link](`input[name="q${i}"]:checked`);
if(selected && [Link] === [Link][i]) {
score++;
alert(`You scored ${score} out of ${total}`);
</script>
</body>
</html>
Code-2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZYPHERONHUB</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #1e3c72, #2a5298);
color: #fff;
margin: 0;
padding: 0;
.container {
padding: 20px;
textarea, input, button {
margin: 10px 0;
width: 100%;
padding: 10px;
border-radius: 5px;
border: none;
font-size: 16px;
canvas {
border: 2px solid #fff;
background: #fff;
display: block;
margin-top: 20px;
</style>
</head>
<body>
<div class="container">
<h1>ZYPHERONHUB</h1>
<!-- Notes -->
<h2>Notes</h2>
<textarea id="notesArea" rows="5" placeholder="Write your notes here..."></textarea>
<button onclick="saveNotes()">Save Notes</button>
<div id="notesSaved"></div>
<!-- Weather -->
<h2>Weather</h2>
<input type="text" id="weatherCity" placeholder="Enter city">
<button onclick="fetchWeather()">Get Weather</button>
<div id="weatherResult"></div>
<!-- Drawing -->
<h2>Drawing</h2>
<input type="color" id="colorPicker">
<input type="range" id="brushSize" min="1" max="20">
<canvas id="drawingCanvas" width="500" height="300"></canvas>
<button onclick="clearCanvas()">Clear Canvas</button>
<!-- Joke Creator -->
<h2>Joke Creator</h2>
<input type="text" id="jokeInput" placeholder="Enter a topic">
<button onclick="generateJoke()">Generate Joke</button>
<div id="jokeOutput"></div>
<!-- Quiz Builder -->
<h2>Quiz Builder</h2>
<textarea id="quizInput" rows="4" placeholder="Enter questions in format:
Question;Answer"></textarea>
<button onclick="buildQuiz()">Build Quiz</button>
<div id="quizContainer"></div>
<!-- Music Player -->
<h2>Music Player</h2>
<div id="currentSong"></div>
<audio id="audioPlayer" controls></audio>
<button onclick="prevSong()">Previous</button>
<button onclick="playPauseSong()">Play/Pause</button>
<button onclick="nextSong()">Next</button>
<!-- App Builder -->
<h2>App Builder</h2>
<textarea id="appHTML" rows="4" placeholder="HTML"></textarea>
<textarea id="appCSS" rows="4" placeholder="CSS"></textarea>
<textarea id="appJS" rows="4" placeholder="JavaScript"></textarea>
<button onclick="runApp()">Run App</button>
<iframe id="appOutput" style="width:100%; height:300px;"></iframe>
<!-- AI Help -->
<h2>Ask AI</h2>
<input type="text" id="aiQuery" placeholder="Ask something...">
<button onclick="askAI()">Ask</button>
<div id="aiResponse"></div>
<!-- Owner Login -->
<h2>Owner's Dashboard</h2>
<input type="password" id="ownerPassword" placeholder="Enter Owner Password">
<button onclick="checkOwnerPassword()">Login</button>
<div id="ownerError"></div>
<div id="ownerContent" style="display:none;">
<p>Welcome, CEO KVR! System secure.</p>
</div>
<!-- Subscription -->
<h2>Membership</h2>
<button onclick="subscribe()">Subscribe to Premium</button>
<div id="subscriptionMsg"></div>
</div>
<script>
// Notes
function saveNotes() {
const notes = [Link]('notesArea').value;
[Link]('userNotes', notes);
[Link]('notesSaved').textContent = 'Notes saved!';
setTimeout(() => {
[Link]('notesSaved').textContent = '';
}, 2000);
// Weather
async function fetchWeather() {
const city = [Link]('weatherCity').value;
const result = [Link]('weatherResult');
[Link] = 'Loading...';
try {
const res = await fetch(`[Link]
const data = await [Link]();
[Link] = data;
} catch {
[Link] = 'Error fetching weather.';
// Drawing
const canvas = [Link]('drawingCanvas');
const ctx = [Link]('2d');
let painting = false;
function startPosition(e) {
painting = true;
draw(e);
function endPosition() {
painting = false;
[Link]();
function draw(e) {
if (!painting) return;
const rect = [Link]();
[Link] = [Link]('brushSize').value;
[Link] = 'round';
[Link] = [Link]('colorPicker').value;
[Link]([Link] - [Link], [Link] - [Link]);
[Link]();
[Link]();
[Link]([Link] - [Link], [Link] - [Link]);
[Link]('mousedown', startPosition);
[Link]('mouseup', endPosition);
[Link]('mousemove', draw);
[Link]('mouseleave', endPosition);
function clearCanvas() {
[Link](0, 0, [Link], [Link]);
// Joke Creator
function generateJoke() {
const input = [Link]('jokeInput').[Link]();
const output = [Link]('jokeOutput');
if (!input) {
[Link] = "Please write something to joke about!";
return;
}
const jokes = [
`Why did the ${input} cross the road? To get to the pun side!`,
`I asked my ${input} if it knew any jokes, but it just sat there quietly.`,
`When life gives you ${input}, make a comedy show!`
];
[Link] = jokes[[Link]([Link]() * [Link])];
// Quiz Builder
function buildQuiz() {
const input = [Link]('quizInput').[Link]();
const container = [Link]('quizContainer');
[Link] = '';
const questions = [Link]('\n').filter(q => [Link](';'));
if (![Link]) {
[Link] = '<p style="color:red">No valid questions found.</p>';
return;
[Link]((q, index) => {
const [question, answer] = [Link](';');
const div = [Link]('div');
[Link] = `
<p><strong>${question}</strong></p>
<input type="text" placeholder="Your answer">
<p style="color:green; display:none">Correct answer: ${answer}</p>
`;
const inputField = [Link]('input');
const answerPara = [Link]('p:last-child');
[Link]('blur', (e) => {
if ([Link]().toLowerCase() === [Link]().toLowerCase()) {
[Link] = 'green';
} else {
[Link] = 'red';
[Link] = 'block';
});
[Link](div);
});
// Music
const songs = [
{ title: "KVR Beats - Dawn", url:
"[Link] },
{ title: "KVR Beats - Nightfall", url:
"[Link] }
];
let currentSongIndex = 0;
const audio = [Link]('audioPlayer');
const songTitle = [Link]('currentSong');
function loadSong(index) {
const song = songs[index];
[Link] = [Link];
[Link] = `Now Playing: ${[Link]}`;
function playPauseSong() {
if ([Link]) [Link](); else [Link]();
function prevSong() {
currentSongIndex = (currentSongIndex - 1 + [Link]) % [Link];
loadSong(currentSongIndex);
[Link]();
function nextSong() {
currentSongIndex = (currentSongIndex + 1) % [Link];
loadSong(currentSongIndex);
[Link]();
// App Runner
function runApp() {
const html = [Link]('appHTML').value;
const css = `<style>${[Link]('appCSS').value}</style>`;
const js = `<script>${[Link]('appJS').value}</script>`;
[Link]('appOutput').srcdoc = html + css + js;
}
// Ask AI
function askAI() {
const query = [Link]('aiQuery').[Link]();
const response = [Link]('aiResponse');
if (!query) {
[Link] = 'Please describe your problem for help.';
return;
[Link] = 'KVR AI: Sorry, AI backend is under development.';
// Owner Login
function checkOwnerPassword() {
const pass = [Link]('ownerPassword').value;
if (pass === 'kvradmin2025') {
[Link]('ownerContent').[Link] = 'block';
[Link]('ownerError').textContent = '';
} else {
[Link]('ownerError').textContent = 'Incorrect password.';
[Link]('ownerContent').[Link] = 'none';
// Membership
function subscribe() {
[Link]('subscriptionMsg').textContent = ' 🎉 Thank you for subscribing to
ZYPHERONHUB Premium!';
}
// Initialize
[Link]('DOMContentLoaded', () => {
[Link]('notesArea').value = [Link]('userNotes') || '';
loadSong(currentSongIndex);
});
</script>
</body>
</html>