Skip to content

Commit

Permalink
add elements to website
Browse files Browse the repository at this point in the history
  • Loading branch information
@amit9838
amit9838 committed Jan 15, 2024
1 parent aa11a78 commit f850938
Show file tree
Hide file tree
Showing 3 changed files with 340 additions and 5 deletions.
112 changes: 107 additions & 5 deletions website/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,115 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Carme&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLdPG8FJ0V7irTLQ8Uo0qcPxh4Plq7G5tGm0rU+1SPhVotteLpBERwTkw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="script.js" defer></script>
<title>Weather App</title>
</head>

<body>
<img src="https://github.com/amit9838/weather/blob/master/data/icons/hicolor/scalable/apps/io.github.amit9838.weather.svg?raw=true" width="120">
<h3>Weather</h3>
<p>Beautiful and lightweight weather app</p>
<div class="header">
<div class="header-left">
<img src="https://github.com/amit9838/weather/blob/master/data/icons/hicolor/scalable/apps/io.github.amit9838.weather.svg?raw=true"
width="70">
<h1 class="title">Weather</h1>
</div>
<div class="header-right">
<nav>
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#installation">Download</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<a href="https://github.com/amit9838/weather" target="_blank">
<h2 class="github-btn">
<i class="fa-brands fa-github"></i>
Github
</h2>
</a>
</div>
</div>



<div class="slideshow-container">
<div class="mySlides fade">
<img src="https://raw.githubusercontent.com/amit9838/weather/master/screenshots/ss2-thunderstorm.png?raw=true#gh-dark-mode-only"
style="width:100%">
</div>

<div class="mySlides fade">
<img src="https://raw.githubusercontent.com/amit9838/weather/master/screenshots/ss4-light_mode.png?raw=true#gh-light-mode-only"
style="width:100%">
</div>

<!-- Manual slideshow buttons -->
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

<section id="features" class="features">
<div class="features-container">
<!-- <p>Beautiful lightweight weather app.</p> -->
<h2>Features</h2>
<ul>
<li>See weather with dynamically changing gradient-based background according to current weather
condition</li>
<li>See today, tomorrow, and 5-day forecasts</li>
<li>See conditions in metric or imperial systems</li>
<li>Option to use Personal API Key</li>
</ul>
</div>
</section>

<section id="installation">
<h2>Installation</h2>
<img
src="https://img.shields.io/github/v/release/amit9838/weather?style=flat&label=Latest+Release&color=%234a92ff">

<h3 class="subheading">Get it from flathub</h3>
<a href='https://flathub.org/apps/io.github.amit9838.weather' target="_blank"><img width='240'
alt='Download on Flathub' src='https://dl.flathub.org/assets/badges/flathub-badge-en.png' /></a>
<p>Or you can use the terminal:</p>
<pre><code>flatpak install flathub io.github.amit9838.weather</code></pre>

<h3 class="subheading">Get it from Snapstore</h3>
<a href='https://snapcraft.io/mousam' target="_blank"><img width='240' alt='Download on SnapCraft'
src='https://github.com/snapcore/snap-store-badges/blob/master/EN/%5BEN%5D-snap-store-black-uneditable.png?raw=true' /></a>
<p>Or you can use the terminal:</p>
<pre><code>sudo snap install mousam</code></pre>
</section>

<section id="about" class="about">
<h2>About</h2>
<p>Beautiful and lightweight weather app build using Gtk4, Libadwaita and Python. </p>
<p>View all contributors on <a href="https://github.com/amit9838/weather/graphs/contributors" target="_blank">
<i class="fa-brands fa-github"></i> GitHub</a></p>
</section>

<footer>
<p>&copy; 2024 Weather App. All rights reserved.</p>
</footer>
<script>
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();

document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>

</html>
36 changes: 36 additions & 0 deletions website/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener("click", function (e) {
e.preventDefault();

document.querySelector(this.getAttribute("href")).scrollIntoView({
behavior: "smooth",
});
});
});

// JavaScript for manual slideshow
let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides((slideIndex += n));
}

function currentSlide(n) {
showSlides((slideIndex = n));
}

function showSlides(n) {
let slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
197 changes: 197 additions & 0 deletions website/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
body {
font-family: 'Carme', Tahoma, Geneva, Verdana, sans-serif;
background-color: #151515;
margin: 0;
padding: 0;
color: white;
}

.header {
background-color: #0F6292;
color: #fff;
text-align: center;
padding: .2rem 5%;
display: flex;
justify-content: space-between;
}


.header-left {
display: flex;
align-items: center;
}

.header-right {
display: flex;
align-items: center;
}

.header img {
margin-bottom: 10px;
}

.github-btn{
background-color: rgb(35, 35, 35);
border-radius: .3rem;
color: white;
padding: .2rem .8rem;
}
.github-btn > img {
color: white;

}
.github-btn:hover{
background-color: rgb(45, 45, 45);
}

@media only screen and (max-width: 600px) {
.header {
flex-direction: column;
align-items: center;
}
.header-left{
flex-direction: column;
}
.header-right{
flex-direction: column;
/* display: none; */
}
}

nav {
/* background-color: #1E88E5; Updated background color */
color: #fff;
text-align: center;
padding: 10px;
position: sticky;
top: 0;
z-index: 1000;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}

nav li {
display: inline;
margin-right: 20px;
font-size: 18px; /* Updated font size */
transition: color 0.3s;
}

nav li a {
color: #fff;
text-decoration: none;
}

nav li:hover {
color: #007BFF;
}

.title {
margin: 0rem 0rem;
}

.screenshots {
text-align: center;
}

.screenshots img {
max-width: 100%;
margin: 10px;
}

section {
padding: 40px 20px;
text-align: center;
}

section h2 {
color: #007BFF;
}

#features{
background-color: #232323;
}


.features-container{
min-width: fit-content;
width: 30%;
margin: 0 auto;

}

section ul {
/* list-style-type: none; */
padding: 0rem 1rem;
text-align: left;
}

section ul li {
margin-bottom: 10px;
}

.subheading{
margin-top: 4rem;
}

pre {
overflow:scroll;
}

code{
background-color: #232323;
padding: .3rem .6rem;
border-radius: .2rem;

}

footer {
background-color: #0F6292;
color: #fff;
text-align: center;
padding: 10px 0;
}
/* Additional styles for the slideshow */
.slideshow-container {
padding: 2rem 0;
max-width: 1000px;
margin: auto;
position: relative;
overflow: hidden;
}

.mySlides {
display: none;
}

.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px 20px; /* Added padding to create separation */
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}

.prev {
left: 10px; /* Adjust the left position for the previous button */
border-radius: 3px 0 0 3px;
}

.next {
right: 10px; /* Adjust the right position for the next button */
border-radius: 0 3px 3px 0;
}

.prev:hover, .next:hover {
background-color: rgba(0, 123, 255, 0.8); /* Adjusted color to match a bluish theme */
}

0 comments on commit f850938

Please sign in to comment.