Spaces:

eaglelandsonce
/

Containers_Fact_or_Fiction

Running

App Files Files Community

eaglelandsonce commited on 20 days ago

Commit

99d75e1

verified ·

1 Parent(s): 99e991b

Update index.html

Browse files

Files changed (1) hide show

index.html +242 -18

index.html CHANGED Viewed

@@ -1,19 +1,243 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Intro to Containers Fact or Fiction</title>
+  <link rel="preconnect" href="https://fonts.gstatic.com" />
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    :root {
+      --bg1:#c9e8ff; --bg2:#fde2ff; --ink:#222; --ink-sub:#555;
+      --brand:#2563eb; --brand-2:#22c55e; --good:#16a34a; --bad:#dc2626;
+      --card:#ffffffcc;
+    }
+    body {
+      font-family: 'Poppins', sans-serif;
+      background: radial-gradient(1200px 600px at 20% 0%, var(--bg1), transparent 60%),
+                  radial-gradient(1200px 600px at 80% 0%, var(--bg2), transparent 60%),
+                  #f6f7fb;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 2rem 1rem;
+      color: var(--ink);
+    }
+    h1 { text-align: center; margin-bottom: .25rem; font-weight: 600; font-size: 2.2rem; }
+    #subtitle { text-align:center; margin-bottom:1rem; color: var(--ink-sub); }
+    #source-link { text-align: center; margin-bottom: 1.25rem; font-size: .95rem; }
+    #source-link a { color: var(--ink); text-decoration: underline; }
+    #game-container {
+      background: var(--card);
+      width: 100%; max-width: 820px;
+      padding: 2rem; border-radius: 16px;
+      box-shadow: 0 10px 24px rgba(0,0,0,.15);
+      display: flex; flex-direction: column; align-items: center;
+    }
+    .progress-container {
+      width: 100%; background:#ececec; border-radius: 999px; overflow: hidden; margin-bottom: 1rem;
+    }
+    .progress-bar { height: 14px; width:0%; background: linear-gradient(90deg,var(--brand),var(--brand-2)); transition: width .3s ease; }
+    #statement {
+      font-size: 1.25rem; line-height: 1.5; text-align: center; color: #333;
+      min-height: 90px; margin: .75rem 0 1rem;
+    }
+    .btn-group { display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; margin: .25rem 0 1rem; }
+    button {
+      padding: .75rem 1.25rem; border: none; border-radius: 999px; cursor: pointer;
+      background: var(--brand); color: #fff; font-weight: 600; letter-spacing:.2px;
+      transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
+    }
+    button.secondary { background:#111827; }
+    button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.15); }
+    #result {
+      margin-top: .5rem; padding: .75rem 1rem; border-radius: 10px; font-weight: 700; text-align: center; display:none;
+    }
+    #result.correct { display:block; background:#dcfce7; color:#14532d; }
+    #result.incorrect { display:block; background:#fee2e2; color:#7f1d1d; }
+    #explanation {
+      margin-top: .75rem; padding: 1rem; background:#f9fafb; color:#374151; border-radius:12px; display:none;
+    }
+    #score { margin-top: .75rem; font-weight: 700; }
+    #controls { display:flex; gap:.5rem; margin-top:.5rem; }
+    #controls button { background:#0f766e; }
+    #restart-btn { background:#6b21a8; }
+  </style>
+</head>
+<body>
+  <h1>Intro to Containers Fact or Fiction</h1>
+  <div id="subtitle">Test your knowledge of Containers, Docker, and Kubernetes</div>
+  <div id="source-link">
+    Source: <a href="https://www.linkedin.com/pulse/introduction-containers-docker-kubernetes-michael-lively-5c1be/" target="_blank" rel="noopener">
+      Introduction to Containers, Docker, and Kubernetes (LinkedIn)
+    </a>
+  </div>
+  <div id="game-container">
+    <div class="progress-container"><div class="progress-bar" id="progress-bar"></div></div>
+    <div id="statement">Loading statement...</div>
+    <div class="btn-group">
+      <button onclick="guess(true)">Fact</button>
+      <button class="secondary" onclick="guess(false)">Fiction</button>
+    </div>
+    <div id="result"></div>
+    <div id="explanation"></div>
+    <div id="controls">
+      <button id="next-btn" style="display:none;" onclick="nextStatement()">Next</button>
+      <button id="restart-btn" style="display:none;" onclick="startGame()">Restart</button>
+    </div>
+    <div id="score"></div>
+  </div>
+  <script>
+    // 12 statements (6 Fact, 6 Fiction) derived from your article
+    const statements = [
+      // FACTS (6)
+      {
+        text: "Containers share the host machine’s kernel instead of bundling a full operating system.",
+        isFact: true,
+        explanation: "Fact. Containers virtualize the OS level and share the host kernel, making them lightweight and fast."
+      },
+      {
+        text: "Docker’s 2013 release popularized containerization by standardizing images and registries.",
+        isFact: true,
+        explanation: "Fact. Docker simplified packaging, sharing, and running applications via images and registries."
+      },
+      {
+        text: "Kubernetes, introduced by Google in 2014, became the de facto standard for container orchestration.",
+        isFact: true,
+        explanation: "Fact. Kubernetes handles scheduling, scaling, load balancing, and resilience across clusters."
+      },
+      {
+        text: "OCI (Open Container Initiative) helps ensure interoperability across container tools and platforms.",
+        isFact: true,
+        explanation: "Fact. OCI standards make images and runtimes work consistently across ecosystems."
+      },
+      {
+        text: "Containers typically start in seconds and are more resource-efficient than VMs.",
+        isFact: true,
+        explanation: "Fact. Their smaller footprint and shared kernel enable rapid startup and efficient resource use."
+      },
+      {
+        text: "Containers are a natural fit for microservices, enabling independent deployment and scaling of services.",
+        isFact: true,
+        explanation: "Fact. Each service runs in its own container, improving isolation, agility, and resilience."
+      },
+      // FICTIONS (6)
+      {
+        text: "Containers always include a full guest operating system, just like virtual machines.",
+        isFact: false,
+        explanation: "Fiction. Unlike VMs, containers don’t carry a full OS; they share the host kernel."
+      },
+      {
+        text: "Containers completely replace virtual machines in every scenario.",
+        isFact: false,
+        explanation: "Fiction. They’re complementary: many orgs keep some workloads on VMs and run cloud-native apps in containers."
+      },
+      {
+        text: "Kubernetes is a container runtime that eliminates the need for Docker or CRI-O.",
+        isFact: false,
+        explanation: "Fiction. Kubernetes is an orchestrator; it relies on OCI-compatible runtimes (e.g., containerd, CRI-O)."
+      },
+      {
+        text: "Containers are poor choices for hybrid or multi-cloud deployments because they lack portability.",
+        isFact: false,
+        explanation: "Fiction. Portability is a key benefit—containers run across on-prem, cloud, and edge environments."
+      },
+      {
+        text: "Observability is optional for containerized systems; tracing and metrics add little value.",
+        isFact: false,
+        explanation: "Fiction. Observability is critical; teams use Prometheus, Grafana, and OpenTelemetry to operate at scale."
+      },
+      {
+        text: "Security tools like Trivy, Aqua, and StackRox are unrelated to containers.",
+        isFact: false,
+        explanation: "Fiction. These tools help scan images, enforce policies, and secure containerized workloads."
+      }
+    ];
+    // Game logic (shuffle, progress, scoring)
+    let currentIndex = 0, score = 0, answered = false;
+    function shuffle(arr) {
+      for (let i = arr.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [arr[i], arr[j]] = [arr[j], arr[i]];
+      }
+    }
+    function startGame() {
+      shuffle(statements);
+      currentIndex = 0; score = 0; answered = false;
+      document.getElementById('restart-btn').style.display = 'none';
+      loadStatement(); updateScore();
+    }
+    function loadStatement() {
+      if (currentIndex >= statements.length) return endGame();
+      const s = statements[currentIndex];
+      document.getElementById('statement').textContent = s.text;
+      document.getElementById('result').style.display = 'none';
+      document.getElementById('explanation').style.display = 'none';
+      document.getElementById('next-btn').style.display = 'none';
+      answered = false; updateProgress();
+    }
+    function guess(isFactGuess) {
+      if (answered) return;
+      answered = true;
+      const correct = statements[currentIndex].isFact;
+      const resultEl = document.getElementById('result');
+      if (isFactGuess === correct) {
+        resultEl.textContent = 'Correct!';
+        resultEl.className = 'correct';
+        score++;
+      } else {
+        resultEl.textContent = 'Incorrect!';
+        resultEl.className = 'incorrect';
+      }
+      resultEl.style.display = 'block';
+      const expEl = document.getElementById('explanation');
+      expEl.textContent = statements[currentIndex].explanation + " (See source link above.)";
+      expEl.style.display = 'block';
+      document.getElementById('next-btn').style.display = 'inline-block';
+      updateScore();
+    }
+    function nextStatement() {
+      currentIndex++;
+      if (currentIndex < statements.length) loadStatement();
+      else endGame();
+    }
+    function updateScore() {
+      document.getElementById('score').textContent = `Score: ${score} / ${statements.length}`;
+    }
+    function updateProgress() {
+      document.getElementById('progress-bar').style.width = `${(currentIndex / statements.length) * 100}%`;
+    }
+    function endGame() {
+      const pct = Math.round((score / statements.length) * 100);
+      document.getElementById('statement').textContent =
+        `Game Over! You scored ${score} of ${statements.length} (${pct}%).`;
+      document.getElementById('result').style.display = 'none';
+      document.getElementById('explanation').style.display = 'none';
+      document.getElementById('next-btn').style.display = 'none';
+      document.getElementById('restart-btn').style.display = 'inline-block';
+      document.getElementById('progress-bar').style.width = '100%';
+    }
+    startGame();
+  </script>
+</body>
 </html>