Vision Week: VR Zoo Experience with Endangered Polar Bears

index.html

<nav class="bg-blue-600 p-4">
  <ul class="flex justify-around text-white">
    <li><a href="#" id="homeLink">Home</a></li>
    <li><a href="#" id="tourLink">VR</a></li>
    <li><a href="#" id="mapLink">Map</a></li>
    <li><a href="#" id="videosLink">Videos</a></li>
    <li><a href="#" id="profileLink">Me</a></li>
  </ul>
</nav>

<div class="container mx-auto p-4" id="content">
  <!-- Home Screen -->
  <div id="homeScreen" class="content-screen active home-screen">
    <h1 class="text-2xl font-bold">Welcome to Vision Week!</h1>
    <p>Explore fascinating posts and statistics about the animals.</p>
    <div class="post mt-4">
      <h2 class="text-xl font-semibold">Polar Bears in the Arctic</h2>
      <img src="https://images.pexels.com/photos/25956521/pexels-photo-25956521/free-photo-of-nature-brun-marron-tete.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Polar Bears" class="w-full h-auto mt-2 rounded">
      <p class="mt-2">Learn about the life of polar bears and their survival in the Arctic.</p>
    </div>
    <div class="statistics mt-4">
      <h3 class="text-lg font-semibold">Animal Conservation Stats</h3>
      <p>Nombre d'animaux sauvés: <span id="animalsSaved">45,678</span></p>
      <p>+<span id="growthRate">20%</span> mois après mois</p>
      <p>Popularité de Vision Week</p>
      <p>Animaux populaires: <span id="popularAnimals">Polar Bears, Penguins, Arctic Foxes</span>.</p>
    </div>
  </div>

  <!-- Virtual Tour Screen -->
  <div id="tourScreen" class="content-screen vr-screen">
    <h1 class="text-2xl font-bold">VR Viewer</h1>
    <p>Experience an immersive tour of the zoo.</p>
    <div class="vr-content mt-4">
      <h2 class="text-xl font-semibold">Comfort Headset</h2>
      <div style="width: 100%; height: auto; margin-top: 2em; border-radius: 5px;">
        <iframe width="387" height="688" src="https://www.youtube.com/embed/n4apFUAQSpM" title="VR Headset Concept Design: Comfortable 3D Prototype ☕️ (CodePen Test App Included)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
      </div>
      <p class="mt-2">Put on your VR headset and explore the Arctic habitat, home to polar bears, seals, and more.</p>
      <h2 class="text-xl font-semibold mt-4">Modern Headset</h2>
      <div style="width: 100%; height: auto; margin-top: 2em; border-radius: 5px;">
        <iframe width="387" height="688" src="https://www.youtube.com/embed/oGc869x2KOI" title="Modern VR Headset Concept: Sleek Design Meets Next-Gen Usability  (CodePen Test App Included)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
      </div>
      <p class="mt-2">A combination of metallic and transparent materials.</p>
      <h2 class="text-xl font-semibold mt-4">Navigation Control</h2>
      <p>Utilisez les contrôles de navigation pour vous déplacer librement et profiter pleinement de votre visite
        virtuelle.</p>
      <div id="control-area-in-the-virtual-world" class="flex justify-around mt-4">
        <p aria-label="Directional controls">
          <img src="https://emojipedia.org/up-arrow" alt="Up" aria-label="Up" class="w-8 h-8">
          <img src="https://emojipedia.org/right-arrow" alt="Right" aria-label="Right" class="w-8 h-8">
          <img src="https://emojipedia.org/down-arrow" alt="Down" aria-label="Down" class="w-8 h-8">
          <img src="https://emojipedia.org/left-arrow" alt="Left" aria-label="Left" class="w-8 h-8">
        </p>
      </div>
    </div>
  </div>

  <!-- Map Screen -->
  <div id="mapScreen" class="content-screen map-screen">
    <h1 class="text-2xl font-bold">Interactive Map</h1>
    <p>Find your way around the zoo with our interactive 3D map.</p>
    <div style="width: 100%; height: auto; margin-top: 2em; border-radius: 5px;">
      <iframe width="387" height="688" src="https://www.youtube.com/embed/pVjCFgLjr8U" title="Explore the World Like Never Before 🌎🌏 Interactive 3D Map for a Virtual Zoo Adventure ️ #coding" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </div>
    <div class="map-content mt-4">
      <h2 class="text-xl font-semibold">Favorite Place</h2>
      <p>Explore different sections of the zoo and locate your favorite animals. Point d’intérêts</p>
      <div class="favorite-place mt-4">
        <h3 class="text-lg font-semibold">Tell us about your favorite place:</h3>
        <label for="favoritePlaceInput" class="block mt-2">Enter your favorite place name:</label>
        <input type="text" id="favoritePlaceInput" name="favoritePlace" placeholder="e.g., Arctic Exhibit, Rainforest Adventure" class="w-full border border-gray-300 p-2 mt-2 rounded">
        <label for="favoritePlaceSuggestions" class="block mt-4">Or choose from a suggestion:</label>
        <select id="favoritePlaceSuggestions" aria-label="Favorite Place Suggestions" hidden class="w-full border border-gray-300 p-2 mt-2 rounded">
          <option value="">-- Select a Suggestion --</option>
          <option value="arctic-exhibit">Arctic Exhibit</option>
          <option value="rainforest-adventure">Rainforest Adventure</option>
          <option value="underwater-exploration">Underwater Exploration</option>
          <option value="reptile-house">Reptile House</option>
          <option value="bird-sanctuary">Bird Sanctuary</option>
          <option value="monkey-jungle">Monkey Jungle</option>
          <option value="childrens-zoo">Children's Zoo</option>
        </select>
        <button type="button" id="showSuggestionsBtn" class="mt-4 bg-blue-600 text-white p-2 rounded">Show Suggestions</button>
        <p id="selectedSuggestion" style="display: none;">You selected: <span id="selectedSuggestionName"></span></p>
      </div>
    </div>
  </div>

  <!-- Videos Screen -->
  <div id="videosScreen" class="content-screen video-screen">
    <h1 class="text-2xl font-bold">Videos</h1>
    <div class="video-wrapper mt-4">
      <div class="video-thumbnails">
        <img src="https://images.pexels.com/photos/20027083/pexels-photo-20027083/free-photo-of-personne-individu-zoo-oiseaux.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="" alt="Arctic Exhibit - Penguins" class="w-full h-auto mt-2 rounded border-2 border-gray-300">
      </div>
      <h2 class="text-xl font-semibold mt-4">Video Playlist (Latest News!)</h2>
      <div class="video-controls mt-4">
        <select id="video-dropdown" aria-label="Select Video Description" class="w-full border border-gray-300 p-2 rounded">
          <option value="arctic-exhibit">Arctic Exhibit: Polar Bear Cubs Born! ❄️</option>
          <option value="rainforest-adventure">Rainforest Adventure: New Monkey Species Discovered!</option>
          <option value="underwater-exploration">Underwater Exploration: Great Barrier Reef Shows Signs of
            Recovery! 🪸</option>
        </select>
      </div>
      <div class="video-description mt-4">
        <p id="video-title" class="font-bold">Vision Week - Virtual Exploration</p>
        <p id="video-description-text"></p>
      </div>
      <div id="video-container" class="mt-4">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/XPhmpfiWEEw?si=d7oNWkjmcLrkUdrQ" title="Vision Week - Arctic Exhibit" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
      </div>
    </div>
  </div>

  <!-- Profile Screen -->
  <div id="profileScreen" class="content-screen profile-screen">
    <h1 class="text-2xl font-bold">User Profile</h1>
    <p>Manage your profile and subscription details.</p>
    <div class="profile-content mt-4">
      <img src="https://images.pexels.com/photos/6853428/pexels-photo-6853428.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Profile Picture" class="profile-image mt-2 rounded-full">
      <a href="#" class="edit-profile-image text-blue-600">Edit profile image</a>
      <div class="profile-details mt-4">
        <div class="profile-item">
          <span class="profile-label font-semibold">Name</span>
          <span class="profile-value ml-2">Helène Hills</span>
        </div>
        <div class="profile-item mt-2">
          <span class="profile-label font-semibold">Username</span>
          <span class="profile-value ml-2">@username</span>
        </div>
        <div class="profile-item mt-2">
          <span class="profile-label font-semibold">Email</span>
          <span class="profile-value ml-2">[email protected]</span>
        </div>
        <div class="profile-item mt-2">
          <span class="profile-label font-semibold">Links</span>
          <span class="profile-value ml-2">website.net</span>
          <span class="profile-value ml-2">mylink.net</span>
          <span class="profile-value ml-2">yourlink.net</span>
          <a href="#" class="add-link text-blue-600">+ Add link</a>
        </div>
        <div class="profile-item mt-2">
          <span class="profile-label font-semibold">Bio</span>
          <span class="profile-value ml-2">A description of this user.</span>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Enquête, UX Design Thinking -->
