- Get link
- X
- Other Apps
CODE OF TODAY
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>🌐 Multi-Language App - All in One</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', system-ui, sans-serif;
/*
background: #0d1117;
*/
background:white;
color: #e6edf3;
min-height: 100vh;
padding: 20px;
}
.app-container {
max-width: 1600px;
margin: 0 auto;
}
header {
text-align: center;
padding: 30px 0 20px;
border-bottom: 2px solid #30363d;
margin-bottom: 30px;
}
header h1 {
font-size: 2.8em;
background: linear-gradient(135deg, #58a6ff, #f0883e, #3fb950);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
header p {
color: #8b949e;
font-size: 1.1em;
margin-top: 8px;
}
.badge-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin: 15px 0;
}
.lang-badge {
padding: 6px 18px;
border-radius: 20px;
font-weight: 700;
font-size: 0.85em;
letter-spacing: 0.5px;
border: 2px solid transparent;
transition: all 0.3s;
}
.lang-badge:hover {
transform: scale(1.05);
}
.badge-c {
background: #1f6feb;
color: #fff;
border-color: #1f6feb;
}
.badge-cpp {
background: #00599c;
color: #fff;
border-color: #00599c;
}
.badge-py {
background: #3776ab;
color: #fff;
border-color: #3776ab;
}
.badge-java {
background: #b07219;
color: #fff;
border-color: #b07219;
}
.badge-js {
background: #f7df1e;
color: #0d1117;
border-color: #f7df1e;
}
.badge-web {
background: #e34c26;
color: #fff;
border-color: #e34c26;
}
/* Grid Layout */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 25px;
margin-bottom: 30px;
}
/* Cards */
.card {
background: #161b22;
border-radius: 12px;
border: 1px solid #30363d;
overflow: hidden;
transition: all 0.3s;
display: flex;
flex-direction: column;
}
.card:hover {
border-color: #58a6ff;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
transform: translateY(-2px);
}
.card-header {
padding: 15px 20px;
background: #1c2128;
border-bottom: 1px solid #30363d;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-header h2 {
font-size: 1.3em;
display: flex;
align-items: center;
gap: 10px;
}
.card-header .lang-icon {
font-size: 1.4em;
}
.card-body {
padding: 20px;
flex: 1;
}
.card-body pre {
background: #0d1117;
padding: 15px;
border-radius: 8px;
overflow-x: auto;
font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: 0.82em;
line-height: 1.7;
border: 1px solid #21262d;
margin: 10px 0;
max-height: 350px;
overflow-y: auto;
}
.card-body code {
color: #e6edf3;
}
.card-footer {
padding: 12px 20px;
background: #1c2128;
border-top: 1px solid #30363d;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.btn {
padding: 6px 16px;
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
font-size: 0.85em;
}
.btn:hover {
transform: scale(1.05);
opacity: 0.9;
}
.btn-run {
background: #238636;
color: #fff;
}
.btn-run:hover {
background: #2ea043;
}
.btn-copy {
background: #21262d;
color: #c9d1d9;
}
.btn-copy:hover {
background: #30363d;
}
.output-box {
background: #0d1117;
padding: 10px 15px;
border-radius: 6px;
border-left: 3px solid #58a6ff;
margin-top: 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.85em;
color: #f0e6d0;
min-height: 30px;
white-space: pre-wrap;
word-break: break-all;
}
.output-label {
color: #8b949e;
font-size: 0.7em;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.status-badge {
font-size: 0.7em;
padding: 2px 10px;
border-radius: 12px;
background: #21262d;
color: #8b949e;
}
.status-badge.active {
background: #238636;
color: #fff;
}
/* Combined Demo Area */
.combined-section {
/*
background: #161b22;
*/
background:white;
border-radius: 12px;
border: 1px solid #30363d;
padding: 25px;
margin-top: 20px;
}
.combined-section h2 {
color: #58a6ff;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 12px;
}
.combined-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.combined-grid .input-area {
display: flex;
flex-direction: column;
gap: 10px;
}
.combined-grid input,
.combined-grid select {
padding: 10px 14px;
border-radius: 8px;
border: 1px solid #30363d;
/*
background: #0d1117;
color: #e6edf3;
*/
background:white;color:lime;
font-size: 1em;
}
.combined-grid input:focus,
.combined-grid select:focus {
outline: 2px solid #58a6ff;
border-color: transparent;
}
.combined-grid .result-box {
/*
background: #0d1117;
*/
background:white;
border-radius: 8px;
padding: 15px;
border: 1px solid #30363d;
font-family: monospace;
min-height: 100px;
white-space: pre-wrap;
}
.lang-tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 10px 0;
}
.lang-tab {
padding: 4px 14px;
border-radius: 16px;
border: 1px solid #30363d;
background: transparent;
color: #8b949e;
cursor: pointer;
font-size: 0.8em;
transition: all 0.2s;
}
.lang-tab:hover {
border-color: #58a6ff;
color: #e6edf3;
}
.lang-tab.active {
background: #1f6feb;
border-color: #1f6feb;
color: #fff;
}
@media (max-width: 700px) {
.grid {
grid-template-columns: 1fr;
}
.combined-grid {
grid-template-columns: 1fr;
}
header h1 {
font-size: 1.8em;
}
}
</style>
</head>
<body>
<div class="app-container">
<!-- Header -->
<header>
<h1>🌐 Polyglot App</h1>
<p>5 Languages · 1 Page · Coordinated Example</p>
<div class="badge-row">
<span class="lang-badge badge-c">C (99)</span>
<span class="lang-badge badge-cpp">C++ (17)</span>
<span class="lang-badge badge-py">Python (3.11)</span>
<span class="lang-badge badge-java">Java (17)</span>
<span class="lang-badge badge-js">JavaScript (ES6)</span>
<span class="lang-badge badge-web">HTML/CSS</span>
</div>
</header>
<!-- Language Cards Grid -->
<div class="grid" id="languageCards">
<!-- Card: C -->
<div class="card" data-lang="c">
<div class="card-header">
<h2><span class="lang-icon">⚡</span> C</h2>
<span class="status-badge">compiled</span>
</div>
<div class="card-body">
<pre><code><span class="comment">// C: int as boolean, do-while, switch</span>
<span class="keyword">#include</span> <span class="string"><stdio.h></span>
<span class="keyword">int</span> factorial(<span class="keyword">int</span> n) {
<span class="keyword">int</span> result = <span class="number">1</span>;
<span class="keyword">for</span> (<span class="keyword">int</span> i = <span class="number">1</span>; i <= n; i++) {
result *= i;
}
<span class="keyword">return</span> result;
}
<span class="keyword">int</span> main() {
<span class="keyword">int</span> num = <span class="number">5</span>;
<span class="keyword">int</span> fact = factorial(num);
printf(<span class="string">"Factorial of %d = %d\n"</span>, num, fact);
<span class="keyword">return</span> <span class="number">0</span>;
}</code></pre>
<div class="output-box" id="output-c">
<div class="output-label">▶ Output</div>
Factorial of 5 = 120
</div>
</div>
<div class="card-footer">
<button class="btn btn-run" onclick="runExample('c')">▶ Run</button>
<button class="btn btn-copy" onclick="copyCode('c')">📋 Copy</button>
</div>
</div>
<!-- Card: C++ -->
<div class="card" data-lang="cpp">
<div class="card-header">
<h2><span class="lang-icon">🔄</span> C++</h2>
<span class="status-badge active">OOP</span>
</div>
<div class="card-body">
<pre><code><span class="comment">// C++: bool, auto, range-for</span>
<span class="keyword">#include</span> <span class="string"><iostream></span>
<span class="keyword">#include</span> <span class="string"><vector></span>
<span class="keyword">using</span> <span class="keyword">namespace</span> std;
<span class="keyword">template</span><<span class="keyword">typename</span> T>
T sum(<span class="keyword">const</span> vector<T>& arr) {
T total = <span class="number">0</span>;
<span class="keyword">for</span> (<span class="keyword">auto</span> val : arr) {
total += val;
}
<span class="keyword">return</span> total;
}
<span class="keyword">int</span> main() {
vector<<span class="keyword">int</span>> nums = {<span class="number">10</span>, <span class="number">20</span>, <span class="number">30</span>, <span class="number">40</span>};
<span class="keyword">int</span> result = sum(nums);
cout << <span class="string">"Sum = "</span> << result << endl;
<span class="keyword">return</span> <span class="number">0</span>;
}</code></pre>
<div class="output-box" id="output-cpp">
<div class="output-label">▶ Output</div>
Sum = 100
</div>
</div>
<div class="card-footer">
<button class="btn btn-run" onclick="runExample('cpp')">▶ Run</button>
<button class="btn btn-copy" onclick="copyCode('cpp')">📋 Copy</button>
</div>
</div>
<!-- Card: Python -->
<div class="card" data-lang="python">
<div class="card-header">
<h2><span class="lang-icon">🐍</span> Python</h2>
<span class="status-badge active">interpreter</span>
</div>
<div class="card-body">
<pre><code><span class="comment"># Python: iteration, no do-while, indentation</span>
<span class="keyword">def</span> <span class="function">fibonacci</span>(n):
a, b = <span class="number">0</span>, <span class="number">1</span>
result = []
<span class="keyword">for</span> _ <span class="keyword">in</span> range(n):
result.append(a)
a, b = b, a + b
<span class="keyword">return</span> result
<span class="comment"># Simulate do-while</span>
numbers = fibonacci(<span class="number">8</span>)
print(<span class="string">f"Fibonacci: {numbers}"</span>)
<span class="comment"># List comprehension</span>
squares = [x**<span class="number">2</span> <span class="keyword">for</span> x <span class="keyword">in</span> numbers <span class="keyword">if</span> x % <span class="number">2</span> == <span class="number">0</span>]
print(<span class="string">f"Even squares: {squares}"</span>)</code></pre>
<div class="output-box" id="output-python">
<div class="output-label">▶ Output</div>
Fibonacci: [0, 1, 1, 2, 3, 5, 8, 13]<br>
Even squares: [0, 4, 64]
</div>
</div>
<div class="card-footer">
<button class="btn btn-run" onclick="runExample('python')">▶ Run</button>
<button class="btn btn-copy" onclick="copyCode('python')">📋 Copy</button>
</div>
</div>
<!-- Card: Java -->
<div class="card" data-lang="java">
<div class="card-header">
<h2><span class="lang-icon">☕</span> Java</h2>
<span class="status-badge">JVM</span>
</div>
<div class="card-body">
<pre><code><span class="comment">// Java: String switch, enhanced for, labels</span>
<span class="keyword">import</span> java.util.*;
<span class="keyword">public</span> <span class="keyword">class</span> <span class="function">Main</span> {
<span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> main(String[] args) {
List<String> items = Arrays.asList(<span class="string">"apple"</span>, <span class="string">"banana"</span>, <span class="string">"cherry"</span>);
<span class="comment">// Enhanced for</span>
<span class="keyword">for</span> (String item : items) {
System.out.print(item + <span class="string">" "</span>);
}
<span class="comment">// String switch (Java 7+)</span>
String fruit = <span class="string">"banana"</span>;
<span class="keyword">switch</span> (fruit) {
<span class="keyword">case</span> <span class="string">"apple"</span>: System.out.print(<span class="string">"🍎"</span>); <span class="keyword">break</span>;
<span class="keyword">case</span> <span class="string">"banana"</span>: System.out.print(<span class="string">"🍌"</span>); <span class="keyword">break</span>;
<span class="keyword">default</span>: System.out.print(<span class="string">"❓"</span>);
}
}
}</code></pre>
<div class="output-box" id="output-java">
<div class="output-label">▶ Output</div>
apple banana cherry 🍌
</div>
</div>
<div class="card-footer">
<button class="btn btn-run" onclick="runExample('java')">▶ Run</button>
<button class="btn btn-copy" onclick="copyCode('java')">📋 Copy</button>
</div>
</div>
<!-- Card: JavaScript -->
<div class="card" data-lang="javascript">
<div class="card-header">
<h2><span class="lang-icon">🟨</span> JavaScript</h2>
<span class="status-badge active">interpreted</span>
</div>
<div class="card-body">
<pre><code><span class="comment">// JS: for...of, for...in, === switch</span>
<span class="comment">// Array operations</span>
<span class="keyword">const</span> data = [<span class="number">5</span>, <span class="number">12</span>, <span class="number">8</span>, <span class="number">130</span>, <span class="number">44</span>];
<span class="comment">// for...of (values)</span>
<span class="keyword">let</span> sum = <span class="number">0</span>;
<span class="keyword">for</span> (<span class="keyword">const</span> val <span class="keyword">of</span> data) {
sum += val;
}
<span class="comment">// Object iteration</span>
<span class="keyword">const</span> obj = { a: <span class="number">1</span>, b: <span class="number">2</span>, c: <span class="number">3</span> };
<span class="keyword">let</span> keys = [];
<span class="keyword">for</span> (<span class="keyword">const</span> key <span class="keyword">in</span> obj) {
keys.push(key);
}
console.log(<span class="string">`Sum: ${sum}, Keys: ${keys.join(', ')}`</span>);</code></pre>
<div class="output-box" id="output-javascript">
<div class="output-label">▶ Output</div>
Sum: 199, Keys: a, b, c
</div>
</div>
<div class="card-footer">
<button class="btn btn-run" onclick="runExample('javascript')">▶ Run</button>
<button class="btn btn-copy" onclick="copyCode('javascript')">📋 Copy</button>
</div>
</div>
<!-- Card: Web (HTML/CSS) -->
<div class="card" data-lang="web">
<div class="card-header">
<h2><span class="lang-icon">🌐</span> HTML / CSS</h2>
<span class="status-badge active">rendered</span>
</div>
<div class="card-body">
<pre><code><span class="comment"><!-- HTML + CSS in action --></span>
<span class="keyword"><div</span> <span class="function">class</span>=<span class="string">"demo-box"</span><span class="keyword">></span>
<span class="keyword"><h3></span>🎨 Dynamic Styling<span class="keyword"></h3></span>
<span class="keyword"><div</span> <span class="function">id</span>=<span class="string">"colorBox"</span>
<span class="function">style</span>=<span class="string">"width:100px;height:100px;
background:#58a6ff;border-radius:12px;
transition:all 0.3s;"</span><span class="keyword">></span>
<span class="keyword"></div></span>
<span class="keyword"><button</span> <span class="function">onclick</span>=<span class="string">"changeColor()"</span><span class="keyword">></span>
Change Color
<span class="keyword"></button></span>
<span class="keyword"></div></span></code></pre>
<div class="output-box" style="border-left-color:#e34c26;">
<div class="output-label">▶ Live Demo</div>
<div style="display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-top:8px;">
<div id="colorBox" style="width:80px;height:80px;background:#58a6ff;border-radius:12px;transition:all 0.3s;"></div>
<button onclick="changeColor()" style="padding:8px 20px;border:none;border-radius:6px;background:#238636;color:#fff;cursor:pointer;font-weight:600;">🎨 Change Color</button>
<span id="colorLabel" style="font-size:0.85em;color:#8b949e;">#58a6ff</span>
</div>
</div>
</div>
<div class="card-footer">
<button class="btn btn-run" onclick="resetColor()" style="background:#1f6feb;color:#fff;">↺ Reset</button>
<button class="btn btn-copy" onclick="copyCode('web')">📋 Copy</button>
</div>
</div>
</div>
<!-- Combined Interactive Demo -->
<div class="combined-section">
<h2>🔗 Coordinated Cross-Language Demo</h2>
<p style="color:#8b949e;margin-bottom:15px;">
Each language processes the same input with its unique syntax style.
</p>
<div class="combined-grid">
<div class="input-area">
<label style="color:#8b949e;font-weight:600;">Input Number:</label>
<input type="number" id="sharedInput" value="7" min="1" max="20" />
<label style="color:#8b949e;font-weight:600;">Select Language:</label>
<div class="lang-tabs">
<button class="lang-tab active" data-target="all" onclick="switchLang('all')">🌐 All</button>
<button class="lang-tab" data-target="c" onclick="switchLang('c')">C</button>
<button class="lang-tab" data-target="cpp" onclick="switchLang('cpp')">C++</button>
<button class="lang-tab" data-target="python" onclick="switchLang('python')">Python</button>
<button class="lang-tab" data-target="java" onclick="switchLang('java')">Java</button>
<button class="lang-tab" data-target="javascript" onclick="switchLang('javascript')">JS</button>
</div>
<button class="btn btn-run" onclick="runAllLanguages()" style="padding:12px;font-size:1em;width:100%;">
🚀 Run All Languages
</button>
</div>
<div>
<label style="color:#8b949e;font-weight:600;">Results:</label>
<div class="result-box" id="combinedResult">
<span style="color:#8b949e;">Click "Run All Languages" to see results...</span>
</div>
</div>
</div>
</div>
</div>
<script>
// ============================================================
// 1. LANGUAGE SIMULATION FUNCTIONS (each with unique style)
// ============================================================
// C: Uses int as bool, do-while, switch
function runC(input) {
const n = parseInt(input) || 5;
// do-while simulation (C-style)
let i = 1,
result = 1;
do {
result *= i;
i++;
} while (i <= n);
// int as boolean
let isEven = (n % 2 === 0) ? 1 : 0;
let parity = isEven ? "even" : "odd";
// switch style
let label = '';
switch (n) {
case 1:
label = 'one';
break;
case 2:
label = 'two';
break;
case 3:
label = 'three';
break;
default:
label = `${n} (default case)`;
}
return `[C] Factorial(${n}) = ${result}\n[ C] ${n} is ${parity}\n[ C] Switch: ${label}`;
}
// C++: Uses bool, auto, range-for, template
function runCpp(input) {
const n = parseInt(input) || 5;
// C++ style: use bool
const flag = n > 0;
let sum = 0;
// range-for style simulation
const arr = [];
for (let i = 1; i <= n; i++) arr.push(i);
for (const val of arr) { // for...of works like C++ range-for
sum += val;
}
// auto style: type inference
const autoResult = sum / n;
return `[C++] Sum 1..${n} = ${sum}\n[C++] Average (auto) = ${autoResult.toFixed(2)}\n[C++] Valid input? ${flag ? 'true' : 'false'}`;
}
// Python: Indentation, no do-while, list comprehensions
function runPython(input) {
const n = parseInt(input) || 5;
// List comprehension
const squares = [];
for (let i = 1; i <= n; i++) {
squares.push(i * i);
}
const evenSquares = squares.filter(x => x % 2 === 0);
// Simulate do-while with while+break
let x = 0,
msg = '';
while (true) {
msg += (x + 1) + ' ';
x++;
if (x >= Math.min(n, 3)) break;
}
return `[Python] Squares: [${squares.join(', ')}]\n[Python] Even squares: [${evenSquares.join(', ')}]\n[Python] do-while sim: ${msg.trim()}`;
}
// Java: String switch, enhanced for, labels
function runJava(input) {
const n = parseInt(input) || 5;
const items = [];
for (let i = 1; i <= n; i++) items.push(`Item${i}`);
// Enhanced for simulation
let enhanced = '';
for (const item of items) {
enhanced += item + ' ';
}
// String switch
let day = '';
if (n % 7 === 1) day = 'Monday';
else if (n % 7 === 2) day = 'Tuesday';
else if (n % 7 === 3) day = 'Wednesday';
else if (n % 7 === 4) day = 'Thursday';
else if (n % 7 === 5) day = 'Friday';
else if (n % 7 === 6) day = 'Saturday';
else day = 'Sunday';
let dayType = '';
switch (day) {
case 'Saturday':
case 'Sunday':
dayType = 'Weekend 🎉';
break;
default:
dayType = 'Weekday 💼';
}
return `[Java] Enhanced for: ${enhanced.trim()}\n[Java] Day ${n} = ${day}\n[Java] ${dayType}`;
}
// JavaScript: for...of, for...in, === switch
function runJavaScript(input) {
const n = parseInt(input) || 5;
// for...of (values)
const arr = [];
for (let i = 1; i <= n; i++) arr.push(i * 10);
let sum = 0;
for (const val of arr) {
sum += val;
}
// for...in (object properties)
const obj = {};
for (let i = 1; i <= n; i++) {
obj[`key${i}`] = i * i;
}
let keys = [];
for (const key in obj) {
keys.push(key);
}
// === switch
let type = '';
switch (typeof n) {
case 'number':
type = 'Number (strict ===)';
break;
case 'string':
type = 'String';
break;
default:
type = 'Other';
}
return `[JS] for...of sum: ${arr.join(' + ')} = ${sum}\n[JS] Object keys: ${keys.join(', ')}\n[JS] typeof: ${type}`;
}
// ============================================================
// 2. UI CONTROLLERS
// ============================================================
function getInput() {
return document.getElementById('sharedInput').value || '7';
}
function runExample(lang) {
const input = getInput();
let output = '';
switch (lang) {
case 'c':
output = runC(input);
document.getElementById('output-c').innerHTML =
`<div class="output-label">▶ Output</div><pre>${output}</pre>`;
break;
case 'cpp':
output = runCpp(input);
document.getElementById('output-cpp').innerHTML =
`<div class="output-label">▶ Output</div><pre>${output}</pre>`;
break;
case 'python':
output = runPython(input);
document.getElementById('output-python').innerHTML =
`<div class="output-label">▶ Output</div><pre>${output}</pre>`;
break;
case 'java':
output = runJava(input);
document.getElementById('output-java').innerHTML =
`<div class="output-label">▶ Output</div><pre>${output}</pre>`;
break;
case 'javascript':
output = runJavaScript(input);
document.getElementById('output-javascript').innerHTML =
`<div class="output-label">▶ Output</div><pre>${output}</pre>`;
break;
}
}
function runAllLanguages() {
const input = getInput();
const results = [
runC(input),
runCpp(input),
runPython(input),
runJava(input),
runJavaScript(input)
];
document.getElementById('combinedResult').innerHTML = results.join('\n\n');
}
function switchLang(target) {
// Visual tab switching (just for demo)
document.querySelectorAll('.lang-tab').forEach(tab => {
tab.classList.remove('active');
});
document.querySelector(`.lang-tab[data-target="${target}"]`)?.classList.add('active');
// Highlight corresponding card
document.querySelectorAll('.card').forEach(card => {
card.style.borderColor = '#30363d';
});
if (target !== 'all') {
const card = document.querySelector(`.card[data-lang="${target}"]`);
if (card) card.style.borderColor = '#58a6ff';
}
}
function copyCode(lang) {
const card = document.querySelector(`.card[data-lang="${lang}"]`);
const code = card?.querySelector('pre code')?.innerText || '';
navigator.clipboard.writeText(code).then(() => {
const btn = card?.querySelector('.btn-copy');
if (btn) {
btn.textContent = '✅ Copied!';
setTimeout(() => btn.textContent = '📋 Copy', 2000);
}
});
}
// ============================================================
// 3. WEB CARD (HTML/CSS) INTERACTIONS
// ============================================================
const colors = ['#58a6ff', '#f0883e', '#3fb950', '#f7df1e', '#ff7b72', '#d2a8ff', '#79c0ff'];
let colorIndex = 0;
function changeColor() {
colorIndex = (colorIndex + 1) % colors.length;
const box = document.getElementById('colorBox');
const label = document.getElementById('colorLabel');
const newColor = colors[colorIndex];
box.style.background = newColor;
if (label) label.textContent = newColor;
}
function resetColor() {
const box = document.getElementById('colorBox');
const label = document.getElementById('colorLabel');
box.style.background = '#58a6ff';
if (label) label.textContent = '#58a6ff';
colorIndex = 0;
}
// ============================================================
// 4. AUTO-RUN ON LOAD
// ============================================================
window.onload = function() {
// Run all examples with default value
const defaultInput = '7';
document.getElementById('sharedInput').value = defaultInput;
runAllLanguages();
// Run each card
runExample('c');
runExample('cpp');
runExample('python');
runExample('java');
runExample('javascript');
};
// Re-run on input change
document.getElementById('sharedInput').addEventListener('input', function() {
const val = this.value;
if (val && parseInt(val) > 0) {
runAllLanguages();
runExample('c');
runExample('cpp');
runExample('python');
runExample('java');
runExample('javascript');
}
});
</script>
</body>
</html>
Comments