94 lines
4.0 KiB
HTML
94 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Book Club - Social Reading App</title>
|
|
{% load static %}
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="hero-section">
|
|
<div class="container">
|
|
<h1 class="display-4">Welcome to the Book Club</h1>
|
|
<p class="lead">Create or join a book club, discuss your favorite books, and connect with fellow readers.</p>
|
|
<a href="{% url 'club_list' %}" class="btn btn-primary btn-lg">Join a Club</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container my-5">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="feature-box">
|
|
<h3>Create a Club</h3>
|
|
<p>Start your own book club and invite your friends to join.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="feature-box">
|
|
<h3>Choose Your Books</h3>
|
|
<p>Select from a wide range of books or recommend new ones.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="feature-box">
|
|
<h3>Join the Discussion</h3>
|
|
<p>Share your thoughts, write reviews, and engage in discussions.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container my-5">
|
|
<div class="recommendation-form">
|
|
<h2>Recommend a Book</h2>
|
|
{% if submitted %}
|
|
<div class="alert alert-success" role="alert">
|
|
Thank you for your recommendation!
|
|
</div>
|
|
{% endif %}
|
|
{% if captcha_error %}
|
|
<div class="alert alert-danger" role="alert">
|
|
Incorrect CAPTCHA. Please try again.
|
|
</div>
|
|
{% endif %}
|
|
<form method="POST">
|
|
{% csrf_token %}
|
|
<div class="mb-3">
|
|
<label for="club" class="form-label">Select a Club</label>
|
|
<select class="form-select" id="club" name="club">
|
|
{% for club in clubs %}
|
|
<option value="{{ club.id }}">{{ club.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="book_title" class="form-label">Book Title</label>
|
|
<input type="text" class="form-control" id="book_title" name="book_title" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="author" class="form-label">Author</label>
|
|
<input type="text" class="form-control" id="author" name="author" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="reason" class="form-label">Reason for Recommendation</label>
|
|
<textarea class="form-control" id="reason" name="reason" rows="3" required></textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="captcha" class="form-label">What is {{ num1 }} + {{ num2 }}?</label>
|
|
<input type="hidden" name="num1" value="{{ num1 }}">
|
|
<input type="hidden" name="num2" value="{{ num2 }}">
|
|
<input type="text" class="form-control" id="captcha" name="captcha" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Submit Recommendation</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|