Replit's Credentials Format
📦 Server
✨ The Prompt Phrase
=== DATABASE CREDENTIALS (Replit (PostgreSQL)) === Environment: replit Type: POSTGRESQL Host: helium Port: 5432 Database: heliumdb Username: postgres Password: password Charset: utf8
💻 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>Replit Credentials Format - 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: #0f0f23; --bg-secondary: #1a1a2e; --bg-glass: rgba(255,255,255,0.06); --text-primary: #fff; --text-secondary: #a0a0b8; --accent-purple: #9b59b6; --accent-blue: #3498db; --accent-cyan: #00d4aa; --accent-green: #2ecc71; --accent-orange: #f39c12; --postgres-blue: #336791; --gradient-primary: linear-gradient(135deg,#336791,#3498db,#00d4aa); --shadow-glow: 0 0 40px rgba(51,103,145,0.4); --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; }
.bg-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.bg-animation span { position: absolute; display: block; background: rgba(51,103,145,0.08); 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; }
.bg-animation span:nth-child(3) { left: 70%; width: 25px; height: 25px; animation-delay: 4s; }
.bg-animation span:nth-child(4) { left: 40%; width: 60px; height: 60px; }
.bg-animation span:nth-child(5) { left: 85%; width: 40px; height: 40px; }
@keyframes float { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(-1200px) rotate(720deg); opacity: 0; } }
.progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 5px; background: var(--bg-secondary); z-index: 1000; }
.progress-bar { height: 100%; background: var(--gradient-primary); width: 0%; transition: width 0.3s; }
.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 18px; border-radius: 50px; cursor: pointer; transition: var(--transition); font-size: 14px; }
.nav-btn:hover { background: var(--postgres-blue); transform: translateY(-2px); }
.container { max-width: 950px; 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-badges { display: flex; gap: 12px; margin-bottom: 25px; flex-wrap: wrap; justify-content: center; }
.hero-badge { padding: 8px 18px; border-radius: 50px; font-size: 13px; animation: slideDown 0.8s ease; }
.badge-replit { background: rgba(242,98,7,0.2); color: #ff6b35; border: 1px solid rgba(242,98,7,0.4); }
.badge-postgres { background: rgba(51,103,145,0.2); color: #5dade2; border: 1px solid rgba(51,103,145,0.4); }
.hero-title { font-size: clamp(2.2rem,5vw,3.5rem); font-weight: 800; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 20px; animation: slideDown 0.8s ease 0.2s both; }
.hero-subtitle { font-size: 1.15rem; color: var(--text-secondary); max-width: 650px; margin-bottom: 35px; animation: slideDown 0.8s ease 0.4s both; }
.hero-code { background: var(--bg-secondary); border: 1px solid rgba(51,103,145,0.4); border-radius: var(--border-radius); padding: 25px; text-align: left; font-family: 'Fira Code', monospace; font-size: 0.85rem; line-height: 1.7; position: relative; animation: slideUp 0.8s ease 0.6s both; box-shadow: var(--shadow-glow); }
.hero-code::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 38px; background: rgba(0,0,0,0.4); border-radius: var(--border-radius) var(--border-radius) 0 0; }
.hero-code .dots { position: absolute; top: 12px; left: 14px; display: flex; gap: 7px; }
.hero-code .dot { width: 11px; height: 11px; 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: 18px; white-space: pre-wrap; }
.code-header { color: var(--accent-cyan); font-weight: 600; }
.code-key { color: #5dade2; }
.code-value { color: var(--accent-green); }
.code-string { color: #f39c12; }
@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); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.section { padding: 70px 0; opacity: 0; transform: translateY(40px); transition: var(--transition); }
.section.visible { opacity: 1; transform: translateY(0); }
.section-header { text-align: center; margin-bottom: 45px; }
.section-icon { font-size: 2.8rem; margin-bottom: 18px; display: block; }
.section-title { font-size: 1.9rem; font-weight: 700; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px; }
.section-desc { color: var(--text-secondary); font-size: 1.05rem; }
.card { background: var(--bg-glass); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--border-radius); padding: 28px; margin-bottom: 18px; transition: var(--transition); }
.card:hover { transform: translateY(-4px); border-color: rgba(51,103,145,0.5); box-shadow: var(--shadow-glow); }
.card-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 12px; }
.card-text { color: var(--text-secondary); line-height: 1.8; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.accordion { margin-bottom: 14px; }
.accordion-header { background: var(--bg-glass); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--border-radius); padding: 18px 22px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: var(--transition); font-weight: 500; }
.accordion-header:hover { border-color: var(--postgres-blue); }
.accordion-header.active { border-color: var(--postgres-blue); border-radius: var(--border-radius) var(--border-radius) 0 0; }
.accordion-icon { font-size: 1.4rem; transition: var(--transition); }
.accordion-header.active .accordion-icon { transform: rotate(45deg); }
.accordion-content { background: var(--bg-secondary); border: 1px solid rgba(51,103,145,0.3); border-top: none; border-radius: 0 0 var(--border-radius) var(--border-radius); max-height: 0; overflow: hidden; transition: max-height 0.4s, padding 0.4s; }
.accordion-content.open { padding: 22px; max-height: 800px; }
.code-block { background: #0d0d1a; border: 1px solid rgba(51,103,145,0.25); border-radius: 12px; padding: 18px; position: relative; margin: 18px 0; overflow-x: auto; }
.code-block pre { font-family: 'Fira Code', monospace; font-size: 0.88rem; line-height: 1.7; margin: 0; }
.copy-btn { position: absolute; top: 8px; right: 8px; background: var(--postgres-blue); border: none; color: white; padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 12px; transition: var(--transition); }
.copy-btn:hover { background: var(--accent-blue); }
.copy-btn.copied { background: var(--accent-green); }
.tabs { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.tab-btn { background: var(--bg-glass); border: 1px solid rgba(255,255,255,0.1); color: var(--text-secondary); padding: 11px 22px; border-radius: 50px; cursor: pointer; font-size: 13px; transition: var(--transition); }
.tab-btn.active { background: var(--gradient-primary); color: white; }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.5s; }
.quiz-container { background: var(--bg-glass); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--border-radius); padding: 35px; }
.quiz-question { font-size: 1.15rem; font-weight: 600; margin-bottom: 22px; }
.quiz-options { display: flex; flex-direction: column; gap: 11px; }
.quiz-option { background: var(--bg-secondary); border: 2px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 14px 18px; cursor: pointer; transition: var(--transition); }
.quiz-option:hover { border-color: var(--postgres-blue); }
.quiz-option.correct { border-color: var(--accent-green); background: rgba(46,204,113,0.2); }
.quiz-option.wrong { border-color: #e74c3c; background: rgba(231,76,60,0.2); }
.quiz-option.disabled { pointer-events: none; }
.quiz-progress { display: flex; gap: 8px; margin-bottom: 25px; }
.quiz-dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.quiz-dot.active { background: var(--postgres-blue); box-shadow: 0 0 12px var(--postgres-blue); }
.quiz-dot.completed { background: var(--accent-green); }
.quiz-result { text-align: center; padding: 35px; display: none; }
.quiz-result.show { display: block; }
.quiz-score { font-size: 3.5rem; font-weight: 800; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.next-btn { background: var(--gradient-primary); border: none; color: white; padding: 14px 35px; border-radius: 50px; cursor: pointer; font-size: 0.95rem; font-weight: 600; margin-top: 22px; display: none; }
.next-btn.show { display: inline-block; }
.next-btn:hover { transform: translateY(-3px); }
.summary-card { background: var(--gradient-primary); border-radius: var(--border-radius); padding: 35px; }
.summary-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 22px; }
.summary-content { display: grid; gap: 12px; }
.summary-item { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.12); padding: 13px 18px; border-radius: 10px; flex-wrap: wrap; }
.summary-item code { background: rgba(0,0,0,0.35); padding: 4px 10px; border-radius: 6px; font-family: 'Fira Code', monospace; }
.tip-box { background: linear-gradient(135deg, rgba(46,204,113,0.1), rgba(0,212,170,0.1)); border-left: 4px solid var(--accent-green); border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 18px 0; }
.tip-title { font-weight: 600; color: var(--accent-green); margin-bottom: 8px; }
.warning-box { background: linear-gradient(135deg, rgba(231,76,60,0.1), rgba(233,30,99,0.1)); border-left: 4px solid #e74c3c; border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 18px 0; }
.warning-title { font-weight: 600; color: #e74c3c; margin-bottom: 8px; }
.info-box { background: linear-gradient(135deg, rgba(51,103,145,0.15), rgba(52,152,219,0.1)); border-left: 4px solid var(--postgres-blue); border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 18px 0; }
.info-title { font-weight: 600; color: #5dade2; margin-bottom: 8px; }
.badge { padding: 5px 12px; border-radius: 50px; font-size: 0.8rem; font-weight: 500; }
.badge-success { background: rgba(46,204,113,0.2); color: var(--accent-green); border: 1px solid var(--accent-green); }
.badge-warning { background: rgba(243,156,18,0.2); color: var(--accent-orange); border: 1px solid var(--accent-orange); }
.badge-danger { background: rgba(231,76,60,0.2); color: #e74c3c; border: 1px solid #e74c3c; }
.badge-info { background: rgba(51,103,145,0.2); color: #5dade2; border: 1px solid var(--postgres-blue); }
.comparison-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.comparison-table th, .comparison-table td { padding: 14px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.08); }
.comparison-table th { background: rgba(51,103,145,0.25); }
.footer { text-align: center; padding: 55px 20px; background: var(--bg-secondary); margin-top: 50px; }
.footer-logo { font-size: 1.8rem; font-weight: 800; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 12px; }
.footer-text { color: var(--text-secondary); }
.footer-badge { display: inline-flex; gap: 8px; background: var(--bg-glass); padding: 10px 18px; border-radius: 50px; margin-top: 18px; border: 1px solid rgba(51,103,145,0.35); }
.confetti { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; }
.confetti-piece { position: absolute; width: 10px; height: 18px; top: -20px; animation: confetti-fall 3s linear forwards; }
@keyframes confetti-fall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } }
.achievement { position: fixed; top: 90px; right: -400px; background: var(--bg-glass); backdrop-filter: blur(20px); border: 1px solid var(--accent-green); border-radius: var(--border-radius); padding: 18px 25px; display: flex; align-items: center; gap: 14px; z-index: 1001; transition: right 0.5s; }
.achievement.show { right: 20px; }
.achievement-icon { font-size: 2.2rem; }
.achievement-text h4 { color: var(--accent-green); font-size: 0.85rem; }
.achievement-text p { font-size: 1rem; font-weight: 600; }
@media (max-width: 768px) { .hero-title { font-size: 1.8rem; } .section { padding: 45px 0; } .card { padding: 18px; } .nav { top: 10px; right: 10px; } .nav-btn { padding: 8px 12px; font-size: 11px; } }
</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">PostgreSQL Explorer!</p></div></div>
<div class="confetti" id="confetti"></div>
<div class="container">
<section class="hero" id="hero">
<div class="hero-badges"><span class="hero-badge badge-replit">🔥 Replit Environment</span><span class="hero-badge badge-postgres">🐘 PostgreSQL Database</span></div>
<h1 class="hero-title">PostgreSQL on Replit Explained</h1>
<p class="hero-subtitle">Master database connections in the cloud! Learn PostgreSQL credentials and connection strings interactively.</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-header">=== DATABASE CREDENTIALS (Replit PostgreSQL) ===</span>
<span class="code-key">Environment:</span> <span class="code-value">replit</span>
<span class="code-key">Type:</span> <span class="code-value">POSTGRESQL</span>
<span class="code-key">Host:</span> <span class="code-value">helium</span>
<span class="code-key">Port:</span> <span class="code-value">5432</span>
<span class="code-key">Database:</span> <span class="code-value">heliumdb</span>
<span class="code-key">Username:</span> <span class="code-value">postgres</span>
<span class="code-key">Password:</span> <span class="code-value">password</span>
<span class="code-key">Charset:</span> <span class="code-value">utf8</span>
<span class="code-header">=== CONNECTION STRING ===</span>
<span class="code-string">postgresql://postgres:password@helium/heliumdb?sslmode=disable</span>
</pre>
</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 PostgreSQL credentials on Replit</p></div>
<div class="card">
<h3 class="card-title">🐘 PostgreSQL + Replit</h3>
<p class="card-text"><strong>PostgreSQL</strong> is a powerful, open-source relational database. <strong>Replit</strong> is a cloud-based IDE. These credentials connect your app to the database!</p>
<ul style="color: var(--text-secondary); padding-left: 20px; margin-top: 12px;">
<li>🌐 <strong>Host (helium)</strong> = Server name in Replit's network</li>
<li>🚪 <strong>Port (5432)</strong> = PostgreSQL's default port</li>
<li>🗄️ <strong>Database (heliumdb)</strong> = Your data storage</li>
<li>👤 <strong>Username (postgres)</strong> = Your identity</li>
<li>🔑 <strong>Password</strong> = Your secret key</li>
</ul>
</div>
<div class="info-box"><div class="info-title">🐘 Fun Fact</div><p>PostgreSQL's elephant logo means it "never forgets" your data! Around since 1996!</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 of PostgreSQL on Replit</p></div>
<div class="grid">
<div class="card"><h3 class="card-title">☁️ Cloud-Based</h3><p class="card-text">Access from anywhere! No local setup needed.</p></div>
<div class="card"><h3 class="card-title">🚀 Instant Setup</h3><p class="card-text">Pre-configured PostgreSQL. Just connect and code!</p></div>
<div class="card"><h3 class="card-title">💪 Enterprise-Grade</h3><p class="card-text">JSON support, full-text search, complex queries.</p></div>
<div class="card"><h3 class="card-title">🔒 ACID Compliant</h3><p class="card-text">Reliable transactions and data integrity.</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</p></div>
<div class="accordion"><div class="accordion-header" onclick="toggleAccordion(this)"><span>🌐 Step 1: Host (helium)</span><span class="accordion-icon">+</span></div><div class="accordion-content"><p><code>helium</code> is Replit's internal hostname for the PostgreSQL server.</p></div></div>
<div class="accordion"><div class="accordion-header" onclick="toggleAccordion(this)"><span>🚪 Step 2: Port 5432</span><span class="accordion-icon">+</span></div><div class="accordion-content"><p>Port <strong>5432</strong> is PostgreSQL's default (MySQL uses 3306).</p></div></div>
<div class="accordion"><div class="accordion-header" onclick="toggleAccordion(this)"><span>🔐 Step 3: Authenticate</span><span class="accordion-icon">+</span></div><div class="accordion-content"><p>Username: <code>postgres</code>, Password: <code>password</code></p><div class="warning-box"><div class="warning-title">⚠️ Security</div><p>Use strong passwords in production!</p></div></div></div>
<div class="accordion"><div class="accordion-header" onclick="toggleAccordion(this)"><span>🔗 Step 4: Connection String</span><span class="accordion-icon">+</span></div><div class="accordion-content"><div class="code-block"><button class="copy-btn" onclick="copyCode(this)">📋 Copy</button><pre>postgresql://postgres:password@helium/heliumdb?sslmode=disable</pre></div></div></div>
</section>
<section class="section" id="demo">
<div class="section-header"><span class="section-icon">🎮</span><h2 class="section-title">Code Examples</h2><p class="section-desc">Different language examples</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><button class="tab-btn" onclick="switchTab(event,'json')">📋 JSON</button></div>
<div class="tab-content active" id="php"><div class="code-block"><button class="copy-btn" onclick="copyCode(this)">📋 Copy</button><pre><?php
$conn = pg_connect("host=helium port=5432 dbname=heliumdb user=postgres password=password");
if ($conn) echo "✅ Connected!";
?></pre></div></div>
<div class="tab-content" id="python"><div class="code-block"><button class="copy-btn" onclick="copyCode(this)">📋 Copy</button><pre>import psycopg2
conn = psycopg2.connect("postgresql://postgres:password@helium/heliumdb?sslmode=disable")
print("✅ Connected!")</pre></div></div>
<div class="tab-content" id="node"><div class="code-block"><button class="copy-btn" onclick="copyCode(this)">📋 Copy</button><pre>const { Client } = require('pg');
const client = new Client({ connectionString: 'postgresql://postgres:password@helium/heliumdb?sslmode=disable' });
await client.connect();
console.log('✅ Connected!');</pre></div></div>
<div class="tab-content" id="json"><div class="code-block"><button class="copy-btn" onclick="copyCode(this)">📋 Copy</button><pre>{ "host": "helium", "port": 5432, "database": "heliumdb", "username": "postgres", "password": "password" }</pre></div></div>
</section>
<section class="section" id="breakdown">
<div class="section-header"><span class="section-icon">🔍</span><h2 class="section-title">Field Breakdown</h2></div>
<div class="card" style="overflow-x:auto;"><table class="comparison-table"><thead><tr><th>Field</th><th>Value</th><th>Description</th></tr></thead><tbody>
<tr><td><span class="badge badge-info">Host</span></td><td><code>helium</code></td><td>Replit's internal server</td></tr>
<tr><td><span class="badge badge-success">Port</span></td><td><code>5432</code></td><td>PostgreSQL default</td></tr>
<tr><td><span class="badge badge-success">Database</span></td><td><code>heliumdb</code></td><td>Database name</td></tr>
<tr><td><span class="badge badge-warning">Username</span></td><td><code>postgres</code></td><td>User account</td></tr>
<tr><td><span class="badge badge-danger">Password</span></td><td><code>password</code></td><td>Secret key</td></tr>
</tbody></table></div>
</section>
<section class="section" id="mistakes">
<div class="section-header"><span class="section-icon">🚫</span><h2 class="section-title">Common Mistakes</h2></div>
<div class="grid">
<div class="card" style="border-left:4px solid #e74c3c;"><h3 class="card-title">❌ Wrong Port</h3><p class="card-text">PostgreSQL uses 5432, not 3306 (MySQL)!</p></div>
<div class="card" style="border-left:4px solid #e74c3c;"><h3 class="card-title">❌ Wrong Function</h3><p class="card-text">Use pg_connect() for PostgreSQL, not mysqli!</p></div>
<div class="card" style="border-left:4px solid #e74c3c;"><h3 class="card-title">❌ Exposed Credentials</h3><p class="card-text">Never commit passwords to Git!</p></div>
<div class="card" style="border-left:4px solid #e74c3c;"><h3 class="card-title">❌ Missing sslmode</h3><p class="card-text">Use sslmode=disable in Replit's internal network.</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></div>
<div class="tip-box"><div class="tip-title">🔥 Use Connection Strings</div><p>Cleaner and easier to manage in environment variables!</p></div>
<div class="tip-box"><div class="tip-title">🔥 Use Replit Secrets</div><p>Store passwords in Secrets tab, access via process.env!</p></div>
<div class="tip-box"><div class="tip-title">🔥 Connection Pooling</div><p>Reuse connections for better performance!</p></div>
</section>
<section class="section" id="quiz">
<div class="section-header"><span class="section-icon">📝</span><h2 class="section-title">Knowledge Check</h2></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">Loading...</div><div class="quiz-options" id="optionsContainer"></div><button class="next-btn" id="nextBtn" onclick="nextQuestion()">Next →</button></div>
<div class="quiz-result" id="quizResult"><div class="quiz-score" id="scoreText">3/3</div><div class="quiz-message" id="resultMessage">🎉 Perfect!</div><button class="next-btn show" onclick="restartQuiz()">🔄 Retry</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></div>
<div class="summary-card">
<div class="summary-title">🐘 Replit PostgreSQL Credentials</div>
<div class="summary-content">
<div class="summary-item">🌐 Host: <code>helium</code></div>
<div class="summary-item">🚪 Port: <code>5432</code></div>
<div class="summary-item">🗄️ Database: <code>heliumdb</code></div>
<div class="summary-item">👤 User: <code>postgres</code></div>
<div class="summary-item">🔑 Password: <code>password</code></div>
<div class="summary-item">🔗 <code style="font-size:0.7rem;">postgresql://postgres:password@helium/heliumdb</code></div>
</div>
</div>
</section>
</div>
<footer class="footer"><div class="footer-logo">🐘 Tutorial Complete!</div><p class="footer-text">Ready to connect to PostgreSQL on Replit!</p><div class="footer-badge">✨ Generated by AI Prompt Dictionary</div></footer>
<script>
window.addEventListener('scroll', () => { const s = document.body.scrollTop || document.documentElement.scrollTop; const h = document.documentElement.scrollHeight - document.documentElement.clientHeight; document.getElementById('progressBar').style.width = (s/h)*100+'%'; });
const sections = document.querySelectorAll('.section'); const observer = new IntersectionObserver(e => { e.forEach(x => { if(x.isIntersecting) x.target.classList.add('visible'); }); }, {threshold:0.1}); sections.forEach(s => observer.observe(s));
function toggleAccordion(h) { const c = h.nextElementSibling; const o = c.classList.contains('open'); document.querySelectorAll('.accordion-content').forEach(x => x.classList.remove('open')); document.querySelectorAll('.accordion-header').forEach(x => x.classList.remove('active')); if(!o) { c.classList.add('open'); h.classList.add('active'); } }
function copyCode(b) { const c = b.parentElement.querySelector('pre').innerText; navigator.clipboard.writeText(c); b.textContent='✅ Copied!'; b.classList.add('copied'); setTimeout(() => { b.textContent='📋 Copy'; b.classList.remove('copied'); }, 2000); }
function switchTab(e, t) { document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active')); document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active')); e.target.classList.add('active'); document.getElementById(t).classList.add('active'); }
const quizData = [{question:"What is PostgreSQL's default port?",options:["3306","5432","27017","8080"],correct:1},{question:"What does 'helium' represent?",options:["Database","Username","Host","Password"],correct:2},{question:"Which PHP function connects to PostgreSQL?",options:["mysqli_connect()","pg_connect()","pdo_connect()","sql_connect()"],correct:1}];
let currentQuestion=0, score=0;
function loadQuestion() { const q=quizData[currentQuestion]; document.getElementById('questionText').textContent=q.question; const c=document.getElementById('optionsContainer'); c.innerHTML=''; q.options.forEach((o,i) => { const d=document.createElement('div'); d.className='quiz-option'; d.textContent=o; d.onclick=()=>selectAnswer(i); c.appendChild(d); }); document.querySelectorAll('.quiz-dot').forEach((d,i) => { d.classList.remove('active','completed'); if(i<currentQuestion) d.classList.add('completed'); if(i===currentQuestion) d.classList.add('active'); }); }
function selectAnswer(i) { const o=document.querySelectorAll('.quiz-option'); o.forEach(x=>x.classList.add('disabled')); if(i===quizData[currentQuestion].correct) { o[i].classList.add('correct'); score++; showConfetti(); } else { o[i].classList.add('wrong'); o[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; document.getElementById('resultMessage').textContent=score===3?'🎉 Perfect!':score>=2?'👏 Great!':'💪 Keep learning!'; if(score===3) { showConfetti(); showAchievement('Database Expert!'); } }
function restartQuiz() { currentQuestion=0; score=0; document.getElementById('quizContent').style.display='block'; document.getElementById('quizResult').classList.remove('show'); loadQuestion(); }
function showConfetti() { const c=document.getElementById('confetti'); const colors=['#336791','#3498db','#00d4aa','#2ecc71','#f26207']; for(let i=0;i<50;i++) { const p=document.createElement('div'); p.className='confetti-piece'; p.style.left=Math.random()*100+'%'; p.style.background=colors[Math.floor(Math.random()*colors.length)]; p.style.animationDelay=Math.random()*0.5+'s'; c.appendChild(p); setTimeout(()=>p.remove(),3000); } }
function showAchievement(t) { document.getElementById('achievementText').textContent=t; document.getElementById('achievement').classList.add('show'); setTimeout(()=>document.getElementById('achievement').classList.remove('show'),4000); }
function scrollToTop() { window.scrollTo({top:0,behavior:'smooth'}); }
loadQuestion(); setTimeout(()=>showAchievement('PostgreSQL Explorer!'),1500);
</script>
</body>
</html>
Live Preview