Vision Week (test)

index.html

<nav>
  <ul>
    <li><a href="#" id="homeLink">Home</a></li>
    <li><a href="#" id="tourLink">Virtual Tour</a></li>
    <li><a href="#" id="mapLink">Map</a></li>
    <li><a href="#" id="profileLink">Profile</a></li>
  </ul>
</nav>

<div class="container" id="content">
  <!-- Home Screen -->
  <div id="homeScreen" class="content-screen active">
    <h1>Welcome to Vision Week!</h1>
    <p>Explore fascinating posts and statistics about the animals.</p>
    <div class="post">
      <h2>Polar Bears in the Arctic</h2>
      <img src="https://example.com/polar-bear.jpg" alt="Polar Bears">
      <p>Learn about the life of polar bears and their survival in the Arctic.</p>
    </div>
    <div class="statistics">
      <h3>Animal Conservation Stats</h3>
      <p>Number of animals saved: 45,678</p>
      <p>Popular exhibits: Polar Bears, Penguins, Arctic Foxes.</p>
    </div>
  </div>

  <!-- Virtual Tour Screen -->
  <div id="tourScreen" class="content-screen">
    <h1>VR Viewer</h1>
    <p>Experience an immersive tour of the zoo.</p>
    <div class="vr-content">
      <h2>Explore the Arctic Exhibit</h2>
      <img src="https://example.com/vr-headset.jpg" alt="VR Headset">
      <p>Put on your VR headset and explore the Arctic habitat, home to polar bears, seals, and more.</p>
    </div>
  </div>

  <!-- Map Screen -->
  <div id="mapScreen" class="content-screen">
    <h1>Interactive Map</h1>
    <p>Find your way around the zoo with our interactive 3D map.</p>
    <div class="map-content">
      <h2>Zoo Layout</h2>
      <img src="https://example.com/zoo-map.jpg" alt="Zoo Map">
      <p>Explore different sections of the zoo and locate your favorite animals.</p>
    </div>
  </div>

  <!-- Profile Screen -->
  <div id="profileScreen" class="content-screen">
    <h1>User Profile</h1>
    <p>Manage your profile and subscription details.</p>
    <div class="profile-content">
      <h2>Profile Information</h2>
      <img src="https://example.com/profile-pic.jpg" alt="Profile Picture">
      <p>Name: Jane Doe</p>
      <p>Email: jane.doe@example.com</p>
      <p>Subscription Status: Active</p>
    </div>
  </div>
</div>

<!-- Geometric Shapes -->
<div class="circle"></div>
<div class="cube"></div>
<div class="geometric"></div>

<!-- Footer -->
<footer>
  <h4>Color Palette</h4>
  <div class="palette">
    <div class="color-block" style="background-color: #4CAF50;"></div>
    <div class="color-block" style="background-color: #ffcc00;"></div>
    <div class="color-block" style="background-color: #ff6347;"></div>
    <div class="color-block" style="background-color: #007bff;"></div>
  </div>
</footer>

<!-- Social Icons -->
<a class="social-icon codepen" href="https://codepen.io/kvnbbg-the-animator" title="view my codepens">
  Made by Kvnbbg
</a>
<a class="social-icon twitter" href="https://x.com/techandstream">
  <svg viewBox="0 0 24 24">
    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"></path>
  </svg>
</a>
<a class="social-icon github" href="https://github.com/kvnbbg">
  <svg viewBox="0 0 24 24">
    <path stroke="none" d="M0 0h24V0H0z" fill="none"></path>
    <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path>
  </svg>
</a>

script.js

