Unstable Kitsune
ba286278cf
Introduces backend with server retrieval and API integration, front-end UI with templates and styles, and configuration files for deployment.
58 lines
3.1 KiB
HTML
58 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="{{url_for('static', filename='styles/base.css')}}">
|
|
<link rel="stylesheet" href="{{url_for('static', filename='styles/index.css')}}">
|
|
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
|
<title>Home | {{site_name}}</title>
|
|
</head>
|
|
<body>}
|
|
|
|
<div class="container text-center my-4">
|
|
<h1><a href="{{ url_for('index') }}" class="text-light text-decoration-none">{{ site_name }}</a></h1>
|
|
<a href="{{ url_for('browse') }}" class="btn btn-secondary mt-2">Browse by Tag</a>
|
|
<a href="{{ bot_invite_url }}" class="btn btn-primary invite-button" target="https://discord.com/oauth2/authorize?client_id=1285545069591527466&permissions=537012969&integration_type=0&scope=bot">🤖 Invite Bot</a>
|
|
</div>
|
|
|
|
<div class="servers">
|
|
{% for server in servers %}
|
|
<div class="card shadow-lg" style="width: 18rem; margin:5px;">
|
|
<img class="card-img-top" src="{{server['icon_url']}}">
|
|
<div class="card-body">
|
|
<div class="card-header bg-danger bg-gradient text-light" style="margin-bottom:5px;">
|
|
<strong>{{server['server_name']}}</strong>
|
|
</div>
|
|
<p class="card-text server-description">{{ server['description'] }}</p>
|
|
<p class="card-text">
|
|
<strong>Tags:</strong> {{ server['tags'] }}
|
|
</p>
|
|
<a class="btn btn-success d-block mx-auto" href="/server/{{ server['server_name']|replace(' ', '-') }}">View Server</a>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div id="particles-js"></div>
|
|
<script src="{{url_for('static', filename='js/particles.js')}}"></script>
|
|
<script src="{{url_for('static', filename='js/app.js')}}"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.0.4/markdown-it.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
|
<script>
|
|
$(document).ready(() => {
|
|
const md = window.markdownit();
|
|
const elements = document.getElementsByClassName("server-description");
|
|
for (var i = 0; i < elements.length; i++) {
|
|
elements[i].innerHTML = md.render(elements[i].innerHTML);
|
|
}
|
|
$(".servers").animate({
|
|
opacity: "100%"
|
|
}, 600)
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |