Soundboard Website Head Meta Boilerplate in HTML

23 Ethanthegoat72

Remix Open In Editor Fullscreen Discuss Publish Your Code

Soundboard Website Head Meta Boilerplate in HTML

<meta name="color-scheme" content="light">
    <meta name="theme-color" content="#D81B1B">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Soundboard Buttons">

<meta name="author" content="Soundboard Buttons">

<title>Page not found</title>

<meta
        name="user-is-authenticated"
        content="False"
    >

<link rel="preconnect" href="https://config.playwire.com" crossorigin>
    <link rel="preconnect" href="https://securepubads.g.doubleclick.net" crossorigin>
    <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>
    <link rel="dns-prefetch" href="https://cdn.intergient.com">
    <link rel="dns-prefetch" href="https://cdn.intergi.com">
    <link rel="dns-prefetch" href="https://cdn.playwire.com">

<link rel="preload" href="/static/landingpage/fonts/Fredoka-Variable-latin.woff2" as="font" type="font/woff2" crossorigin>

<meta property="og:title" content="SoundBoard Buttons">
        <meta
            property="og:description"
            content="SoundBoard buttons is trending meme sound library with 1.2 million sounds"
        >
        <meta property="og:type" content="website">
        <meta property="og:url" content="https://soundboardbuttons.com">
        <meta
            property="og:image"
            content="https://soundboardbuttons.com/static/landingpage/images/apple-touch-icon.png"
        >
        <meta property="og:image:width" content="1200">
        <meta property="og:image:height" content="1200">
        <meta property="og:site_name" content="Soundboard Buttons">

<meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:site" content="@SoundboardButtons">
        <meta
            name="twitter:title"
            content="SoundBoard buttons is trending meme sound library with 1.2 million sounds"
        >
        <meta
            name="twitter:description"
            content="SoundBoard buttons is trending meme sound library with 1.2 million sounds"
        >
        <meta name="twitter:image" content="">

<meta name="google-site-verification" content="k-P8E7IPuCnF4g_EvHU4NcouTRIWRH8L9119nn-3B3M" />
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-FZ47YTB85H"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
       function gtag(){dataLayer.push(arguments);}
       gtag('js', new Date());
       gtag('config', 'G-FZ47YTB85H');
    </script>

<link
        rel="apple-touch-icon"
        sizes="57x57"
        href="/static/landingpage/images/img/image-57x57.jpg"
    >
    <link
        rel="apple-touch-icon"
        sizes="60x60"
        href="/static/landingpage/images/img/image-60x60.jpg"
    >
    <link
        rel="apple-touch-icon"
        sizes="72x72"
        href="/static/landingpage/images/img/image-72x72.jpg"
    >
    <link
        rel="apple-touch-icon"
        sizes="76x76"
        href="/static/landingpage/images/apple-touch-icon.png"
    >
    <link
        rel="apple-touch-icon"
        sizes="114x114"
        href="/static/landingpage/images/img/image-114x114.jpg"
    >
    <link
        rel="apple-touch-icon"
        sizes="120x120"
        href="/static/landingpage/images/img/image-120x120.jpg"
    >
    <link
        rel="apple-touch-icon"
        sizes="144x144"
        href="/static/landingpage/images/img/image-144x144.jpg"
    >
    <link
        rel="apple-touch-icon"
        sizes="152x152"
        href="/static/landingpage/images/img/image-152x152.jpg"
    >
    <link
        rel="apple-touch-icon"
        sizes="180x180"
        href="/static/landingpage/images/img/image-180x180.jpg"
    >

<meta name="msapplication-TileColor" content="#f44336">
    <meta
        name="msapplication-TileImage"
        content="/static/landingpage/images/favicon.ico"
    >

<script
        src="/static/landingpage/js/soundboard_js.js"
        defer
    ></script>

