<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stop Being a Retard — Your Daily De-Derpification</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  /* Quick, cheerful palette */
  :root {
    --bg: #f5f7fa;
    --accent: #ffae00;
    --text: #222;
    --card: #fff;
  }
  body {
    margin: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  header {
    background: var(--accent);
    color: #000;
    padding: 2.5rem 1rem 3.5rem;
    text-align: center;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  }
  h1 { margin: 0; font-size: 2.8rem; text-transform: uppercase; }
  main {
    flex: 1;
    margin-top: -2.5rem;     /* pulls cards into the header curve */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 0 1rem 4rem;
  }
  .card {
    background: var(--card);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    max-width: 680px;
    width: 100%;
    padding: 2rem;
    text-align: center;
  }
  .btn {
    background: var(--accent);
    border: none;
    border-radius: 6px;
    padding: .75rem 1.4rem;
    font-size: 1.1rem;
    cursor: pointer;
    transition: transform .1s;
  }
  .btn:hover { transform: translateY(-2px); }
  footer {
    text-align: center;
    font-size: .85rem;
    padding: 1.5rem 1rem;
    opacity: .65;
  }
</style>
</head>
<body>

<header>
  <h1>Stop Being a Retard</h1>
  <p>Internet-approved tips for maximum un-Retard-ification.</p>
</header>

<main>

  <section class="card" id="Retard-tips">
    <h2>Top 5 Retard Moves to Avoid Today</h2>
    <ol style="text-align:left; max-width:500px; margin:1rem auto;">
      <li>Reply-all to the entire company on a “Congrats!” email thread.</li>
      <li>Push <kbd>git push --force</kbd> to <em>main</em> on Friday at 4:59 PM.</li>
      <li>Type your password into the username field—twice.</li>
      <li>Ask “What’s the Wi-Fi password?” at a zero-trust conference.</li>
      <li>Say “It’s working on my machine” during the outage bridge.</li>
    </ol>
  </section>

  <section class="card" id="dad-joke">
    <h2>Need a Palate Cleanser?</h2>
    <p><em id="joke-text">Press the button for a fresh dad joke.</em></p>
    <button class="btn" onclick="getJoke()">De-Derp Me</button>
  </section>

  <section class="card" id="counter">
    <h2>Retard Moments Avoided</h2>
    <p style="font-size:3rem; margin:0;" id="count">0</p>
    <button class="btn" onclick="increment()">I Resisted the Derp!</button>
  </section>

</main>

<footer>
  Made with 💛, caffeine, and fewer than 3 syntax errors. <br>
  P.S. If this page offended you, please file a complaint at <a href="mailto:idontcare@stopbeingaRetard.com">idontcare@stopbeingaRetard.com</a>.
</footer>

<script>
/* Tiny dad-joke fetcher using icanhazdadjoke.com (no key needed) */
async function getJoke() {
  const jokeText = document.getElementById('joke-text');
  jokeText.textContent = 'Loading pun…';
  try {
    const res = await fetch('https://icanhazdadjoke.com/', {
      headers: { Accept: 'application/json' }
    });
    const data = await res.json();
    jokeText.textContent = data.joke;
  } catch (e) {
    jokeText.textContent = "404 humor not found. Try again!";
  }
}

/* Silly localStorage counter */
const countEl = document.getElementById('count');
function loadCount() {
  const n = localStorage.getItem('Retard_count') || 0;
  countEl.textContent = n;
}
function increment() {
  let n = Number(localStorage.getItem('Retard_count') || 0) + 1;
  localStorage.setItem('Retard_count', n);
  countEl.textContent = n;
}
loadCount();
</script>

</body>
</html>