<div class="cloud-button">
  <a href="https://codepen.io/Kvnbbg-the-animator/live/bGyvmdy" target="_blank">
    <button class="cloud-btn">Démarrez avec la première étape du design thinking : l'empathie. Remplissez le sondage et accédez à l'application maintenant !</button>
  </a>
</div>
<!-- Geometric Shapes -->
<div class="circle"></div>
<div class="cube"></div>
<div class="geometric"></div>
<footer>
  <!-- Title for the Color Palette Section -->
  <h4 class="mt-4 text-lg font-semibold">Color Palette</h4>
  <!-- Color Palette Blocks -->
  <div class="palette mt-2">
    <!-- Color Block: Dark Slate Blue -->
    <div class="color-block" style="background-color: #34495e;" data-color="#34495e"></div>
    <!-- Color Block: Vibrant Green -->
    <div class="color-block" style="background-color: #2ecc71;" data-color="#2ecc71"></div>
    <!-- Color Block: Bright Red -->
    <div class="color-block" style="background-color: #e74c3c;" data-color="#e74c3c"></div>
    <!-- Color Block: Clean Bright Blue -->
    <div class="color-block" style="background-color: #3498db;" data-color="#3498db"></div>
    <!-- Color Block: Warm Yellow -->
    <div class="color-block" style="background-color: #f1c40f;" data-color="#f1c40f"></div>
  </div>
  <!-- Hover Pop-up -->
  <div class="hover-popup mt-2" id="hoverPopup">
    <p id="hoverText"></p>
  </div>

  <!-- Title for the Wireframe Section -->
  <h4 class="mt-4 text-lg font-semibold">Wireframe</h4>
  <div class="palette mt-2">
    <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2Fo0QfKg0hU9gXxHe6FEoxVn%2Foutput-wireframe%3Fnode-id%3D0-1%26t%3DIjYiKe90qYtWzHCy-1" allowfullscreen></iframe>
  </div>

  <!-- Footer Link -->
  <a class="social-icon codepen" href="https://codepen.io/kvnbbg-the-animator" title="view my codepens">Made by Kvnbbg</a>
