AD

GST

<!DOCTYPE html>
<html>
<head>
  <title>Course Material Viewer</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #fff;
      color: #007BFF;
      margin: 0;
      padding: 0;
      text-align: center;
    }

    #messageBox {
      padding: 50px;
      font-size: 1.2rem;
    }

    #okBtn {
      padding: 10px 20px;
      background-color: #007BFF;
      color: #fff;
      border: none;
      font-size: 1rem;
      border-radius: 5px;
      margin-top: 20px;
      cursor: pointer;
      display: none;
    }

    #loaderBar {
      width: 0%;
      height: 10px;
      background-color: #007BFF;
      margin-top: 20px;
      transition: width 5s linear;
    }

    #controls {
      display: none;
      margin: 10px auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
    }

    iframe {
      width: 100%;
      height: 90vh;
      border: none;
      transform-origin: top left;
    }

    .btn {
      background: #007BFF;
      color: #fff;
      padding: 6px 12px;
      font-size: 0.85rem;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    #shareButtons {
      display: none;
      margin-top: 20px;
    }

    .shareBtn {
      background: #007BFF;
      color: #fff;
      padding: 10px 20px;
      margin: 5px;
      font-size: 1rem;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    #pdfControls {
      display: none;
    }
  </style>
</head>
<body>

<div id="messageBox">
  <p id="typingText"></p>
  <button id="okBtn" onclick="startLoading()">Acknowledge</button>
  <div id="loaderBar"></div>
  <p id="loadingText" style="display:none;">Loading course material...</p>
</div>

<div id="controls">
  <button class="btn" onclick="goBack()">Back</button>
  <button class="btn" onclick="showShareButtons()">Share</button>
</div>

<div id="pdfControls">
  <button class="btn" onclick="toggleFullScreen()">Fullscreen</button>
  <button class="btn" onclick="zoomIn()">Zoom In</button>
  <button class="btn" onclick="zoomOut()">Zoom Out</button>
</div>

<div id="shareButtons">
  <button class="shareBtn" onclick="sharePage('Twitter')">Share on Twitter</button>
  <button class="shareBtn" onclick="sharePage('Facebook')">Share on Facebook</button>
  <button class="shareBtn" onclick="sharePage('WhatsApp')">Share on WhatsApp</button>
  <button class="shareBtn" onclick="sharePage('Telegram')">Share on Telegram</button>
</div>

<iframe id="pdfViewer" src="" style="display:none;"></iframe>

<script>
  const pdfURL = "https://drive.google.com/file/d/1Q2Ln6Hd0Vsb5vmPFm7lX_1ctL-j3P8IF/preview";
  const pageTitle = "NOUN Course Material";

  function typeWriter(text, i = 0) {
    const el = document.getElementById("typingText");
    if (i < text.length) {
      el.innerHTML += text.charAt(i);
      setTimeout(() => typeWriter(text, i + 1), 40);
    } else {
      document.getElementById("okBtn").style.display = "inline-block";
    }
  }

  function startLoading() {
    document.getElementById("okBtn").style.display = "none";
    document.getElementById("loadingText").style.display = "block";
    document.getElementById("loaderBar").style.width = "100%";

    setTimeout(() => {
      document.getElementById("messageBox").style.display = "none";
      document.getElementById("controls").style.display = "flex";
      document.getElementById("pdfControls").style.display = "flex";
      document.getElementById("pdfViewer").src = pdfURL;
      document.getElementById("pdfViewer").style.display = "block";
    }, 5000);
  }

  function goBack() {
    window.location.href = "#"; // Replace "#" with actual URL if needed
  }

  function toggleFullScreen() {
    const iframe = document.getElementById("pdfViewer");
    if (iframe.requestFullscreen) iframe.requestFullscreen();
  }

  let scale = 1;
  function zoomIn() {
    scale += 0.1;
    document.getElementById("pdfViewer").style.transform = `scale(${scale})`;
  }

  function zoomOut() {
    scale = Math.max(0.5, scale - 0.1);
    document.getElementById("pdfViewer").style.transform = `scale(${scale})`;
  }

  function showShareButtons() {
    const shareButtons = document.getElementById("shareButtons");
    if (shareButtons.style.display === "block") {
      shareButtons.style.display = "none"; // Hide the share buttons
    } else {
      shareButtons.style.display = "block"; // Show the share buttons
    }
  }

  function sharePage(platform) {
    const pageURL = encodeURIComponent(window.location.href);
    const message = encodeURIComponent("Check out this NOUN course material:");

    let shareURL = "";

    if (platform === "Twitter") {
      shareURL = `https://twitter.com/intent/tweet?url=${pageURL}&text=${message}`;
    } else if (platform === "Facebook") {
      shareURL = `https://www.facebook.com/sharer/sharer.php?u=${pageURL}`;
    } else if (platform === "WhatsApp") {
      shareURL = `https://wa.me/?text=${message}%20${pageURL}`;
    } else if (platform === "Telegram") {
      shareURL = `https://t.me/share/url?url=${pageURL}&text=${message}`;
    }

    window.open(shareURL, "_blank");
  }

  window.onload = function() {
    const intro = "This course material was provided by the National Open University of Nigeria (NOUN) in compliance with NUC. Some topics here have been summarized by FreshNote on our note section.";
    typeWriter(intro);
  };
</script>

</body>
</html>

You may like these posts