templates/setting.html (64 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 'assets/images/favicon.png' %}" rel="icon" type="image/png">
<title>Settings</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' %}">
</head>
<body>
<div class="container m-auto">
<h1 class="text-2xl leading-none text-gray-900 tracking-tight mt-3"><a href="/">Home</a> / Account Setting for <b>{{user.username}}</b> </h1>
<!-- <ul class="mt-5 -mr-3 flex-nowrap lg:overflow-hidden overflow-x-scroll uk-tab">
<li class="uk-active"><a href="#">General</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Notification</a></li>
<li><a href="#">Social links</a></li>
<li><a href="#">Billing</a></li>
<li><a href="#">Security</a></li>
</ul> -->
<br>
<hr>
<div class="grid lg:grid-cols-3 mt-12 gap-8">
<div>
<h3 class="text-xl mb-2"> General</h3>
<p></p>
</div>
<div class="bg-white rounded-md lg:shadow-lg shadow col-span-2">
<form action="" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class="grid grid-cols-2 gap-3 lg:p-6 p-4">
<div class="col-span-2">
<label for=""> Profile Image</label>
<img width="100" height="100" src="{{user_profile.profileimg}}" />
<h4> Profile image upload might take several tries to succeed in this version. For most success rate, wait for 5 seconds before clicking save</h4>
<input type="file" name="image" value="" class="shadow-none bg-gray-100">
</div>
<div class="col-span-2">
<label for="about">Bio</label>
<textarea id="about" name="bio" rows="3" class="shadow-none bg-gray-100">{{user_profile.bio}}</textarea>
</div>
<div class="col-span-2">
<label for=""> Location</label>
<input type="text" name="location" value="{{user_profile.location}}" class="shadow-none bg-gray-100">
</div>
</div>
<div class="bg-gray-10 p-6 pt-0 flex justify-end space-x-3">
<button class="p-2 px-4 rounded bg-gray-50 text-red-500"> <a href="/">Cancel</a> </button>
<button type="submit" class="button bg-blue-700"> <a href="/">Save</a></button>
</div>
</form>
</div>
<!-- <div>
<h3 class="text-xl mb-2"> Privacy</h3>
<p> </p>
</div>
<div class="bg-white rounded-md lg:shadow-lg shadow lg:p-6 p-4 col-span-2">
<div class="space-y-3">
<div class="flex justify-between items-center">
<div>
<h4> Who can follow me ?</h4>
<div> </div>
</div>
<div class="switches-list -mt-8 is-large">
<div class="switch-container">
<label class="switch"><input type="checkbox"><span class="switch-button"></span> </label>
</div>
</div>
</div>
<hr>
<div class="flex justify-between items-center">
<div>
<h4> Show my activities ?</h4>
<div> </div>
</div>
<div class="switches-list -mt-8 is-large">
<div class="switch-container">
<label class="switch"><input type="checkbox" checked><span class="switch-button"></span> </label>
</div>
</div>
</div>
<hr>
<div class="flex justify-between items-center">
<div>
<h4> Search engines?</h4>
<div> </div>
</div>
<div class="switches-list -mt-8 is-large">
<div class="switch-container">
<label class="switch"><input type="checkbox"><span class="switch-button"></span> </label>
</div>
</div>
</div>
<hr>
<div class="flex justify-between items-center">
<div>
<h4> Allow Commenting?</h4>
<div> </div>
</div>
<div class="switches-list -mt-8 is-large">
<div class="switch-container">
<label class="switch"><input type="checkbox"><span class="switch-button"></span> </label>
</div>
</div>
</div>
</div> -->
</div>
<br>
</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>