-
Notifications
You must be signed in to change notification settings - Fork 0
/
Site de servidores do discord
149 lines (138 loc) · 4.53 KB
/
Site de servidores do discord
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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divulgação de Servidores Discord</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #E0FFFF; /* Azul bebê */
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
color: #333;
}
header {
background-color: #B0E0E6;
width: 100%;
padding: 20px;
text-align: center;
}
header h1 {
margin: 0;
color: #005f73;
}
#login-button {
margin-top: 10px;
background-color: #008CBA;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
main {
margin-top: 20px;
width: 80%;
}
.server-form {
background-color: #f0f8ff;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
}
.server-form h2 {
margin-top: 0;
color: #0077b6;
}
.server-form label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
.server-form input,
.server-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.server-form button {
background-color: #008CBA;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.server-list {
margin-top: 20px;
}
.server-item {
background-color: #bde0fe;
padding: 15px;
border-radius: 10px;
margin-bottom: 10px;
}
.server-item h3 {
margin: 0;
color: #005f73;
}
.server-item p {
margin: 5px 0;
}
</style>
</head>
<body>
<header>
<h1>Divulgação de Servidores Discord</h1>
<button id="login-button">Login com Discord</button>
</header>
<main>
<section class="server-form">
<h2>Adicione seu Servidor</h2>
<label for="server-name">Nome do Servidor:</label>
<input type="text" id="server-name" placeholder="Digite o nome do servidor">
<label for="server-description">Descrição do Servidor:</label>
<textarea id="server-description" rows="4" placeholder="Descreva seu servidor"></textarea>
<button id="publish-button">Publicar Servidor</button>
</section>
<section class="server-list">
<h2>Servidores Publicados</h2>
<div id="servers-container">
<!-- Os servidores aparecerão aqui -->
</div>
</section>
</main>
<script>
document.getElementById('publish-button').addEventListener('click', function() {
const serverName = document.getElementById('server-name').value;
const serverDescription = document.getElementById('server-description').value;
if (serverName && serverDescription) {
const serverItem = document.createElement('div');
serverItem.className = 'server-item';
const serverTitle = document.createElement('h3');
serverTitle.textContent = serverName;
serverItem.appendChild(serverTitle);
const serverDesc = document.createElement('p');
serverDesc.textContent = serverDescription;
serverItem.appendChild(serverDesc);
document.getElementById('servers-container').appendChild(serverItem);
// Limpar campos após adicionar o servidor
document.getElementById('server-name').value = '';
document.getElementById('server-description').value = '';
} else {
alert('Por favor, preencha todos os campos.');
}
});
// Placeholder para a funcionalidade de login com Discord
document.getElementById('login-button').addEventListener('click', function() {
alert('Função de login com Discord será implementada.');
});
</script>
</body>
</html>