Troop20/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

Temporary site built

Browse Source
This commit is contained in:
Tara Wilson 2025-01-17 20:25:45 -05:00
parent fde357fe71
commit 60c664be47
11 changed files with 207 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -12,3 +12,5 @@
# Built Visual Studio Code Extensions # Built Visual Studio Code Extensions
*.vsix *.vsix
#macOS garbage
**/.DS_Store

3
Dockerfile Normal file
View File

@ -0,0 +1,3 @@
FROM nginx:latest-alpine
COPY /source /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

10
build-production.sh Executable file
View File

@ -0,0 +1,10 @@
#PREPARE
echo "Setting Version"
VERSION_NUMBER=$(date +%Y)"."$(date +%m)"."$(date +%d)
echo $VERSION_NUMBER
#PACKAGE
echo "Dockerizing"
docker build -t troop20-web:$VERSION_NUMBER -f Dockerfile .
docker tag troop20-web:$VERSION_NUMBER terralilly85/troop20-web:$VERSION_NUMBER
docker buildx build --platform linux/amd64,linux/arm64 --push -t terralilly85/troop20-web:$VERSION_NUMBER .

13
nginx.conf Normal file
View File

@ -0,0 +1,13 @@
events{}
http {
include /etc/nginx/mime.types;
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
}

BIN
source/images/bsa-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
source/images/down.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
source/images/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 207 KiB

BIN
source/images/fe-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 209 KiB

57
source/index.html Normal file
View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Troop 20 - Columbiana, Ohio</title>
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<link rel="stylesheet" href="./styles.css">
<body>
<script src="./scripts.js"></script>
<div class="parallax parallax-one">
<div class="caption">
<a href="https://www.scouting.org" target="_blank" rel="noopener noreferrer">
<img class="image" src="./images/bsa-logo.png" alt="Scouting BSA logo"/>
</a>
<a href="https://www.fortyandeight.org" target="_blank" rel="noopener noreferrer">
<img class="image" src="./images/fe-logo.png" alt="40 and 8s logo"/>
</a>
<br/> <br/>
<div class="glass">
<span class="border">Troop 20 Columbiana, Ohio</span>
</div>
</div>
</div>
<div class="spacer-block spacer-two">
Founded in 2020, and Chartered by 40 & 8s Voiture 273, Troop 20 proudly serves Columbiana, Leetonia, and East Palestine in Ohio by developing young people into tomorrow's leaders.
</div>
<div class="parallax parallax-three">
<div class="caption-lower">
<div class="glass">
<span class="border">Meetings are held on Thursdays At 7:30 PM</span>
</div>
</div>
</div>
<div class="spacer-block spacer-one">
The Troop has monthly outings which include Camping and Backpacking. The Troop also attends a week long Summer Camp Program.
</div>
<div id="last-parallax" class="parallax parallax-two">
<div class="caption-lower">
<div class="glass">
<span class="border">Join us for a new adventure!</span>
<br/>
<span class="border">44640 St RT 14, Columbiana, Ohio 44408</span>
</div>
</div>
</div>
<img id="scroll-image" class="scroll-image" src="./images/down.gif" alt="Scroll Down" />
</body>
</head>

18
source/scripts.js Normal file
View File

@ -0,0 +1,18 @@
// This script shows and hides the scroll indicator in the lower
// right hand corner of the page.
document.addEventListener('DOMContentLoaded', function() {
const image = document.getElementById('scroll-image');
const lastParallax = document.getElementById('last-parallax');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
image.style.display = 'none';
} else {
image.style.display = 'block'
}
});
});
observer.observe(lastParallax);
});

104
source/styles.css Normal file
View File

@ -0,0 +1,104 @@
.parallax {
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
.parallax-one {
background-image: url('https://images.unsplash.com/photo-1505490096310-204ef067fe6b?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
}
.parallax-two {
background-image: url('https://images.unsplash.com/photo-1566679056462-2075774c8c07?q=80&w=3130&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
}
.parallax-three {
background-image: url('https://images.unsplash.com/photo-1469433791803-c2719135f970?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
}
.glass {
backdrop-filter: blur(6px) saturate(200%);
-webkit-backdrop-filter: blur(6px) saturate(200%);
background-color: rgba(17, 25, 40, 0.6);
border: 0px solid rgba(255, 255, 255, 0.125);
}
.spacer-block {
position: relative;
font-size: 25px;
text-align: center;
padding: 10px;
}
.spacer-one {
background-color: #B39475;
}
.spacer-two {
background-color: #9AB3D5;
}
.image {
height: 250px;
width: auto;
}
.scroll-image {
position: fixed;
right: 0px;
bottom: 0px;
margin-bottom: 5px;
margin-right: 5px;
display: block;
}
.glass {
backdrop-filter: blur(6px) saturate(200%);
-webkit-backdrop-filter: blur(6px) saturate(200%);
background-color: rgba(0, 0, 0, 0.65);
border: 1px solid rgba(255, 255, 255, 0.125);
}
.caption {
position: relative;
left: 0;
top: 25%;
width: 100%;
text-align: center;
text-wrap: inherit;
}
.caption-lower {
position: relative;
left: 0;
top: 45%;
width: 100%;
text-align: center;
text-wrap: inherit;
}
.caption span.border {
font-size: 25px;
text-wrap: inherit;
color: #fff;
}
.caption-lower span.border {
font-size: 25px;
text-wrap: inherit;
color: #fff;
}
body, html {
height: 100%;
margin: 0;
}
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}