document.addEventListener("DOMContentLoaded", function () {
  const links = document.querySelectorAll("nav ul li a");
  const screens = document.querySelectorAll(".content-screen");
  const contentContainer = document.getElementById("content");

  // Navigation link click event
  links.forEach((link) => {
    link.addEventListener("click", function (e) {
      e.preventDefault();
      const targetId = this.id.replace("Link", "Screen");
      setActiveScreen(document.getElementById(targetId));
    });
  });

  // Function to set the active screen
  function setActiveScreen(activeScreen) {
    screens.forEach((screen) => {
      screen.classList.remove("active");
    });
    activeScreen.classList.add("active");
  }

  // Set default active screen
  setActiveScreen(document.getElementById("homeScreen"));

  // Pop-up functionality
  const popup = document.createElement("div");
  popup.id = "popup";
  popup.style.display = "none";
  popup.innerHTML = `
        <div class="popup-content">
            <span class="close">&times;</span>
            <p>This is a pop-up message!</p>
        </div>
    `;
  document.body.appendChild(popup);

  const popupContent = document.querySelector(".popup-content");
  const closeBtn = document.querySelector(".close");

  function showPopup(message) {
    popupContent.querySelector("p").textContent = message;
    popup.style.display = "block";
    setTimeout(() => {
      popup.style.opacity = "1";
      popup.style.transform = "scale(1)";
    }, 10);
  }

  function closePopup() {
    popup.style.opacity = "0";
    popup.style.transform = "scale(0.9)";
    setTimeout(() => {
      popup.style.display = "none";
    }, 300);
  }

  closeBtn.addEventListener("click", closePopup);

  // Event listener to close pop-up when clicking outside of it
  window.addEventListener("click", function (event) {
    if (event.target == popup) {
      closePopup();
    }
  });

  // Example of showing a pop-up
  setTimeout(() => {
    showPopup("Welcome to Vision Week! Explore our new features.");
  }, 2000);

  // Random content generation
  function generateRandomContent() {
    const animalFacts = [
      "Polar bears have black skin under their white fur.",
      "Penguins can drink seawater thanks to a special gland.",
      "Arctic foxes have fur that changes color with the seasons.",
      "Seals can hold their breath for up to two hours.",
      "The Arctic is home to over 21,000 species of animals."
    ];
    const randomFact =
      animalFacts[Math.floor(Math.random() * animalFacts.length)];
    return `<p>${randomFact}</p>`;
  }

  // Append random content to home screen
  const homeScreen = document.getElementById("homeScreen");
  homeScreen.innerHTML += generateRandomContent();

  // Animation for VR environment
  function createMatrice() {
    const matrixContainer = document.createElement("div");
    matrixContainer.id = "matrix";
    for (let i = 0; i < 100; i++) {
      const cube = document.createElement("div");
      cube.className = "matrix-cube";
      matrixContainer.appendChild(cube);
    }
    contentContainer.appendChild(matrixContainer);
  }

  createMatrice();

  // CSS for matrix animation
  const style = document.createElement("style");
  style.textContent = `
        #matrix {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

        .matrix-cube {
            width: 20px;
            height: 20px;
            margin: 5px;
            background-color: #ffcc00;
            animation: rotate 4s infinite;
        }

        @keyframes rotate {
            from { transform: rotateY(0deg); }
            to { transform: rotateY(360deg); }
        }
    `;
  document.head.appendChild(style);

  // Interactivity for VR tour
  const vrContent = document.querySelector(".vr-content");
  vrContent.addEventListener("click", function () {
    showPopup("Enjoy your VR tour of the Arctic Exhibit!");
  });

  // Generate animal images randomly
  function generateAnimalImage() {
    const animalImages = [
      "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Polar_Bear_-_Alaska_%28cropped%29.jpg/800px-Polar_Bear_-_Alaska_%28cropped%29.jpg",
      "https://images.pexels.com/photos/2765022/pexels-photo-2765022.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
      "https://images.pexels.com/photos/259817/pexels-photo-259817.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
      "https://images.pexels.com/photos/726206/pexels-photo-726206.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
    ];
    const randomImage =
      animalImages[Math.floor(Math.random() * animalImages.length)];
    return `<img src="${randomImage}" alt="Random Animal" style="width:100%; height:auto; border-radius:10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">`;
  }

  // Append random animal image to VR screen
  const tourScreen = document.getElementById("tourScreen");
  tourScreen.innerHTML += generateAnimalImage();

  // Interactive map elements
  const mapContent = document.querySelector(".map-content");
  mapContent.addEventListener("click", function () {
    showPopup("Explore the different sections of the zoo!");
  });

  // Add dynamic animal locations to the map
  function generateMapLocation() {
    const locations = [
      "Polar Bear Den",
      "Penguin Pool",
      "Arctic Fox Cave",
      "Seal Shore"
    ];
    const randomLocation =
      locations[Math.floor(Math.random() * locations.length)];
    return `<p>Visit the ${randomLocation} on your map!</p>`;
  }

  // Append random location to map screen
  const mapScreen = document.getElementById("mapScreen");
  mapScreen.innerHTML += generateMapLocation();

  // Profile interactivity
  const profileContent = document.querySelector(".profile-content");
  profileContent.addEventListener("click", function () {
    showPopup("Update your profile and manage your subscription details.");
  });
});

style.css

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f8ff;
}

nav {
  background-color: #4caf50;
  padding: 10px 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1000;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

nav ul li {
  margin: 0 15px;
}

nav ul li a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  transition: color 0.3s;
}

nav ul li a:hover {
  color: #ffcc00;
}

.container {
  padding: 40px 20px;
}

.content-screen {
  display: none;
  animation: fadeIn 1s ease-in-out;
}

.content-screen.active {
  display: block;
}

.post,
.statistics,
.vr-content,
.map-content,
.profile-content {
  margin: 20px 0;
  animation: slideIn 1s ease-in-out;
}

.post img,
.vr-content img,
.map-content img,
.profile-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
  position: relative;
  font-size: 2.5em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

h1::before,
h1::after {
  content: "";
  position: absolute;
  height: 3px;
  background-color: #4caf50;
  width: 100px;
  top: 50%;
}

h1::before {
  left: -120px;
}

h1::after {
  right: -120px;
}

footer {
  background-color: #f8f8f8;
  padding: 20px;
  text-align: center;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
}

.palette {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.color-block {
  width: 50px;
  height: 50px;
  margin: 0 10px;
}

.social-icon {
  display: inline-block;
  margin: 10px;
  text-decoration: none;
  color: #333;
}

.social-icon svg {
  width: 24px;
  height: 24px;
  transition: fill 0.3s;
}

.social-icon:hover svg {
  fill: #4caf50;
}

.circle {
  width: 100px;
  height: 100px;
  background-color: #4caf50;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  right: 20px;
  animation: bounce 2s infinite;
}

.cube {
  width: 100px;
  height: 100px;
  background-color: #ffcc00;
  position: absolute;
  bottom: 50px;
  left: 30px;
  animation: spin 3s infinite;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateX(-50px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.geometric {
  width: 50px;
  height: 50px;
  background-color: #ff6347;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: float 4s infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-20px);
  }
}
#popup {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: scale(0.9);
}

.popup-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: relative;
  animation: fadeIn 0.3s ease;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

vision-week-test.markdown

Vision Week (test)

A Pen by Kevin Marville on CodePen.

License.