<div 
      id="colorPlateBox">
      <p style="margin: 0 0 8px 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dark);">Accent Color</p>
      <div class="color-plate" style="display: flex; flex-wrap: wrap; gap: 8px;">
        <div class="color-plate__item color-plate__item--1"></div>
        <div class="color-plate__item color-plate__item--2"></div>
        <div class="color-plate__item color-plate__item--3"></div>
        <div class="color-plate__item color-plate__item--4"></div>
        <div class="color-plate__item color-plate__item--5"></div>
        <div class="color-plate__item color-plate__item--6"></div>
        <div class="color-plate__item color-plate__item--7"></div>
      </div>
         <label class="switch">
     <input id="themeSwitch" 
           type="checkbox" 
           aria-label="Toggle dark mode"
           role="switch"
           aria-checked="true">
  <div class="slider round">
    <div class="sun-moon">
      <svg id="moon-dot-1" class="moon-dot" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="50"></circle>
      </svg>
      <svg id="moon-dot-2" class="moon-dot" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="50"></circle>
      </svg>
      <svg id="moon-dot-3" class="moon-dot" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="50"></circle>
      </svg>
      <svg id="light-ray-1" class="light-ray" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="50"></circle>
      </svg>
      <svg id="light-ray-2" class="light-ray" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="50"></circle>
      </svg>
      <svg id="light-ray-3" class="light-ray" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="50"></circle>
      </svg>

</div>

const root    = document.documentElement;
  const switches = document.querySelectorAll('#themeSwitch'); // ✅ select all by class

// Apply saved theme on load
  const isDark = localStorage.theme === 'dark' ||
    (!localStorage.theme && matchMedia('(prefers-color-scheme:dark)').matches);

if (isDark) {
    root.setAttribute('data-theme', 'dark');
  }

// Sync all switches to current theme
  switches.forEach(sw => {
    sw.checked = root.getAttribute('data-theme') === 'dark';
  });

// When any switch changes, update theme and sync all others
  switches.forEach(sw => {
    sw.addEventListener('change', () => {
      const dark = sw.checked;
      root.setAttribute('data-theme', dark ? 'dark' : 'light');
      localStorage.theme = dark ? 'dark' : 'light';

// ✅ Sync all other switches to match
      switches.forEach(s => s.checked = dark);
    });
  });

});
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {

const colors = [
  '#D81B1B', '#FF832A', '#FFB42A', '#2AAAFF', '#4A2AFF', '#AD2AFF', '#FF2AAD',
];

const savedAccent = localStorage.accent || '#D81B1B';
  document.documentElement.style.setProperty('--accent', savedAccent);

const toggleBtn            = document.getElementById('colorPlateToggle');
  const toggleBtnDesktop     = document.getElementById('colorPlateToggleDesktop');
  const colorPlateBox        = document.getElementById('colorPlateBox');
  const colorPlateBoxDesktop = document.getElementById('colorPlateBoxDesktop');

// Set button colors on load
  if (toggleBtn)        { toggleBtn.style.background = savedAccent;        toggleBtn.style.borderColor = savedAccent; }
  if (toggleBtnDesktop) { toggleBtnDesktop.style.background = savedAccent; toggleBtnDesktop.style.borderColor = savedAccent; }

// ✅ Apply colors to a specific container's items only
  function initPlate(containerEl) {
    if (!containerEl) return;
    containerEl.querySelectorAll('.color-plate__item').forEach((el, i) => {
      el.style.background = colors[i]; // ✅ scoped to this container only
      if (colors[i] === savedAccent) el.classList.add('active');

el.addEventListener('click', () => {
        document.documentElement.style.setProperty('--accent', colors[i]);
        localStorage.accent = colors[i];

// Update both buttons
        if (toggleBtn)        { toggleBtn.style.background = colors[i];        toggleBtn.style.borderColor = colors[i]; }
        if (toggleBtnDesktop) { toggleBtnDesktop.style.background = colors[i]; toggleBtnDesktop.style.borderColor = colors[i]; }

// Update active in BOTH containers
        [colorPlateBox, colorPlateBoxDesktop].forEach(box => {
          if (!box) return;
          box.querySelectorAll('.color-plate__item').forEach((e, j) => {
            e.classList.toggle('active', j === i);
          });
        });
      });
    });
  }

initPlate(colorPlateBox);
  initPlate(colorPlateBoxDesktop);

// Toggle mobile box
  if (toggleBtn && colorPlateBox) {
    toggleBtn.addEventListener('click', (e) => {
      e.stopPropagation();
      colorPlateBox.style.display = colorPlateBox.style.display === 'block' ? 'none' : 'flex';
    });
  }

// Toggle desktop box
  if (toggleBtnDesktop && colorPlateBoxDesktop) {
    toggleBtnDesktop.addEventListener('click', (e) => {
      e.stopPropagation();
      colorPlateBoxDesktop.style.display = colorPlateBoxDesktop.style.display === 'block' ? 'none' : 'flex';
    });
  }

// Close when clicking outside
  document.addEventListener('click', (e) => {
    if (colorPlateBox        && !colorPlateBox.contains(e.target)        && e.target !== toggleBtn)        colorPlateBox.style.display = 'none';
    if (colorPlateBoxDesktop && !colorPlateBoxDesktop.contains(e.target) && e.target !== toggleBtnDesktop) colorPlateBoxDesktop.style.display = 'none';
  });

});
</script>
            <div style="margin: 0;" class="px-2">
    
    <div class="d-flex gap-3 flex-column flex-lg-row">
        <a href="/login/" rel="nofollow" class="pill red" style="white-space: nowrap;">+ Upload Sound</a>
        <a href="/login/" rel="nofollow" class="pill grey">Login</a>
    </div>
    
