initial commit
This commit is contained in:
153
app/templates/index.html
Normal file
153
app/templates/index.html
Normal file
@@ -0,0 +1,153 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block title %}My Games ~ Game Twacker{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="page-header">
|
||||
<h1>My Pwaying Games</h1>
|
||||
<p class="subtitle">Twacking {{ games|length }}/5 games</p>
|
||||
</div>
|
||||
|
||||
{% if games %}
|
||||
<div class="game-cards">
|
||||
{% for game in games %}
|
||||
<div class="game-card">
|
||||
<div class="game-cover">
|
||||
{% if game.cover_url %}
|
||||
<img src="{{ game.cover_url }}" alt="{{ game.name }} cover">
|
||||
{% else %}
|
||||
<div class="no-cover">
|
||||
<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>
|
||||
{% endif %}
|
||||
{% if game.platform %}
|
||||
<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="progress-value">{{ game.progress }}%</span>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<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>
|
||||
</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>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user