added github and theme in navbar

prathamreet · Jun 30, 2024 · 8afa8a8 · 8afa8a8
1 parent e358357
commit 8afa8a8
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 61 deletions.
diff --git a/index.html b/index.html
@@ -11,12 +11,28 @@
 
 <body>
 
-    <div class="navbar">INSTAFICATION</div>
+    <div class="navbar">
+        <!-- <div class="title">
+            INSTAFICATION
+        </div> -->
+
+        <a href="index.html" class="title">INSTAFICATION</a>
+
+        <div class="nav-links">
+            <button class="toggle-theme-btn" onclick="toggleTheme()">
+                Theme
+            </button>
+            <button class="github-btn" onclick="redirectToGithub()">
+                GitHub
+            </button>
+        </div>
+
+    </div>
 
     <div class="copyit">
 
         <div class="copy" id="ER-copy">
-            
+
             <div class="code-container">
                 <pre>
                     <code id="code-snippet">
@@ -38,7 +54,7 @@
             <div class="texts">Code-snippet to paste in console</div>
 
         </div>
-        
+
         <!-- <div class="copy" id="IN-copy">
             <div class="texts">Paste Your Raw followings Data</div>
             
@@ -88,7 +104,7 @@
 
     <div id="result"></div>
 
-    <script src="script_withlink.js"></script>
+    <script src="script.js"></script>
 </body>
 
 </html>
@@ -105,7 +121,4 @@ <h1 class="Header">Instafication</h1>
         </form>
         <div id="result"></div>
     <script src="all.js"></script>
- -->
-
-
-
+ -->
diff --git a/script_withlink.js → script.js b/script_withlink.js → script.js
@@ -52,3 +52,12 @@ function copyCode() {
     // Optionally, show a message or change button text to indicate success
     alert("Code copied to clipboard!");
 }
+
+function toggleTheme() {
+    document.body.classList.toggle('dark-mode');
+}
+
+function redirectToGithub() {
+    // window.location.href = 'https://github.com/prathamreet/instafication';  // Replace with your GitHub repo URL
+    window.open('https://github.com/prathamreet/instafication', '_blank');
+}
diff --git a/script_nolink.js b/script_nolink.js
diff --git a/style.css b/style.css
@@ -19,6 +19,112 @@ body {
 
 }
 
+
+body.dark-mode {
+    background-color: #121212;
+    color: #ffffff;
+}
+
+.navbar {
+    margin: 0.2em 0.2em;
+    padding: 0.1em 0.2em;
+    font-size: 3em;
+    font-weight: bold;
+    color: rgb(0, 0, 0);
+    border-radius: 0.175em;
+    background-color: rgb(245, 245, 245);
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-align: center;
+}
+
+.title{
+    cursor: pointer;
+    cursor: pointer;
+    text-decoration: none;
+    color: black;
+}
+
+.nav-links {
+    /* background-color: orange; */
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    text-align: center;
+
+    display: flex;
+    font-size: 0.8em;
+}
+
+body.dark-mode .navbar,
+body.dark-mode .title {
+    background-color: #1e1e1e;
+    color: #ffffff;
+}
+
+.toggle-theme-btn,
+.github-btn {
+    margin: 0.5em;
+    padding: 0.5em;
+    font-size: 0.51em;
+    cursor: pointer;
+    border: none;
+    border-radius: 0.15em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    background-color: #d4d4d4;
+}
+
+body.dark-mode .code-container{
+    background-color: transparent;
+}
+
+body.dark-mode .toggle-theme-btn,
+body.dark-mode .github-btn {
+    background-color: #ffffff;
+    color: #000000;
+}
+
+.toggle-theme-btn:hover,
+.github-btn:hover {
+    opacity: 0.8;
+}
+
+/* Ensure other components adapt to dark mode */
+body.dark-mode .copyit,
+body.dark-mode .texts,
+body.dark-mode #code-snippet,
+body.dark-mode .textareaMain,
+body.dark-mode #result,
+body.dark-mode .btn {
+    background-color: #1e1e1e;
+    color: #ffffff;
+}
+
+body.dark-mode #followers-text,
+body.dark-mode #followings-text{
+    background-color: #1e1e1e;
+    color: #ffffff;
+    border: 2px solid rgb(196, 196, 196);
+}
+
+body.dark-mode #result a{
+    color: rgb(204, 147, 204);
+}
+
+
+body.dark-mode .copy-button,
+body.dark-mode .toggle-theme-btn,
+body.dark-mode .github-btn{
+    background-color: #333333;
+    color: #ffffff;
+}
+
+
 textarea {
     border: none;
     outline: none;
@@ -80,12 +186,13 @@ pre {
     margin: 0;
 }
 
-#code-snippet{
+#code-snippet {
     display: flex;
     text-align: left;
     overflow: auto;
     width: 100%;
 }
+
 .copy-button {
     position: absolute;
     top: 10px;