Skip to content

Commit

Permalink
Add navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@jgujerry
jgujerry committed Feb 13, 2024
1 parent 8082010 commit 21f25b6
Showing 1 changed file with 138 additions and 26 deletions.
164 changes: 138 additions & 26 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,50 @@
text-decoration: none;
}

#top-button {
#navbarToggler {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
cursor: pointer;
color: #000;
cursor: pointer;
}
#navbarToggler > button {
height: 45px;
width: 45px;
border-radius: 4px;
border: 1px solid #105028;
}
#navbarToggler > button > span {
font-size: 14px;
color:#105028;
}
#navbarCollapse {
position: fixed;
top: 20px;
right: 80px;
background-color: #f7fffc;
z-index: 1000;
}
#navbarCollapse > ul > li > a {
text-align: end;
margin-right: 10px;
color:#105028;
font-size: 12px;
}
#navbarCollapse > ul > li > a:hover {
font-weight: bold;
font-size: 13px;
}

#goTopBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
right: 20px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: #fff;
color: #105028;
Expand All @@ -43,19 +79,70 @@
border: 1px solid #105028;
}

#top-button:hover {
#goTopBtn:hover {
background-color: #105028;
color: #fff;
}
</style>
</head>

<body style="font-family:-apple-system,BlinkMacSystemFont,Roboto,Roboto Slab,Droid Serif,Segoe UI,system-ui,Arial,sans-serif;">
<button onclick="topFunction()" id="top-button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-bar-up" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 10a.5.5 0 0 0 .5-.5V3.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 3.707V9.5a.5.5 0 0 0 .5.5zm-7 2.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5z"/>
</svg>
</button>

<div id="navbarToggler" class="navbar navbar-light small">
<button class="navbar-toggler" type="button" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse rounded">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#Apps"><u>Apps</u></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#APIs"><u>APIs</u></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#CMS"><u>CMS</u></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ML,DL&AI"><u>ML, DL &AI</u></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#TaskQueue&Messaging"><u>Task Queues & Messaging</u></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Parallel&DistributedComputing"><u>Parallel & Distributed Computing</u></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Worflow&Pipelines"><u>Workflow & Pipelines</u></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Serverless"><u>Serverless</u></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Microservices"><u>Microservices</u></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#DevOps"><u>DevOps</u></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#WebCrawling/Scraping"><u>Web Crawling / Scraping</u></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ApplicationIntegrations"><u>Application Integrations</u></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#GUI&TUI"><u>GUI & TUI</u></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Games"><u>Games</u></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#AutomatedTesting"><u>Automated Testing</u></a>
</li>
</ul>
</div>

<div class="container">
<h1 class="mt-5 mb-2 display-4">
<img src="static/image/logo.png" style="height:60px;width:60px">
Expand All @@ -68,6 +155,7 @@ <h1 class="mt-5 mb-2 display-4">
</div>
</div>
</div>

<!-- Content -->
<main id="content" class="container">
<p class="lead mt-2">Build your projects by harnessing the power of Python, capitalizing its extensive array of frameworks, libraries and resources.</p>
Expand All @@ -80,7 +168,7 @@ <h1 class="mt-5 mb-2 display-4">
</p>

<!-- ================Web Application================ -->
<h3 class="mt-5 display-6">Web Apps</h3>
<h3 id="Apps" class="mt-5 display-6">Apps</h3>
<p>
Python stands out in web application development thanks to its simplicity, extensive community support, and wide range of frameworks.
The rich ecosystem provides efficient solutions for web development tasks, allowing for rapid prototyping and development.
Expand Down Expand Up @@ -559,7 +647,7 @@ <h2>Microdot</h2>
<hr class="my-4">

<!-- ================APIs================ -->
<h3 class="mt-5 display-6">APIs</h3>
<h3 id="APIs" class="mt-5 display-6">APIs</h3>
<p>
Python owns extensive ecosystems for building REST and GraphQL APIs in simplicity and reliability. These frameowrks enable rapid development, and people could get
benefits from a vibrant developer community, and provides cross-platform compatibility.
Expand Down Expand Up @@ -916,7 +1004,7 @@ <h5 class="card-title mt-3"><a href="https://github.com/strawberry-graphql/straw
<hr class="my-4">

