The web address of GitHub's service for quickly creating and sharing small snippets of code or text?

๐Ÿ“ฆ GitHub
โœจ The Prompt Phrase
What is the web address of GitHub's service for quickly creating and sharing small snippets of code or text?

~https://gist.github.com~

๐Ÿ’ป 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>GitHub Just Information. - Interactive Tutorial</title>
<meta name="description" content="A beginner-friendly interactive tutorial on GitHub Gist (gist.github.com).">
<style>
  :root {
    --bg: #0b1020; --bg2: #121933; --text: #e8ecff; --muted: #a5b0d6;
    --purple: #8b5cf6; --blue: #3b82f6; --green: #22c55e; --pink: #ec4899; --amber: #f59e0b; --red: #ef4444;
    --glass: rgba(255,255,255,.06); --border: rgba(255,255,255,.14);
    --grad: linear-gradient(135deg, var(--purple), var(--blue) 55%, var(--green));
    --code-bg: #070b18; --radius: 18px;
  }
  body.light {
    --bg: #f4f6ff; --bg2: #e6eaff; --text: #151a33; --muted: #4b5578;
    --glass: rgba(255,255,255,.75); --border: rgba(20,30,80,.15); --code-bg: #101635;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: radial-gradient(1200px 600px at 10% -10%, rgba(139,92,246,.25), transparent 60%),
                radial-gradient(1000px 600px at 100% 10%, rgba(59,130,246,.2), transparent 60%),
                var(--bg);
    background-attachment: fixed;
    color: var(--text); line-height: 1.7; min-height: 100vh;
  }
  a { color: var(--blue); }
  code { font-family: 'Cascadia Code', Consolas, monospace; background: rgba(139,92,246,.18); padding: 2px 7px; border-radius: 6px; font-size: .92em; }
  .skip { position: absolute; left: -999px; top: 8px; background: #fff; color: #000; padding: 8px 14px; border-radius: 8px; z-index: 100; }
  .skip:focus { left: 8px; }
  :focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

  #progress { position: fixed; top: 0; left: 0; height: 5px; width: 0; background: var(--grad); z-index: 60; transition: width .1s; }

  nav {
    position: sticky; top: 5px; z-index: 50; margin: 12px auto 0; max-width: 1000px;
    background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px;
    display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none;
  }
  nav a { text-decoration: none; color: var(--muted); font-size: .85rem; padding: 6px 12px; border-radius: 999px; white-space: nowrap; transition: .2s; }
  nav a:hover { background: rgba(139,92,246,.25); color: var(--text); }
  .spacer { flex: 1; }
  .icon-btn { background: var(--glass); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: .85rem; white-space: nowrap; }

  main { max-width: 1000px; margin: 0 auto; padding: 24px 16px 60px; }

  .hero { text-align: center; padding: 60px 10px 30px; }
  .hero .tag { display: inline-block; background: var(--glass); border: 1px solid var(--border); padding: 6px 16px; border-radius: 999px; font-size: .85rem; color: var(--muted); margin-bottom: 18px; }
  .hero h1 { font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1.15; margin-bottom: 14px; }
  .grad-text { background: var(--grad); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shift 6s ease infinite; }
  @keyframes shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
  .url-pill {
    display: inline-block; font-family: 'Cascadia Code', Consolas, monospace; font-size: clamp(.95rem, 3vw, 1.4rem);
    background: var(--code-bg); color: #c4b5fd; padding: 12px 22px; border-radius: 14px; border: 1px solid var(--border);
    margin: 10px 0 18px; word-break: break-all; animation: float 3.5s ease-in-out infinite;
  }
  @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  .hero p { color: var(--muted); max-width: 640px; margin: 0 auto 22px; }
  .btn {
    display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; text-decoration: none;
    background: var(--grad); color: #fff; font-weight: 700; padding: 12px 24px; border-radius: 12px; font-size: 1rem;
    transition: transform .15s, box-shadow .15s; box-shadow: 0 8px 22px rgba(59,130,246,.35);
  }
  .btn:hover { transform: translateY(-2px); }

  .badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 26px 0 6px; }
  .badge { background: var(--glass); border: 1px dashed var(--border); border-radius: 14px; padding: 8px 14px; font-size: .85rem; color: var(--muted); filter: grayscale(1); opacity: .7; transition: .4s; }
  .badge.earned { filter: none; opacity: 1; border-style: solid; border-color: var(--green); color: var(--text); box-shadow: 0 0 18px rgba(34,197,94,.35); }
  .score-line { text-align: center; color: var(--muted); font-size: .9rem; }

  .section { background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius); margin: 18px 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.18); opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; }
  .section.visible { opacity: 1; transform: none; }
  .sec-head { width: 100%; background: none; border: none; color: inherit; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 14px; padding: 20px 22px; font-size: 1.25rem; font-weight: 700; font-family: inherit; }
  .sec-head .num { background: var(--grad); color: #fff; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: .95rem; flex: none; }
  .sec-head .chev { margin-left: auto; transition: transform .3s; }
  .sec-head[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .sec-body { display: none; padding: 0 22px 24px; }
  .sec-body.open { display: block; animation: fade .4s ease; }
  @keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .sec-body p { margin-bottom: 12px; }
  .sec-body ul, .sec-body ol { margin: 0 0 12px 22px; }
  .sec-body li { margin-bottom: 6px; }

  .story { border-left: 4px solid var(--purple); background: rgba(139,92,246,.1); padding: 12px 16px; border-radius: 0 12px 12px 0; margin: 12px 0; }
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 14px 0; }
  .card { background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 14px; padding: 16px; transition: transform .2s, border-color .2s; }
  .card:hover { transform: translateY(-4px); border-color: var(--purple); }
  .card .em { font-size: 1.8rem; display: block; margin-bottom: 4px; }
  .card h3 { font-size: 1.02rem; margin-bottom: 4px; }
  .card p { font-size: .92rem; color: var(--muted); margin: 0; }

  .steps { list-style: none; margin: 0; counter-reset: s; }
  .steps li { counter-increment: s; position: relative; padding: 4px 0 16px 52px; margin: 0; }
  .steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 700; display: grid; place-items: center; }

  .tip { position: relative; border-bottom: 2px dotted var(--amber); cursor: help; }
  .tip .bubble { visibility: hidden; opacity: 0; position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); width: 230px; background: #1e2548; color: #fff; padding: 10px 12px; border-radius: 10px; font-size: .82rem; line-height: 1.45; z-index: 20; transition: .2s; box-shadow: 0 8px 22px rgba(0,0,0,.4); pointer-events: none; font-weight: 400; }
  .tip:hover .bubble, .tip:focus .bubble { visibility: visible; opacity: 1; }

  .codebox { position: relative; background: var(--code-bg); border: 1px solid var(--border); border-radius: 14px; margin: 12px 0; }
  .codebox pre { padding: 18px 16px; padding-right: 90px; overflow-x: auto; color: #e5e7ff; font-family: 'Cascadia Code', Consolas, monospace; font-size: .92rem; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }
  .copy { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,.1); color: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 5px 12px; cursor: pointer; font-size: .8rem; transition: .2s; }
  .copy:hover { background: rgba(139,92,246,.5); }
  .copy.done { background: var(--green); border-color: var(--green); }
  .c-proto { color: #f472b6; } .c-host { color: #60a5fa; } .c-user { color: #34d399; } .c-id { color: #fbbf24; } .c-key { color: #c4b5fd; } .c-str { color: #86efac; } .c-cmt { color: #94a3b8; font-style: italic; }
  .legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: 10px; }
  .legend div { background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: .9rem; }
  .legend b { display: block; margin-bottom: 2px; }

  .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
  .tab { background: var(--glass); border: 1px solid var(--border); color: var(--text); padding: 8px 16px; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: .92rem; }
  .tab[aria-selected="true"] { background: var(--grad); border-color: transparent; color: #fff; font-weight: 700; }
  .tabpanel[hidden] { display: none; }

  .demo { display: grid; gap: 12px; margin: 12px 0; }
  .demo label { font-size: .85rem; color: var(--muted); display: block; margin-bottom: 4px; }
  .demo input[type=text] { width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--code-bg); color: #fff; font-size: 1rem; font-family: 'Cascadia Code', Consolas, monospace; }
  .row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
  .vis { display: flex; gap: 10px; flex-wrap: wrap; }
  .vis button { flex: 1; min-width: 150px; background: var(--glass); border: 2px solid var(--border); color: var(--text); padding: 10px; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: .92rem; }
  .vis button[aria-pressed="true"] { border-color: var(--green); background: rgba(34,197,94,.15); }
  .note { font-size: .88rem; color: var(--muted); }

  .bad, .good { border-radius: 14px; padding: 14px 16px; margin: 10px 0; border: 1px solid; }
  .bad { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.45); }
  .good { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.45); }
  .bad b::before { content: 'โŒ '; } .good b::before { content: 'โœ… '; }

  .qz { margin: 16px 0; padding: 16px; background: rgba(255,255,255,.04); border-radius: 14px; border: 1px solid var(--border); }
  .qz h3 { font-size: 1.05rem; margin-bottom: 10px; }
  .opts { display: grid; gap: 8px; }
  .opt { text-align: left; background: var(--glass); color: var(--text); border: 2px solid var(--border); padding: 11px 14px; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: .95rem; transition: .2s; }
  .opt:hover:not(:disabled) { border-color: var(--purple); transform: translateX(4px); }
  .opt.right { border-color: var(--green); background: rgba(34,197,94,.2); }
  .opt.wrong { border-color: var(--red); background: rgba(239,68,68,.18); }
  .opt:disabled { cursor: default; }
  .fb { margin-top: 10px; font-size: .92rem; min-height: 1.4em; }

  .cheat { background: linear-gradient(135deg, rgba(139,92,246,.2), rgba(34,197,94,.15)); border: 1px solid var(--border); border-radius: 14px; padding: 6px 4px; }
  table { width: 100%; border-collapse: collapse; font-size: .9rem; }
  th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
  th { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
  tr:last-child td { border-bottom: none; }

  footer { text-align: center; padding: 30px 16px 50px; color: var(--muted); font-size: .9rem; }
  .confetti { position: fixed; top: -12px; width: 10px; height: 14px; z-index: 200; pointer-events: none; animation: fall linear forwards; }
  @keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: .9; } }
  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .section { opacity: 1; transform: none; }
  }
