Skip to content

Commit a6e144d

Browse files
daveberrysdaveberrys
committed
cleaned, changed, added & animations
1 parent 2032f9f commit a6e144d

File tree

10 files changed

+259
-366
lines changed

10 files changed

+259
-366
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div align="center">
22
<img src="assets/icons/PT.svg" width=150 height=150 alt="Pinpoint Tools Logo"/>
3-
<h1>Pinpoint Website</h1>
3+
<h1><a href="https://PinpointTools.github.io/">Pinpoint Website</a></h1>
44
<p> The official website repository for the Pinpoint Website. </p>
55
</div>
66

‎Screenshot_6.png‎

1.26 MB
Loading

‎index.html‎

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<link rel="icon" type="image/png" href="/icons/PT.svg" />
7+
<link rel="stylesheet" href="src/main.css"/>
78
<link rel="stylesheet" href="src/styler.css"/>
89
<title>Pinpoint Tools</title>
910
</head>
@@ -21,11 +22,11 @@
2122
</main>
2223

2324
<footer>
24-
<a href="https://github.com/PinpointUtils">Github</a>
25+
<a href="https://github.com/PinpointTools">Github</a>
2526
<a href="https://discord.gg/VQBDWSSnRA">Discord</a>
2627

2728
<p>
28-
(c) 2026 - Pinpoint Utils Team <br/>
29+
(c) 2026 - Pinpoint Tools Team <br />
2930
MIT License
3031
</p>
3132
</footer>
@@ -35,42 +36,43 @@
3536

3637
<style>
3738
#content {
38-
transform: translateY(-80px);
39+
/* transform: translateY(-80px); */
3940
width: 100%;
41+
/* margin-top: -80; */
4042
}
4143

4244
header {
43-
background-color: var(--elementColor);
45+
position: fixed;
46+
top: 0;
47+
left: 0;
48+
width: 100%;
49+
50+
z-index: 1000;
51+
52+
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
53+
backdrop-filter: blur(10px);
4454

55+
background-color: var(--elementColor);
4556
display: flex;
4657
justify-content: space-between;
4758
align-items: center;
48-
49-
padding-left: 10px;
50-
padding-right: 10px;
51-
52-
position: sticky;
53-
top: 0;
54-
55-
box-shadow: 0 0 10px 15px var(--elementColor);
56-
z-index: 1;
57-
/* backdrop-filter: blur(10px); */
59+
padding: 10px 10px;
5860
}
5961

6062
footer {
6163
display: flex;
6264
flex-direction: column;
6365
gap: 10px;
6466

65-
background-color: var(--secondaryColor);
66-
color: var(--textColor);
67-
box-shadow: 0 0 10px 15px var(--secondaryColor);
68-
67+
background-color: var(--secondary);
68+
color: var(--text2Color);
69+
6970
padding-left: 30px;
7071
padding-right: 30px;
72+
padding-top: 30px;
7173

7274
a {
73-
color: aqua;
75+
color: blue;
7476
text-decoration: none;
7577
}
7678
}
@@ -80,26 +82,29 @@
8082
gap: 5px;
8183

8284
a {
85+
display: flex;
86+
justify-content: center;
87+
align-items: center;
88+
8389
color: var(--textColor);
8490
text-decoration: none;
8591

8692
background-color: var(--element2Color);
8793
padding: 10px;
8894
border-radius: 10px;
95+
96+
transition: padding 100ms ease-out;
97+
} a:hover {
98+
padding: 0 30px;
8999
}
90100
}
91101

92-
/* most laziest way to fix it */
93102
@media screen and (max-width: 784px) {
94103
header {
95104
flex-direction: column;
96105
gap: 10px;
97106
padding: 15px;
98107
}
99-
100-
#content {
101-
transform: translateY(-175px);
102-
}
103108
}
104109
</style>
105110
</html>

‎src/main.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wdth,wght@125,300..700&display=swap');
2+
3+
*, *::before, *::after {
4+
box-sizing: border-box;
5+
margin: 0;
6+
} html, body {
7+
margin: 0 !important;
8+
padding: 0 !important;
9+
width: 100%;
10+
min-height: 100%;
11+
overflow-x: hidden;
12+
13+
scrollbar-width: none;
14+
-ms-overflow-style: none;
15+
} html::-webkit-scrollbar,
16+
body::-webkit-scrollbar {
17+
display: none;
18+
}
19+
20+
/* Light Mode */
21+
:root {
22+
--backgroundColor: #FFFFFF;
23+
--boxFrame: #FFFFFF;
24+
--textColor: #FFFFFF;
25+
--text2Color: #000000;
26+
27+
--frameColor: #0000001f;
28+
--frameInFrame: #00000046;
29+
--elementColor: #ffffff1f;
30+
--element2Color: #ffffff36;
31+
32+
--secondaryColor: #c9c9c9;
33+
--footer: #000000;
34+
}
35+
36+
/* Dark Mode */
37+
/* :root {
38+
--backgroundColor: #FFFFFF;
39+
--boxFrame: #000000;
40+
--textColor: #FFFFFF;
41+
--text2Color: #ffffff;
42+
43+
--frameColor: #0000001f;
44+
--elementColor: #ffffff1f;
45+
--element2Color: #ffffff36;
46+
} */
47+
48+
body {
49+
background-color: var(--secondaryColor);
50+
color: var(--textColor);
51+
52+
font-family: "Fredoka", sans-serif;
53+
font-size: 120%;
54+
min-height: 100vh;
55+
56+
scroll-behavior: smooth;
57+
}
58+
59+
a {
60+
color: blue
61+
}