<!--CMS-->
<h3 class="mt-4 display-6">CMS</h3>
<h3 id="CMS" class="mt-4 display-6">CMS</h3>
<p>
Content Management Systems (CMS) frameworks in Python are software platforms designed to facilitate the creation,
management, and publication of digital content, making it easier for users to build and maintain websites
Expand Down Expand Up @@ -1061,7 +1149,7 @@ <h5 class="card-title">
<hr class="my-4">

<!--ML, DL, & AI-->
<h3 class="mt-4 display-6">ML, DL, & AI</h3>
<h3 id="ML,DL&AI" class="mt-4 display-6">ML, DL & AI</h3>
<p>
Python frameworks are exceptionally well-suited for machine learning (ML), deep learning (DL), and artificial intelligence (AI) applications.
Python's popularity in this domain is driven by its rich ecosystem of specialized
Expand Down Expand Up @@ -1297,7 +1385,7 @@ <h5 class="card-title"><a href="https://github.com/OpenBMB/ChatDev" class="text-
<hr class="my-4">

<!--Task Queues & Messages-->
<h3 class="mt-4 display-6">Task Queues & Messaging</h3>
<h3 id="TaskQueue&Messaging" class="mt-4 display-6">Task Queues & Messaging</h3>
<p>
Python offers robust frameworks for task queues and messaging systems, facilitating the creation of scalable, asynchronous, and event-driven applications.
Python's extensive libraries for message handling and serialization, along with its readability and simplicity,
Expand Down Expand Up @@ -1426,7 +1514,7 @@ <h2 class="card-title"><a href="https://github.com/samuelcolvin/arq" target="_bl
<hr class="my-4">

<!--Parallel & Distributed Computing-->
<h3 class="mt-4 display-6">Parallel & Distributed Computing</h3>
<h3 id="Parallel&DistributedComputing" class="mt-4 display-6">Parallel & Distributed Computing</h3>
<p>
Python frameworks (including bindings) are often used to create applications that distribute workloads across multiple nodes or machines,
enabling parallel processing, task scheduling, and distributed data processing.
Expand Down Expand Up @@ -1522,7 +1610,7 @@ <h5 class="card-title"><a href="https://github.com/apache/spark/tree/master/pyth
<hr class="my-4">

<!--Workflow & Pipelines-->
<h3 class="mt-4 display-6">Workflow & Pipelines</h3>
<h3 id="Worflow&Pipelines" class="mt-4 display-6">Workflow & Pipelines</h3>
<p>
Python provides abroad of frameworks and packages for workflow management, data pipelines, and job scheduling, making it a strong choice for data engineering and job automation.
Python's flexibility, rich ecosystem, and ease of use make it well-suited for developing and maintaining data pipelines and workflow automation systems.
Expand Down Expand Up @@ -1798,7 +1886,7 @@ <h3 class="text-end">
<hr class="my-4">

<!--Serverless-->
<h3 class="mt-4 display-6">Serverless</h3>
<h3 id="Serverless" class="mt-4 display-6">Serverless</h3>
<p>
Serverless offers benefits like automatic scaling, reduced operational overhead, and cost-efficiency,
as you only pay for actual usage. Python frameworks are exceptionally compatible with serverless architecture,
Expand Down Expand Up @@ -1914,7 +2002,7 @@ <h5>Lambdarest</h5>
<hr class="my-4">

<!--Microservices-->
<h3 class="mt-4 display-6">Microservices</h3>
<h3 id="Microservices" class="mt-4 display-6">Microservices</h3>
<p>
Microservices architecture is a compelling approach to designing and deploying software systems,
and Python is increasingly recognized as a strong choice for implementing microservices.
Expand Down Expand Up @@ -2008,7 +2096,7 @@ <h3 class="card-title mt-3"><a href="https://github.com/minos-framework/minos-py
<hr class="my-4">

<!--DevOps-->
<h3 class="mt-4 display-6">DevOps</h3>
<h3 id="DevOps" class="mt-4 display-6">DevOps</h3>
<p>
Python frameworks are well-suited for modern DevOps practices due to their versatility, extensive library support, and ease of use.
Python's simplicity makes it a preferred language for writing automation scripts, while the frameworks leverage Python to streamline
Expand Down Expand Up @@ -2139,7 +2227,7 @@ <h2 class="text-center">
<hr class="my-4">

