Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Help Button</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    #help-button {
      width: 600px;
      height: 600px;
      background-color: red;
      border: none;
      border-radius: 50%;
      color: white;
      font-size: 40px;
      cursor: pointer;
    }
    .number-button {
      display: inline-block;
      width: 72px;
      height: 72px;
      background-color: lightgreen;
      margin: 5px;
      line-height: 72px;
      font-size: 21px;
      cursor: pointer;
    }
    #delete-button {
      width: 72px;
      height: 72px;
      background-color: #ff9999;
      margin: 5px;
      line-height: 72px;
      font-size: 21px;
      cursor: pointer;
    }
    #selections {
      margin-top: 20px;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <button id="help-button">Need help?</button>

  <div id="dial-pad-container" style="display: none;">
    <div class="number-button">1</div>
    <div class="number-button">2</div>
    <div class="number-button">3</div>
    <br>
    <div class="number-button">4</div>
    <div class="number-button">5</div>
    <div class="number-button">6</div>
    <br>
    <div class="number-button">7</div>
    <div class="number-button">8</div>
    <div class="number-button">9</div>
    <br>
    <div class="number-button">0</div>
    <br>
    <div id="delete-button">Delete</div>
    <br>
    <div id="selections"></div>
    <br>
    <button id="done-button">Done</button>
  </div>

  <div id="thank-you-message" style="display: none; margin-top: 20px;">
    Thank you and I will be with you shortly!
  </div>

  <script>
    const helpButton = document.getElementById('help-button');
    const dialPadContainer = document.getElementById('dial-pad-container');
    const doneButton = document.getElementById('done-button');
    const thankYouMessage = document.getElementById('thank-you-message');
    const selectionsDisplay = document.getElementById('selections');
    let selections = '';

    helpButton.addEventListener('click', () => {
      helpButton.style.display = 'none';
      dialPadContainer.style.display = 'block';
    });

    document.querySelectorAll('.number-button').forEach(numberButton => {
      numberButton.addEventListener('click', () => {
        const selectedNumber = numberButton.textContent;
        selections += selectedNumber;
        selectionsDisplay.textContent = selections;
      });
    });

    document.getElementById('delete-button').addEventListener('click', () => {
      selections = '';
      selectionsDisplay.textContent = selections;
    });

    doneButton.addEventListener('click', () => {
      dialPadContainer.style.display = 'none';
      thankYouMessage.style.display = 'block';
    });

    // Close dial pad if clicked outside
    window.addEventListener('click', (event) => {
      if (event.target === dialPadContainer) {
        // Handle click outside dial pad
        thankYouMessage.style.display = 'block';
      }
    });

    // Assuming Durable.co provides a method to send the selected option
    function sendOptionToDurable(option) {
      // Implement the logic to send the option to Durable.co
      // Example: Durable.co.sendOption(option);
      console.log('Selected option:', option);
    }
  </script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three Column Site with Customers Served</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
<style>
  body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
  }
  .container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
  }
  .column {
    flex: 1;
    padding: 10px;
  }
  .counter {
    font-size: 2em;
    font-weight: bold;
    text-align: center;
  }
  .customers-served {
    font-size: 16px;
    text-align: center;
    color: #333; /* Change color as desired */
  }
</style>
</head>
<body>

<div class="container">
  <div class="column">
    <div class="counter" id="counter1">1</div>
    <div class="customers-served">Customers served</div>
  </div>
  <div class="column">
    <div class="counter" id="counter2">1</div>
    <div class="customers-served">Customers served</div>
  </div>
  <div class="column">
    <div class="counter" id="counter3">1</div>
    <div class="customers-served">Customers served</div>
  </div>
</div>

<script>
  function startCounter(counterId) {
    var counterElement = document.getElementById(counterId);
    var count = 1;
    var interval = setInterval(function() {
      if (count >= 125) {
        clearInterval(interval);
      } else {
        count++;
        counterElement.textContent = count;
      }
    }, 50); // Change the interval to control the speed of counting (lower value for faster counting)
  }

  // Start the counters when the page is loaded
  window.onload = function() {
    startCounter("counter1");
    startCounter("counter2");
    startCounter("counter3");
  };
</script>

</body>
</html>

