Skip to content

Commit ccdc7f5

Browse files
kingpvzkingpvz
committed
mhhhm
1 parent 1545e1d commit ccdc7f5

File tree

8 files changed

+223
-5
lines changed

8 files changed

+223
-5
lines changed

‎crypto/listScam.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
var FILTERID = 0;
1+
var FILTERID = "scam0";
22

33
var LISTS = [
44
{
@@ -31,7 +31,7 @@ function search(via) {
3131
via = via.toLowerCase().replace(/ /g, "_").trim();
3232
for (var i of document.getElementById("main").children) {
3333
i.style.display = "grid";
34-
if (!i.id.includes(via) || (FILTERID != 0 && !i.classList.contains("cat-"+FILTERID))) {
34+
if (!i.id.includes(via) || (FILTERID != "scam0" && !i.classList.contains("cat-"+FILTERID))) {
3535
i.style.display = "none";
3636
continue;
3737
}
@@ -45,7 +45,7 @@ function search(via) {
4545
}
4646

4747
function scamFilter(cat) {
48-
FILTERID = cat;
48+
FILTERID = "scam"+cat;
4949
search(document.getElementById('searchbarinput').value);
5050
}
5151

@@ -62,7 +62,7 @@ function load() {
6262

6363
cnt.id = `${i.id}___${i.name.replace(/ /g, "_").replace("#", "hash").toLowerCase()}`;
6464
cnt.setAttribute("onclick", "loadView('" + i.id + "')");
65-
cnt.classList.add("cat-" + i.category);
65+
cnt.classList.add("cat-scam" + i.category);
6666
if (i.category == 2) cnt.style.borderColor = "orange";
6767
else if (i.category == 3) cnt.style.borderColor = "lightblue";
6868
document.getElementById("main").appendChild(cnt);

‎head.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ header.innerHTML = `
2424
<p class="link hnav" id="cryptonus" title="Free crypto, new crypto projects, scam list and so much more!"><a href="/crypto/">CryptoNUS</a></p>
2525
<p class="link hnav" id="servicenus" title="Explore the world of NUS! Versatile apps, services and features are only one click away!"><a href="/apps.html">Apps</a></p>
2626
<p class="link hnav" id="userlogin" title="Gateway to everything NUS: mine $NUS crypto and more!"><a href="/u/signup.html">Sign Up</a> <span style="color: white !important">/</span> <a href="/u/login.html">Log In</a></p>
27+
<a href="/search/" id="searchnusa"><img class="link inav" id="searchnus" title="Search" src="https://img.icons8.com/?size=100&id=83218&format=png&color=FFFFFF"></a>
2728
</div>
2829
</header>
2930
`;
@@ -46,6 +47,7 @@ footer.innerHTML = `
4647
<footer>
4748
<p id="footnote">&copy;<span id="footnoteyear">2069</span> CompNUS, All rights reserved.</p>
4849
<div id="footernav">
50+
<p class="link fnav"><a href="/search">Search</a></p>
4951
<p class="link fnav"><a href="/legal/faq.html">FAQ</a></p>
5052
<p class="link fnav"><a href="/legal/">Legal</a></p>
5153
</div>
@@ -69,6 +71,7 @@ fullfooter.innerHTML = `
6971
<p class="link fnav"><a href="/about.html">About Us</a></p>
7072
<p class="link fnav fnavbot"><a href="#telegramnews#">News <img class="footerpng" src="https://img.icons8.com/?size=100&id=lUktdBVdL4Kb&format=png&color=FFFFFF"></a></p>
7173
<p class="link fnav fnavbot"><a href="/apps.html">Apps</a></p>
74+
<p class="link fnav fnavbot"><a href="/search">Search</a></p>
7275
</div>
7376
<br><br><br>
7477
<p id="footmes">There's nothing to see here... for now.<br><span class="link" style="font-weight: bold; cursor: pointer" onclick="window.scrollTo(0, 0);">Back to top</span></p>

‎index.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
-moz-user-select: none;
1313
-webkit-user-select: none;
1414
animation: gradientScroll 20s ease infinite;
15+
z-index: 5;
1516
}
1617

1718
@keyframes gradientScroll {
@@ -51,6 +52,63 @@
5152
margin-bottom: 3vh;
5253
}
5354

55+
#searchbar {
56+
display: flex;
57+
justify-content: center;
58+
position: sticky;
59+
top: 8vh;
60+
}
61+
62+
#searchbar > div {
63+
width: fit-content;
64+
background-color: var(--accent);
65+
padding: 1vh;
66+
border-radius: calc(3vh + 2px);
67+
cursor: pointer;
68+
box-shadow: var(--shadow) 0 5px 5px -3px;
69+
border: solid 2px var(--accent);
70+
transform: translateX(0);
71+
transition: 1s ease-out, transform .3s ease-out, .3s ease-out box-shadow;
72+
will-change: transform;
73+
}
74+
75+
#searchbar > div:hover, #searchbar.compacted > div:hover {
76+
box-shadow: yellow 0 0 10px 0;
77+
transform: translateX(var(--shift, 0px)) scale(1.05);
78+
}
79+
80+
#searchbar > div > input {
81+
width: 30vw;
82+
font-family: 'Funnel Display';
83+
font-weight: bold;
84+
font-size: 3vh;
85+
transition: .3s ease-out;
86+
}
87+
88+
#searchbar > div > img {
89+
height: 5vh;
90+
width: 5vh;
91+
margin-left: 1vh;
92+
transition: .3s ease-out;
93+
}
94+
95+
#searchbar.compacted > div {
96+
border-radius: 4vh;
97+
box-shadow: black 0 3px 3px -2px;
98+
border-color: var(--border);
99+
transform: translateX(var(--shift, 0px));
100+
}
101+
102+
#searchbar.compacted > div > input {
103+
width: 0;
104+
padding: 0;
105+
border-width: 0;
106+
}
107+
108+
#searchbar.compacted > div > img {
109+
margin-left: 0;
110+
}
111+
54112
@media(max-width:800px) {
55113
#main {
56114
position: sticky;
@@ -74,4 +132,28 @@
74132
margin: 0;
75133
margin-bottom: 4vw;
76134
}
135+
136+
#searchbar {
137+
top: 22vw;
138+
}
139+
140+
#searchbar > div {
141+
flex-direction: row;
142+
padding: 2vw;
143+
border-radius: calc(6vw + 2px);
144+
}
145+
146+
#searchbar > div > input {
147+
width: 72vw;
148+
font-size: 6vw;
149+
}
150+
151+
#searchbar > div > img {
152+
height: 10vw;
153+
width: 10vw;
154+
margin-left: 2vw;
155+
}
156+
#searchbar.compacted > div {
157+
border-radius: 8vw;
158+
}
77159
}

