Embed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>How Many Sleeps Until Christmas Widget</title>

<style>
  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 40px 20px;
    font-family: Arial, Helvetica, sans-serif;
    background: #f7f7f7;
    color: #222;
  }

  .embed-container {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
  }

  .embed-container h1 {
    margin: 0 0 10px;
    font-size: 32px;
  }

  .embed-container .intro {
    margin: 0 0 30px;
    color: #666;
    font-size: 16px;
  }

  /* LIVE WIDGET PREVIEW */
  .christmas-widget {
    max-width: 320px;
    margin: 0 auto 45px;
    padding: 25px 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 14px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    text-align: center;
  }

  .christmas-widget .sleeps-number {
    font-size: 38px;
    line-height: 1.1;
    font-weight: 700;
    color: #c62828;
    margin-bottom: 8px;
  }

  .christmas-widget .until-text {
    font-size: 15px;
    color: #555;
    margin-bottom: 18px;
  }

  .christmas-widget .powered-by {
    font-size: 11px;
    color: #888;
  }

  .christmas-widget .powered-by a {
    color: #888;
    text-decoration: underline;
  }

  .embed-container h2 {
    font-size: 24px;
    margin: 0 0 8px;
  }

  .embed-description {
    color: #666;
    font-size: 14px;
    margin-bottom: 15px;
  }

  .code-wrapper {
    position: relative;
    text-align: left;
  }

  #embed-code {
    width: 100%;
    min-height: 300px;
    padding: 18px;
    padding-bottom: 65px;
    background: #1e1e1e;
    color: #e6e6e6;
    border: 0;
    border-radius: 10px;
    font-family: monospace;
    font-size: 12px;
    line-height: 1.6;
    resize: vertical;
  }

  .copy-button {
    position: absolute;
    bottom: 15px;
    right: 15px;
    padding: 10px 18px;
    background: #c62828;
    color: #fff;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
  }

  .copy-button:hover {
    background: #a91f1f;
  }

  .copy-message {
    display: none;
    margin-top: 10px;
    color: #278a45;
    font-size: 13px;
    font-weight: 600;
  }
</style>
</head>

<body>

<div class="embed-container">

  <h1>How Many Sleeps Until Christmas?</h1>

  <p class="intro">
    Add our Christmas countdown widget to your website for free.
  </p>


  <!-- LIVE PREVIEW -->

  <div class="christmas-widget">

    <div class="sleeps-number" id="preview-sleeps">
      Loading...
    </div>

    <div class="until-text">
      until Christmas!
    </div>

    <div class="powered-by">
      Powered by
      <a href="https://www.howmanysleepsuntilchristmas.co.uk/"
         target="_blank">
        How Many Sleeps Until Christmas
      </a>
    </div>

  </div>


  <!-- EMBED CODE -->

  <h2>Embed on your website</h2>

  <p class="embed-description">
    Copy the HTML below and paste it into your website.
  </p>

  <div class="code-wrapper">

    <textarea id="embed-code" readonly></textarea>

    <button class="copy-button" onclick="copyEmbedCode()">
      Copy HTML
    </button>

  </div>

  <div class="copy-message" id="copy-message">
    HTML copied to your clipboard!
  </div>

</div>


<script>

/*
 * Calculate sleeps until Christmas
 */

function getChristmasSleeps() {

  var today = new Date();

  var year = today.getFullYear();

  var christmas = new Date(year, 11, 25);

  /*
   * If Christmas has already happened this year,
   * count towards next Christmas.
   */

  if (today >= christmas) {
    christmas = new Date(year + 1, 11, 25);
  }

  /*
   * Remove the time so we are counting whole days.
   */

  var todayDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate()
  );

  var christmasDate = new Date(
    christmas.getFullYear(),
    christmas.getMonth(),
    christmas.getDate()
  );

  var difference = christmasDate - todayDate;

  return Math.round(
    difference / (1000 * 60 * 60 * 24)
  );

}


/*
 * Update the preview
 */

function updatePreview() {

  var sleeps = getChristmasSleeps();

  var text;

  if (sleeps === 1) {
    text = "1 sleep";
  } else {
    text = sleeps + " sleeps";
  }

  document.getElementById("preview-sleeps").textContent = text;

}


/*
 * The actual HTML that visitors will embed
 */

var embedCode = `<!-- How Many Sleeps Until Christmas Widget -->

<div id="how-many-sleeps-widget" style="
  max-width:320px;
  margin:20px auto;
  padding:25px 20px;
  background:#ffffff;
  border:1px solid #dddddd;
  border-radius:14px;
  box-shadow:0 5px 20px rgba(0,0,0,0.08);
  text-align:center;
  font-family:Arial,Helvetica,sans-serif;
  box-sizing:border-box;
">

  <div id="christmas-sleeps-number" style="
    font-size:38px;
    line-height:1.1;
    font-weight:700;
    color:#c62828;
    margin-bottom:8px;
  ">
    Loading...
  </div>

  <div style="
    font-size:15px;
    color:#555555;
    margin-bottom:18px;
  ">
    until Christmas!
  </div>

  <div style="
    font-size:11px;
    color:#888888;
  ">
    Powered by
    <a href="https://www.howmanysleepsuntilchristmas.co.uk/"
       target="_blank"
       style="color:#888888;text-decoration:underline;">
      How Many Sleeps Until Christmas
    </a>
  </div>

</div>

<script>

(function() {

  function updateChristmasSleeps() {

    var now = new Date();

    var year = now.getFullYear();

    var christmas = new Date(year, 11, 25);

    if (now >= christmas) {
      christmas = new Date(year + 1, 11, 25);
    }

    var today = new Date(
      now.getFullYear(),
      now.getMonth(),
      now.getDate()
    );

    var christmasDay = new Date(
      christmas.getFullYear(),
      christmas.getMonth(),
      christmas.getDate()
    );

    var sleeps = Math.round(
      (christmasDay - today) /
      (1000 * 60 * 60 * 24)
    );

    var element = document.getElementById(
      "christmas-sleeps-number"
    );

    if (element) {

      element.textContent =
        sleeps === 1
          ? "1 sleep"
          : sleeps + " sleeps";

    }

  }

  updateChristmasSleeps();

})();

<\/script>

<!-- End How Many Sleeps Until Christmas Widget -->`;


/*
 * Put the embed code into the textarea
 */

document.getElementById("embed-code").value = embedCode;


/*
 * Copy button
 */

function copyEmbedCode() {

  var textarea = document.getElementById("embed-code");

  textarea.select();
  textarea.setSelectionRange(0, 99999);

  navigator.clipboard.writeText(textarea.value)
    .then(function() {

      var message =
        document.getElementById("copy-message");

      message.style.display = "block";

      setTimeout(function() {
        message.style.display = "none";
      }, 2500);

    })
    .catch(function() {

      document.execCommand("copy");

      var message =
        document.getElementById("copy-message");

      message.style.display = "block";

      setTimeout(function() {
        message.style.display = "none";
      }, 2500);

    });

}


/*
 * Run the preview
 */

updatePreview();

</script>

</body>
</html>