</style>
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<div id="progress" role="progressbar" aria-label="Reading progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>

<nav aria-label="Tutorial sections">
  <a href="#what">What</a><a href="#why">Why</a><a href="#how">How</a><a href="#demo">Demo</a>
  <a href="#code">Code</a><a href="#mistakes">Mistakes</a><a href="#tips">Tips</a><a href="#quiz">Quiz</a><a href="#summary">Cheat sheet</a>
  <span class="spacer"></span>
  <button class="icon-btn" id="themeBtn" aria-label="Toggle light or dark theme">๐ŸŒ™ Theme</button>
</nav>

<main id="main">
  <header class="hero">
    <span class="tag">๐ŸŽ“ Beginner tutorial ยท about 8 minutes</span>
    <h1>Meet <span class="grad-text">GitHub Gist</span><br>your pocket notebook for code</h1>
    <div class="url-pill">https://gist.github.com/</div>
    <p>Ever needed to send someone a few lines of code without making a whole project? This address is the answer. Let's explore it together. ๐Ÿš€</p>
    <a class="btn" href="#what">Start the adventure โœจ</a>
    <div class="badges" aria-label="Achievements">
      <span class="badge" id="b-read">๐Ÿ“– Explorer<br><small>Open all sections</small></span>
      <span class="badge" id="b-demo">๐Ÿ› ๏ธ Builder<br><small>Try the URL builder</small></span>
      <span class="badge" id="b-copy">๐Ÿ“‹ Copycat<br><small>Copy a snippet</small></span>
      <span class="badge" id="b-quiz">๐Ÿ† Quiz Master<br><small>Score 3 out of 3</small></span>
    </div>
    <p class="score-line" id="scoreLine">Achievements: 0 of 4 ๐ŸŒฑ</p>
  </header>

  <!-- 1 What -->
  <section class="section" id="what">
    <button class="sec-head" aria-expanded="true" aria-controls="p-what"><span class="num">1</span>What is it? ๐Ÿค”<span class="chev">โ–ผ</span></button>
    <div class="sec-body open" id="p-what" role="region">
      <div class="story">๐Ÿ“– <b>Story time:</b> Maya is helping a friend fix a bug. She doesn't want to email a huge project or paste code into a chat that wrecks the formatting. She opens a browser and visits the address below.</div>
      <p><code>https://gist.github.com/</code> is the home page of <b><span class="tip" tabindex="0">GitHub Gist<span class="bubble">A Gist is a small shareable snippet: one or more files with a short description.</span></span></b>, a service from <b>GitHub</b>. It lets you save and share small pieces of text or code quickly.</p>
      <div class="cards">
        <div class="card"><span class="em">๐Ÿ“</span><h3>A snippet host</h3><p>Paste text or code, give the file a name, and you get a link to share.</p></div>
        <div class="card"><span class="em">๐ŸŒฟ</span><h3>Secretly a Git repo</h3><p>Every gist is a tiny <span class="tip" tabindex="0">Git repository<span class="bubble">Git tracks every change to your files, so you can see history and go back.</span></span>, so it has version history.</p></div>
        <div class="card"><span class="em">๐Ÿ‘ค</span><h3>Tied to your account</h3><p>You sign in with a GitHub account to create gists, and they appear on your profile.</p></div>
      </div>
      <p class="note">๐Ÿ’ก It's different from regular GitHub repositories. Those are for whole projects. Gists are for quick, small things.</p>
    </div>
  </section>

  <!-- 2 Why -->
  <section class="section" id="why">
    <button class="sec-head" aria-expanded="false" aria-controls="p-why"><span class="num">2</span>Why use it? ๐ŸŽฏ<span class="chev">โ–ผ</span></button>
    <div class="sec-body" id="p-why" role="region">
      <div class="cards">
        <div class="card"><span class="em">โšก</span><h3>Fast sharing</h3><p>Paste, name, create. You get a link in seconds.</p></div>
        <div class="card"><span class="em">๐ŸŽจ</span><h3>Syntax highlighting</h3><p>Code is coloured based on the file extension, such as <code>.py</code> or <code>.js</code>.</p></div>
        <div class="card"><span class="em">๐Ÿ•ฐ๏ธ</span><h3>Revision history</h3><p>Edit later and every earlier version stays viewable.</p></div>
        <div class="card"><span class="em">๐Ÿ’ฌ</span><h3>Comments &amp; forks</h3><p>Others can comment on your gist or fork a copy to change.</p></div>
        <div class="card"><span class="em">๐Ÿงฉ</span><h3>Embeddable</h3><p>Show a gist inside a blog post or web page with one script tag.</p></div>
        <div class="card"><span class="em">๐Ÿ“š</span><h3>Multi-file</h3><p>A single gist can hold several related files.</p></div>
      </div>
      <p><b>Great for:</b> config files, shell one-liners, code examples for questions, small scripts, meeting notes and cheat sheets.</p>
    </div>
  </section>

  <!-- 3 How -->
  <section class="section" id="how">
    <button class="sec-head" aria-expanded="false" aria-controls="p-how"><span class="num">3</span>How does it work? โš™๏ธ<span class="chev">โ–ผ</span></button>
    <div class="sec-body" id="p-how" role="region">
      <ol class="steps">
        <li><b>Open the address.</b> Visit <code>https://gist.github.com/</code> in your browser.</li>
        <li><b>Sign in.</b> Creating a gist needs a free GitHub account. Reading public gists doesn't.</li>
        <li><b>Add a description</b> (optional but friendly), such as "Fix for login bug".</li>
        <li><b>Name your file with an extension</b>, for example <code>fix.py</code>. This tells Gist how to colour your code.</li>
        <li><b>Paste your content</b> in the editor. Use "Add file" for more files.</li>
        <li><b>Choose visibility:</b> create a <b>public</b> gist or a <b>secret</b> gist. See the warning below.</li>
        <li><b>Share the link.</b> Your gist gets its own URL that ends in a long ID.</li>
      </ol>
      <div class="bad"><b>Secret does not mean private</b>Secret gists are hidden from search and your profile, but anyone who has the link can open them. Never put passwords or API keys in any gist.</div>
    </div>
  </section>

  <!-- 4 Demo -->
  <section class="section" id="demo">
    <button class="sec-head" aria-expanded="false" aria-controls="p-demo"><span class="num">4</span>Live demo: URL builder ๐Ÿ› ๏ธ<span class="chev">โ–ผ</span></button>
    <div class="sec-body" id="p-demo" role="region">
      <p>Type a username and a gist ID. The demo builds the links you would use. These are example values, so nothing here contacts GitHub.</p>
      <div class="demo">
        <div class="row2">
          <div><label for="u">GitHub username</label><input type="text" id="u" value="octocat" autocomplete="off" spellcheck="false"></div>
          <div><label for="g">Gist ID (letters and numbers)</label><input type="text" id="g" value="a1b2c3d4e5f67890" autocomplete="off" spellcheck="false"></div>
        </div>
        <div class="vis" role="group" aria-label="Visibility">
          <button type="button" id="vPub" aria-pressed="true">๐ŸŒ Public gist</button>
          <button type="button" id="vSec" aria-pressed="false">๐Ÿ”— Secret gist</button>
        </div>
        <p class="note" id="visNote"></p>
      </div>
      <div class="tabs" role="tablist" aria-label="Link types">
        <button class="tab" role="tab" aria-selected="true" aria-controls="tp1" id="t1">๐ŸŒ Page</button>
        <button class="tab" role="tab" aria-selected="false" aria-controls="tp2" id="t2" tabindex="-1">๐ŸŒฟ Clone</button>
        <button class="tab" role="tab" aria-selected="false" aria-controls="tp3" id="t3" tabindex="-1">๐Ÿงฉ Embed</button>
      </div>
      <div class="tabpanel" id="tp1" role="tabpanel" aria-labelledby="t1"><div class="codebox"><pre id="o1"></pre><button class="copy" type="button">Copy</button></div><p class="note">Open this in a browser to read the gist.</p></div>
      <div class="tabpanel" id="tp2" role="tabpanel" aria-labelledby="t2" hidden><div class="codebox"><pre id="o2"></pre><button class="copy" type="button">Copy</button></div><p class="note">Run this in a terminal to download the gist with Git.</p></div>
      <div class="tabpanel" id="tp3" role="tabpanel" aria-labelledby="t3" hidden><div class="codebox"><pre id="o3"></pre><button class="copy" type="button">Copy</button></div><p class="note">Paste this into a web page's HTML to display the gist there.</p></div>
    </div>
  </section>

  <!-- 5 Code -->
  <section class="section" id="code">
    <button class="sec-head" aria-expanded="false" aria-controls="p-code"><span class="num">5</span>Code breakdown ๐Ÿ”ฌ<span class="chev">โ–ผ</span></button>
    <div class="sec-body" id="p-code" role="region">
      <p>Here is the home address, then a typical address of one specific gist, with colours to match the notes.</p>
      <div class="codebox"><pre><span class="c-proto">https://</span><span class="c-host">gist.github.com</span><span class="c-cmt">/</span></pre><button class="copy" type="button">Copy</button></div>
      <div class="codebox"><pre><span class="c-proto">https://</span><span class="c-host">gist.github.com</span>/<span class="c-user">octocat</span>/<span class="c-id">a1b2c3d4e5f67890</span></pre><button class="copy" type="button">Copy</button></div>
      <div class="legend">
        <div><b class="c-proto">https://</b>The protocol. The "s" means the connection is encrypted.</div>
        <div><b class="c-host">gist.github.com</b>The host. <code>gist</code> is a subdomain of <code>github.com</code>.</div>
        <div><b class="c-user">/octocat</b>The owner's username (only on a specific gist's URL).</div>
        <div><b class="c-id">/a1b2c3โ€ฆ</b>The unique gist ID. It also acts as the secret in a secret gist.</div>
      </div>
      <p style="margin-top:14px">An embed snippet looks like this:</p>
      <div class="codebox"><pre>&lt;<span class="c-key">script</span> <span class="c-user">src</span>=<span class="c-str">"https://gist.github.com/octocat/a1b2c3d4e5f67890.js"</span>&gt;&lt;/<span class="c-key">script</span>&gt;</pre><button class="copy" type="button">Copy</button></div>
    </div>
  </section>

  <!-- 6 Mistakes -->
  <section class="section" id="mistakes">
    <button class="sec-head" aria-expanded="false" aria-controls="p-mis"><span class="num">6</span>Common mistakes ๐Ÿšง<span class="chev">โ–ผ</span></button>
    <div class="sec-body" id="p-mis" role="region">
      <div class="bad"><b>Posting secrets</b>Passwords, tokens and API keys in a gist, even a secret one, can leak. If it happens, revoke the key right away.</div>
      <div class="good"><b>Do this instead</b>Remove sensitive values before pasting. Use placeholders like <code>YOUR_API_KEY</code>.</div>
      <div class="bad"><b>Forgetting the file extension</b>A file named just <code>script</code> gets no colouring. Name it <code>script.js</code>.</div>
      <div class="bad"><b>Thinking secret means private</b>Anyone with the link can view it. A private repository is the right tool for truly private code.</div>
      <div class="bad"><b>Using Gist for big projects</b>Gists suit small snippets. Real projects belong in a repository.</div>
      <div class="bad"><b>Expecting anonymous posting</b>You need to be signed in to create a gist.</div>
    </div>
  </section>

  <!-- 7 Tips -->
  <section class="section" id="tips">
    <button class="sec-head" aria-expanded="false" aria-controls="p-tips"><span class="num">7</span>Pro tips ๐Ÿง™<span class="chev">โ–ผ</span></button>
    <div class="sec-body" id="p-tips" role="region">
      <div class="cards">
        <div class="card"><span class="em">๐Ÿ”–</span><h3>Star &amp; fork</h3><p>Star gists you like to find them later. Fork one to make your own editable copy.</p></div>
        <div class="card"><span class="em">๐Ÿ“„</span><h3>Raw view</h3><p>Click "Raw" on a file to get plain text. That's handy for scripts and downloads.</p></div>
        <div class="card"><span class="em">๐Ÿ–ฅ๏ธ</span><h3>Use Git</h3><p>Since a gist is a repo, you can clone, commit and push to it from your terminal.</p></div>
        <div class="card"><span class="em">๐Ÿงฐ</span><h3>GitHub CLI</h3><p>With the <code>gh</code> tool, <code>gh gist create file.txt</code> makes a gist from the command line.</p></div>
        <div class="card"><span class="em">๐Ÿ“Œ</span><h3>Pin favourites</h3><p>You can pin gists on your profile to show them off.</p></div>
        <div class="card"><span class="em">๐Ÿ—‘๏ธ</span><h3>Delete when done</h3><p>Remove old gists you no longer need, especially if they were shared by mistake.</p></div>
      </div>
      <div class="codebox"><pre><span class="c-cmt"># create a gist from a file (needs the GitHub CLI and a login)</span>