</footer>
</div>

script.js

document.addEventListener("DOMContentLoaded", function () {
  const navLinks = document.querySelectorAll("nav ul li a");
  const contentScreens = document.querySelectorAll(".content-screen");

  // Navigation functionality with smooth transitions
  navLinks.forEach((link) => {
    link.addEventListener("click", function (e) {
      e.preventDefault();
      const targetId = this.id.replace("Link", "Screen");

      contentScreens.forEach((screen) => {
        if (screen.id === targetId) {
          screen.classList.add("active");
        } else {
          screen.classList.remove("active");
        }
      });
    });
  });

  // Welcome pop-up feature with fade-out animation
  const welcomePopup = document.createElement("div");
  welcomePopup.className = "welcome-popup";
  welcomePopup.innerHTML = `
    <div class="welcome-content">
      <img src="https://images.pexels.com/photos/20763355/pexels-photo-20763355/free-photo-of-femme-au-lac-baikal-gele.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Welcome Image" />
      <div class="welcome-text">
        <h2>Welcome to Vision Week!</h2>
        <p>Click anywhere to continue.</p>
        <p><small>Developed by Kvnbbg (Kevin Marville) <a href="https://x.com/techandstream">@techandstream</a> on X.com.</small></p>
      </div>
    </div>
  `;
  document.body.appendChild(welcomePopup);

  welcomePopup.addEventListener("click", function () {
    welcomePopup.style.transition = "opacity 0.5s ease";
    welcomePopup.style.opacity = "0";
    setTimeout(() => (welcomePopup.style.display = "none"), 500);
  });

  // Pop-up feature
  const popUps = document.querySelectorAll(".pop-up");
  popUps.forEach((popUp) => {
    popUp.addEventListener("click", function () {
      alert(
        "You clicked on a pop-up element! Developed by Kvnbbg (Kevin Marville) @techandstream on X.com."
      );
    });
  });

  // Show suggestions for favorite place
  const showSuggestionsBtn = document.getElementById("showSuggestionsBtn");
  const favoritePlaceSuggestions = document.getElementById(
    "favoritePlaceSuggestions"
  );
  const selectedSuggestion = document.getElementById("selectedSuggestion");
  const selectedSuggestionName = document.getElementById(
    "selectedSuggestionName"
  );

  showSuggestionsBtn.addEventListener("click", () => {
    favoritePlaceSuggestions.hidden = !favoritePlaceSuggestions.hidden;
    if (favoritePlaceSuggestions.hidden) {
      selectedSuggestionName.textContent = "";
      selectedSuggestion.style.display = "none";
    }
  });

  favoritePlaceSuggestions.addEventListener("change", () => {
    const selectedOption = favoritePlaceSuggestions.value;
    if (selectedOption) {
      selectedSuggestionName.textContent =
        favoritePlaceSuggestions.options[
          favoritePlaceSuggestions.selectedIndex
        ].text;
      selectedSuggestion.style.display = "block";
    } else {
      selectedSuggestionName.textContent = "";
      selectedSuggestion.style.display = "none";
    }
  });

  // Open design thinking quiz
  // document.getElementById("startQuizBtn").addEventListener("click", openDesignThinkingQuiz);
});

