-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
10c148a
commit 44b167a
Showing
6 changed files
with
666 additions
and
6 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,292 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <title>Code Snippets | MBD DEV</title> | ||
| <script src="https://kit.fontawesome.com/0ca27f8db1.js" crossorigin="anonymous"></script> | ||
| <link rel="icon" type="image/x-icon" href="https://dev.cdn.madebydanny.uk/MBDTeamLogobyDesigner.png"> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <style> | ||
| a { | ||
| color: black; | ||
| } | ||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
| .dark-mode .floater{ | ||
| background-color: gray; | ||
| padding: 3px; | ||
| text-align: center; | ||
| margin-left: 160px; | ||
| } | ||
| body { | ||
| margin: 0; | ||
| background-color: #f2f2f2; | ||
| } | ||
| /* Style the header */ | ||
| .header { | ||
| background-color: #ff6666; | ||
| padding: 20px; | ||
| text-align: center; | ||
| margin-left: 160px; | ||
| } | ||
| .dark-mode .header{ | ||
| background-color: gray; | ||
| padding: 20px; | ||
| text-align: center; | ||
| margin-left: 160px; | ||
| } | ||
| .floater { | ||
| background-color: #ff9933; | ||
| padding: 3px; | ||
| text-align: center; | ||
| margin-left: 160px; | ||
| } | ||
| .topnav { | ||
| overflow: hidden; | ||
| background-color: #4d79ff; | ||
| position: sticky; | ||
| top: 0; | ||
| margin-left: 160px; | ||
| } | ||
| .dark-mode .topnav{ | ||
| overflow: hidden; | ||
| background-color: black; | ||
| position: sticky; | ||
| top: 0; | ||
| margin-left: 160px; | ||
| } | ||
| .topnav a { | ||
| float: left; | ||
| display: block; | ||
| color: #f2f2f2; | ||
| text-align: center; | ||
| padding: 14px 16px; | ||
| text-decoration: none; | ||
| font-size: 17px; | ||
| } | ||
|
|
||
| .topnav a:hover { | ||
| background-color: #ff80d5; | ||
| color: black; | ||
| } | ||
|
|
||
| .topnav a.active { | ||
| background-color: #ff4d94; | ||
| color: white; | ||
| } | ||
| .sidenav a.active { | ||
| background-color: #ff4d94; | ||
| color: white; | ||
| } | ||
| .topnav .icon { | ||
| display: none; | ||
| } | ||
|
|
||
| @media screen and (max-width: 600px) { | ||
| .topnav a:not(:first-child) {display: none;} | ||
| .topnav a.icon { | ||
| float: right; | ||
| display: block; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: 600px) { | ||
| .topnav.responsive {position: relative;} | ||
| .topnav.responsive .icon { | ||
| position: absolute; | ||
| right: 0; | ||
| top: 0; | ||
| } | ||
| .topnav.responsive a { | ||
| float: none; | ||
| display: block; | ||
| text-align: left; | ||
| } | ||
| } | ||
| /* Centered section inside the top navigation */ | ||
| .topnav-centered a { | ||
| float: none; | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| } | ||
|
|
||
| /* Right-aligned section inside the top navigation */ | ||
| .topnav-right { | ||
| float: right; | ||
| } | ||
|
|
||
| /* Responsive navigation menu - display links on top of each other instead of next to each other (for mobile devices) */ | ||
| @media screen and (max-width: 600px) { | ||
| .topnav a, .topnav-right { | ||
| float: none; | ||
| display: block; | ||
| } | ||
|
|
||
| .topnav-centered a { | ||
| position: relative; | ||
| top: 0; | ||
| left: 0; | ||
| transform: none; | ||
| } | ||
| } | ||
| .sidenav { | ||
| height: 100%; | ||
| width: 160px; | ||
| position: fixed; | ||
| z-index: 1; | ||
| top: 0; | ||
| left: 0; | ||
| background-color: #4d79ff; | ||
| overflow-x: hidden; | ||
| padding-top: 20px; | ||
| } | ||
| .dark-mode .sidenav{ | ||
| height: 100%; | ||
| width: 160px; | ||
| position: fixed; | ||
| z-index: 1; | ||
| top: 0; | ||
| left: 0; | ||
| background-color: black; | ||
| overflow-x: hidden; | ||
| padding-top: 20px; | ||
| } | ||
| .sidenav a { | ||
| padding: 6px 8px 6px 16px; | ||
| text-decoration: none; | ||
| font-size: 13px; | ||
| color: #f2f2f2; | ||
| display: block; | ||
| } | ||
| .sidenav a h3{ | ||
| font-size: 15px; | ||
| } | ||
| .sidenav a:hover { | ||
| background-color: #ff80d5; | ||
| color: black; | ||
| } | ||
|
|
||
| .main { | ||
| margin-left: 160px; /* Same as the width of the sidenav */ | ||
| font-size: 28px; /* Increased text to enable scrolling */ | ||
| padding: 0px 10px; | ||
| } | ||
|
|
||
| @media screen and (max-height: 450px) { | ||
| .sidenav {padding-top: 15px;} | ||
| .sidenav a {font-size: 18px;} | ||
| } | ||
| hr.new1 { | ||
| border: 2px solid #99b3ff; | ||
| } | ||
|
|
||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div class="header"> | ||
| <h1>Code Snippets</h1> | ||
| </div> | ||
|
|
||
| <div class="topnav"> | ||
| <a href="https://dev.madebydanny.uk/index.html">Home</a> | ||
| <a>|</a> | ||
| <a href="https://redjacket-web.madebydanny.uk">Templates</a> | ||
| <a class="active" href="https://dev.madebydanny.uk/code-snippets.html"><i class="fa-solid fa-code"></i>Code Snippets</a> | ||
| <a href="https://dev.madebydanny.uk/css.html">MBD CSS</a> | ||
| <a href="javascript:void(0);" class="icon" onclick="myFunction()"> | ||
| <i class="fa fa-bars"></i> | ||
| </a> | ||
|
|
||
| <div class="topnav-right"> | ||
| <a href="https://dev.madebydanny.uk/search.html"><i class="fa-solid fa-magnifying-glass"></i></a> | ||
| <a onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa-solid fa-arrow-up"></i></a> | ||
| <a onclick="myFunction1()" id="myBtn" title="Dark Mode"><i class="fa-solid fa-circle-half-stroke"></i></a> | ||
| <a href="#">|</a> | ||
| <a href="https://github.com/therealfuntimeswithdanny"><i class="fa-brands fa-github"></i></a> | ||
| <a href="https://github.com/therealfuntimeswithdanny/MBD-DEV"> <div id="repoInfo">Connecting to api.github.com</div> | ||
|
|
||
| <script> | ||
| fetch('https://api.github.com/repos/therealfuntimeswithdanny/MBD-DEV') | ||
| .then(response => response.json()) | ||
| .then(data => { | ||
| const lastUpdated = new Date(data.updated_at).toLocaleString(); | ||
| document.getElementById('repoInfo').innerText = `Last Updated From Github at: ${lastUpdated}`; | ||
| }); | ||
| </script></a> | ||
| </div> | ||
| </div> | ||
| <div class="sidenav"> | ||
| <a href="https://dev.madebydanny.uk/code-snippets.html">Intro</a> | ||
| <hr class="new1"> | ||
| <a href="/code-snippets/div.html">Div/Class</a> | ||
| <hr class="new1"> | ||
| <a class="active" href="/code-snippets/basic-layout.html"><h3>Basic Layout</h3></a> | ||
| <a href="/code-snippets/header.html">Header</a> | ||
| <a href="/code-snippets/navbar.html">Navbar</a> | ||
| <a href="/code-snippets/floater.html">Floater</a> | ||
| <hr class="new1"> | ||
| <a href="/code-snippets/basic-layout.html"><h3>Columns</h3></a> | ||
| <a href="/code-snippets/columns.html/#1">Equal</a> | ||
| <a href="/code-snippets/columns.html/#2">Unequal</a> | ||
| <hr class="new1"> | ||
| <a href="/code-snippets/icons.html"><h3>Icons</h3></a> | ||
| <a href="/code-snippets/icons.html/#1">What is Fontawsome</a> | ||
| <a href="/code-snippets/icons.html/#2">Adding Icons</a> | ||
| <hr class="new1"> | ||
| <a href="/code-snippets/tools.html"><h3>Tools</h3></a> | ||
| <a href="/code-snippets/search.html">Site Search</a> | ||
| <a href="/code-snippets/dark-mode.html">Dark Mode</a> | ||
| <a href="/code-snippets/top.html">Back to top</a> | ||
| <a href="/code-snippets/logo.html">Favicon</a> | ||
| </div> | ||
| <div class="floater"> | ||
| <p><a href="/Markdown/basic_layout.md.html">Haveing Problems | Open in new tap</a></p> | ||
| </div> | ||
| <iframe src="/Markdown/basic_layout.md.html" style="border:none;" height="1000px" width="100%" title="Iframe Example"></iframe> | ||
| <div class="floater"> | ||
| <p><a href="https://redjacket-web.madebydanny.uk">View Template on RedJacket Web</a> | <a href="https://dev.madebydanny.uk">MBD DEV</a> | <a href="https://github.com/therealfuntimeswithdanny/MBD-DEV">View on GitHub</a> | <a href="https://cloudflare.com">Secured by Cloudflare</a></p> | ||
| </div> | ||
| <script> | ||
| var prevScrollpos = window.pageYOffset; | ||
| window.onscroll = function() { | ||
| var currentScrollPos = window.pageYOffset; | ||
| if (prevScrollpos > currentScrollPos) { | ||
| document.getElementById("navbar").style.top = "0"; | ||
| } else { | ||
| document.getElementById("navbar").style.top = "-50px"; | ||
| } | ||
| prevScrollpos = currentScrollPos; | ||
| } | ||
| </script> | ||
| <script> | ||
| function myFunction() { | ||
| var x = document.getElementById("myTopnav"); | ||
| if (x.className === "topnav") { | ||
| x.className += " responsive"; | ||
| } else { | ||
| x.className = "topnav"; | ||
| } | ||
| } | ||
| // Get the button | ||
| let mybutton = document.getElementById("myBtn"); | ||
|
|
||
|
|
||
|
|
||
| // When the user clicks on the button, scroll to the top of the document | ||
| function topFunction() { | ||
| document.body.scrollTop = 0; | ||
| document.documentElement.scrollTop = 0; | ||
| } | ||
| function myFunction1() { | ||
| var element = document.body; | ||
| element.classList.toggle("dark-mode"); | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.