gh gist create notes.txt --desc "My notes"</pre><button class="copy" type="button">Copy</button></div>
    </div>
  </section>

  <!-- 8 Quiz -->
  <section class="section" id="quiz">
    <button class="sec-head" aria-expanded="false" aria-controls="p-quiz"><span class="num">8</span>Practice quiz ๐ŸŽฎ<span class="chev">โ–ผ</span></button>
    <div class="sec-body" id="p-quiz" role="region">
      <p>Three quick questions. Get them all right for the ๐Ÿ† badge!</p>
      <div id="quizBox"></div>
      <p id="quizResult" aria-live="polite" style="font-weight:700;margin-top:10px"></p>
      <button class="btn" id="retry" type="button" style="display:none;margin-top:8px">๐Ÿ”„ Try again</button>
    </div>
  </section>

  <!-- 9 Summary -->
  <section class="section" id="summary">
    <button class="sec-head" aria-expanded="true" aria-controls="p-sum"><span class="num">9</span>Summary cheat sheet ๐Ÿ“‹<span class="chev">โ–ผ</span></button>
    <div class="sec-body open" id="p-sum" role="region">
      <div class="cheat">
        <table>
          <thead><tr><th>Topic</th><th>Quick reference</th></tr></thead>
          <tbody>
            <tr><td>๐Ÿ  Home address</td><td><code>https://gist.github.com/</code></td></tr>
            <tr><td>๐ŸŽฏ Purpose</td><td>Share small snippets of text and code</td></tr>
            <tr><td>๐Ÿ”‘ Needs</td><td>A free GitHub account to create gists</td></tr>
            <tr><td>๐ŸŒ Public</td><td>Listed on your profile and searchable</td></tr>
            <tr><td>๐Ÿ”— Secret</td><td>Unlisted, but anyone with the link can see it</td></tr>
            <tr><td>๐Ÿงฌ Under the hood</td><td>Every gist is a Git repository with history</td></tr>
            <tr><td>๐Ÿ“Ž Gist URL</td><td><code>gist.github.com/&lt;user&gt;/&lt;id&gt;</code></td></tr>
            <tr><td>โš ๏ธ Never share</td><td>Passwords, tokens or API keys</td></tr>
          </tbody>
        </table>
      </div>
      <p style="margin-top:14px">๐ŸŽ‰ <b>Well done!</b> You now know what <code>gist.github.com</code> is, how it works, and how to use it safely.</p>
    </div>
  </section>
