-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
186 lines (166 loc) · 13.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
{% extends https://github.com/MXNOJBE/Codegramv1.0/blob/master/templates/base.html' %}
{% load static %}
{% block content %}
<main class="main-container">
<section class="content-container">
<div class="content">
<div class="posts">
{% for post in post_items %}
<article class="post">
<div class="post__header">
<div class="post__profile">
{% if post.user.profile.image %}
<a href="{{post.user.profile.image.url}}" class="post__avatar">
<img src="{{post.user.profile.image.url}}" alt="User Picture">
</a>
{% endif %}
<a href="{{post.user.username}}" class="post__user">{{ post.user.username }}</a>
</div>
<button class="post__more-options">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="6.5" cy="11.5" r="1.5" fill="var(--text-dark)"/>
<circle cx="12" cy="11.5" r="1.5" fill="var(--text-dark)"/>
<circle cx="17.5" cy="11.5" r="1.5" fill="var(--text-dark)"/>
</svg>
</button>
</div>
<div class="post__content">
<div class="post__medias">
<a href="{% url 'post-details' post.id %}"><img class="post__media" src="{{ post.picture.url }}" alt="Post Content" style="width: 700px; height: 348px; object-fit: cover;"></a>
<!-- <img class="post__media" src="{% static 'assets1/insta-clone.png' %}" alt="Post Content">-->
<!-- <img class="post__media" src="{% static 'assets1/insta-clone.png' %}" alt="Post Content">-->
</div>
</div>
<div class="post__footer">
<div class="post__buttons">
<a href="{% url 'like' post.id %}" class="post__button">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.4995 21.2609C11.1062 21.2609 10.7307 21.1362 10.4133 20.9001C8.2588 19.3012 3.10938 15.3239 1.81755 12.9143C0.127895 9.76543 1.14258 5.72131 4.07489 3.89968C5.02253 3.31177 6.09533 3 7.18601 3C8.81755 3 10.3508 3.66808 11.4995 4.85726C12.6483 3.66808 14.1815 3 15.8131 3C16.9038 3 17.9766 3.31177 18.9242 3.89968C21.8565 5.72131 22.8712 9.76543 21.186 12.9143C19.8942 15.3239 14.7448 19.3012 12.5902 20.9001C12.2684 21.1362 11.8929 21.2609 11.4995 21.2609ZM7.18601 4.33616C6.34565 4.33616 5.5187 4.57667 4.78562 5.03096C2.43888 6.49183 1.63428 9.74316 2.99763 12.2819C4.19558 14.5177 9.58639 18.6242 11.209 19.8267C11.3789 19.9514 11.6158 19.9514 11.7856 19.8267C13.4082 18.6197 18.799 14.5133 19.997 12.2819C21.3603 9.74316 20.5557 6.48738 18.209 5.03096C17.4804 4.57667 16.6534 4.33616 15.8131 4.33616C14.3425 4.33616 12.9657 5.04878 12.0359 6.28696L11.4995 7.00848L10.9631 6.28696C10.0334 5.04878 8.6611 4.33616 7.18601 4.33616Z" fill="var(--text-dark)" stroke="var(--text-dark)" stroke-width="0.6"/>
</svg>
</a>
<button class="post__button">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.2959 20.8165L20.2351 16.8602C20.1743 16.6385 20.2047 16.3994 20.309 16.1907C21.2351 14.3342 21.5438 12.117 20.9742 9.80402C20.2003 6.67374 17.757 4.16081 14.6354 3.33042C13.7833 3.10869 12.9442 3 12.1312 3C6.29665 3 1.74035 8.47365 3.31418 14.5647C4.04458 17.3819 7.05314 20.2992 9.88344 20.9861C10.6486 21.173 11.4008 21.26 12.1312 21.26C13.7006 21.26 15.1701 20.8557 16.4614 20.1601C16.6049 20.0818 16.7657 20.0383 16.9222 20.0383C17.0005 20.0383 17.0787 20.047 17.157 20.0688L21.009 21.0991C21.0307 21.1035 21.0525 21.1078 21.0699 21.1078C21.2177 21.1078 21.3351 20.9687 21.2959 20.8165ZM19.0178 17.1863L19.6178 19.4253L17.4831 18.8558C17.3005 18.8079 17.1135 18.7819 16.9222 18.7819C16.557 18.7819 16.1875 18.8775 15.8571 19.0558C14.6963 19.6818 13.4441 19.9992 12.1312 19.9992C11.4834 19.9992 10.8269 19.9166 10.1791 19.7601C7.78354 19.1775 5.14453 16.6037 4.53586 14.2473C3.90111 11.7865 4.40109 9.26057 5.90536 7.31719C7.40964 5.3738 9.6791 4.26081 12.1312 4.26081C12.8529 4.26081 13.5876 4.35646 14.3137 4.5521C16.9961 5.26511 19.0786 7.39544 19.7525 10.1084C20.2264 12.0213 20.0308 13.9299 19.183 15.6298C18.9395 16.1168 18.8787 16.6689 19.0178 17.1863Z" fill="var(--text-dark)" stroke="var(--text-dark)" stroke-width="0.7"/>
</svg>
</button>
<button class="post__button">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.8555 3.44542C22.6978 3.16703 22.3962 3 22.0714 3L2.91369 3.01392C2.52859 3.01392 2.19453 3.25055 2.05997 3.60781C1.96254 3.86764 1.98574 4.14603 2.11565 4.37338C2.16669 4.45689 2.23165 4.53577 2.31052 4.60537L9.69243 10.9712L11.4927 20.5338C11.5623 20.9096 11.8499 21.188 12.2304 21.2483C12.6062 21.3086 12.9774 21.1323 13.1723 20.8029L22.8509 4.35018C23.0179 4.06715 23.0179 3.72381 22.8555 3.44542ZM4.21748 4.39194H19.8164L10.4255 9.75089L4.21748 4.39194ZM12.6248 18.9841L11.1122 10.948L20.5171 5.58436L12.6248 18.9841Z" fill="var(--text-dark)" stroke="var(--text-dark)" stroke-width="0.3"/>
</svg>
</button>
<div class="post__indicators"></div>
<a href="{% url 'favourite' post.id %}" class="post__button post__button--align-right">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.875 2H4.125C3.50625 2 3 2.44939 3 3.00481V22.4648C3 23.0202 3.36563 23.1616 3.82125 22.7728L11.5444 16.1986C11.7244 16.0471 12.0225 16.0471 12.2025 16.1936L20.1731 22.7879C20.6287 23.1666 21 23.0202 21 22.4648V3.00481C21 2.44939 20.4994 2 19.875 2ZM19.3125 20.0209L13.3444 15.0827C12.9281 14.7394 12.405 14.5677 11.8763 14.5677C11.3363 14.5677 10.8019 14.7444 10.3856 15.0979L4.6875 19.9502V3.51479H19.3125V20.0209Z" fill="var(--text-dark)" stroke="var(--text-dark)" stroke-width="0.7"/>
</svg>
</a>
</div>
<div class="post__infos">
<div class="post__likes">
<a href="#" class="post__likes-avatar">
<!-- <img src="assets1/default-user.png" alt="User Picture">-->
</a>
<!-- <span>Liked by <a class="post__name--underline" href="#">user123</a> and <a href="#">73 others</a></span>-->
<span>{{post.likes}} <a class="post__name--underline" href="#">likes</a> <a href="#"></a></span>
</div>
<div class="post__description">
<span>
<a class="post__name--underline" href="#"><b>@{{post.user.username}}</b></a>
{{post.caption}}
</span>
<!-- {{post.caption}}-->
</div>
<p style="font-size: 13px;">{% for tag in post.tags.all %}
<a href="{{ tag.get_absolute_url }}" style="text-decoration: none;">
#{{ tag }}
</a>
{% endfor %}
</p>
<span class="post__date-time">{{post.posted}}</span>
</div>
</div>
</article>
{% endfor %}
<div class="side-menu__suggestions-content" style="padding: 0 40px;">
<div class="side-menu__suggestions-header">
<h2>Suggestions for You</h2>
<button>See All</button>
</div>
{% for user in all_users %}
{% if request.user.username != user.username %}
<div class="side-menu__suggestion">
<a href="{% url 'profile' user %}" class="side-menu__suggestion-avatar">
{% for user in all_users %}
<div class="frame">
<img src="{{user.profile.image.url}}" alt="User Picture">
</div>
{% endfor %}}
</a>
<div class="side-menu__suggestion-info">
{% if user.profile.first_name %}
<a href="{% url 'profile' user %}">{{user.profile.first_name|title}} {{user.profile.last_name|title}}</a>
{% else %}
<a href="{% url 'profile' user %}">{{user.username}}</a>
{% endif %}
<span>@{{user.username}}</span>
</div>
{% if follow_status == True %}
<a href="{% url 'follow' user 0 %}" class="side-menu__suggestion-button">Follow</a>
{% else %}
<a href="{% url 'follow' user 1 %}" class="side-menu__suggestion-button" >Follow</a>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<section class="side-menu">
<div class="side-menu__user-profile">
<a href="" target="_blank" class="side-menu__user-avatar">
<div class="frame">
<img src="{{user.profile.image.url}}" alt="User Picture">
</div>
</a>
<div class="side-menu__user-info">
{% if user.profile.first_name %}
<a href="{{request.user.username}}">{{request.user.profile.first_name|title }} {{request.user.profile.last_name|title }}</a>
{% else %}
<a href="{{request.user.username}}">{{user.username}}</a>
{% endif %}
<span>@{{request.user.username}}</span>
</div>
<a class="side-menu__user-button">View Profile</a>
</div>
<div class="side-menu__suggestions-section">
<div class="side-menu__suggestions-header">
<h2>Suggestions for You</h2>
<button>See All</button>
</div>
<div class="side-menu__suggestions-content">
{% for user in all_users %}
{% if request.user.username != user.username %}
<div class="side-menu__suggestion">
<a href="{% url 'profile' user %}" class="side-menu__suggestion-avatar">
<img src="{{user.profile.image.url}}" alt="User Picture">
</a>
<div class="side-menu__suggestion-info">
{% if user.profile.first_name %}
<a href="{% url 'profile' user %}">{{user.profile.first_name|title}} {{user.profile.last_name|title}}</a>
{% else %}
<a href="{% url 'profile' user %}">{{user.username}}</a>
{% endif %}
<span>@{{user.username}}</span>
</div>
{% if follow_status == True %}
<a href="{% url 'follow' user 0 %}" class="side-menu__suggestion-button">Follow</a>
{% else %}
<a href="{% url 'follow' user 1 %}" class="side-menu__suggestion-button">Follow</a>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</section>
{% endblock content %}