‎src/router.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,19 @@ const navDiv = document.getElementById('mainNavi');
44
async function loadContent(pageName) {
55
const page = pageName || 'main';
66
try {
7-
const response = await fetch(`/src/routes/${page}.html`);
8-
if (!response.ok) {
9-
throw new Error(`Page not found: ${page}`);
7+
let response = await fetch(`/src/routes/${page}.html`);
8+
let html = await response.text();
9+
const isFullHtml = html.trim().toLowerCase().startsWith('<!doctype') || html.includes('<html');
10+
11+
if (!response.ok || isFullHtml) {
12+
console.warn(`Page not found or invalid fragment: ${page}. Loading 404 page...`);
13+
response = await fetch(`/src/routes/404.html`);
14+
if (!response.ok) {
15+
throw new Error(`404 page missing`);
16+
}
17+
html = await response.text();
1018
}
11-
const html = await response.text();
19+
1220
contentDiv.innerHTML = html;
1321
} catch (error) {
1422
console.error('Error loading page:', error);

‎src/routes/404.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<div class="front">
2+
<div class="contentWrapper">
3+
<div class="textContainer">
4+
<span class="bigText bold anim1">404</span>
5+
<span class="bigText anim2">Not</span>
6+
<span class="bigText bold anim3">Found.</span>
7+
</div>
8+
9+
<div class="textContainer">
10+
<span class="anim4">Maybe the link is wrong or the file got deleted?</span>
11+
</div>
12+
13+
<img src="/icons/PT.svg" class="logoAnim" alt="Pinpoint Tools Logo">
14+
</div>
15+
</div>
16+
17+
<style>
18+
img.preview {
19+
max-width: 100%;
20+
height: auto;
21+
border-radius: 10px;
22+
box-shadow: 0 5px 10px 0 black;
23+
}
24+
25+
.textContainer {
26+
animation: textRise 0.8s ease-in-out 1.4s forwards;
27+
} .logoAnim {
28+
width: 180px;
29+
height: 180px;
30+
opacity: 0;
31+
position: absolute;
32+
top: 100%;
33+
margin-top: 40px;
34+
transform: translateY(50px);
35+
animation: logoRise 0.8s ease-out 1.4s forwards;
36+
} @keyframes slideUp {
37+
to {
38+
opacity: 1;
39+
transform: translateY(0);
40+
}
41+
} @keyframes textRise {
42+
to {
43+
transform: translateY(-110px);
44+
}
45+
} @keyframes logoRise {
46+
to {
47+
opacity: 1;
48+
transform: translateY(-110px);
49+
}
50+
} .anim1, .anim2, .anim3, .anim4 {
51+
opacity: 0;
52+
transform: translateY(30px);
53+
animation: slideUp 0.6s ease-out forwards;
54+
}
55+
56+
.anim1 { animation-delay: 0.2s; }
57+
.anim2 { animation-delay: 0.4s; }
58+
.anim3 { animation-delay: 0.6s; }
59+
.anim4 { animation-delay: 0.8s; }
60+
</style>

‎src/routes/contributors.html‎

Lines changed: 1 addition & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -28,104 +28,9 @@ <h1> Daveberry Cricket Blueson </h1>
2828
</main>
2929

3030
<style>
31-
main {
32-
background-image: url("/background/Daniel Leone - Unsplash.jpg");
33-
background-size: cover;
34-
background-position: center;
35-
height: 1;
36-
}
37-
38-
.sectionText {
39-
display: flex;
40-
justify-content: space-between;
41-
align-items: center;
42-
padding: 40px;
43-
44-
.left {
45-
text-align: left;
46-
} .right {
47-
text-align: right;
48-
}
49-
50-
.right, .left {
51-
width: 100%;
52-
max-width: 750px;
53-
}
54-
}
55-
56-
.bigText {
57-
font-size: 50px;
58-
display: inline-block;
59-
} .bigText.bold {
60-
font-weight: bold;
61-
62-
}
63-
64-
.front {
65-
height: 100vh;
66-
width: 100%;
67-
display: flex;
68-
justify-content: center;
69-
align-items: center;
70-
overflow: hidden;
71-
}
72-
73-
.box {
74-
background-color: var(--boxFrame);
75-
box-shadow: 0 0 10px 15px var(--boxFrame);
76-
color: var(--text2Color);
77-
width: 100%;
78-
}
79-
80-
.contentWrapper {
81-
position: relative;
82-
display: flex;
83-
flex-direction: column;
84-
align-items: center;
85-
}
86-
8731
.textContainer {
88-
display: flex;
89-
gap: 15px;
9032
animation: textRise 0.8s ease-in-out 1.2s forwards;
91-
}
92-
93-
section.secondary {
94-
background-color: var(--secondaryColor);
95-
color: var(--textColor);
96-
box-shadow: 0 0 10px 15px var(--secondaryColor);
97-
}
98-
99-
@media screen and (max-width: 784px) {
100-
.textContainer {
101-
display: inline-block;
102-
text-align: center;
103-
word-spacing: 15px;
104-
}
105-
106-
.box {
107-
transform: translateY(40px);
108-
}
109-
110-
.sectionText {
111-
display: flex;
112-
flex-direction: column;
113-
align-items: center;
114-
padding: 20px;
115-
116-
.left, .right {
117-
width: 100%;
118-
text-align: center;
119-
}
120-
}
121-
122-
.preview {
123-
width: auto;
124-
height: auto;
125-
}
126-
}
127-
128-
.logoAnim {
33+
} .logoAnim {
12934
width: 180px;
13035
height: 180px;
13136
opacity: 0;
@@ -157,5 +62,4 @@ <h1> Daveberry Cricket Blueson </h1>
15762
.anim1 { animation-delay: 0.2s; }
15863
.anim2 { animation-delay: 0.4s; }
15964
.anim3 { animation-delay: 0.6s; }
160-
16165
</style>

0 commit comments

Comments
 (0)