Notes

{% extends 'base.html' %}
{% block content %}
<div class="container">
<h2 class="text-center my-4">Your Stories</h2>
<div class="d-flex align-items-center overflow-auto">
{% if user_stories %}
{% for story in user_stories %}
<div class="story-thumbnail me-3">
<a href="{{ story.image.url }}" data-bs-toggle="modal" data-bs-target="#storyModal{{ story.id }}">
<img src="{{ story.image.url }}" class="img-fluid rounded-circle border border-primary" alt="Story" width="80">
</a>
</div>
{% endfor %}
{% else %}
<p>You haven't posted any stories yet. <a href="{% url 'upload_story' %}">Post a Story</a></p>
{% endif %}
</div>

<h2 class="text-center my-4">All Active Stories</h2>
<div class="d-flex align-items-center overflow-auto">
{% if stories %}
{% for story in stories %}
<div class="story-thumbnail me-3">
<a href="{{ story.image.url }}" data-bs-toggle="modal" data-bs-target="#storyModal{{ story.id }}">
<img src="{{ story.image.url }}" class="img-fluid rounded-circle border border-secondary" alt="Story" width="80">
</a>
</div>

<!-- Modal to Display Story -->
<div class="modal fade" id="storyModal{{ story.id }}" tabindex="-1" aria-labelledby="storyModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ story.user.username }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-center">
<img src="{{ story.image.url }}" class="img-fluid" alt="Story">
{% if story.caption %}
<p class="mt-3">{{ story.caption }}</p>
{% endif %}
</div>
<div class="modal-footer">
<small class="text-muted">Posted: {{ story.created_at|date:"M d, Y H:i" }}</small>
</div>
</div>
</div>
</div>
{% endfor %}
{% else %}
<p>No active stories right now.</p>
{% endif %}
</div>
</div>
{% endblock %}



{% extends 'base.html' %}
{% block content %}
<div class="container">
<h2 class="text-center my-4">Post Your Story</h2>
<form method="post" enctype="multipart/form-data" class="text-center">
{% csrf_token %}
<div class="mb-3">
<label for="image" class="form-label">Choose an Image</label>
<input type="file" name="image" id="image" class="form-control" required>
</div>
<div class="mb-3">
<textarea name="caption" class="form-control" rows="3" placeholder="Add a caption (optional)"></textarea>
</div>
<button type="submit" class="btn btn-primary">Post Story</button>
</form>
</div>
{% endblock %}



.story-thumbnail img {
transition: transform 0.3s ease;
cursor: pointer;
}

.story-thumbnail img:hover {
transform: scale(1.1);
}

.modal-content img {
max-height: 400px;
width: auto;
margin: 0 auto;
display: block;
}