Gappa/index.html at main · Coder-soft/Gappa · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Gappa is a powerful Discord bot that helps you check if the music you want to use is copyrighted. Protect your content and avoid copyright strikes with ease!">
    <title>GAPPA - Discord Music Copyright Checker</title>
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }
        header {
            background: #983b3b;
            color: white;
            padding-top: 30px;
            min-height: 70px;
            border-bottom: #8a1e1e 3px solid;
        }
        header h1 {
            margin: 0;
            text-align: center;
            font-size: 2.5em;
        }
        header p {
            margin: 0;
            text-align: center;
            padding-bottom: 10px;
        }
        .section {
            margin: 20px 0;
            padding: 20px;
            background: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .section h2 {
            color: #983b3b;
            margin-top: 0;
        }
        ul, ol {
            padding-left: 20px;
        }
        #cta {
            text-align: center;
        }
        .btn {
            display: inline-block;
            background: #983b3b;
            color: #fff;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            text-decoration: none;
            font-size: 15px;
            font-weight: bold;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }
        .btn:hover {
            background: #8a1e1e;
        }
        footer {
            background: #983b3b;
            color: white;
            text-align: center;
            padding: 10px;
            margin-top: 20px;
        }
        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 20px auto;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <h1>Gappa</h1>
            <p>Not say that it is 100% accurate, but it is a good start</p>
        </div>
    </header>

    <div class="container">
        <section id="intro" class="section">
            <h2>Welcome to Gappa</h2>
            <p>Gappa is a powerful Discord bot that helps you check if the music you want to use is copyrighted. Protect your content and avoid copyright strikes with ease!</p>
        </section>

        <section id="how-it-works" class="section">
            <h2>How It Works</h2>
            <ol>
                <li>Invite Gappa to your Discord server</li>
                <li>Use the command !check followed by the song name</li>
                <li>Gappa inspects the songs license, description and Title</li>
                <li>Receive instant feedback on the copyright status of the song</li>
            </ol>
        </section>

        <section id="features" class="section">
            <h2>Features</h2>
            <ul>
                <li>Quick, Fast and FREE results</li>
                <li>Highly demanded by the community</li>
            </ul>
        </section>

        <section id="top-level-design" class="section">
            <h2>Top-Level Design</h2>
            <img src="top-level copy.png" alt="Top-level design diagram">
            <p>Our top-level design consists of the following components:</p>
            <ul>
                <li>Discord Bot Interface: Handles user interactions within Discord</li>
                <li>Command Parser: Interprets user commands and extracts song information</li>
                <li>Engine Design: Designed for speed and efficiency</li>
                <li>Response Generator: Creates user-friendly responses based on search results</li>
            </ul>
        </section>

        <section id="cta" class="section">
            <h2>Ready to Test Gappa?</h2>
            <p>Join Gappa Discord Server To test it out</p>
            <a href="https://discord.gg/wV97TzDsb4" class="btn">Join Discord</a>
        </section>
    </div>

    <footer>
        <p>&copy; 2024 Gappa. All rights reserved.</p>
    </footer>

    <script>
        document.getElementById('addBot').addEventListener('click', function() {
            alert('Thank you for your interest! This is a demo page. In a real application, this button would redirect to Discord\'s bot authorization page.');
        });
    </script>
</body>
</html>