Add working prototype
This commit is contained in:
120
core/templates/base.html
Normal file
120
core/templates/base.html
Normal file
@ -0,0 +1,120 @@
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-bs-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="description"
|
||||
content="{% block description %}
|
||||
Subscribe to TTVDrop for the latest Twitch drops.
|
||||
{% endblock description %}">
|
||||
<meta name="keywords"
|
||||
content="{% block keywords %}
|
||||
Twitch, Drops, TTVDrop, Twitch Drops, Twitch Drops Tracker
|
||||
{% endblock keywords %}">
|
||||
<meta name="author" content="TheLovinator">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
{% block title %}
|
||||
<title>Twitch drops</title>
|
||||
{% endblock title %}
|
||||
<style>
|
||||
html {
|
||||
max-width: 88ch;
|
||||
padding: calc(1vmin + 0.5rem);
|
||||
margin-inline: auto;
|
||||
font-size: clamp(1em, 0.909em + 0.45vmin, 1.25em);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Helvetica, Arial, sans-serif;
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 1rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.leftright {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 10rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.messages {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{% if messages %}
|
||||
<ul class="messages">
|
||||
{% for message in messages %}
|
||||
<li {% if message.tags %}class="{{ message.tags }}"{% endif %}>{{ message }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
<span class="title">
|
||||
<h1>
|
||||
<a href="{% url 'core:index' %}">TTVDrop</a>
|
||||
</h1>
|
||||
</span>
|
||||
<nav>
|
||||
<small>
|
||||
<div class="leftright">
|
||||
<div class="left">Hello.</div>
|
||||
<div class="right">
|
||||
<a href="/api/v1/docs">API</a> |
|
||||
<a href="https://github.com/TheLovinator1/twitch-online-notifier">GitHub</a> |
|
||||
<a href="https://github.com/sponsors/TheLovinator1">Donate</a>
|
||||
{% if not user.is_authenticated %}| <a href=''>Login</a>{% endif %}
|
||||
{% if user.is_authenticated %}| <a href=''>{{ user.username }}</a>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</small>
|
||||
</nav>
|
||||
<hr />
|
||||
<main>
|
||||
{% block content %}<!-- default content -->{% endblock %}
|
||||
</main>
|
||||
<hr />
|
||||
<footer>
|
||||
<small>
|
||||
<div class="leftright">
|
||||
<div class="left">TheLovinator#9276 on Discord</div>
|
||||
<div class="right">No rights reserved.</div>
|
||||
</div>
|
||||
</small>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
75
core/templates/index.html
Normal file
75
core/templates/index.html
Normal file
@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Twitch Drops">
|
||||
<meta name="author" content="TheLovinator">
|
||||
<meta name="keywords" content="Twitch, Drops, Twitch Drops">
|
||||
<meta name="robots" content="index, follow">
|
||||
<title>Twitch Drops</title>
|
||||
<style>
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
justify-content: space-between;
|
||||
|
||||
padding: 10px 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Twitch Drops</h1>
|
||||
{% for organization, org_data in orgs_data.items %}
|
||||
<header>
|
||||
<a href="{{ organization.url }}">
|
||||
<h2>{{ organization.name }}</h2>
|
||||
</a>
|
||||
<a href="">Subscribe to {{ organization.name }}</a>
|
||||
</header>
|
||||
<ul>
|
||||
{% for game, game_data in org_data.games.items %}
|
||||
<li>
|
||||
<header>
|
||||
<a href="https://www.twitch.tv/directory/category/{{ game.slug }}">
|
||||
<h2>{{ game.display_name }}</h2>
|
||||
</a>
|
||||
<a href="{{ game.url }}">Subscribe to {{ game.display_name }}</a>
|
||||
</header>
|
||||
<ul>
|
||||
{% for drop_benefit in game_data.drop_benefits %}
|
||||
<dl>
|
||||
<dt>
|
||||
<header>
|
||||
<a href="{{ drop_benefit.details_url }}">{{ drop_benefit.name }}</a>
|
||||
</header>
|
||||
</dt>
|
||||
<dd>
|
||||
<img src="{{ drop_benefit.image_asset_url }}"
|
||||
alt="{{ drop_benefit.name }}"
|
||||
height="100"
|
||||
width="100">
|
||||
</dd>
|
||||
{% if drop_benefit.entitlement_limit > 1 %}
|
||||
<dt>Entitlement Limit</dt>
|
||||
<dd>
|
||||
{{ drop_benefit.entitlement_limit|default:"N/A" }}
|
||||
</dd>
|
||||
{% endif %}
|
||||
{% if drop_benefit.is_ios_available %}
|
||||
<dt>iOS Available</dt>
|
||||
<dd>
|
||||
{{ drop_benefit.is_ios_available|yesno:"Yes,No" }}
|
||||
</dd>
|
||||
{% endif %}
|
||||
</dl>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endfor %}
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user