function openDesignThinkingQuiz() {
  const content = `
    <h2>Design Thinking Quiz</h2>
    <p>Test your knowledge of design thinking!</p>
    <ol>
      <li>What is the first stage of design thinking that focuses on understanding users?</li>
      <ul>
        <li><input type="radio" name="q1" value="A. Design"> (A) Design</li>
        <li><input type="radio" name="q1" value="B. Empathize"> (B) Empathize</li>
        <li><input type="radio" name="q1" value="C. Prototype"> (C) Prototype</li>
      </ul>
      <li>What does the process of brainstorming ideas involve?</li>
      <ul>
        <li><input type="radio" name="q2" value="A. User testing"> (A) User testing</li>
        <li><input type="radio" name="q2" value="B. Ideate"> (B) Ideate</li>
        <li><input type="radio" name="q2" value="C. Define"> (C) Define</li>
      </ul>
    </ol>
    <button onclick="submitAnswers()">Submit Answers</button>
  `;

  const popup = window.open("", "designThinkingQuiz", "width=400,height=400");
  popup.document.write(content);
  popup.document.close();
}

function submitAnswers() {
  const popup = window.open("", "designThinkingQuiz", "width=400,height=400");
  const answer1 = popup.document.querySelector('input[name="q1"]:checked')
    .value;
  const answer2 = popup.document.querySelector('input[name="q2"]:checked')
    .value;

  let designThinkingData;
  try {
    designThinkingData = JSON.parse(localStorage.getItem("design_thinking"));
  } catch (error) {
    designThinkingData = {};
  }

  designThinkingData.quizResults = {
    question1: answer1,
    question2: answer2
  };

  localStorage.setItem("design_thinking", JSON.stringify(designThinkingData));

  popup.close();
  alert("Thank you for taking the quiz! Your answers have been stored.");
}

style.css

@import "https://unpkg.com/leaflet/dist/leaflet.css";

/* General styles */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  margin: 0;
  padding: 0;
}

nav {
  background-color: #3498db;
  padding: 1rem;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: space-around;
  margin: 0;
  width: 100%;
}

nav ul li {
  margin: 0 1rem;
  border-radius: 20px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s, background-color 0.3s;
  padding: 0.5rem 1rem;
  display: block;
  text-align: center;
}

nav ul li a:hover {
  color: #3498db;
  background-color: #fff;
  border-radius: 20px;
}

nav ul li a:active {
  color: white;
  background-color: #2980b9;
}

.container {
  margin-top: 80px;
}

.content-screen {
  display: none;
  padding: 2rem;
  opacity: 0.4;
  transition: opacity 0.8s;
}

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

footer {
  background-color: #061727;
  color: white;
  padding: 1rem;
  text-align: center;
  position: relative;
  width: 100%;
  height: auto;
  bottom: 0;
}

footer .social-icon {
  margin: 0 0.5rem;
  color: white;
  display: inline-block;
  transition: color 0.3s;
}

footer .social-icon:hover {
  color: #00ffcc;
}

footer .social-icon svg {
  width: 24px;
  height: 24px;
}

.home-stats {
  display: flex;
  justify-content: space-around;
  margin-top: 2rem;
}

.home-stats .stat {
  background-color: #00ffcc;
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
  width: 45%;
  transition: transform 0.3s, background-color 0.3s;
}

