Initial commit

Signed-off-by: mctaylors <[email protected]>

.gitignore

@@ -0,0 +1 @@
+.idea/

assets/css/fonts.css

@@ -0,0 +1,11 @@
+@font-face {
+    font-family: 'BlitzBold';
+    font-weight: normal;
+    src: url(/assets/woff2/BlitzBold.woff2);
+}
+
+@font-face {
+    font-family: 'BlitzMain';
+    font-weight: normal;
+    src: url(/assets/woff2/BlitzMain.woff2);
+}

assets/css/styles.css

@@ -0,0 +1,196 @@
+/*
+    Octobot for Discord. Made by mctaylors.
+    Inspired by splatoon3.ink.
+*/
+
+@import url(fonts.css);
+
+:root {
+    color: #eee;
+    background-color: #000;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOIAAADiBAMAAAChPgbkAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAqUExURRcXF0dwTBUVFRYWFgAAABoaGhkZGRUVFRgYGAAAAAAAAB4eHiQkJBISEkRDNy8AAAAOdFJOUxYAGBcDEwoMFQUBEQcOBwHpdgAAAjdJREFUeNrt271NBDEUReGnjUlGIoGICCKkbYIKqIASqIEm6IGMDiiBjtj5XXvGz9k9Cde5dfTFvo6Xc6TnacjP/Xd+7/TbuRi3r52b752bXw/5xedecaCRMdDIGGjkpQgjL0UYORZZ5FhkkVMRRU5FFDkXSeRcJJFLEUQuRRC5FjnkWuSQWxFDbkUMeS1SyGuRQhZFCFkUIWRZZJBlkUFWRQRZFRFkXSSQdZFA7ooAclcEkPuiHrkv6pGHohx5KMqRx6IaeSyqkY2iGNkoipGtohbZKmqRzaIU2SxKke2iEtkuKpFJUYhMikJkVtQhs6IOmRZlyLQoQ+ZFFTIvqpCdogjZKYqQvaIGGW80Mh5pZJxoZBhppJFGGmmkkUYaaaSRRhpppJFGGmmkkUYaaeR/Rp5pZHzQyPikkXFHI2OgkTHQyBho5KUII8f3RxY5Flnk9MaKIqciipzfkUnkXCSRy1s5iFyKIHLdA3DItcght80DhtyKGPK666CQ1yKFLLYrELIoQshyn8MgyyKDrDZICLIqIsh6Z0Ug6yKB3G3JAOSuCCD3ezk9cl/UIw+bQDnyUJQjj7tHNfJYVCMb204xslEUI1v7VS2yVdQimxtdKbJZlCLbO2Qlsl1UIpOttRCZFIXIbE+uQ2ZFHTLdzMuQaVGGzP8FqJB5UYXs/H0QITtFEbL3v0OD7BU1yPihkXFDIwNHhpFGGmmkkUYaaaSRRhpppJFGGmmkkUYaaaSRRhoJIgNH/gHUGcb6oO4YfwAAAABJRU5ErkJggg==");
+    font-family: BlitzMain, sans-serif;
+}
+
+a, a:visited {
+    color: chartreuse;
+}
+
+a:hover {
+    color: aquamarine;
+}
+
+a:active {
+    color: darkcyan;
+}
+
+a.alternative {
+    text-decoration: none;
+}
+
+.highlight {
+    font-family: BlitzBold, sans-serif;
+    font-size: 32px;
+}
+
+.header {
+    font-size: 24px;
+    padding: 16px;
+    position: fixed;
+    width: calc(100% - 48px);
+    z-index: 10;
+}
+
+.header > .left {
+    float: left;
+}
+
+.header > .right {
+    float: right;
+}
+
+.header > .left img {
+    margin: 0 8px;
+    height: 64px;
+}
+
+.header > .right .social img {
+    height: 32px;
+    width: 32px;
+    border: #999 1px solid;
+    border-radius: 16px;
+    background-color: #0009;
+    padding: 8px;
+    transition: 200ms;
+}
+
+.header > .right .social img:hover {
+    border-color: #eee;
+}
+
+.content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 32px 64px;
+    padding: 100px 16px 80px;
+}
+
+.content > .card {
+    mask-image: url("/assets/svg/card-header.svg");
+    mask-size: 2000px auto;
+    mask-position: top;
+    background-image: url("/assets/png/tapes-transparent.png");
+    background-size: contain;
+    width: 480px;
+    min-height: 520px;
+    padding: 48px 16px 8px;
+    border-radius: 16px;
+}
+
+.content > .card.first {
+    background-color: #1bbeab; /* Splatoon 3 TurquoisePink Alpha */
+    rotate: -2deg;
+}
+
+.content > .card.second {
+    background-color: #c43a6e; /* Splatoon 3 TurquoisePink Bravo */
+    rotate: 2deg;
+}
+
+.content > .card * {
+    text-align: left;
+}
+
+.content > .card span {
+    line-height: 1em;
+    filter: drop-shadow(1px 1px #000);
+}
+
+.content > .card > .title {
+    margin: 8px 0;
+}
+
+.content > .card > .title > * {
+    vertical-align: middle;
+}
+
+.content > .card > .title > span {
+    font-size: 24px;
+}
+
+.content > .card > .title > img {
+    height: 32px;
+    width: 32px;
+}
+
+.content > .card > .frame {
+    padding: 4px 8px 8px;
+    border-radius: 8px;
+    background-color: #0009;
+    backdrop-filter: blur(4px);
+}
+
+.content > .card > .frame > ul {
+    padding: 0 0 0 24px;
+}
+
+.invite {
+    margin-top: 8px;
+    padding: 12px 0;
+    width: 100%;
+    font-family: BlitzBold, sans-serif;
+    font-size: 20px;
+    color: white;
+    background-color: #4d5058;
+    border-radius: 4px;
+    border: 0;
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    transition: 200ms;
+}
+
+.invite:hover {
+    background-color: #6d6f78;
+    cursor: pointer;
+}
+
+.invite:active {
+    background-color: #80848e;
+}
+
+.invite > img {
+    height: 24px;
+    width: 24px;
+}
+
+.invite > span {
+    filter: none !important;
+}
+
+.invite > * {
+    vertical-align: middle;
+}
+
+.footer {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    padding: 8px;
+    color: #999;
+    font-size: 14px;
+    text-align: center;
+    background-color: #0009;
+    backdrop-filter: blur(4px);
+}
+
+.footer img {
+    vertical-align: sub;
+}
+
+.splatoon {
+    height: 24px;
+    filter: brightness(75%);
+}

index.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="initial-scale=0.75 user-scalable=no"/>
+  <link rel="stylesheet" href="/assets/css/styles.css"/>
+  <link rel="icon" href="/assets/ico/octobot.ico"/>
+  <title>Octobot for Discord</title>
+</head>
+<body>
+<div class="header">
+  <div class="left">
+    <img src="/assets/png/octobot-web-logo.png" alt="Octobot Web logo" draggable="false"/>
+  </div>
+  <div class="right">
+    <div class="social">
+      <a href="https://github.com/TeamOctolings/Octobot">
+        <img src="/assets/svg/github-mark-white.svg" alt="GitHub logo" draggable="false"/>
+      </a>
+    </div>
+  </div>
+</div>
+<div class="content">
+  <div class="first card">
+    <div class="title">
+      <img src="/assets/ico/octobot.ico" alt="Octobot icon" draggable="false"/>
+      <span class="highlight">Veemo!</span>
+    </div>
+    <div class="frame">
+      <span>I'm a general-purpose bot for moderation written by Team Octolings in C# and Remora.Discord!</span>
+    </div>
+    <div class="title">
+      <img src="/assets/png/mem-cake-sardinium.png" alt="Mem Cake (Sardinium)" draggable="false"/>
+      <span class="highlight">Features</span>
+    </div>
+    <div class="frame">
+      <ul>
+        <li>Banning, muting, kicking, etc.</li>
+        <li>Reminding you about something if you wish</li>
+        <li>Reminding everyone about that new event you made</li>
+        <li>Renaming those annoying self-hoisting members</li>
+        <li>Log everything from joining the server to deleting messages</li>
+        <li>Listen to Inkantation!</li>
+        ...a-a-and more!
+      </ul>
+    </div>
+    <a class="alternative"
+       href="https://discord.com/oauth2/authorize?client_id=855023234407333888&permissions=1383382133894&scope=applications.commands%20bot">
+      <button class="invite">
+        <img src="/assets/svg/add-circle-white.svg" alt="Add icon"/>
+        <span>Add App</span>
+      </button>
+    </a>
+  </div>
+  <div class="second card">
+    <div class="title">
+      <img src="/assets/png/mem-cake-octoling.png" alt="Mem Cake (Rival Octoling)" draggable="false"/>
+      <span class="highlight">Bug Report / Feature Request</span>
+    </div>
+    <div class="frame">
+      <span>If you find some bug or want some new feature in Octobot, you can always use the Issues menu in our GitHub repository.</span>
+      <ul>
+        <li><a href="https://github.com/TeamOctolings/Octobot/issues">Open GitHub Issues</a></li>
+        <li><a
+            href="https://github.com/TeamOctolings/Octobot/issues/new?assignees=&labels=type%3A+bug&projects=&template=bug-report.yml">Report
+          a bug</a></li>
+        <li><a
+            href="https://github.com/TeamOctolings/Octobot/issues/new?assignees=&labels=type%3A+feature&projects=&template=feature-request.yml">Request
+          a feature</a></li>
+      </ul>
+    </div>
+    <div class="title">
+      <img src="/assets/png/mem-cake-mole.png" alt="Mem Cake (Mole)" draggable="false"/>
+      <span class="highlight">Building Octobot</span>
+    </div>
+    <div class="frame">
+      <span>Want to make your own Octobot with, for example, even more features?  Then, Octobot's Wiki is at your service!</span>
+      <ul>
+        <li><a href="https://github.com/TeamOctolings/Octobot/wiki/Installing-Windows">Building for Windows</a></li>
+        <li><a href="https://github.com/TeamOctolings/Octobot/wiki/Installing-Unix">Building for Linux/macOS</a></li>
+      </ul>
+    </div>
+  </div>
+</div>
+<div class="footer">
+  <span>Not an official <img class="splatoon" src="/assets/svg/splatoon.svg" alt="Splatoon™"/> product. We are in no way affiliated with or endorsed by Nintendo Company, or other rightsholders.</span>
+  <a href="https://github.com/TeamOctolings/Octobot/commit/master"><img
+      src="https://img.shields.io/github/last-commit/TeamOctolings/Octobot?logo=github" alt="Last commit"/></a>
+</div>
+</body>
+</html>