✨[Feature Request]: Addition of Preloader and Custom Cursor.

[Anjaliavv51]

Description

[Please include a brief description of the changes or features added]
Added Preloader and Custom Cursor.

Related Issues

[Cite any related issue(s) this pull request addresses. If none, simply state “None”]
-Closes #387

Type of PR

• Bug fix
• Feature enhancement
• Documentation update
• Other (specify): _______________

Screens

20240601-1025-50.8490700.mp4

Checklist

• I have gone through the contributing guide
• I have updated my branch and synced it with project main branch before making this PR
• I have performed a self-review of my code
• I have tested the changes thoroughly before submitting this pull request.
• I have provided relevant issue numbers, screenshots, and videos after making the changes.
• I have commented my code, particularly in hard-to-understand areas.

Additional context:

[Include any additional information or context that might be helpful for reviewers.]

Added Code:

<!--Cursor-->
  <script>

    //Custom Cursor

    const coords = { x: 0, y: 0 };
    const circles = document.querySelectorAll(".circle");

    const colors = [
      "#55a5ea",
      "#55a5ea",
      "#55a5ea",
      "#55a5ea",
      "#55a5ea",
      "#55a5ea",
      "#55a5ea",
      "#55a5ea",
      "#3fbcc0c6",
      "#3fbcc0c6",
      "#3fbcc0c6",
      "#3fbcc0c6",
      "#3fbcc0c6",
      "#3fbcc0c6",
      "fff",
      "fff",
      "fff",
      "fff",
      "fff",
      "fff",
      "fff"
    ];

    circles.forEach(function (circle, index) {
      circle.x = 0;
      circle.y = 0;
      circle.style.backgroundColor = colors[index % colors.length];
    });

    window.addEventListener("mousemove", function (e) {
      coords.x = e.clientX;
      coords.y = e.clientY;

    });

    function animateCircles() {

      let x = coords.x;
      let y = coords.y;

      circles.forEach(function (circle, index) {
        circle.style.left = x - 12 + "px";
        circle.style.top = y - 12 + "px";

        circle.style.scale = (circles.length - index) / circles.length;

        circle.x = x;
        circle.y = y;

        const nextCircle = circles[index + 1] || circles[0];
        x += (nextCircle.x - x) * 0.3;
        y += (nextCircle.y - y) * 0.3;
      });

      requestAnimationFrame(animateCircles);
    }

    animateCircles();


    // Function to toggle dark mode
    function toggleDarkMode() {
      const isDarkMode = isDarkModePreferred();
      setDarkModePreference(!isDarkMode);
      applyDarkModePreference();
    }

    // Function to apply dark mode preference
    function applyDarkModePreference() {
      const isDarkMode = isDarkModePreferred();
      if (isDarkMode) {
        document.body.classList.add('dark-mode');
        document.getElementById('theme-icon').src = 'assets/images/icons8-sun.svg';
      } else {
        document.body.classList.remove('dark-mode');
        document.getElementById('theme-icon').src = 'assets/images/moon_solid.svg';
      }
    }

    // Function to set dark mode preference
    document.addEventListener('DOMContentLoaded', () => {
      const currentTheme = localStorage.getItem('theme');
      const switchCheckbox = document.getElementById('switch'); // Define switchCheckbox here
      const starRating = document.querySelector('.star_rating');
      const thankYouMessage = document.querySelector(".thank_you_message");
      if (switchCheckbox) { // Check if switchCheckbox is not null
        function applyDarkModeStyles() {
          document.body.classList.remove('light-mode');
          document.body.classList.add('dark-mode');
          starRating.style.backgroundColor = '#2d2828';
          thankYouMessage.style.backgroundColor = '#2d2828';
        }

        function applyLightModeStyles() {
          document.body.classList.remove('dark-mode');
          document.body.classList.add('light-mode');
          starRating.style.backgroundColor = 'white';
          thankYouMessage.style.backgroundColor = 'white';
        }

        if (currentTheme) {
          if (currentTheme === 'dark-mode') {
            applyDarkModeStyles();
            switchCheckbox.checked = true;
          } else {
            applyLightModeStyles();
          }
        }

        switchCheckbox.addEventListener('change', () => {
          if (switchCheckbox.checked) {
            applyDarkModeStyles();
            localStorage.setItem('theme', 'dark-mode');
          } else {
            applyLightModeStyles();
            localStorage.setItem('theme', 'light-mode');
          }
        });
      } else {
        console.error("Switch checkbox not found!"); // Log an error if switchCheckbox is null
      }
    });
  </script>
<div class="circle-container">
    <div class="circle" style="background-color: #55a5ea; left: 504px; top: 59px; scale: 1;"></div>
    <div class="circle" style="background-color: #55a5ea; left: 504px; top: 59px; scale: 0.95;"></div>
    <div class="circle" style="background-color: #55a5ea; left: 504px; top: 59px; scale: 0.9;"></div>
    <div class="circle" style="background-color: #55a5ea; left: 504px; top: 59px; scale: 0.9;"></div>
    <div class="circle" style="background-color: #3fbcc0c6; left: 504px; top: 59px; scale: 0.85;"></div>
    <div class="circle" style="background-color: #3fbcc0c6; left: 504px; top: 59px; scale: 0.85;"></div>
    <div class="circle" style="background-color: #3fbcc0c6; left: 504px; top: 59px; scale: 0.85;"></div>
    <div class="circle" style="background-color: #3fbcc0c6; left: 504px; top: 59px; scale: 0.85;"></div>
    <div class="circle" style="background-color: #fff; left: 504px; top: 59px; scale: 0.8;"></div>
    <div class="circle" style="background-color: #fff; left: 504px; top: 59px; scale: 0.8;"></div>
    <div class="circle" style="background-color: #fff; left: 504px; top: 59px; scale: 0.8;"></div>
    <div class="circle" style="background-color: #fff; left: 504px; top: 59px; scale: 0.8;"></div>