<!--Web Crawling/Scraping-->
<h3 class="mt-4 display-6">Web Crawling / Scraping</h3>
<h3 id="WebCrawling/Scraping" class="mt-4 display-6">Web Crawling / Scraping</h3>
<p>
Web crawling/scraping using Python frameworks is a highly effective approach for extracting data from websites and web-based sources.
Python offers powerful frameworks that streamline the web crawling/scraping and data acquisition process.
Expand Down Expand Up @@ -2289,7 +2377,7 @@ <h3>Gerapy</h3>
<hr class="my-4">

<!--Appication Integrations-->
<h3 class="mt-4 display-6">Application Integrations</h3>
<h3 id="ApplicationIntegrations" class="mt-4 display-6">Application Integrations</h3>
<p>
In the realm of enterprise service bus (ESB) and application integrations, Python serves as a powerful and versatile ally.
With a framework like Zato, developers can seamlessly orchestrate the interconnection of disparate systems,
Expand Down Expand Up @@ -2318,7 +2406,7 @@ <h6 class="card-text"> - <i>Integrate everything. In Python.</i></h6>
<hr class="my-4">

<!--GUI & TUI-->
<h3 class="mt-4 display-6">GUI & TUI</h3>
<h3 id="GUI&TUI" class="mt-4 display-6">GUI & TUI</h3>
<p>
Python frameworks are an excellent choice for graphical user interface (GUI) and text-based user interface (TUI) development,
as they provide developers with versatile tools for creating cross-platform desktop applications.
Expand Down Expand Up @@ -2642,7 +2730,7 @@ <h3 class="text-center"><a href="https://github.com/urwid/urwid" target="_blank"
<hr class="my-4">

<!--Game-->
<h3 class="mt-4 display-6">Game</h3>
<h3 id="Games" class="mt-4 display-6">Games</h3>
<p>
The Python ecosystem boasts a wide array of exceptional frameworks for game development,
making it a versatile and powerful platform for creating interactive and engaging games.
Expand Down Expand Up @@ -2827,7 +2915,7 @@ <h3 class="card-title text-center"><a href="https://github.com/los-cocos/cocos"
<hr class="my-4">

<!--Automated Testing-->
<h3 class="mt-4 display-6">Automated Testing</h3>
<h3 id="AutomatedTesting" class="mt-4 display-6">Automated Testing</h3>
<p>
Automated testing serves as a systematic approach to validating software functionality, improving code quality,
and identifying defects early in the development process. Within the Python ecosystem,
Expand Down Expand Up @@ -2927,6 +3015,12 @@ <h3 class="text-center">

<hr class="my-4">

<button onclick="goTopFunction()" id="goTopBtn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-bar-up" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 10a.5.5 0 0 0 .5-.5V3.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 3.707V9.5a.5.5 0 0 0 .5.5zm-7 2.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5z"/>
</svg>
</button>

</main>
<!-- Content End -->

Expand Down Expand Up @@ -2958,8 +3052,26 @@ <h3 class="text-center">
});
});

// Collapsible Navbar
var navbarToggler = document.getElementById("navbarToggler");
var navbarCollapse = document.getElementById("navbarCollapse");

navbarToggler.addEventListener("click", function() {
navbarCollapse.style.display = navbarCollapse.style.display === "block" ? "none" : "block";
});

navbarCollapse.addEventListener("click", function(event) {
navbarCollapse.style.display = "none";
});

document.addEventListener("click", function(event) {
if (!navbarCollapse.contains(event.target) && !navbarToggler.contains(event.target)) {
navbarCollapse.style.display = "none";
}
});

// Go to Top
let mybutton = document.getElementById("top-button");
let mybutton = document.getElementById("goTopBtn");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
Expand All @@ -2968,7 +3080,7 @@ <h3 class="text-center">
mybutton.style.display = "none";
}
}
function topFunction() {
function goTopFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
Expand Down

0 comments on commit 21f25b6

Please sign in to comment.