</div>
            
            </div>
        </div>
    </nav>

<div data-pw-desk="leaderboard_atf" id="pwDeskLbAtf"></div>
<script type="text/javascript">
  window.ramp.que.push(function () {
      window.ramp.addTag("pwDeskLbAtf");
  })
</script>
    
    </div>
    </div>
    
<div data-pw-mobi="leaderboard_atf" id="pwMobiLbAtf" style="min-height:50px" ></div>
<script type="text/javascript">
  window.ramp.que.push(function () {
      window.ramp.addTag("pwMobiLbAtf");
  })
</script>

<h1 class="fw-bold" style="color: #333; text-shadow: 2px 2px 0px red, -2px -2px 0px green; font-size: 3rem;">
        404 Error
    </h1>
    <p class="text-muted">Opsss. Page not found!</p>
    <a href="/" class="btn btn-danger px-4 py-2">Go Home</a>
</div>

</main>

<a class="logo" href="/" style="font-size:22px"><span class="sound-button sound-button-small" style="width: 50px; height: 50px;">
                
                        </span>SoundBoard</a>
                        <p style="max-width: 700px; font-weight: 400;"> SoundBoardButtons.com was created by a student passionate about internet culture, memes, and sound design. 
            Noticing the growing demand for quick and easy access to viral sound clips and meme audio, the site was 
            built as a free, curated directory for anyone to explore. Whether you're a creator, streamer, or 
            just browsing for fun sounds, SoundBoardButtons.com offers a simple and regularly updated platform 
            to find, play, and download popular audio buttons—all in one place.
            for any questions please reach out at info@soundboardbuttons.com</p>
        </div>
            <div class="links" style="display: flex; flex-direction: column;"><a href="/about-us/" rel="nofollow" >About</a><a href="/privacy-policy/" rel="nofollow" >Privacy</a><a href="/disclaimer/" >Disclaimer</a></div>
            <div class="d-flex flex-column gap-4">

<a class="pill grey" href="https://play.google.com/store/apps/details?id=com.soundboardbuttons.lab" target="_blank" rel="nofollow" style="height:40px;font-size:14px">▶ Get on Play Store</a>
<span class="copy">© 2026 SoundBoardButtons.com</span>
</div>
</div>
<script data-cfasync="false" async src="//cdn.intergient.com/1025450/78516/ramp.js"></script>
</footer>

CSS

Soundboard Website Head Meta Boilerplate in HTML

Recommended