|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Cyber Terminal v2.0 - Imran Sarwar</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
|
|
|
|
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<canvas id="matrix" class="matrix-background"></canvas> |
|
|
|
|
|
<div class="terminal-container"> |
|
|
<div class="terminal-header"> |
|
|
<div class="terminal-buttons"> |
|
|
<div class="terminal-button red" onclick="minimizeTerminal()"></div> |
|
|
<div class="terminal-button yellow" onclick="maximizeTerminal()"></div> |
|
|
<div class="terminal-button green" onclick="closeTerminal()"></div> |
|
|
</div> |
|
|
<div class="glitch" data-text="root@ennovative:~">root@ennovative:~</div> |
|
|
<div class="terminal-buttons"> |
|
|
<i class="fas fa-lock-open hacker-icon" id="security-icon"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="terminal-body" id="terminal-body"> |
|
|
<div id="typing-text" class="typing-text"></div> |
|
|
<div id="command-line" class="command-line hidden"> |
|
|
<span class="prompt">></span> |
|
|
<input type="text" class="command-input" id="command-input" autocomplete="off" spellcheck="false"> |
|
|
<span class="cursor"></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
// [Previous Matrix effect code remains unchanged - omitted for brevity] |
|
|
|
|
|
const terminalText = document.getElementById('typing-text'); |
|
|
const commandLine = document.getElementById('command-line'); |
|
|
const commandInput = document.getElementById('command-input'); |
|
|
const securityIcon = document.getElementById('security-icon'); |
|
|
|
|
|
const messages = [ |
|
|
{ text: "Booting CYBERNODE v2.0...", delay: 50 }, |
|
|
{ text: "Initializing secure Salesforce connection...", delay: 50 }, |
|
|
{ text: "██████████████ 100%", delay: 30, style: "color: #0ff" }, |
|
|
{ text: "\n", delay: 200 }, |
|
|
{ text: "> Authentication sequence complete", delay: 10, style: "color: #0f0; font-weight: bold" }, |
|
|
{ text: "\n\n", delay: 100 }, |
|
|
{ text: ">> SYSTEM USER PROFILE <<", delay: 10, style: "color: #b19cd9; text-decoration: underline" }, |
|
|
{ text: "\n", delay: 100 }, |
|
|
{ text: "> NAME: ", delay: 20 }, |
|
|
{ text: "Imran Sarwar", delay: 100, style: "color: #0ff; font-weight: bold" }, |
|
|
{ text: "\n", delay: 50 }, |
|
|
{ text: "> TITLE: ", delay: 20 }, |
|
|
{ text: "Senior Business Analyst & Salesforce Solution Architect", delay: 50, style: "color: #0ff" }, |
|
|
{ text: "\n", delay: 50 }, |
|
|
{ text: "> ORGANIZATION: ", delay: 20 }, |
|
|
{ text: "Ennovative Pty Ltd", delay: 70, style: "color: #f44" }, |
|
|
{ text: "\n", delay: 50 }, |
|
|
{ text: "> STATUS: ", delay: 20 }, |
|
|
{ text: "ACTIVE // AI-ENHANCED CRM SPECIALIST", delay: 50, style: "color: #0f0" }, |
|
|
{ text: "\n\n", delay: 100 }, |
|
|
{ text: ">> SKILL MATRIX <<", delay: 10, style: "color: #b19cd9; text-decoration: underline" }, |
|
|
{ text: "\n", delay: 100 }, |
|
|
{ text: "> Salesforce Architecture: ", delay: 20 }, |
|
|
{ text: "██████████ 98%", delay: 30, style: "color: #0ff" }, |
|
|
{ text: "\n", delay: 50 }, |
|
|
{ text: "> Business Analysis: ", delay: 20 }, |
|
|
{ text: "██████████ 95%", delay: 30, style: "color: #0ff" }, |
|
|
{ text: "\n", delay: 50 }, |
|
|
{ text: "> AI Integration: ", delay: 20 }, |
|
|
{ text: "████████▉ 90%", delay: 30, style: "color: #0ff" }, |
|
|
{ text: "\n", delay: 50 }, |
|
|
{ text: "> Public Sector Solutions: ", delay: 20 }, |
|
|
{ text: "████████▊ 88%", delay: 30, style: "color: #0ff" }, |
|
|
{ text: "\n", delay: 50 }, |
|
|
{ text: "> Data Management: ", delay: 20 }, |
|
|
{ text: "███████▍ 85%", delay: 30, style: "color: #0ff" }, |
|
|
{ text: "\n\n", delay: 100 }, |
|
|
{ text: ">> PROJECT HISTORY <<", delay: 10, style: "color: #b19cd9; text-decoration: underline" }, |
|
|
{ text: "\n", delay: 100 }, |
|
|
{ text: "> [2023] Wollondilly Shire - CFSuite Implementation", delay: 30 }, |
|
|
{ text: "\n", delay: 50 }, |
|
|
{ text: "> [2022] City of Marion - Hard Waste Booking System", delay: 30 }, |
|
|
{ text: "\n", delay: 50 }, |
|
|
{ text: "> [2017] City of Tea Tree Gully - Award-Winning Portal", delay: 30 }, |
|
|
{ text: "\n\n", delay: 100 }, |
|
|
{ text: ">> CONTACT CHANNELS <<", delay: 10, style: "color: #b19cd9; text-decoration: underline" }, |
|
|
{ text: "\n", delay: 100 }, |
|
|
{ text: "> EMAIL: ", delay: 20 }, |
|
|
{ text: "[email protected]", delay: 30, style: "color: #0ff" }, |
|
|
{ text: "\n\n", delay: 100 }, |
|
|
{ text: "> Type 'help' for available commands", delay: 30, style: "color: #0f0" }, |
|
|
{ text: "\n", delay: 50 }, |
|
|
]; |
|
|
|
|
|
let currentMessageIndex = 0; |
|
|
let currentCharIndex = 0; |
|
|
let isTyping = true; |
|
|
let commandHistory = []; |
|
|
let historyIndex = -1; |
|
|
let secretMode = false; |
|
|
|
|
|
function typeNextCharacter() { |
|
|
if (currentMessageIndex >= messages.length) { |
|
|
isTyping = false; |
|
|
commandLine.classList.remove('hidden'); |
|
|
commandInput.focus(); |
|
|
return; |
|
|
} |
|
|
|
|
|
const currentMessage = messages[currentMessageIndex]; |
|
|
const textToType = currentMessage.text; |
|
|
|
|
|
if (currentCharIndex < textToType.length) { |
|
|
const char = textToType.charAt(currentCharIndex); |
|
|
const span = document.createElement('span'); |
|
|
span.textContent = char; |
|
|
|
|
|
if (currentMessage.style) { |
|
|
span.style = currentMessage.style; |
|
|
} |
|
|
|
|
|
terminalText.appendChild(span); |
|
|
currentCharIndex++; |
|
|
|
|
|
setTimeout(typeNextCharacter, currentMessage.delay); |
|
|
} else { |
|
|
currentMessageIndex++; |
|
|
currentCharIndex = 0; |
|
|
setTimeout(typeNextCharacter, 100); |
|
|
} |
|
|
} |
|
|
|
|
|
function processCommand(command) { |
|
|
if (command.trim() !== '') { |
|
|
commandHistory.unshift(command); |
|
|
historyIndex = -1; |
|
|
} |
|
|
|
|
|
terminalText.appendChild(document.createElement('br')); |
|
|
|
|
|
const prompt = document.createElement('span'); |
|
|
prompt.textContent = '> '; |
|
|
prompt.style.color = '#0f0'; |
|
|
terminalText.appendChild(prompt); |
|
|
|
|
|
const cmdText = document.createElement('span'); |
|
|
cmdText.textContent = command; |
|
|
cmdText.style.color = '#e0e0e0'; |
|
|
terminalText.appendChild(cmdText); |
|
|
|
|
|
terminalText.appendChild(document.createElement('br')); |
|
|
|
|
|
const response = document.createElement('div'); |
|
|
response.style.marginTop = '10px'; |
|
|
|
|
|
command = command.toLowerCase().trim(); |
|
|
|
|
|
if (command === 'help') { |
|
|
response.innerHTML = `Available commands:<br><br> |
|
|
<div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">about</span>: Show detailed profile</div> |
|
|
<div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">skills</span>: List technical skills</div> |
|
|
<div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">contact</span>: Show contact information</div> |
|
|
<div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">projects</span>: List key projects</div> |
|
|
<div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">clear</span>: Clear the terminal</div> |
|
|
<div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">secret</span>: Enable secret mode</div> |
|
|
<div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">exit</span>: Close terminal (simulated)</div>`; |
|
|
} |
|
|
else if (command === 'about') { |
|
|
response.innerHTML = `// SYSTEM USER PROFILE //<br><br> |
|
|
<i class="fas fa-user-secret hacker-icon"></i> <span class="highlight">Imran Sarwar</span> is a visionary Digital Transformation Consultant with:<br> |
|
|
- 14+ years of IT expertise<br> |
|
|
- 13+ years as ICT Business Analyst<br> |
|
|
- Salesforce Solution Architect specialist<br> |
|
|
- AI-enhanced public sector solutions<br><br> |
|
|
Currently driving innovation at Ennovative Pty Ltd since 2012, revolutionizing local government operations across Australia.`; |
|
|
} |
|
|
else if (command === 'skills') { |
|
|
response.innerHTML = `>> TECHNICAL PROWESS <<<br><br> |
|
|
<div class="skill-bar"><i class="fas fa-code hacker-icon"></i> <span class="skill-name">Salesforce:</span> <span class="skill-level" style="width: 98%"></span></div> |
|
|
<div class="skill-bar"><i class="fas fa-shield-alt hacker-icon"></i> <span class="skill-name">Business Analysis:</span> <span class="skill-level" style="width: 95%"></span></div> |
|
|
<div class="skill-bar"><i class="fas fa-network-wired hacker-icon"></i> <span class="skill-name">AI Integration:</span> <span class="skill-level" style="width: 90%"></span></div> |
|
|
<div class="skill-bar"><i class="fas fa-brain hacker-icon"></i> <span class="skill-name">Solution Design:</span> <span class="skill-level" style="width: 88%"></span></div> |
|
|
<div class="skill-bar"><i class="fas fa-database hacker-icon"></i> <span class="skill-name">Data Migration:</span> <span class="skill-level" style="width: 85%"></span></div>`; |
|
|
} |
|
|
else if (command === 'contact') { |
|
|
response.innerHTML = `>> SECURE CONTACT CHANNELS <<<br><br> |
|
|
<div class="contact-item"><i class="fas fa-envelope hacker-icon"></i> Email: <a href="mailto:[email protected]">[email protected]</a></div>`; |
|
|
} |
|
|
else if (command === 'projects') { |
|
|
response.innerHTML = `>> KEY PROJECTS <<<br><br> |
|
|
<div class="contact-item"><i class="fas fa-city hacker-icon"></i> <span class="highlight">Wollondilly Shire</span> - 30% faster request processing</div> |
|
|
<div class="contact-item"><i class="fas fa-trash hacker-icon"></i> <span class="highlight">City of Marion</span> - Hard Waste Booking system</div> |
|
|
<div class="contact-item"><i class="fas fa-award hacker-icon"></i> <span class="highlight">Tea Tree Gully</span> - GOV Design Award 2017</div> |
|
|
<div class="contact-item"><i class="fas fa-bolt hacker-icon"></i> <span class="highlight">Virtual Power Plant SA</span> - State government portal</div>`; |
|
|
} |
|
|
else if (command === 'clear') { |
|
|
terminalText.innerHTML = ''; |
|
|
commandInput.value = ''; |
|
|
return; |
|
|
} |
|
|
else if (command === 'secret') { |
|
|
secretMode = !secretMode; |
|
|
if (secretMode) { |
|
|
response.innerHTML = `<span class="secret-mode">SECRET MODE ACTIVATED</span><br><br> |
|
|
<i class="fas fa-user-secret hacker-icon"></i> AI Initiatives Unlocked:<br> |
|
|
<i class="fas fa-brain hacker-icon"></i> MoodLens: Sentiment Analysis<br> |
|
|
<i class="fas fa-shield-alt hacker-icon"></i> Abuse Detector: Content Filter<br> |
|
|
<i class="fas fa-robot hacker-icon"></i> CouncilCaseClassifier: Case Routing`; |
|
|
securityIcon.className = 'fas fa-lock hacker-icon'; |
|
|
document.body.style.background = '#000a0a'; |
|
|
} else { |
|
|
response.innerHTML = `<span style="color: #0f0">SECRET MODE DEACTIVATED</span>`; |
|
|
securityIcon.className = 'fas fa-lock-open hacker-icon'; |
|
|
document.body.style.background = '#000'; |
|
|
} |
|
|
} |
|
|
else if (command === 'exit') { |
|
|
response.innerHTML = `<span class="system-alert"><i class="fas fa-exclamation-triangle hacker-icon"></i> Access Denied: Terminal session persists.</span>`; |
|
|
} |
|
|
else { |
|
|
response.innerHTML = `<span style="color: #f44"><i class="fas fa-exclamation-circle hacker-icon"></i> Command not found: ${command}</span><br> |
|
|
Type <span class="highlight">'help'</span> for available commands.`; |
|
|
} |
|
|
|
|
|
terminalText.appendChild(response); |
|
|
terminalText.appendChild(document.createElement('br')); |
|
|
commandLine.scrollIntoView(); |
|
|
} |
|
|
|
|
|
// [Previous terminal window controls and command history code remains unchanged - omitted for brevity] |
|
|
|
|
|
window.addEventListener('load', function() { |
|
|
draw(); |
|
|
typeNextCharacter(); |
|
|
|
|
|
console.log('%c Try "secret" for hidden AI projects!', 'color: #0f0; font-family: monospace; font-size: 14px;'); |
|
|
}); |
|
|
|
|
|
window.addEventListener('resize', function() { |
|
|
canvas.width = window.innerWidth; |
|
|
canvas.height = window.innerHeight; |
|
|
}); |
|
|
</script> |
|
|
</html> |