.home-stats .stat:hover {
  transform: scale(1.05);
  background-color: #061727;
  color: white;
}

.vr-content img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
  transition: transform 0.3s;
}

.vr-content img:hover {
  transform: scale(1.05);
}

.vr-content .controls {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: space-around;
  margin-top: 1rem;
  padding: 1rem;
}

.vr-content .controls button {
  background-color: #00ffcc;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.vr-content .controls button:hover {
  background-color: #061727;
  color: white;
  transform: scale(1.1);
}

.profile-content img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 1rem;
}

.profile-content button {
  background-color: #00ffcc;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.profile-content button:hover {
  background-color: #061727;
  color: white;
  transform: scale(1.1);
}

img {
  border-radius: 10px;
}

/* Welcome pop-up styles */
.welcome-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 1;
  transition: opacity 0.5s;
}

.welcome-content {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  max-width: 500px;
  width: 90%;
}

.welcome-content img {
  max-width: 100%;
  border-radius: 10px;
  margin-bottom: 15px;
}

.welcome-content .welcome-text {
  margin-top: 10px;
}

.welcome-content h2 {
  font-size: 24px;
  color: #061727;
  margin-bottom: 10px;
}

.welcome-content p {
  font-size: 18px;
  color: #333;
}

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

.content-screen {
  animation: fadeIn 1s;
}

/* Geometric shapes */
body::before {
  content: "";
  position: fixed;
  width: 200px;
  height: 200px;
  background: rgba(0, 255, 204, 0.2);
  border-radius: 50%;
  top: 20%;
  left: 10%;
  z-index: -1;
  animation: move 10s infinite alternate;
}

body::after {
  content: "";
  position: fixed;
  width: 150px;
  height: 150px;
  background: rgba(255, 204, 0, 0.2);
  border-radius: 50%;
  bottom: 20%;
  right: 10%;
  z-index: -1;
  animation: move 15s infinite alternate-reverse;
}

@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50px, 50px);
  }
}

/* Color Palette */
.palette .color-block {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 5px;
  cursor: pointer;
  transition: transform 0.3s;
}

.palette .color-block:hover {
  transform: scale(1.1);
}

/* Profile Details */
.profile-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.profile-item {
  margin-bottom: 0.5rem;
}

.profile-label {
  font-weight: bold;
}

/* Specific styles based on wireframe */
.sign-in-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #fff;
}

.sign-in-screen input,
.sign-in-screen button {
  width: 80%;
  max-width: 400px;
  margin: 0.5rem 0;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.sign-in-screen button {
  background-color: #3498db;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.sign-in-screen button:hover {
  background-color: #2980b9;
}

.welcome-screen {
  padding: 2rem;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.welcome-screen h2 {
  font-size: 2em;
  margin-bottom: 20px;
}

.welcome-screen p {
  font-size: 1.2em;
  margin-bottom: 20px;
}

.welcome-screen img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 1rem;
  background: #4fc08d;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1em;
  transition: background 0.3s;
}

.welcome-screen img:hover {
  background: #3da76f;
}

.home-screen {
  padding: 2rem;
}

.home-screen .post {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.home-screen .post img {
  width: 100%;
  border-radius: 10px;
}

.vr-screen {
  padding: 2rem;
}

.vr-screen .vr-content {
  background: #fff;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.vr-screen .controls {
  margin-top: 1rem;
}

.map-screen {
  padding: 2rem;
}

.map-screen .map-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video-screen {
  padding: 2rem;
}

.video-screen .video-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.profile-screen {
  padding: 2rem;
}

.profile-screen .profile-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.cloud-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  animation: float 5s ease-in-out infinite;
}

.cloud-btn {
  background: #e0f7fa;
  border: 1px solid #b2ebf2;
  color: #00796b;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background 0.3s, transform 0.3s;
}

.cloud-btn:hover {
  background: #b2ebf2;
  transform: translateY(-5px);
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

vision-week-vr-zoo-experience-with-endangered-polar-bears.markdown

Vision Week: VR Zoo Experience with Endangered Polar Bears

This Flutter web application prototype explores a virtual reality zoo experience focusing on the plight of endangered polar bears and the impact of climate change. Users can immerse themselves in a virtual environment and learn more about these majestic creatures facing extinction due to habitat loss and rising temperatures.

Credits:

Developed by Kvnbbg (Kevin Marville) @techandstream on X.com.

A Pen by Kevin Marville on CodePen.

License.