</div>
  <div id="preloader">
    <div id="loader"></div>
</div>
    <style>
      /*Preloader CSS*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 2s ease-out, visibility 2s ease-out;
  opacity: 1;
  visibility: visible;
  z-index: 9999; 
}

#preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

#loader {
  display: block;
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #55a5ea;
  animation: spin 3s linear infinite;
}

#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #3fbcc0c6;
  animation: spin 3s linear infinite;
}

#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #fff;
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}
    </style>
    <!--Cursor-->
    <style>
      .circle{
   z-index: 10000;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   pointer-events: none;
    animation: colors 5s infinite;
    position: fixed;
  transform: translate(-50%,-50%);
}
.circle::before {
    content: "";
    position: fixed;
  width: 50px;
  height: 50px;
  opacity: 0.2;
  transform: translate(-30%,-30%);
  border-radius: 50%;
}
    </style>

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
rapidoc	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 1, 2024 4:16pm

[Anjaliavv51]

@varshith257 please review the changes

[Anjaliavv51]

@Anishkagupta04 please review the changes

[varshith257]

@Anjaliavv51 Resolve the conflicts

The preloader is good and the color schema also looks aligned with the project.

[varshith257]

Why was the chatbot code removed?

[varshith257]

@Anishkagupta04 PTAL. The preloader is good for me and looks excellent Is a custom cursor needed?

[Anjaliavv51]

Why was the chatbot code removed?

20240601-1431-48.6765584.mp4

Chat bot code re added , and conflicts are resolved

[Anjaliavv51]

@varshith257 @Anishkagupta04 review the PR now

[varshith257]

In PR changes, look at once. It's seems you deleted the code of the index.html

[varshith257]

    </style>
    <link rel="stylesheet" href="chatbox.css">
     <!-- Google Fonts Link For Icons chatboxx -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
     <script src="chatboxx.js" defer></script>
</head>

and this too:

<body>
      <!-- ############# Header ############# -->

      <header class="header_container">
        <div class="img">
        <img id="rd-logo"  style="width: 90px; height: auto;" src="/images/rd.png"> 
      </div>

      </div>
      <nav class="nav_menu">

        <ul class="nav_link">
          <li><a href="index.html">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="Html-Files/news.html">News</a></li>
          <a href="dex.html"><button>Service</button></a>
          <li><a href="#patient-portal">patient Portal</a></li>
          <li><a href="#doctors">Doctor</a></li>
          <li><a href="Html-Files/contact.html">Contact us</a></li>
          <a href="login.html"><button>Sign in/Sign up</button></a>
        </ul>
      </nav>
      </div>
    </header>
    <ul class="chatbox">
      <li class="chat incoming">
        <span class="material-symbols-outlined">smart_toy</span>
        <p>Hi there 👋<br>How can I help you today?</p>
      </li>
    </ul>
    <div class="chat-input">
      <textarea placeholder="Enter a message..." spellcheck="false" required></textarea>
      <span id="send-btn" class="material-symbols-rounded">send</span>
    </div>
  </div>

[Anjaliavv51]

@varshith257 now once check , i have added the codes.

[varshith257]

Still looking like header code is removed

[Anjaliavv51]

Still looking like header code is removed

Let me close the issue and rewrite the code once again.

[varshith257]

I think the issue occurred while resolving the conflicts. Pull the latest upstream and make a PR with changes, it will solve this

[Anjaliavv51]

@varshith257 i think it is done by some , even after removing the commits it like this.

[varshith257]

A custom cursor maybe not be needed. Better push changes of preloader

[varshith257]

Chabot isn't to be upside.

[varshith257]

@Anjaliavv51 See this:

• Added Chatbox  #384

This is the chatbot added and have to look alike in the above PR

[Anjaliavv51]

Please check this

[varshith257]

Make changes and tag @me. I will review the changes and merge it

[varshith257]

Please check this

This doesn't look alike. See here Added Chatbox #384

[Anjaliavv51]

20240601-1523-41.8798624.mp4

[varshith257]

Yes, this is how it looks like

[Anjaliavv51]

Yes, this is how it looks like

okay now i will add preloader and cursor.

[varshith257]

cursor em vadhu. It's fine with the preloader. Changes indhulone chesthava or new PR submit chesthava?

[Anjaliavv51]

cursor em vadhu. It's fine with the preloader. Changes indhulone chesthava or new PR submit chesthava?

ikkade chesthanu

[varshith257]

Open-Source-Chandigarh/Euphoria-Check#162 Ask to assign labels. otherwise, leaderboard lo count avvadhu aa PR

[Anjaliavv51]

@varshith257 please review the PR

[Anjaliavv51]

20240601-1622-48.2661579.mp4

[varshith257]

Still deleted the code.Wait I will fix it

[Anjaliavv51]

Still deleted the code.Wait I will fix it

No i will fix it wait.

[Anjaliavv51]

@varshith257 i will close this PR and create a new one