ihf.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Poll App</title>
  <style>
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f4f7fa;
  padding: 20px;
}

.poll-app {
  max-width: 600px;
  margin: auto;
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

textarea {
  width: 100%;
  height: 100px;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

button {
  cursor: pointer;
  border: none;
  border-radius: 5px;
  padding: 8px 16px;
  margin: 5px 0;
  transition: all 0.2s ease;
}

button:hover {
  opacity: 0.85;
}

.question-card {
  background: #f9f9f9;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
}

.progress-bar {
  height: 10px;
  background: #ddd;
  border-radius: 5px;
  margin-top: 5px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  text-align: center;
  color: white;
  font-size: 10px;
  line-height: 10px;
}

  </style>
</head>
<body>

  <div class="poll-app">
    <h1>Interactive Poll</h1>
    <textarea id="questionsInput" placeholder="Paste your questions here, one per line"></textarea>
    <button id="generateBtn">Generate Poll</button>
    <div id="pollContainer"></div>
    <button id="shareBtn">Generate Shareable Link</button>
  </div>


  <script>
        const generateBtn = document.getElementById('generateBtn');
        const pollContainer = document.getElementById('pollContainer');
        const questionsInput = document.getElementById('questionsInput');
        const shareBtn = document.getElementById('shareBtn');

        // Load saved votes from localStorage
        let votes = JSON.parse(localStorage.getItem('votes')) || {};

        function saveVotes() {
          localStorage.setItem('votes', JSON.stringify(votes));
        }

        function renderPoll(questions) {
          pollContainer.innerHTML = '';
          questions.forEach((q, index) => {
            const div = document.createElement('div');
            div.classList.add('question');

            const yesBtn = document.createElement('button');
            yesBtn.textContent = `Yes (${votes[q]?.yes || 0})`;
            yesBtn.addEventListener('click', () => {
              votes[q] = votes[q] || { yes: 0, no: 0 };
              votes[q].yes += 1;
              saveVotes();
              renderPoll(questions);
            });

            const noBtn = document.createElement('button');
            noBtn.textContent = `No (${votes[q]?.no || 0})`;
            noBtn.addEventListener('click', () => {
              votes[q] = votes[q] || { yes: 0, no: 0 };
              votes[q].no += 1;
              saveVotes();
              renderPoll(questions);
            });

            div.textContent = q + ' ';
            div.appendChild(yesBtn);
            div.appendChild(noBtn);

            pollContainer.appendChild(div);
          });
        }

        generateBtn.addEventListener('click', () => {
          const questions = questionsInput.value.split('\n').filter(q => q.trim() !== '');
          renderPoll(questions);
        });

        shareBtn.addEventListener('click', async () => {
          const questions = questionsInput.value.split('\n').filter(q => q.trim() !== '');
          if (questions.length === 0) {
            alert('Please enter some questions first.');
            return;
          }
          const baseURL = window.location.href.split('?')[0];
          const params = new URLSearchParams();
          params.set('questions', questions.join('|'));
          const fullURL = `${baseURL}?${params.toString()}`;
          const shortURL = await generateTinyURL(fullURL);
          prompt('Shareable Link:', shortURL);
        });


        async function generateTinyURL(originalURL) {
          const response = await fetch(`https://tinyurl.com/api-create.php?url=${encodeURIComponent(originalURL)}`);
          const shortURL = await response.text();
          return shortURL;
      }




  </script>
</body>
</html>