TheBlueCorner-Website/index.html at main · SwingTheVine/TheBlueCorner-Website · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Tab and SEO metadata -->
    <link rel="icon" href="./assets/icons/TBC_Favicon.webp">
    <title>Home Page &mdash; The Blue Corner</title>
    <meta name="description" content="Welcome to The Blue Corner website! We are a community centered around Reddit r/place events. This is our home page.">

    <!-- CSS files -->
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/index.css">

    <!-- Website fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" onload="this.onload=null;this.rel='stylesheet'">
  </head>
  <body>

    <!-- The Skip Link -->
    <a class="screen-reader-bypass" role="link" tabindex="0" onclick="scrollToClass('page', event)" onkeydown="scrollToClass('page', event)">Skip to page content</a>

    <!-- The Banner -->
    <div id="banner" class="banner" role="banner"></div>

    <!-- All of the page -->
    <div class="page">

      <!-- JS disabled popup -->
      <noscript class="noscript-popup">
        JavaScript is disabled.
        <br>Some parts of the website will not work.
        <br>Enable JavaScript for the full experience.
      </noscript>

      <!-- Content -->
      <main>

        <!-- Top Text -->
        <section>
          <h1>Hello, Traveler</h1>
          <small id="title-flavor">Hello, World!</small>
          <br>
          <p>
            Welcome to The Blue Corner&rsquo;s website!
            This website serves many purposes.
            From information to overlays, we have it all here!
            Is there an event going on? You can find updates in the Discord or in the subreddit.
            Trying to find a page on this website?
            All webpages are listed below.
          </p>
          <div style="width: fit-content; margin: auto; text-align: center;">
            <a href="https://github.com/SwingTheVine/thebluecorner2023/" target="_blank" class="content-button" aria-label="Visit our overlay for r/place. Opens in a new tab">
              Get the Overlay
            </a>
            <a href="https://discord.gg/5X4GnCuuXZ/" target="_blank" class="content-button" aria-label="Visit our Discord. Opens in a new tab">
              Join the Discord
            </a>
            <a href="https://www.reddit.com/r/TheBlueCorner/" target="_blank" class="content-button" aria-label="Visit our sub-reddit. Opens in a new tab">
              Join the Subreddit
            </a>
          </div>
          <!-- End of Top Text -->
        </section>

        <!-- Sitemap -->
        <ul class="no-marker" style="padding-left: 0;">

          <!-- Home Page -->
          <li>
            <div class="content-image-left">
              <p>🏠</p>
              <div class="content-image-flavor">
                <h2>Home Page</h2>
                <p>
                  This is the page you are currently on.
                  It acts as a sitemap by listing all webpages on the website.
                  In addition, this page contains some useful links.
                </p>
              </div>
            </div>
            <!-- End of Home Page -->
          </li>

          <!-- About Us -->
          <li>
            <div class="content-image-left">
              <p>🟦</p>
              <div class="content-image-flavor">
                <h2>About Us</h2>
                <p>
                  Want to learn more about The Blue Corner?
                  This webpage is the right spot!
                  You can learn more about how The Blue Corner works here.
                  <br><a href="/about.html" class="content-button" aria-label="Visit our 'About Us' webpage. Opens in the same tab">
                    Learn more about us
                  </a>
                </p>
              </div>
            </div>
            <!-- End of About Us -->
          </li>

          <!-- History -->
          <li>
            <div class="content-image-left">
              <p>📖</p>
              <div class="content-image-flavor">
                <h2>Our History</h2>
                <p>
                  This page contains an extensive historical document on The Blue Corner.
                  Written by Scout107, it details The Blue Corner from 2017 to 2023.
                  <br><a href="/history.html" class="content-button" aria-label="Visit our history document. Opens in the same tab">
                    Learn our History
                  </a>
                </p>
              </div>
            </div>
            <!-- End of History -->
          </li>

          <!-- Hall Of Fame -->
          <li>
            <div class="content-image-left">
              <p>🏆</p>
              <div class="content-image-flavor">
                <h2>Hall Of Fame</h2>
                <p>
                  The Blue Corner Hall of Fame resides here.
                  This webpage contains exalted members of The Blue Corner.
                  <br><a href="/hall-of-fame.html" class="content-button" aria-label="Visit our hall of fame. Opens in the same tab">
                    View our Hall of Fame
                  </a>
                </p>
              </div>
            </div>
            <!-- End of Hall Of Fame -->
          </li>

          <!-- Socials -->
          <li>
            <div class="content-image-left">
              <p>👥</p>
              <div class="content-image-flavor">
                <h2>Socials</h2>
                <p>
                  Want to stay up to date with The Blue Corner?
                  Check out our social media profiles here!
                  All of our offical social media profiles are listed here.
                  <br><a href="/socials.html" class="content-button" aria-label="Visit our social media profile page. Opens in the same tab">
                    View our Socials
                  </a>
                </p>
              </div>
            </div>
            <!-- End of Socials -->
          </li>

          <!-- Search -->
          <li>
            <div class="content-image-left">
              <p>🔍</p>
              <div class="content-image-flavor">
                <h2>Search</h2>
                <p>
                  Trying to find something on our website?
                  Try searching for it here!
                  This page only searches <i>inside</i> our website.
                  Content <i>outside</i> our website will not appear.
                  <br><a href="/search.html" class="content-button" aria-label="Visit our website search page. Opens in the same tab">
                    Search our Website
                  </a>
                </p>
              </div>
            </div>
            <!-- End of Search -->
          </li>
          <!-- End of Sitemap -->
        </ul>
        <!-- End of Content -->
      </main>

      <!-- Footer of the page -->
      <footer id="footer"></footer>

      <!-- End of Page -->
    </div>

    <!-- Scripts -->
    <script src="./js/insertBanner.js" async></script>
    <script src="./js/insertFooter.js" async></script>
    <script src="./js/profilePicture.js" defer></script>
    <script src="./js/scrollHandler.js" defer></script>
    <script src="./js/accessibilityHandler.js" defer></script>
    <script src="./js/titleFlavor.js" defer></script>
  </body>
</html>