‎index.html‎

Lines changed: 89 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,12 @@ <h1 id="logo"><span style="font-family:'Funnel Display';">Comp</span><span style
2222
</div>
2323

2424
<main>
25-
25+
<div id="searchbar" onclick="window.location.assign('search')">
26+
<div class="input">
27+
<input oninput="window.location.assign('search')" placeholder="Seach CompNUS..." id="mockupsearch" />
28+
<img src="https://img.icons8.com/?size=100&id=83218&format=png&color=FFFFFF" title="Search" />
29+
</div>
30+
</div>
2631
</main>
2732

2833
<script>
@@ -43,8 +48,91 @@ <h1 id="logo"><span style="font-family:'Funnel Display';">Comp</span><span style
4348
}
4449
document.getElementById("userlogin").innerHTML = `<a href="u/profile.html">My Account (${usern})</a>`;
4550
}
51+
document.getElementById("mockupsearch").value = "";
4652
});
4753
initFooter(true);
54+
(function () {
55+
const getThreshold = () => {
56+
return window.innerWidth >= 800
57+
? window.innerHeight * 0.18
58+
: window.innerWidth * 0.25;
59+
};
60+
61+
const getSearchBar = () => document.getElementById("searchbar");
62+
let threshold = getThreshold();
63+
function gapPx() {
64+
return window.innerWidth >= 800
65+
? window.innerHeight * 0.02
66+
: window.innerWidth * 0.04;
67+
}
68+
function compactedInputWidthPx(child) {
69+
const img = child.querySelector('img');
70+
const imgW = img ? img.getBoundingClientRect().width : 0;
71+
const padding = window.innerWidth >= 800
72+
? window.innerHeight * 0.01
73+
: window.innerWidth * 0.02;
74+
75+
const border = 2;
76+
return imgW + (padding * 2) + (border * 2);
77+
}
78+
function computeShift(container, useCompactedWidth = true) {
79+
const child = container.querySelector('.input');
80+
if (!child) return '0px';
81+
82+
const containerRect = container.getBoundingClientRect();
83+
const viewportWidth = window.innerWidth;
84+
const gap = gapPx();
85+
86+
const currentCenter = containerRect.width / 2;
87+
const childWidth = useCompactedWidth
88+
? compactedInputWidthPx(child)
89+
: child.getBoundingClientRect().width;
90+
91+
const desiredCenter = (viewportWidth - gap) - (childWidth / 2) - containerRect.left;
92+
93+
let shift = desiredCenter - currentCenter;
94+
if (shift < 0) shift = 0;
95+
return `${Math.round(shift)}px`;
96+
}
97+
98+
function applyCompaction() {
99+
const el = getSearchBar();
100+
if (!el) return;
101+
const scrollY = window.scrollY || 0;
102+
103+
if (scrollY > threshold) {
104+
if (!el.classList.contains("compacted")) {
105+
el.classList.add("compacted");
106+
requestAnimationFrame(() => {
107+
el.style.setProperty('--shift', computeShift(el, true));
108+
});
109+
} else {
110+
el.style.setProperty('--shift', computeShift(el, true));
111+
}
112+
} else {
113+
el.style.setProperty('--shift', '0px');
114+
if (el.classList.contains("compacted")) {
115+
window.setTimeout(() => el.classList.remove("compacted"), 5);
116+
}
117+
}
118+
}
119+
120+
window.addEventListener("scroll", applyCompaction, { passive: true });
121+
window.addEventListener("resize", () => {
122+
threshold = getThreshold();
123+
const el = getSearchBar();
124+
if (el && el.classList.contains('compacted')) {
125+
el.style.setProperty('--shift', computeShift(el, true));
126+
}
127+
applyCompaction();
128+
});
129+
document.addEventListener("DOMContentLoaded", () => {
130+
threshold = getThreshold();
131+
applyCompaction();
132+
});
133+
threshold = getThreshold();
134+
applyCompaction();
135+
})();
48136
</script>
49137
</body>
50138
</html>

