{% extends "mnfapp/base.html" %} {% load static %} {% block content %} <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <title>User Profile</title> <style> .user-container{ width: 45vw; margin: auto; margin-top: 1em; margin-bottom: 2cm; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); padding: 1em; } .imagehere{ width: 100%; text-align: center; } input#file { display: inline-block; width: 150px; padding: 50px 0 0 0; height:30px; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* background: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698394-icon-130-cloud-upload-512.png') center center no-repeat #e4e4e4; */ background: url('{% static "upload.jpg"%}') center center no-repeat; border-radius: 15px; background-size:150px; } </style> <br> <h6 style="text-align: right;"><button onclick="window.history.back()" style="width:2vw; height:2vw;padding: 3px; border-radius: 4px; color: white; background-color: red;">x</button></h6> {%if dataP6%} <button class="btn btn-primary" style="margin:1em;"><a href="/pay/verifygift" style="color: white;">Claim Your Gift</a></button> {%endif%} <br> <div class="user-container"> <h2 style="text-align: center;">User Profile</h2> {%if dataP.profilePic%} <div class="imagehere"> <img loading="lazyloading" src="../../../media/{{dataP.profilePic}}" width="150px" height="150px" style="border-radius: 50%;" alt=""> </div> <div style="margin-top: 1em; margin-bottom: 1em; display: grid; text-align: center;grid-template-columns: auto auto;"> <form action="{% url 'userprofile'%}" method="post" enctype="multipart/form-data"> {%csrf_token%} <input id="file" type="file" name="profilePic" accept=".png, .jpg" onchange="readURL(this);" /> <div id="conf-img" style="background-color: white; width: 70vw; display:none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;"> <div style="width: 60%; margin-left: 20%;"> <img loading="lazyloading" id="prev_img" src="#" alt="your image"> </div> <div style="display: flex; margin:1em"> <button type="button" onclick="$('#conf-img').hide()" class="btn btn-primary" style="margin-right: 1em;">Cancel</button> <button type="submit" class="btn btn-success">Confirm</button> </div> </div> </form> <button style="border: 0; background-color: rgba(27, 63, 182, 0.815); height: 30px;width: 150px; margin-top: 10px;"> <a href="{% url 'deleteProfile'%}" style="color: white;">Remove Photo</a></button> </div> {%else%} <div class="imagehere"> <img loading="lazyloading" src="{%static 'avatar.png'%}" width="150px" height="150px" style="border-radius: 50%;" alt=""> </div> <div style="margin-top: 1em; margin-bottom: 1em; display: grid; text-align: center;grid-template-columns: auto auto;"> <form action="{% url 'userprofile'%}" method="post" enctype="multipart/form-data"> {%csrf_token%} <input id="file" type="file" name="profilePic" accept=".png, .jpg" onchange="readURL(this);" /> <div id="conf-img" style="background-color: white; width: 70vw; display:none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;"> <div style="width: 60%; margin-left: 20%;"> <img loading="lazyloading" id="prev_img" src="#" alt="your image"> </div> <div style="display: flex; margin:1em"> <button type="button" onclick="$('#conf-img').hide()" class="btn btn-primary" style="margin-right: 1em;">Cancel</button> <button type="submit" class="btn btn-success">Confirm</button> </div> </div> </form> </div> {%endif%} <h3><span style="color: rgb(76, 211, 76);">User Details</span></h3> <div style=" width:35vw; margin:auto; display: grid; grid-template-columns: 50% auto;"> <h4>Name:</h4> <h4 style="text-transform: capitalize;">{{user.first_name}} {{user.last_name}}</h4> <h4>Email:</h4> <h4>{{user.email}}</h4> <h4>Last Login:</h4> <h4>{{user.last_login}}</h4> <h4>Date Joined:</h4> <h4>{{user.date_joined}}</h4> </div> {% if dataP3 %} <h3><span style="color: rgb(76, 211, 76);">Membership Details</span></h3> {%endif%} {% if dataP4 %} <h3><span style="color: rgb(76, 211, 76);">Membership Details</span></h3> {%endif%} <div style=" width:35vw; margin:auto; display: grid; grid-template-columns: 50% auto;"> {% if dataP3 is not None%} <h4>Date Subscribed</h4> <h4>{{dataP3.dateSubscribed}}</h4> <h4>Plan:</h4> <h4>{{dataP3.memberType}}</h4> <h4>Total Month:</h4> <h4>{{dataP3.months}}</h4> <h4>Validity:</h4> <h4 id="">{{expiry}}</h4> {% elif dataP4 %} <h4>Date Subscribed</h4> <h4>{{dataP4.dateSubscribed}}</h4> <h4>Plan:</h4> <h4>Life Member</h4> <h4>Total Month:</h4> <h4>{{dataP4.months}}</h4> <h4>Validity:</h4> <h4 id="validity2"></h4> {%else%} <h4>Plan:</h4> <div> <h4>Unprivileged Member <button style="margin: 1em;" class="btn btn-primary"> <a href="{%url 'payment'%}" style="color: white;">Get Membership</a></button></h4> </div> {%endif%} </div> <h3><span style="color: rgb(76, 211, 76);">LPP Details</span></h3> {%if dataP5%} <div style=" width:35vw; margin:auto; display: grid; grid-template-columns: 50% auto;"> <h4>Country:</h4> <h4 style="text-align: right;">{{dataP5.country}}</h4> <h4>Pair:</h4> <h4 style="text-align: right;">{{dataP5.firstLanguage}} To {{dataP5.secondLanguage}}</h4> <h4>Status:</h4> {%if dataP5.status == 'Not Selected'%} <h4 style="text-align: right; color: red;">{{dataP5.status}}</h4> {%else%} <h4 style="text-align: right;">{{dataP5.status}}</h4> {%endif%} </div> {%else%} <h4 style="text-align: center;">No Application Pending</h4> {%endif%} </div> </div> <script> function add_months(dt, n) { return new Date(dt.setMonth(dt.getMonth() + n)); } '{% if dataP3%}' dt = new Date('{{dataP3.dateSubscribed.year}}','{{dataP3.dateSubscribed.month}}','{{dataP3.dateSubscribed.day}}'); // alert(add_months(dt, 10).toString()) // console.log(add_months(dt, 12).toString()); dateObj = add_months(dt, parseInt('{{dataP3.months}}')) var month = dateObj.getUTCMonth() + 1; //months from 1-12 var day = dateObj.getUTCDate(); var year = dateObj.getUTCFullYear(); document.getElementById('validity').innerHTML = day + "-" + month + "-" + year // document.getElementById('validity').innerHTML = "add" '{%endif%}' '{% if dataP4%}' dt2 = new Date('{{dataP4.dateSubscribed.year}}','{{dataP4.dateSubscribed.month}}','{{dataP4.dateSubscribed.day}}'); // alert(add_months(dt2, 120).toString()) // console.log(add_months(dt, 12).toString()); dateObj2 = add_months(dt2, 120) var month2 = dateObj2.getUTCMonth() + 1; //months from 1-12 var day2 = dateObj2.getUTCDate(); var year2 = dateObj2.getUTCFullYear(); document.getElementById('validity2').innerHTML = day2 + "-" + month2 + "-" + year2 '{%endif%}' </script> <script> function readURL(input){ document.getElementById('conf-img').style.display = 'block'; if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#prev_img') .attr('src', e.target.result) .width(150) .height(150); }; reader.readAsDataURL(input.files[0]); } } </script> {%endblock%}