</main>

<footer>
  Made with ๐Ÿ’œ ยท generated by <b>AI Prompt Dictionary</b><br>
  <small>GitHub and Gist are trademarks of their respective owners. This is an independent learning page.</small>
</footer>

<script>
(function () {
  const $ = (s, r = document) => r.querySelector(s);
  const $$ = (s, r = document) => [...r.querySelectorAll(s)];
  const earned = new Set();

  function award(id) {
    if (earned.has(id)) return;
    earned.add(id);
    $('#b-' + id).classList.add('earned');
    $('#scoreLine').textContent = 'Achievements: ' + earned.size + ' of 4 ' + (earned.size === 4 ? '๐ŸŒŸ Legend!' : '๐ŸŒฑ');
    if (earned.size === 4) confetti();
  }

  // Theme toggle
  $('#themeBtn').addEventListener('click', () => document.body.classList.toggle('light'));

  // Scroll progress + reveal
  const bar = $('#progress');
  function onScroll() {
    const h = document.documentElement.scrollHeight - innerHeight;
    const p = h > 0 ? Math.min(100, Math.round(scrollY / h * 100)) : 0;
    bar.style.width = p + '%';
    bar.setAttribute('aria-valuenow', p);
  }
  addEventListener('scroll', onScroll, { passive: true }); onScroll();
  const io = 'IntersectionObserver' in window ? new IntersectionObserver(es => es.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); io.unobserve(e.target); } }), { threshold: .08 }) : null;
  $$('.section').forEach(s => io ? io.observe(s) : s.classList.add('visible'));

  // Accordion
  const opened = new Set();
  function trackOpen(btn) {
    opened.add(btn.getAttribute('aria-controls'));
    if (opened.size >= $$('.sec-head').length) award('read');
  }
  $$('.sec-head').forEach(btn => {
    if (btn.getAttribute('aria-expanded') === 'true') trackOpen(btn);
    btn.addEventListener('click', () => {
      const open = btn.getAttribute('aria-expanded') === 'true';
      btn.setAttribute('aria-expanded', !open);
      $('#' + btn.getAttribute('aria-controls')).classList.toggle('open', !open);
      if (!open) trackOpen(btn);
    });
  });
  // Opening a section via nav link
  $$('nav a').forEach(a => a.addEventListener('click', () => {
    const sec = $(a.getAttribute('href'));
    const btn = $('.sec-head', sec);
    if (btn && btn.getAttribute('aria-expanded') !== 'true') btn.click();
  }));

  // Copy buttons (works on all .copy buttons, including ones in the demo)
  document.addEventListener('click', e => {
    const b = e.target.closest('.copy'); if (!b) return;
    const text = $('pre', b.parentElement).innerText.trim();
    const done = () => { b.textContent = 'โœ“ Copied'; b.classList.add('done'); award('copy'); setTimeout(() => { b.textContent = 'Copy'; b.classList.remove('done'); }, 1800); };
    if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(text).then(done, fallback);
    else fallback();
    function fallback() {
      const t = document.createElement('textarea'); t.value = text; document.body.appendChild(t); t.select();
      try { document.execCommand('copy'); done(); } catch (_) { b.textContent = 'Press Ctrl+C'; }
      t.remove();
    }
  });

  // URL builder demo
  let secret = false, touched = false;
  function clean(s, fb) { s = (s || '').replace(/[^A-Za-z0-9-]/g, ''); return s || fb; }
  function build() {
    const u = clean($('#u').value, 'username'), g = clean($('#g').value, 'gistid');
    const page = 'https://gist.github.com/' + u + '/' + g;
    $('#o1').textContent = page;
    $('#o2').textContent = 'git clone https://gist.github.com/' + g + '.git';
    $('#o3').textContent = '<script src="' + page + '.js"></script>';
    $('#visNote').textContent = secret
      ? '๐Ÿ”— Secret: not listed on your profile or in search, but anyone with this link can open it.'
      : '๐ŸŒ Public: appears on your profile and can be found in search.';
    if (touched) award('demo');
  }
  ['u', 'g'].forEach(id => $('#' + id).addEventListener('input', () => { touched = true; build(); }));
  function setVis(s) { secret = s; $('#vSec').setAttribute('aria-pressed', s); $('#vPub').setAttribute('aria-pressed', !s); touched = true; build(); }
  $('#vPub').addEventListener('click', () => setVis(false));
  $('#vSec').addEventListener('click', () => setVis(true));
  build();

  // Tabs with arrow-key support
  const tabs = $$('.tab');
  function selectTab(t) {
    tabs.forEach(x => { const on = x === t; x.setAttribute('aria-selected', on); x.tabIndex = on ? 0 : -1; $('#' + x.getAttribute('aria-controls')).hidden = !on; });
    t.focus(); touched = true; award('demo');
  }
  tabs.forEach((t, i) => {
    t.addEventListener('click', () => selectTab(t));
    t.addEventListener('keydown', e => {
      if (e.key === 'ArrowRight') selectTab(tabs[(i + 1) % tabs.length]);
      if (e.key === 'ArrowLeft') selectTab(tabs[(i - 1 + tabs.length) % tabs.length]);
    });
  });

  // Quiz
  const questions = [
    { q: 'What is GitHub Gist mainly used for?', o: ['Hosting large, full applications', 'Sharing small snippets of text or code', 'Sending private emails', 'Buying GitHub plans'], a: 1, why: 'Gists are built for quick, small snippets. Big projects belong in a repository.' },
    { q: 'A "secret" gist isโ€ฆ', o: ['Fully private, so nobody else can ever open it', 'Encrypted with a password', 'Unlisted, but viewable by anyone who has the link', 'Deleted after 24 hours'], a: 2, why: 'Secret gists are hidden from search and your profile, but the link works for anyone. Never store passwords in one.' },
    { q: 'Why should you give a gist file a name like "demo.py"?', o: ['So Gist can apply the right syntax highlighting', 'Because Gist rejects names without dots', 'To make it load faster', 'To make it private'], a: 0, why: 'The extension tells Gist which language to colour, so your code is easier to read.' }
  ];
  let score = 0, answered = 0;
  function renderQuiz() {
    score = 0; answered = 0;
    $('#quizResult').textContent = ''; $('#retry').style.display = 'none';
    const box = $('#quizBox'); box.innerHTML = '';
    questions.forEach((q, qi) => {
      const d = document.createElement('div'); d.className = 'qz';
      d.innerHTML = '<h3>Q' + (qi + 1) + '. ' + q.q + '</h3><div class="opts"></div><div class="fb" aria-live="polite"></div>';
      const opts = $('.opts', d), fb = $('.fb', d);
      q.o.forEach((txt, oi) => {
        const b = document.createElement('button'); b.type = 'button'; b.className = 'opt'; b.textContent = txt;
        b.addEventListener('click', () => {
          $$('.opt', opts).forEach(x => x.disabled = true);
          answered++;
          if (oi === q.a) { b.classList.add('right'); fb.textContent = '๐ŸŽ‰ Correct! ' + q.why; score++; confetti(26); }
          else { b.classList.add('wrong'); $$('.opt', opts)[q.a].classList.add('right'); fb.textContent = '๐Ÿค” Not quite. ' + q.why; }
          if (answered === questions.length) finish();
        });
        opts.appendChild(b);
      });
      box.appendChild(d);
    });
  }
  function finish() {
    const msg = score === 3 ? '๐Ÿ† Perfect! 3 out of 3. You\'re a Gist pro!' : score === 2 ? '๐Ÿ‘ 2 out of 3. So close!' : '๐Ÿ’ช ' + score + ' out of 3. Re-read the sections and try again!';
    $('#quizResult').textContent = msg;
    $('#retry').style.display = 'inline-flex';
    if (score === 3) { award('quiz'); confetti(90); }
  }
  $('#retry').addEventListener('click', renderQuiz);
  renderQuiz();

  // Confetti
  function confetti(n = 70) {
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const colors = ['#8b5cf6', '#3b82f6', '#22c55e', '#f59e0b', '#ec4899'];
    for (let i = 0; i < n; i++) {
      const c = document.createElement('i'); c.className = 'confetti';
      c.style.left = Math.random() * 100 + 'vw';
      c.style.background = colors[i % colors.length];
      c.style.animationDuration = (2 + Math.random() * 2.2) + 's';
      c.style.animationDelay = (Math.random() * .4) + 's';
      c.style.borderRadius = Math.random() > .5 ? '50%' : '2px';
      document.body.appendChild(c);
      setTimeout(() => c.remove(), 5000);
    }
  }
})();
</script>
</body>
</html>
Live Preview