templates/index.html (254 lines of code) (raw):
<!-- Copyright 2022 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{% static 'favicon.png' %}" rel="icon" type="image/png">
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'assets/css/icons.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/uikit.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/tailwind.css' %}">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/0f221feeaf.js" crossorigin="anonymous"></script>
<style>
.icon-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: #333333;
background: #dddddd;
border: none;
outline: none;
border-radius: 50%;
}
.icon-button:hover {
cursor: pointer;
}
.icon-button:active {
background: #cccccc;
}
.icon-button__badge {
position: absolute;
top: -10px;
right: -10px;
width: 20px;
height: 20px;
background: red;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<header>
<div class="header_inner">
<form action="/search" method="POST">
{% csrf_token %}
<div class="left-side">
<!-- Logo -->
<div id="logo">
<a href="/">
<b>
<h1 style="text-transform: uppercase;">Pet Social Media</h1>
</b>
</a>
</div>
<div style="right: 50%; position: absolute; flex-direction: row; display: flex;">
<input type="text" name="username" placeholder="Search for username..">
<button type="submit"><i class="fa fa-search fa-1x"></i></button>
</div>
</div>
</form>
<div class="right-side lg:pr-4">
<!-- upload -->
<a href="#"
class="bg-pink-500 flex font-bold hidden hover:bg-pink-600 hover:text-white inline-block items-center lg:block max-h-10 mr-4 px-4 py-2 rounded shado text-white">
<ion-icon name="add-circle" class="-mb-1
mr-1 opacity-90 text-xl uilus-circle"></ion-icon> Upload Pics
</a>
<!-- upload dropdown box -->
<div uk-dropdown="pos: top-right;mode:click ; animation: uk-animation-slide-bottom-small"
class="header_dropdown">
<!-- notivication header -->
<div class="px-4 py-3 -mx-5 -mt-4 mb-5 border-b">
<h4>Upload Pics</h4>
</div>
<!-- notification contents -->
<div class="flex justify-center flex-center text-center">
<div class="flex flex-col choose-upload text-center">
<div
class="bg-gray-100 border-2 border-dashed flex flex-col h-24 items-center justify-center relative w-full rounded-lg ">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
class="w-12">
<path
d="M5.5 13a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 13H11V9.413l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13H5.5z" />
<path d="M9 13h2v5a1 1 0 11-2 0v-5z" />
</svg>
</div>
<form action="upload" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<p class="my-3 leading-6"> Upload pics
</p>
<div>
<input type="file" name="image_upload">
<!-- <a href="#" class="button soft-warning small"> Choose file</a> -->
<textarea class="button soft-warning small" name="caption"
placeholder="caption..."></textarea>
<br>
<button class="button bg-blue-700" type="submit">Upload</button>
</div>
</form>
<!-- <a href="#" class="uk-text-muted mt-3 uk-link"
uk-toggle="target: .choose-upload ; animation: uk-animation-slide-right-small, uk-animation-slide-left-medium; queued: true">
Or Import Video </a> -->
</div>
<div class="uk-flex uk-flex-column choose-upload" hidden>
<div
class="mx-auto flex flex-col h-24 items-center justify-center relative w-full rounded-lg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
class="w-12">
<path fill-rule="evenodd"
d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z"
clip-rule="evenodd" />
</svg>
</div>
<p class="my-3 leading-6"> Import videos from YouTube <br> Copy / Paste your video link here
</p>
<form class="uk-grid-small" uk-grid>
<div class="uk-width-expand">
<input type="text" class="uk-input uk-form-small bg-gray-200 "
style="box-shadow:none" placeholder="Paste link">
</div>
<div class="uk-width-auto"> <button type="submit" class="button soft-warning -ml-2">
Import </button> </div>
</form>
<a href="#" class="uk-text-muted mt-3 uk-link"
uk-toggle="target: .choose-upload ; animation: uk-animation-slide-left-small, uk-animation-slide-right-medium; queued: true">
Or Upload Video </a>
</div>
</div>
<div class="px-4 py-3 -mx-5 -mb-4 mt-5 border-t text-sm">
Your Image size Must be Maxmium 999MB
</div>
</div>
<a href="#">
<img src="{{user_profile.profileimg}}" class="header-avatar" alt="">
</a>
<div uk-drop="mode: click;offset:9" class="header_dropdown profile_dropdown border-t">
<ul>
<li><a href="/profile/{{user_profile.user.username}}"> Profile </a> </li>
<li><a href="/settings"> Account setting </a> </li>
<li><a href="logout"> Log Out</a></li>
</ul>
</div>
</div>
</div>
</header>
<div class="container m-auto">
<!--<h1 class="lg:text-2xl text-lg font-extrabold leading-none text-gray-900 tracking-tight mb-5"> Feed </h1>--->
<div class="lg:flex justify-center lg:space-x-10 lg:space-y-0 space-y-5">
<!-- left sidebar-->
<div class="space-y-5 flex-shrink-0 lg:w-7/12">
<!-- post 1-->
{% for post in posts reversed %}
<div class="bg-white shadow rounded-md -mx-2 lg:mx-0">
<!-- post header-->
<div class="flex justify-between items-center px-4 py-3">
<div class="flex flex-1 items-center space-x-4">
<!-- <a href="#">
<div class="bg-gradient-to-tr from-yellow-600 to-pink-600 p-0.5 rounded-full">
<img src="{% static 'assets/images/avatars/avatar-2.jpg' %}" class="bg-gray-200 border border-white rounded-full w-8 h-8">
</div>
</a> -->
<span class="block font-semibold "><a
href="/profile/{{post.user}}">@{{post.user}}</a></span>
</div>
<div>
<!-- <a href="#"> <i class="icon-feather-more-horizontal text-2xl hover:bg-gray-200 rounded-full p-2 transition -mr-1 "></i> </a> -->
<div class="bg-white w-56 shadow-md mx-auto p-2 mt-12 rounded-md text-gray-500 hidden text-base border border-gray-100 "
uk-drop="mode: hover;pos: top-right">
</div>
</div>
</div>
<div uk-lightbox>
<!-- <a href="{{post.image}}"> -->
<img src="{{post.image}}" alt="">
<!-- </a> -->
</div>
<div class="py-3 px-4 space-y-3">
<div class="flex space-x-4 lg:font-bold">
<a href="/like-post?post_id={{post.id}}" class="flex items-center space-x-2">
<div class="p-2 rounded-full text-black">
<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="">
<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
</svg> -->
<i style="width: 30px; height: 30px;" class="fa-solid fa-paw"></i>
{% if post.no_of_likes == 0 %}
<p>No likes</p>
{% elif post.no_of_likes == 1 %}
<p>Liked by {{post.no_of_likes}} person</p>
{% else %}
<p>Liked by {{post.no_of_likes}} people</p>
{% endif %}
</div>
</a>
</div>
<p>
<a href="/profile/{{post.user}}"><strong>{{post.user}}</strong></a> {{post.caption}}
</p>
</p>
<a href="/translate?post_id={{post.id}}">translate</a>
<div class="bg-gray-100 bg-gray-100 rounded-full rounded-md relative ">
<form action="/search" method="POST">
{% csrf_token %}
<!-- <input type="text" placeholder="post a comment"
class="bg-transparent max-h-10 shadow-none"> -->
<input type="text" name="username" class="bg-transparent max-h-10 shadow-none"
placeholder="post a comment (not working right now)">
<div
class="absolute bottom-0 flex h-full items-center right-0 right-3 text-xl space-x-2">
<!-- <a href="#"> <i class="uil-image"></i></a> -->
<!-- <a href="#"> <i class="uil-video"></i></a> -->
</div>
</form>
</div>
</div>
</div>
{% endfor %}
</div>
<!-- right sidebar-->
<div class="lg:w-5/12">
<div class="bg-white shadow-md rounded-md overflow-hidden">
<div class="bg-gray-50 border-b border-gray-100 flex items-baseline justify-between py-4 px-6 ">
<h2 class="font-semibold text-lg">Users You Can Follow</h2>
<!-- <a href="#"> Refresh</a> -->
</div>
<div class="divide-gray-300 divide-gray-50 divide-opacity-50 divide-y px-4 ">
{% for suggestion in suggestions_username_profile_list %}
<div class="flex items-center justify-between py-3">
<div class="flex flex-1 items-center space-x-4">
<a href="/profile/{{suggestion.user}}">
<img src="{{suggestion.profileimg.url}}" class="bg-gray-200 rounded-full w-10 h-10">
</a>
<div class="flex flex-col">
<span class="block capitalize font-semibold"> {{suggestion.user}} </span>
<span class="block capitalize text-sm"> {{suggestion.bio}} </span>
</div>
</div>
<a href="/profile/{{suggestion.user}}"
class="border border-gray-200 font-semibold px-4 py-1 rounded-full hover:bg-pink-600 hover:text-white hover:border-pink-600 ">
View User </a>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Scripts
================================================== -->
<script src="{% static 'assets/js/tippy.all.min.js' %}"></script>
<script src="{% static 'assets/js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'assets/js/uikit.js' %}"></script>
<script src="{% static 'assets/js/simplebar.js' %}"></script>
<script src="{% static 'assets/js/custom.js' %}"></script>
<script src="{% static '../../unpkg.com/ionicons%405.2.3/dist/ionicons.js' %}"></script>
</body>
</html>