hello/index.html at main · Richy-Z/hello · 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>say hello!</title>
    <meta name="description" content="a friendly greeting isn't a crime." />
    <link rel="icon" href="/images/blush.png" />

    <meta name="theme-color" content="#ffd267" />

    <!-- opengraph and twitter stuff -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://hello.richy.lol/" />
    <meta property="og:title" content="say hello!" />
    <meta property="og:description" content="a friendly greeting isn't a crime." />
    <meta property="og:image" content="https://hello.richy.lol/images/opengraph.jpg" />

    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://hello.richy.lol/" />
    <meta property="twitter:title" content="say hello!" />
    <meta property="twitter:description" content="a friendly greeting isn't a crime." />
    <meta property="twitter:image" content="https://hello.richy.lol/images/opengraph.jpg" />

    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&display=swap');

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Nunito Sans', sans-serif;
        }

        .glow {
            color: #ffffff;
            text-shadow: 0 0 5px #ffd700, 0 0 10px #ffd700, 0 0 20px #ffcc00;
        }

        .footer-link {
            text-decoration: underline;
        }
    </style>

    <!-- numelon plstrk -->
    <script defer data-domain="hello.richy.lol"
        src="https://plstrk.numelon.com/js/script.file-downloads.hash.outbound-links.js"></script>
    <script>window.plausible = window.plausible || function () { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>

</head>

<body class="bg-gradient-to-br from-yellow-50 via-white to-yellow-100 text-neutral-900">
    <main class="min-h-screen flex flex-col items-center justify-center px-6 py-24 text-center" id="hello">
        <h1 class="text-6xl md:text-7xl lg:text-8xl font-extrabold">
            say <span id="hello-text" class="glow"></span>
        </h1>
        <p class="mt-4 text-xl md:text-2xl text-neutral-700 max-w-xl">
            A friendly greeting isn't a crime.
        </p>
        <p class="mt-2 text-neutral-500 italic">Seriously. You're still a human being.</p>

        <a href="#why">
            <div class="mt-10 animate-bounce text-neutral-500 text-sm flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 animate-pulse" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
                scroll to continue
            </div>
        </a>
    </main>

    <section class="max-w-5xl mx-auto px-6 py-16" id="why">
        <div class="grid md:grid-cols-2 gap-10">
            <div class="bg-white shadow-md rounded-2xl p-6">
                <h2 class="text-2xl font-bold mb-4">🤖 The cult of efficiency is getting weird.</h2>
                <p>nohello.net tells you that if someone's status has a link to that site, and you just say “Hello!”,
                    they might just ignore you.</p>
                <p class="mt-2 font-semibold">Yes. Really.</p>
                <p class="mt-4">So now we're ignoring people for being polite. Because they didn't read the fine print
                    in your bio. Because they didn't play by your chronically online social rules.</p>
                <p class="mt-4 italic">Let's take a breath.</p>
            </div>

            <div class="bg-white shadow-md rounded-2xl p-6">
                <h2 class="text-2xl font-bold mb-4">🧠 The real issue isn't "hello".</h2>
                <p>We understand the point of nohello.net. It's frustrating when someone sends “hi” and then takes hours
                    to follow up. We agree - that sucks.</p>
                <p class="mt-4">But guess what? You're allowed to do other things while waiting. You're not a prisoner
                    to a “hello”.</p>
                <p class="mt-4">That moment of silence after “hi”? It's called a chance to breathe. Or go outside. Or do
                    literally anything else.</p>
            </div>

            <div class="md:col-span-2 bg-white shadow-md rounded-2xl p-6">
                <h2 class="text-2xl font-bold mb-4">✋ Politeness isn't harmful. Loneliness is.</h2>
                <p>The internet's already full of people feeling alone and unseen. Do we really need more rules that
                    punish friendliness?</p>
                <p class="mt-4">When you mock someone for saying “hello” first, you're not saving time. You're just
                    helping turn the internet into a colder, lonelier place.</p>
                <p class="mt-4">You're still a person. So is the one on the other side of the screen. Say hello. Then
                    say what you need. It's not that deep.</p>
            </div>
        </div>
    </section>

    <section class="max-w-5xl mx-auto px-6 py-16" id="example">
        <div class="grid md:grid-cols-2 gap-10">
            <div class="bg-red-50 border border-red-200 shadow-inner rounded-2xl p-6">
                <h2 class="text-xl font-bold text-red-700 mb-4">❌ Don't do this</h2>
                <div class="space-y-4 text-sm">
                    <div class="flex items-start gap-3">
                        <img src="/images/mark.jpg" alt="Mark Scout" class="w-8 h-8 rounded-full" />
                        <div>
                            <span class="font-semibold">Mark</span> <span
                                class="text-neutral-500 text-xs">13:03</span><br />
                            hi!
                        </div>
                    </div>
                    <p class="italic text-neutral-600 ml-11">*no response*</p>
                    <div class="flex items-start gap-3">
                        <img src="/images/mark.jpg" alt="Mark Scout" class="w-8 h-8 rounded-full" />
                        <div>
                            <span class="font-semibold">Mark</span> <span
                                class="text-neutral-500 text-xs">17:22</span><br />
                            hello?
                        </div>
                    </div>
                    <p class="italic text-neutral-600 ml-11">*still no response - maybe they're just busy, but a quick
                        reply would've helped*</p>
                </div>
            </div>

            <div class="bg-green-50 border border-green-200 shadow-inner rounded-2xl p-6">
                <h2 class="text-xl font-bold text-green-700 mb-4">✅ Do this instead</h2>
                <div class="space-y-4 text-sm">
                    <div class="flex items-start gap-3">
                        <img src="/images/gemma.jpg" alt="Gemma Scout" class="w-8 h-8 rounded-full" />
                        <div>
                            <span class="font-semibold">Gemma</span> <span
                                class="text-neutral-500 text-xs">09:38</span><br />
                            hii!
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <img src="/images/mark.jpg" alt="Mark Scout" class="w-8 h-8 rounded-full" />
                        <div>
                            <span class="font-semibold">Mark</span> <span
                                class="text-neutral-500 text-xs">09:46</span><br />
                            hey
                        </div>
                    </div>
                    <p class="italic text-neutral-600 ml-11">*Mark realises he might not get a quick reply - so he keeps
                        working and later goes outside*</p>
                    <div class="flex items-start gap-3">
                        <img src="/images/gemma.jpg" alt="Gemma Scout" class="w-8 h-8 rounded-full" />
                        <div>
                            <span class="font-semibold">Gemma</span> <span
                                class="text-neutral-500 text-xs">10:32</span><br />
                            hey, sorry for the wait - just saw your message! can you show me how to get out of situation
                            𝒳 and get back into 𝒴?
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer class="text-center text-sm text-neutral-600 py-6">
        <p>This site is made by <a class="footer-link" href="https://richy.lol">someone who still believes in basic
                decency</a>. 💛</p>
        <p class="mt-1">Not affiliated with nohello.net. Just... emotionally allergic to it.</p>
    </footer>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            new Typed("#hello-text", {
                strings: [
                    "hello",
                    "bonjour",
                    "hola",
                    "ciao",
                    "こんにちは",
                    "안녕하세요",
                    "привіт",
                    "سلام",
                    "γειά",
                    "שלום",
                    "namaste",
                    "hallo",
                    "hei",
                    "hujambo"
                ],
                typeSpeed: 80,
                backSpeed: 40,
                backDelay: 1200,
                loop: true,
                showCursor: true,
                cursorChar: "|",
            });
        });
    </script>
</body>

</html>