From 727f1f27b2ec5bc21db4b649169a1275346e6a2f Mon Sep 17 00:00:00 2001
From: unknown <shraddha.dagdu11@gmail.com>
Date: Wed, 26 Jun 2024 22:10:25 +0530
Subject: [PATCH] Added an arrow to redirect to home in each  resource page.

---
 new-website/content-display.html | 78 +++++++++++++++++---------------
 1 file changed, 42 insertions(+), 36 deletions(-)
diff --git a/new-website/content-display.html b/new-website/content-display.html
index 417aced0..618a0ac3 100644
--- a/new-website/content-display.html
+++ b/new-website/content-display.html
@@ -2,12 +2,15 @@
 <html lang="en">
 
 <head>
+    <link rel="stylesheet" href="cursorAnimation.css">
+    <script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2" defer></script>
+    <link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>README Renderer</title>
 
-    <link rel="stylesheet"
-        href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css">
     <style>
         .markdown-body {
             box-sizing: border-box;
@@ -16,30 +19,30 @@
             margin: 0 auto;
             padding: 45px;
         }
-
+        
         nav {
             background-color: white !important;
             color: black !important;
         }
-
+        
         .dark-mode nav {
             background-color: black !important;
             color: white !important;
         }
-
         /* Container for aligning items to the right */
+        
         .right-corner {
             display: flex;
             align-items: center;
             margin-left: auto;
             /* Pushes the content to the right */
         }
-
         /* Dark mode toggle switch styles */
+        
         .slider {
             display: none;
         }
-
+        
         .slider-label {
             display: flex;
             align-items: center;
@@ -53,7 +56,7 @@
             position: relative;
             transition: background-color 0.5s;
         }
-
+        
         .slider-circle {
             width: 10px;
             height: 10px;
@@ -64,18 +67,18 @@
             top: 1px;
             left: 2px;
         }
-
+        
         .slider:checked+.slider-label .slider-circle {
             transform: translateX(1.3rem);
             background: #000000;
             /* Sun color */
         }
-
+        
         .slider:checked+.slider-label {
             background: #515151;
             /* Dark mode background */
         }
-
+        
         .slider-circle::before {
             position: absolute;
             top: 50%;
@@ -85,20 +88,19 @@
             font-size: 16px;
             /* Adjust the font size for the icons */
         }
-
+        
         .slider:checked+.slider-label .slider-circle::before {
             content: '🌙';
             /* Moon icon */
             transform: translate(-50%, -50%);
         }
-
+        
         .slider+.slider-label .slider-circle::before {
             content: '☀️';
             /* Sun icon */
             transform: translate(-50%, -50%);
         }
-
-
+        
         #progressBar {
             position: fixed;
             top: 0;
@@ -108,15 +110,14 @@
             background-color: #288cff;
             z-index: 99;
             border-radius: 20px;
-
         }
-
         /* Back-to-top */
+        
         footer {
             position: relative;
             padding: 50px 0;
         }
-
+        
         #back-to-top-container {
             position: fixed;
             bottom: 30px;
@@ -124,7 +125,7 @@
             cursor: pointer;
             z-index: 1000;
         }
-
+        
         .circle1 {
             background-color: #fff;
             border-radius: 50%;
@@ -133,34 +134,41 @@
             align-items: center;
             transition: background-color 0.3s;
         }
-
+        
         #back-to-top {
             width: 40px;
             height: 40px;
             fill: currentColor;
             transition: fill 0.3s;
         }
-
+        
         #back-to-top:hover {
             fill: rgb(83, 79, 79);
             transform: scale(1.06);
             transition: all .2s ease-in-out;
         }
-
+        
+        .home-link {
+            position: absolute;
+            top: 25px;
+            left: 35px;
+            font-size: 30px;
+            color: #111210;
+            text-decoration: none;
+        }
+        
         .dark-mode .circle1 {
             background-color: #000000;
         }
-
+        
         .dark-mode #back-to-top:hover {
             fill: rgb(173, 168, 168);
             transform: scale(1.06);
             transition: all .2s ease-in-out;
         }
-
         /* .dark-mode  svg path{
   fill: rgb(255, 255, 255);
 } */
-
         /* .dark-mode svg path:hover {
   fill:  rgb(139, 71, 236);
 } */
@@ -175,7 +183,7 @@
     <!-- Progress Bar -->
     <div id="progressBar"></div>
     <script>
-        window.onscroll = function () {
+        window.onscroll = function() {
             var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
             var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
             var scrolled = (winScroll / height) * 100;
@@ -185,15 +193,14 @@
 
     <div id="back-to-top-container">
         <div class="circle1">
-            <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-                class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
+            <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
                 <path
                     d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z" />
             </svg>
         </div>
 
         <script>
-            document.addEventListener("DOMContentLoaded", function () {
+            document.addEventListener("DOMContentLoaded", function() {
                 const backToTopButton = document.getElementById('back-to-top-container');
 
                 function checkButtonVisibility() {
@@ -207,7 +214,7 @@
                 window.addEventListener('scroll', checkButtonVisibility);
                 window.addEventListener('resize', checkButtonVisibility);
 
-                backToTopButton.addEventListener('click', function () {
+                backToTopButton.addEventListener('click', function() {
                     window.scrollTo({
                         top: 0,
                         behavior: 'smooth'
@@ -215,13 +222,14 @@
                 });
                 checkButtonVisibility();
             });
-
         </script>
     </div>
     </div>
 
-    <nav
-        class="content-display-nav dark-mode sticky top-0 z-50 py-3 backdrop-blur-lg border-b border-neutral-700/80 text-black">
+    <nav class="content-display-nav dark-mode sticky top-0 z-50 py-3 backdrop-blur-lg border-b border-neutral-700/80 text-black">
+        <div class="col-md-10">
+            <a href="index.html" class="home-link"><i class="fas fa-arrow-left"> </i></a>
+        </div>
         <div class="container px-4 py-0 border-none mx-auto relative lg:text-sm">
             <div class="flex justify-between mt-4 items-center">
                 <div class="flex items-center flex-shrink-0">
@@ -233,8 +241,7 @@
                 <div class="flex items-center ml-auto">
                     <!-- Dark mode toggle icon -->
                     <input type="checkbox" id="slider" class="slider hidden" onclick="toggleDarkMode()">
-                    <label for="slider"
-                        class="slider-label bg-gray-300 dark:bg-gray-700 w-16 h-8 flex items-center rounded-full p-1 cursor-pointer transition duration-500">
+                    <label for="slider" class="slider-label bg-gray-300 dark:bg-gray-700 w-16 h-8 flex items-center rounded-full p-1 cursor-pointer transition duration-500">
                         <div
                             class="slider-circle bg-white w-6 h-6 rounded-full shadow-md transform transition duration-500">
                         </div>
@@ -290,7 +297,6 @@ <h1 id="project-title">project title</h1>
         document.getElementById('readme-content').innerHTML = marked.parse(readmeContent);
 
         // Toggle navbar script
-
     </script>
 </body>
 