‎search/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<script src="../head.js"></script>
5+
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script>
6+
<script src="../script.js" defer></script>
7+
<title>Search - CompNUS</title>
8+
<link rel="stylesheet" href="../style.css" />
9+
<link rel="stylesheet" href="style.css" />
10+
<script src="script.js" defer></script>
11+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZW8SQ3EQ1B"></script>
12+
<script>window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-ZW8SQ3EQ1B');</script>
13+
</head>
14+
<body>
15+
<script>initHeader("Search"); document.getElementById("headernav").removeChild(document.getElementById("searchnusa"));</script>
16+
<main>
17+
18+
</main>
19+
<script>initFooter(true);</script>
20+
</body>
21+
</html>

‎search/script.js‎

Whitespace-only changes.

‎search/style.css‎

Whitespace-only changes.

‎style.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,10 @@ header {
187187
display: flex;
188188
}
189189

190+
#headernav {
191+
align-items: center;
192+
}
193+
190194
footer {
191195
display: flex;
192196
align-items: center;
@@ -319,6 +323,13 @@ a {
319323
line-height: 1;
320324
}
321325

326+
.link.inav {
327+
height: 4vh;
328+
width: 4vh;
329+
margin-right: 1vw;
330+
transition: ease-out 0.2s;
331+
}
332+
322333
.link.fnav.fnavbot {
323334
font-weight: 400;
324335
}
@@ -338,6 +349,10 @@ a {
338349
color: yellow;
339350
}
340351

352+
a:hover > .link.inav {
353+
filter: brightness(50%) sepia(100) saturate(100) hue-rotate(60deg) brightness(1000%);
354+
}
355+
341356
.grid {
342357
display: grid;
343358
align-content: center;
@@ -709,6 +724,15 @@ div.popup > div > div.inside > h1 {
709724
font-size: 4vw;
710725
}
711726

727+
.link.inav {
728+
height: 7vw;
729+
width: 7vw;
730+
margin-right: 0;
731+
position: absolute;
732+
right: 2vw;
733+
top: 18vw;
734+
}
735+
712736
div.popup > div.cm {
713737
max-width: 80vw;
714738
}

0 commit comments

Comments
 (0)