compnus.github.io/index.html at main · compnus/compnus.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html>
<head>
    <script src="head.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script>
    <script src="script.js"></script>
    <title>CompNUS</title>
    <link rel="stylesheet" href="index.css" />
    <link rel="stylesheet" href="style.css" />
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZW8SQ3EQ1B"></script><script>window.dataLayer = window.dataLayer || [];  function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-ZW8SQ3EQ1B');</script></head>
<body>
    <div id="main">
        <div class="flex cc">
            <img id="ilogo" src="site/image/logo/main.svg" />
            <h1 id="logo"><span style="font-family:'Funnel Display';">Comp</span><span style="font-family:'Gabarito';">NUS</span></h1>
        </div>
        <div class="grid unirow" id="nav">
            <p class="link nav" title="Free crypto, new crypto projects, scam list and so much more!"><a href="crypto">CryptoNUS</a></p>
            <p class="link nav" title="Explore the world of NUS! Versatile apps, services and features are only one click away!"><a href="apps.html">Apps</a></p>
            <p class="link nav" 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>
        </div>
    </div>

    <main>
        <div id="searchbar" onclick="window.location.assign('search')">
            <div class="input">
                <input oninput="window.location.assign('search')" placeholder="Seach CompNUS..." id="mockupsearch" />
                <img src="https://img.icons8.com/?size=100&id=83218&format=png&color=FFFFFF" title="Search" />
            </div>
        </div>
    </main>

    <script>
        document.addEventListener("DOMContentLoaded", async () => {
            var user = await getUser();
            var usern;
            if (user.user) {
                const { data: username, error: dbError } = await sb
                    .from("users")
                    .select("username")
                    .eq("id", user.data.id)
                    .single();

                if (dbError) {
                    console.log(dbError);
                } else {
                    if (username.username) usern = username.username;
                }
                document.getElementById("userlogin").innerHTML = `<a href="u/profile.html">My Account (${usern})</a>`;
            }
            document.getElementById("mockupsearch").value = "";
        });
        initFooter(true);
        (function () {
            const getThreshold = () => {
                return window.innerWidth >= 800
                    ? window.innerHeight * 0.18
                    : window.innerWidth * 0.25;
            };

            const getSearchBar = () => document.getElementById("searchbar");
            let threshold = getThreshold();
            function gapPx() {
                return window.innerWidth >= 800
                    ? window.innerHeight * 0.02
                    : window.innerWidth * 0.04;
            }
            function compactedInputWidthPx(child) {
                const img = child.querySelector('img');
                const imgW = img ? img.getBoundingClientRect().width : 0;
                const padding = window.innerWidth >= 800
                    ? window.innerHeight * 0.01
                    : window.innerWidth * 0.02;

                const border = 2;
                return imgW + (padding * 2) + (border * 2);
            }
            function computeShift(container, useCompactedWidth = true) {
                const child = container.querySelector('.input');
                if (!child) return '0px';

                const containerRect = container.getBoundingClientRect();
                const viewportWidth = window.innerWidth;
                const gap = gapPx();

                const currentCenter = containerRect.width / 2;
                const childWidth = useCompactedWidth
                    ? compactedInputWidthPx(child)
                    : child.getBoundingClientRect().width;

                const desiredCenter = (viewportWidth - gap) - (childWidth / 2) - containerRect.left;

                let shift = desiredCenter - currentCenter;
                if (shift < 0) shift = 0;
                return `${Math.round(shift)}px`;
            }

            function applyCompaction() {
                const el = getSearchBar();
                if (!el) return;
                const scrollY = window.scrollY || 0;

                if (scrollY > threshold) {
                    if (!el.classList.contains("compacted")) {
                        el.classList.add("compacted");
                        requestAnimationFrame(() => {
                            el.style.setProperty('--shift', computeShift(el, true));
                        });
                    } else {
                        el.style.setProperty('--shift', computeShift(el, true));
                    }
                } else {
                    el.style.setProperty('--shift', '0px');
                    if (el.classList.contains("compacted")) {
                        window.setTimeout(() => el.classList.remove("compacted"), 5);
                    }
                }
            }

            window.addEventListener("scroll", applyCompaction, { passive: true });
            window.addEventListener("resize", () => {
                threshold = getThreshold();
                const el = getSearchBar();
                if (el && el.classList.contains('compacted')) {
                    el.style.setProperty('--shift', computeShift(el, true));
                }
                applyCompaction();
            });
            document.addEventListener("DOMContentLoaded", () => {
                threshold = getThreshold();
                applyCompaction();
            });
            threshold = getThreshold();
            applyCompaction();
        })();
    </script>
</body>
</html>