hex/game-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

game shelf rather than cards

Browse Source
This commit is contained in:
hex
2025-05-19 21:09:50 -07:00
parent c5a60a6c13
commit b59bee07b7
4 changed files with 58 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/templates/base.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Game Twacker{% endblock %}</title>
<title>{% block title %}Game Tracker{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
@@ -11,11 +11,11 @@
<body>
<header>
<div class="container">
<h1><i class="fas fa-gamepad"></i> Game Twacker</h1>
<h1><i class="fas fa-gamepad"></i> Game Tracker</h1>
<nav>
<ul>
<li><a href="{{ url_for('main.index') }}">My Games</a></li>
<li><a href="{{ url_for('main.search_games') }}">Add New Game</a></li>
<li><a href="{{ url_for('main.index') }}">Home</a></li>
<li><a href="{{ url_for('main.admin_login') }}">Admin</a></li>
</ul>
</nav>
</div>

122
app/templates/index.html
View File

@@ -1,28 +1,29 @@
{% extends 'base.html' %}
{% block title %}My Games ~ Game Twacker{% endblock %}
{% block title %}What am I playing? ~ Game Tracker{% endblock %}
{% block content %}
<div class="page-header">
<h1>My Pwaying Games</h1>
<p class="subtitle">Twacking {{ games|length }}/5 games</p>
<h1>What am I playing?</h1>
<p class="subtitle">Tracking {{ games|length }}/5 games</p>
</div>
{% if games %}
<div class="game-cards">
<div class="game-list">
{% for game in games %}
<div class="game-card">
<div class="game-cover">
<div class="game-card horizontal">
<div class="game-cover-side">
{% if game.cover_url %}
<img src="{{ game.cover_url }}" alt="{{ game.name }} cover">
{% else %}
<div class="no-cover">
<div class="no-cover-medium">
<i class="fas fa-gamepad"></i>
</div>
{% endif %}
</div>
<div class="game-info">
<h2>{{ game.name }}</h2>
<div class="game-meta">
{% if game.developer %}
<span><i class="fas fa-code"></i> {{ game.developer }}</span>
@@ -31,61 +32,22 @@
<span><i class="fas fa-desktop"></i> {{ game.platform }}</span>
{% endif %}
</div>
<div class="progress-container">
<div class="progress-label">
<span class="status-badge status-{{ game.status|lower }}">{{ game.status }}</span>
<span class="status-badge status-{{ game.status|lower|replace(' ', '-') }}">{{ game.status }}</span>
<span class="progress-value">{{ game.progress }}%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: {{ game.progress }}%"></div>
<div class="progress-fill" style="width: {{ game.progress }}%;"></div>
</div>
</div>
<details class="game-details">
<summary>Update Pwogwess</summary>
<form action="{{ url_for('main.update_game', game_id=game.id) }}" method="POST" class="update-form">
<div class="form-group">
<label for="status-{{ game.id }}">Status:</label>
<select name="status" id="status-{{ game.id }}">
<option value="Playing" {% if game.status == 'Playing' %}selected{% endif %}>Playing</option>
<option value="Completed" {% if game.status == 'Completed' %}selected{% endif %}>Completed</option>
<option value="On Hold" {% if game.status == 'On Hold' %}selected{% endif %}>On Hold</option>
</select>
</div>
<div class="form-group">
<label for="progress-{{ game.id }}">Pwogwess:</label>
<input type="range" name="progress" id="progress-{{ game.id }}" min="0" max="100" value="{{ game.progress }}" class="progress-slider">
<span class="range-value">{{ game.progress }}%</span>
</div>
<div class="form-group">
<label for="notes-{{ game.id }}">Notes:</label>
<textarea name="notes" id="notes-{{ game.id }}" rows="2">{{ game.notes or '' }}</textarea>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Update</button>
<button type="button" class="btn btn-danger remove-btn" data-toggle="modal" data-target="#remove-modal-{{ game.id }}">
Wemove Game
</button>
</div>
</form>
</details>
</div>
<!-- Remove confirmation modal -->
<div class="modal" id="remove-modal-{{ game.id }}">
<div class="modal-content">
<h3>Wemove Game</h3>
<p>Awe you suwe you want to wemove <strong>{{ game.name }}</strong> from youw twacking wist?</p>
<div class="modal-actions">
<button class="btn btn-secondary close-modal">Cancew</button>
<form action="{{ url_for('main.remove_game', game_id=game.id) }}" method="POST">
<button type="submit" class="btn btn-danger">Wemove</button>
</form>
</div>
{% if game.notes %}
<div class="game-notes">
<p><strong>Notes:</strong> {{ game.notes }}</p>
</div>
{% endif %}
</div>
</div>
{% endfor %}
@@ -96,58 +58,12 @@
<div class="empty-icon">
<i class="fas fa-gamepad"></i>
</div>
<h2>No games being twacked yet~ >w<</h2>
<p>Click the button bewow to seawch and add games to twack!</p>
<a href="{{ url_for('main.search_games') }}" class="btn btn-primary">
<i class="fas fa-plus"></i> Add Youw Fiwst Game
</a>
<h2>No games being tracked yet</h2>
<p>Ask an administrator to add games to your tracking list</p>
</div>
{% endif %}
{% if games|length < 5 %}
<div class="add-more">
<a href="{{ url_for('main.search_games') }}" class="btn btn-primary">
<i class="fas fa-plus"></i> Add Anothew Game
</a>
</div>
{% endif %}
<script>
// Handle range sliders
document.addEventListener('DOMContentLoaded', function() {
const sliders = document.querySelectorAll('.progress-slider');
sliders.forEach(slider => {
const valueDisplay = slider.nextElementSibling;
slider.addEventListener('input', function() {
valueDisplay.textContent = this.value + '%';
});
});
// Modal handling
const modals = document.querySelectorAll('.modal');
const removeBtns = document.querySelectorAll('.remove-btn');
const closeBtns = document.querySelectorAll('.close-modal');
removeBtns.forEach((btn, index) => {
btn.addEventListener('click', function() {
modals[index].classList.add('active');
});
});
closeBtns.forEach((btn, index) => {
btn.addEventListener('click', function() {
modals[index].classList.remove('active');
});
});
window.addEventListener('click', function(e) {
modals.forEach(modal => {
if (e.target === modal) {
modal.classList.remove('active');
}
});
});
});
</script>
<!-- No scripts needed for read-only view -->
{% endblock %}