Localhost Credentials Format
📦 Server
✨ The Prompt Phrase
=== DATABASE CREDENTIALS (Localhost (Laragon)) === Environment: localhost Type: MYSQL Host: 127.0.0.1 Port: 3306 Database: bunny Username: root Password: (empty) Charset: utf8mb4
💻 Code Preview
📦 All-in-One Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Database Credentials - Interactive Tutorial</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--bg-primary: #0a0a1a;
--bg-secondary: #12122a;
--bg-card: rgba(255, 255, 255, 0.05);
--bg-glass: rgba(255, 255, 255, 0.08);
--text-primary: #ffffff;
--text-secondary: #b4b4c7;
--accent-purple: #8b5cf6;
--accent-blue: #3b82f6;
--accent-cyan: #06b6d4;
--accent-green: #10b981;
--accent-pink: #ec4899;
--accent-orange: #f59e0b;
--gradient-primary: linear-gradient(135deg, #8b5cf6, #3b82f6, #06b6d4);
--gradient-success: linear-gradient(135deg, #10b981, #06b6d4);
--shadow-glow: 0 0 40px rgba(139, 92, 246, 0.3);
--border-radius: 16px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.7; overflow-x: hidden; }
.bg-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }
.bg-animation span { position: absolute; display: block; background: rgba(139, 92, 246, 0.1); animation: float 25s linear infinite; bottom: -150px; border-radius: 50%; }
.bg-animation span:nth-child(1) { left: 25%; width: 80px; height: 80px; }
.bg-animation span:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; }
.bg-animation span:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: 4s; }
.bg-animation span:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-duration: 18s; }
.bg-animation span:nth-child(5) { left: 65%; width: 20px; height: 20px; }
@keyframes float { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(-1000px) rotate(720deg); opacity: 0; } }
.progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: var(--bg-secondary); z-index: 1000; }
.progress-bar { height: 100%; background: var(--gradient-primary); width: 0%; transition: width 0.3s ease; }
.nav { position: fixed; top: 20px; right: 20px; z-index: 999; display: flex; gap: 10px; }
.nav-btn { background: var(--bg-glass); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-primary); padding: 10px 16px; border-radius: 50px; cursor: pointer; transition: var(--transition); font-size: 14px; }
.nav-btn:hover { background: var(--accent-purple); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3); }
.container { max-width: 900px; margin: 0 auto; padding: 20px; }
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px 20px; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-glass); backdrop-filter: blur(10px); padding: 8px 20px; border-radius: 50px; font-size: 14px; color: var(--accent-cyan); margin-bottom: 30px; animation: slideDown 0.8s ease; border: 1px solid rgba(6, 182, 212, 0.3); }
.hero-title { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 20px; animation: slideDown 0.8s ease 0.2s both; }
.hero-subtitle { font-size: 1.2rem; color: var(--text-secondary); max-width: 600px; margin-bottom: 40px; animation: slideDown 0.8s ease 0.4s both; }
.hero-code { background: var(--bg-secondary); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: var(--border-radius); padding: 30px; text-align: left; font-family: 'Fira Code', monospace; font-size: 0.9rem; line-height: 1.8; position: relative; animation: slideUp 0.8s ease 0.6s both; box-shadow: var(--shadow-glow); max-width: 100%; overflow-x: auto; }
.hero-code::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40px; background: rgba(0, 0, 0, 0.3); border-radius: var(--border-radius) var(--border-radius) 0 0; }
.hero-code .dots { position: absolute; top: 14px; left: 16px; display: flex; gap: 8px; }
.hero-code .dot { width: 12px; height: 12px; border-radius: 50%; }
.hero-code .dot:nth-child(1) { background: #ff5f56; }
.hero-code .dot:nth-child(2) { background: #ffbd2e; }
.hero-code .dot:nth-child(3) { background: #27ca40; }
.hero-code pre { margin-top: 20px; white-space: pre-wrap; word-break: break-word; }
.code-line { display: block; padding: 2px 0; }
.code-header { color: var(--accent-purple); font-weight: 600; }
.code-key { color: var(--accent-cyan); }
.code-value { color: var(--accent-green); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.section { padding: 80px 0; opacity: 0; transform: translateY(50px); transition: var(--transition); }
.section.visible { opacity: 1; transform: translateY(0); }
.section-header { text-align: center; margin-bottom: 50px; }
.section-icon { font-size: 3rem; margin-bottom: 20px; display: block; }
.section-title { font-size: 2rem; font-weight: 700; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 10px; }
.section-desc { color: var(--text-secondary); font-size: 1.1rem; }
.card { background: var(--bg-glass); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--border-radius); padding: 30px; margin-bottom: 20px; transition: var(--transition); }
.card:hover { transform: translateY(-5px); border-color: rgba(139, 92, 246, 0.5); box-shadow: var(--shadow-glow); }
.card-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.card-text { color: var(--text-secondary); line-height: 1.8; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.accordion { margin-bottom: 15px; }
.accordion-header { background: var(--bg-glass); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--border-radius); padding: 20px 25px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: var(--transition); font-weight: 500; }
.accordion-header:hover { border-color: var(--accent-purple); background: rgba(139, 92, 246, 0.1); }
.accordion-header.active { border-color: var(--accent-purple); border-radius: var(--border-radius) var(--border-radius) 0 0; }
.accordion-icon { font-size: 1.5rem; transition: var(--transition); }
.accordion-header.active .accordion-icon { transform: rotate(45deg); }
.accordion-content { background: var(--bg-secondary); border: 1px solid rgba(139, 92, 246, 0.3); border-top: none; border-radius: 0 0 var(--border-radius) var(--border-radius); padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; }
.accordion-content.open { padding: 25px; max-height: 1000px; }
.code-block { background: var(--bg-primary); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 12px; padding: 20px; position: relative; margin: 20px 0; overflow-x: auto; }
.code-block pre { font-family: 'Fira Code', monospace; font-size: 0.9rem; line-height: 1.8; margin: 0; }
.copy-btn { position: absolute; top: 10px; right: 10px; background: var(--accent-purple); border: none; color: white; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 500; transition: var(--transition); }
.copy-btn:hover { background: var(--accent-blue); transform: scale(1.05); }
.copy-btn.copied { background: var(--accent-green); }
.tooltip { position: relative; display: inline-block; border-bottom: 1px dashed var(--accent-cyan); cursor: help; }
.tooltip .tooltip-text { visibility: hidden; background: var(--bg-secondary); color: var(--text-primary); text-align: center; padding: 10px 15px; border-radius: 8px; position: absolute; z-index: 100; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: var(--transition); font-size: 0.85rem; min-width: 200px; border: 1px solid var(--accent-purple); }
.tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }
.tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.tab-btn { background: var(--bg-glass); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-secondary); padding: 12px 24px; border-radius: 50px; cursor: pointer; font-size: 14px; font-weight: 500; transition: var(--transition); }
.tab-btn:hover { border-color: var(--accent-purple); }
.tab-btn.active { background: var(--gradient-primary); color: white; border-color: transparent; }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.5s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.quiz-container { background: var(--bg-glass); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--border-radius); padding: 40px; }
.quiz-question { font-size: 1.2rem; font-weight: 600; margin-bottom: 25px; }
.quiz-options { display: flex; flex-direction: column; gap: 12px; }
.quiz-option { background: var(--bg-secondary); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 15px 20px; cursor: pointer; transition: var(--transition); font-size: 1rem; }
.quiz-option:hover { border-color: var(--accent-purple); background: rgba(139, 92, 246, 0.1); }
.quiz-option.correct { border-color: var(--accent-green); background: rgba(16, 185, 129, 0.2); }
.quiz-option.wrong { border-color: #ef4444; background: rgba(239, 68, 68, 0.2); }
.quiz-option.disabled { pointer-events: none; }
.quiz-progress { display: flex; gap: 8px; margin-bottom: 30px; }
.quiz-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transition: var(--transition); }
.quiz-dot.active { background: var(--accent-purple); box-shadow: 0 0 10px var(--accent-purple); }
.quiz-dot.completed { background: var(--accent-green); }
.quiz-result { text-align: center; padding: 40px; display: none; }
.quiz-result.show { display: block; animation: fadeIn 0.5s ease; }
.quiz-score { font-size: 4rem; font-weight: 800; background: var(--gradient-success); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.next-btn { background: var(--gradient-primary); border: none; color: white; padding: 15px 40px; border-radius: 50px; cursor: pointer; font-size: 1rem; font-weight: 600; margin-top: 25px; transition: var(--transition); display: none; }
.next-btn.show { display: inline-block; }
.next-btn:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(139, 92, 246, 0.4); }
.summary-card { background: var(--gradient-primary); border-radius: var(--border-radius); padding: 40px; position: relative; overflow: hidden; }
.summary-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 25px; }
.summary-content { display: grid; gap: 15px; }
.summary-item { display: flex; align-items: center; gap: 15px; background: rgba(255, 255, 255, 0.1); padding: 15px 20px; border-radius: 10px; flex-wrap: wrap; }
.summary-item code { background: rgba(0, 0, 0, 0.3); padding: 4px 10px; border-radius: 6px; font-family: 'Fira Code', monospace; font-size: 0.9rem; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 50px; font-size: 0.85rem; font-weight: 500; }
.badge-success { background: rgba(16, 185, 129, 0.2); color: var(--accent-green); border: 1px solid var(--accent-green); }
.badge-warning { background: rgba(245, 158, 11, 0.2); color: var(--accent-orange); border: 1px solid var(--accent-orange); }
.badge-danger { background: rgba(239, 68, 68, 0.2); color: #ef4444; border: 1px solid #ef4444; }
.tip-box { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(6, 182, 212, 0.1)); border-left: 4px solid var(--accent-green); border-radius: 0 12px 12px 0; padding: 20px 25px; margin: 20px 0; }
.tip-title { font-weight: 600; color: var(--accent-green); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.warning-box { background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(236, 72, 153, 0.1)); border-left: 4px solid #ef4444; border-radius: 0 12px 12px 0; padding: 20px 25px; margin: 20px 0; }
.warning-title { font-weight: 600; color: #ef4444; margin-bottom: 8px; }
.footer { text-align: center; padding: 60px 20px; background: var(--bg-secondary); margin-top: 60px; }
.footer-logo { font-size: 2rem; font-weight: 800; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 15px; }
.footer-text { color: var(--text-secondary); font-size: 0.95rem; }
.footer-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-glass); padding: 10px 20px; border-radius: 50px; margin-top: 20px; font-size: 0.9rem; border: 1px solid rgba(139, 92, 246, 0.3); }
.confetti { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; overflow: hidden; }
.confetti-piece { position: absolute; width: 10px; height: 20px; top: -20px; animation: confetti-fall 3s linear forwards; }
@keyframes confetti-fall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } }
.achievement { position: fixed; top: 100px; right: -400px; background: var(--bg-glass); backdrop-filter: blur(20px); border: 1px solid var(--accent-green); border-radius: var(--border-radius); padding: 20px 30px; display: flex; align-items: center; gap: 15px; z-index: 1001; transition: right 0.5s ease; box-shadow: 0 10px 40px rgba(16, 185, 129, 0.3); }
.achievement.show { right: 20px; }
.achievement-icon { font-size: 2.5rem; }
.achievement-text h4 { color: var(--accent-green); font-size: 0.9rem; margin-bottom: 4px; }
.achievement-text p { font-size: 1.1rem; font-weight: 600; }
@media (max-width: 768px) { .hero-title { font-size: 2rem; } .hero-code { padding: 20px; font-size: 0.8rem; } .section { padding: 50px 0; } .card { padding: 20px; } .quiz-container { padding: 25px; } .summary-card { padding: 25px; } .nav { top: 10px; right: 10px; } .nav-btn { padding: 8px 12px; font-size: 12px; } }
.scroll-indicator { position: absolute; bottom: 40px; animation: bounce 2s infinite; }
.scroll-indicator span { display: block; width: 30px; height: 50px; border: 2px solid var(--accent-purple); border-radius: 20px; position: relative; }
.scroll-indicator span::before { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 6px; height: 10px; background: var(--accent-purple); border-radius: 3px; animation: scroll 2s infinite; }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } }
@keyframes scroll { 0% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(15px); } }
</style>
</head>
<body>
<div class="bg-animation"><span></span><span></span><span></span><span></span><span></span></div>
<div class="progress-container"><div class="progress-bar" id="progressBar"></div></div>
<nav class="nav"><button class="nav-btn" onclick="scrollToTop()">🏠 Home</button><button class="nav-btn" onclick="document.getElementById('quiz').scrollIntoView({behavior: 'smooth'})">📝 Quiz</button></nav>
<div class="achievement" id="achievement"><span class="achievement-icon">🏆</span><div class="achievement-text"><h4>ACHIEVEMENT UNLOCKED!</h4><p id="achievementText">Welcome Explorer!</p></div></div>
<div class="confetti" id="confetti"></div>
<div class="container">
<section class="hero" id="hero">
<span class="hero-badge">🎓 Interactive Tutorial</span>
<h1 class="hero-title">Database Credentials Explained</h1>
<p class="hero-subtitle">Master the art of connecting to MySQL databases! Learn every detail of database connection configuration in a fun, interactive way.</p>
<div class="hero-code">
<div class="dots"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
<pre>
<span class="code-line code-header">=== DATABASE CREDENTIALS (Localhost (Laragon)) ===</span>
<span class="code-line"><span class="code-key">Environment:</span> <span class="code-value">localhost</span></span>
<span class="code-line"><span class="code-key">Type:</span> <span class="code-value">MYSQL</span></span>
<span class="code-line"><span class="code-key">Host:</span> <span class="code-value">127.0.0.1</span></span>
<span class="code-line"><span class="code-key">Port:</span> <span class="code-value">3306</span></span>
<span class="code-line"><span class="code-key">Database:</span> <span class="code-value">bunny</span></span>
<span class="code-line"><span class="code-key">Username:</span> <span class="code-value">root</span></span>
<span class="code-line"><span class="code-key">Password:</span> <span class="code-value">(empty)</span></span>
<span class="code-line"><span class="code-key">Charset:</span> <span class="code-value">utf8mb4</span></span>
</pre>
</div>
<div class="scroll-indicator"><span></span></div>
</section>
<section class="section" id="what">
<div class="section-header"><span class="section-icon">🤔</span><h2 class="section-title">What Is It?</h2><p class="section-desc">Understanding database credentials and their purpose</p></div>
<div class="card">
<h3 class="card-title">📋 Definition</h3>
<p class="card-text"><strong>Database credentials</strong> are like a <span class="tooltip">secret key<span class="tooltip-text">Just like how you need a key to open your house door, you need credentials to access a database!</span></span> to your data vault. They contain all the information your application needs to connect to and communicate with a database server.</p>
<br><p class="card-text">Think of it like calling a friend:</p>
<ul style="color: var(--text-secondary); padding-left: 20px; margin-top: 10px;">
<li>📍 <strong>Host</strong> = Their address (where they live)</li>
<li>📞 <strong>Port</strong> = Their phone number (how to reach them)</li>
<li>🗄️ <strong>Database</strong> = The specific room in their house</li>
<li>👤 <strong>Username</strong> = Who's calling (your identity)</li>
<li>🔐 <strong>Password</strong> = The secret handshake</li>
</ul>
</div>
<div class="tip-box"><div class="tip-title">💡 Fun Fact</div><p>Laragon is a portable, fast development environment for Windows that makes setting up local servers incredibly easy!</p></div>
</section>
<section class="section" id="why">
<div class="section-header"><span class="section-icon">🎯</span><h2 class="section-title">Why Use It?</h2><p class="section-desc">Benefits and use cases for database connections</p></div>
<div class="grid">
<div class="card"><h3 class="card-title">🚀 Local Development</h3><p class="card-text">Test your applications safely on your own computer without affecting real data.</p></div>
<div class="card"><h3 class="card-title">⚡ Fast Setup</h3><p class="card-text">Laragon provides pre-configured settings, so you don't need complex configurations.</p></div>
<div class="card"><h3 class="card-title">🔒 Isolation</h3><p class="card-text">Keep your development database separate from production. Make mistakes without consequences!</p></div>
<div class="card"><h3 class="card-title">🎓 Learning</h3><p class="card-text">Perfect environment to learn SQL and database design without risking real data.</p></div>
</div>
</section>
<section class="section" id="how">
<div class="section-header"><span class="section-icon">⚙️</span><h2 class="section-title">How Does It Work?</h2><p class="section-desc">Step-by-step breakdown of the connection process</p></div>
<div class="accordion"><div class="accordion-header" onclick="toggleAccordion(this)"><span>📍 Step 1: Locate the Host (127.0.0.1)</span><span class="accordion-icon">+</span></div><div class="accordion-content"><p>Your application first looks for the database server at <strong>127.0.0.1</strong> - this is the "loopback" address that always points to your own computer!</p></div></div>
<div class="accordion"><div class="accordion-header" onclick="toggleAccordion(this)"><span>📞 Step 2: Connect to Port 3306</span><span class="accordion-icon">+</span></div><div class="accordion-content"><p>Port <strong>3306</strong> is MySQL's default port. Think of ports like apartment numbers - this is where MySQL "lives" on your computer!</p></div></div>
<div class="accordion"><div class="accordion-header" onclick="toggleAccordion(this)"><span>🔐 Step 3: Authenticate with root</span><span class="accordion-icon">+</span></div><div class="accordion-content"><p>The <strong>root</strong> user is the administrator account with full privileges. In Laragon's local setup, the password is empty for convenience.</p><div class="warning-box"><div class="warning-title">⚠️ Security Warning</div><p>Never use empty passwords in production!</p></div></div></div>
<div class="accordion"><div class="accordion-header" onclick="toggleAccordion(this)"><span>🗄️ Step 4: Select Database "bunny"</span><span class="accordion-icon">+</span></div><div class="accordion-content"><p>Finally, select the <strong>bunny</strong> database with <strong>utf8mb4</strong> charset for full emoji support! 🎉</p></div></div>
</section>
<section class="section" id="demo">
<div class="section-header"><span class="section-icon">🎮</span><h2 class="section-title">Live Examples</h2><p class="section-desc">See how to use these credentials in different languages</p></div>
<div class="tabs">
<button class="tab-btn active" onclick="switchTab(event, 'php')">🐘 PHP</button>
<button class="tab-btn" onclick="switchTab(event, 'python')">🐍 Python</button>
<button class="tab-btn" onclick="switchTab(event, 'node')">💚 Node.js</button>
</div>
<div class="tab-content active" id="php"><div class="code-block"><button class="copy-btn" onclick="copyCode(this)">📋 Copy</button><pre style="color: var(--text-secondary)"><?php
$pdo = new PDO(
"mysql:host=127.0.0.1;port=3306;dbname=bunny;charset=utf8mb4",
"root",
""
);
echo "✅ Connected successfully!";</pre></div></div>
<div class="tab-content" id="python"><div class="code-block"><button class="copy-btn" onclick="copyCode(this)">📋 Copy</button><pre style="color: var(--text-secondary)">import mysql.connector
conn = mysql.connector.connect(
host="127.0.0.1",
port=3306,
database="bunny",
user="root",
password="",
charset="utf8mb4"
)
print("✅ Connected successfully!")</pre></div></div>
<div class="tab-content" id="node"><div class="code-block"><button class="copy-btn" onclick="copyCode(this)">📋 Copy</button><pre style="color: var(--text-secondary)">const mysql = require('mysql2');
const connection = mysql.createConnection({
host: '127.0.0.1',
port: 3306,
database: 'bunny',
user: 'root',
password: '',
charset: 'utf8mb4'
});
console.log('✅ Connected successfully!');</pre></div></div>
</section>
<section class="section" id="mistakes">
<div class="section-header"><span class="section-icon">🚫</span><h2 class="section-title">Common Mistakes</h2><p class="section-desc">What NOT to do with database credentials</p></div>
<div class="grid">
<div class="card" style="border-left: 4px solid #ef4444;"><h3 class="card-title">❌ Hardcoding in Public Repos</h3><p class="card-text">Never commit credentials in code. Use .env files!</p></div>
<div class="card" style="border-left: 4px solid #ef4444;"><h3 class="card-title">❌ Using root in Production</h3><p class="card-text">Create limited user accounts for production apps.</p></div>
<div class="card" style="border-left: 4px solid #ef4444;"><h3 class="card-title">❌ Empty Passwords Online</h3><p class="card-text">Only acceptable in isolated local environments!</p></div>
<div class="card" style="border-left: 4px solid #ef4444;"><h3 class="card-title">❌ Wrong Charset</h3><p class="card-text">Use utf8mb4 (not utf8) for emoji support!</p></div>
</div>
</section>
<section class="section" id="tips">
<div class="section-header"><span class="section-icon">💎</span><h2 class="section-title">Pro Tips</h2><p class="section-desc">Advanced tips from database experts</p></div>
<div class="tip-box"><div class="tip-title">🔥 Tip #1: Connection Pooling</div><p>Reuse connections instead of creating new ones for each request to improve performance!</p></div>
<div class="tip-box"><div class="tip-title">🔥 Tip #2: Prepared Statements</div><p>Always use prepared statements to protect against SQL injection attacks!</p></div>
<div class="tip-box"><div class="tip-title">🔥 Tip #3: Environment Variables</div><p>Store credentials in .env files and add them to .gitignore!</p></div>
</section>
<section class="section" id="quiz">
<div class="section-header"><span class="section-icon">📝</span><h2 class="section-title">Practice Quiz</h2><p class="section-desc">Test your knowledge!</p></div>
<div class="quiz-container">
<div class="quiz-progress"><div class="quiz-dot active"></div><div class="quiz-dot"></div><div class="quiz-dot"></div></div>
<div id="quizContent">
<div class="quiz-question" id="questionText">What does 127.0.0.1 refer to?</div>
<div class="quiz-options" id="optionsContainer"></div>
<button class="next-btn" id="nextBtn" onclick="nextQuestion()">Next Question →</button>
</div>
<div class="quiz-result" id="quizResult">
<div class="quiz-score" id="scoreText">3/3</div>
<div class="quiz-message" id="resultMessage">🎉 Perfect Score!</div>
<button class="next-btn show" onclick="restartQuiz()">Try Again</button>
</div>
</div>
</section>
<section class="section" id="summary">
<div class="section-header"><span class="section-icon">📋</span><h2 class="section-title">Quick Reference</h2><p class="section-desc">Your cheat sheet for database credentials</p></div>
<div class="summary-card">
<div class="summary-title">🎯 Database Credentials Cheat Sheet</div>
<div class="summary-content">
<div class="summary-item">📍 <strong>Host:</strong> <code>127.0.0.1</code> (localhost)</div>
<div class="summary-item">📞 <strong>Port:</strong> <code>3306</code> (MySQL default)</div>
<div class="summary-item">🗄️ <strong>Database:</strong> <code>bunny</code></div>
<div class="summary-item">👤 <strong>Username:</strong> <code>root</code></div>
<div class="summary-item">🔐 <strong>Password:</strong> <code>(empty)</code></div>
<div class="summary-item">🌐 <strong>Charset:</strong> <code>utf8mb4</code></div>
</div>
</div>
</section>
</div>
<footer class="footer">
<div class="footer-logo">🎓 Database Tutorial</div>
<p class="footer-text">You've completed the tutorial! Now go build something amazing!</p>
<div class="footer-badge">✨ Generated by AI Prompt Dictionary</div>
</footer>
<script>
// Progress Bar
window.addEventListener('scroll', () => {
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
document.getElementById('progressBar').style.width = (winScroll / height) * 100 + '%';
});
// Scroll animations
const sections = document.querySelectorAll('.section');
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => { if (entry.isIntersecting) entry.target.classList.add('visible'); });
}, { threshold: 0.1 });
sections.forEach(section => observer.observe(section));
// Accordion
function toggleAccordion(header) {
const content = header.nextElementSibling;
const isOpen = content.classList.contains('open');
document.querySelectorAll('.accordion-content').forEach(c => c.classList.remove('open'));
document.querySelectorAll('.accordion-header').forEach(h => h.classList.remove('active'));
if (!isOpen) { content.classList.add('open'); header.classList.add('active'); }
}
// Copy to clipboard
function copyCode(btn) {
const code = btn.parentElement.querySelector('pre').innerText;
navigator.clipboard.writeText(code);
btn.textContent = '✅ Copied!';
btn.classList.add('copied');
setTimeout(() => { btn.textContent = '📋 Copy'; btn.classList.remove('copied'); }, 2000);
}
// Tabs
function switchTab(event, tabId) {
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
event.target.classList.add('active');
document.getElementById(tabId).classList.add('active');
}
// Quiz
const quizData = [
{ question: "What does 127.0.0.1 refer to?", options: ["Remote server", "Localhost (your computer)", "Google's server", "Database name"], correct: 1 },
{ question: "What is MySQL's default port?", options: ["80", "443", "3306", "8080"], correct: 2 },
{ question: "What charset supports emojis?", options: ["utf8", "ascii", "utf8mb4", "latin1"], correct: 2 }
];
let currentQuestion = 0, score = 0;
function loadQuestion() {
const q = quizData[currentQuestion];
document.getElementById('questionText').textContent = q.question;
const container = document.getElementById('optionsContainer');
container.innerHTML = '';
q.options.forEach((opt, i) => {
const div = document.createElement('div');
div.className = 'quiz-option';
div.textContent = opt;
div.onclick = () => selectAnswer(i);
container.appendChild(div);
});
document.querySelectorAll('.quiz-dot').forEach((dot, i) => {
dot.classList.remove('active', 'completed');
if (i < currentQuestion) dot.classList.add('completed');
if (i === currentQuestion) dot.classList.add('active');
});
}
function selectAnswer(index) {
const options = document.querySelectorAll('.quiz-option');
options.forEach(opt => opt.classList.add('disabled'));
if (index === quizData[currentQuestion].correct) {
options[index].classList.add('correct');
score++;
showConfetti();
} else {
options[index].classList.add('wrong');
options[quizData[currentQuestion].correct].classList.add('correct');
}
document.getElementById('nextBtn').classList.add('show');
}
function nextQuestion() {
currentQuestion++;
document.getElementById('nextBtn').classList.remove('show');
if (currentQuestion < quizData.length) {
loadQuestion();
} else {
showResult();
}
}
function showResult() {
document.getElementById('quizContent').style.display = 'none';
document.getElementById('quizResult').classList.add('show');
document.getElementById('scoreText').textContent = score + '/' + quizData.length;
const msg = score === 3 ? '🎉 Perfect Score!' : score >= 2 ? '👏 Great Job!' : '💪 Keep Learning!';
document.getElementById('resultMessage').textContent = msg;
if (score === 3) showConfetti();
showAchievement('Quiz Master!');
}
function restartQuiz() {
currentQuestion = 0; score = 0;
document.getElementById('quizContent').style.display = 'block';
document.getElementById('quizResult').classList.remove('show');
loadQuestion();
}
// Confetti
function showConfetti() {
const container = document.getElementById('confetti');
const colors = ['#8b5cf6', '#3b82f6', '#06b6d4', '#10b981', '#ec4899', '#f59e0b'];
for (let i = 0; i < 50; i++) {
const piece = document.createElement('div');
piece.className = 'confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = Math.random() * 0.5 + 's';
container.appendChild(piece);
setTimeout(() => piece.remove(), 3000);
}
}
// Achievement
function showAchievement(text) {
document.getElementById('achievementText').textContent = text;
document.getElementById('achievement').classList.add('show');
setTimeout(() => document.getElementById('achievement').classList.remove('show'), 4000);
}
function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); }
// Initialize
loadQuestion();
setTimeout(() => showAchievement('Welcome Explorer!'), 1500);
</script>
</body>
</html>
Live Preview