MarseyWorld/files/templates/settings_profile.html

460 lines
22 KiB
HTML

{% extends "settings.html" %}
{% block pagetitle %}Profile Settings - {{'SITE_NAME' | app_config}}{% endblock %}
{% block content %}
<div class="flex flex-col space-y-4 sm:py-4 my-2.5 sm:my-0">
<!-- Avatar section -->
<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
<div class="px-4 py-4">
<h2 class="label text-black">Avatar</h2>
<div class="flex flex-col md:flex-row gap-3">
<!-- Avatar -->
<img loading="lazy" src="{{v.profile_url}}" class="flex-shrink-0 w-14 h-14 rounded object-cover">
<!-- Form -->
<div>
<div class="flex space-x-3">
<!-- Buttons -->
<form action="/settings/images/profile" method="post" enctype="multipart/form-data">
<input type="hidden" name="formkey" value="{{v.formkey}}">
<label class="btn btn-gray">
Change avatar
<input {% if request.headers.get('cf-ipcountry')=="T1" %}disabled{% endif %} type="file" accept="image/*" hidden name="profile" onchange="form.submit()">
</label>
</form>
{% if v.profileurl %}
<div>
<form action="/settings/delete/profile" method="post">
<input type="hidden" name="formkey" value="{{v.formkey}}">
<button type="submit" value="Delete" class="btn btn-red">
<i class="fas fa-trash-alt fa-fw mr-1"></i>
Delete
</button>
</form>
</div>
{% endif %}
</div>
<!-- Help text -->
<p class="mt-2 text-xs text-gray-400 mt-3">
JPG, PNG, GIF files are supported. Max file size is {% if v and v.patron %}8{% else %}4{% endif %} MB.
</p>
</div>
</div>
</div>
<!-- Banner section -->
<div class="px-4 py-4 shadow-inset-t-white-10">
<h2 class="label text-black">Banner</h2>
<div class="flex flex-col md:flex-row gap-3">
<!-- Avatar -->
<img loading="lazy" src="{{v.profile_url}}" class="flex-shrink-0 w-48 h-20 rounded object-cover">
<!-- Form -->
<div>
<div class="flex space-x-3">
<!-- Buttons -->
<form action="/settings/images/banner" method="post" enctype="multipart/form-data">
<input type="hidden" name="formkey" value="{{v.formkey}}">
<label class="btn btn-gray">
Change banner
<input {% if request.headers.get('cf-ipcountry')=="T1" %}disabled{% endif %} type="file" accept="image/*" hidden name="banner" onchange="form.submit()">
</label>
</form>
{% if v.bannerurl %}
<div>
<form action="/settings/delete/banner" method="post">
<input type="hidden" name="formkey" value="{{v.formkey}}">
<button type="submit" value="Delete" class="btn btn-red">
<i class="fas fa-trash-alt fa-fw mr-1"></i>
Delete
</button>
</form>
</div>
{% endif %}
</div>
<!-- Help text -->
<p class="mt-2 text-xs text-gray-400 mt-3">
JPG, PNG, GIF files are supported. Max file size is {% if v and v.patron %}8{% else %}4{% endif %} MB.
</p>
</div>
</div>
</div>
</div>
<!-- <div class="settings-section rounded">
<div class="flex">
<div class="title w-lg-75 text-md-center">
<img loading="lazy" src="{{v.banner_url}}" class="banner-pic-135">
</div>
<div class="body w-lg-100 my-auto">
<div class="flex">
<div>
<form action="/settings/images/banner" method="post" enctype="multipart/form-data">
<input type="hidden" name="formkey" value="{{v.formkey}}">
<label class="btn btn-secondary text-capitalize mr-2 mb-0">
Update<input type="file" {% if request.headers.get('cf-ipcountry')=="T1" %}disabled{% endif %} accept="image/*" hidden name="banner" onchange="form.submit()">
</label>
</form>
</div>
<div>
{% if v.bannerurl %}
<form action="/settings/delete/banner" method="post">
<input type="hidden" name="formkey" value="{{v.formkey}}">
<button type="submit" value="Delete" class="btn btn-link fa-lg"><i class="far fa-trash-alt text-danger"></i></button>
</form>{% endif %}
</div>
</div>
<div class="text-small-extra text-muted mt-3">JPG, PNG, GIF files are supported. Max file size is {% if v and v.patron %}8{% else %}4{% endif %} MB.</div>
</div>
</div>
</div> -->
<div class="rounded-lg bg-gray-100 border border-gray-300 shadow-inset-t-white-10 p-4">
<h2 class="label text-black">Linked accounts</h2>
<div class="flex flex-col space-y-2 divide-y divide-y-800">
<div>
{% if v.discord_id %}
<form action="/settings/remove_discord" method="post">
<input type="hidden" name="formkey" value="{{v.formkey}}">
<input type="submit" class="btn btn-red" value="Disconnect Discord">
</form>
<p class="mt-2 text-xs text-gray-400 mt-3">
Disconnecting your Discord account will remove you from the {{'SITE_NAME' | app_config}} Discord server.
</p>
{% else %}
<div class="w-[126px]">
<a href="/discord" class="btn btn-gray">
<i class="fab fa-discord fa-fw mr-1"></i>
Link Discord
</a>
</div>
<p class="mt-2 text-xs text-gray-400 mt-3">
Link your Discord account to join the {{'SITE_NAME' | app_config}} Discord server.
</p>
{% endif %}
</div>
</div>
</div>
<!-- Referral & RSS -->
<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
<div class="px-4 py-4">
<h2 class="label text-black">Referral code</h2>
<input type="text" onclick="this.select()" value="{{request.host_url}}signup?ref={{v.username}}" class="m-0.5 p-0.5 bg-white border border-gray-300 text-xs text-black w-80">
<small class="block mt-1 text-gray-400">
You have referred <strong>{{v.referral_count}}</strong> members.
<a href="/badges" class="text-red-500">Learn more</a>.
</small>
</div>
<div class="px-4 py-4">
<h2 class="label text-black">RSS Feed</h2>
<input type="text" onclick="this.select()" value="{{('/rss/hot/all') | full_link}}" class="m-0.5 p-0.5 bg-white border border-gray-300 text-xs text-black w-80">
<small class="block mt-1 text-gray-400">
You can change the feed by replacing <strong>hot</strong> with whatever sorting you want and <strong>all</strong> with whatever time filter you want.
</small>
</div>
</div>
<!-- Profile Username -->
<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
<div class="px-4 py-4">
<h2 class="label text-black">Username</h2>
<form action="/settings/name_change" method="post">
<input type="hidden" name="formkey" value="{{v.formkey}}">
<div class="w-full md:w-80">
<input type="text" name="name" class="form-input" value="{{v.username}}">
</div>
<small class="block mt-2 text-gray-400">3-25 characters, including letters, numbers, _ , and -</small>
<small class="block mt-1 text-gray-400">
Your original username will always stay reserved for you: <strong>{{v.original_username}}</strong>
</small>
<div class="mt-4">
<input class="ml-auto btn btn-gray" type="submit" value="Change display name">
</div>
</form>
</div>
</div>
<!-- Profile Anthem -->
<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
<div class="px-4 py-4">
<h2 class="label text-black">Profile Anthem</h2>
<form action="/settings/song_change" method="post">
<input type="hidden" name="formkey" value="{{v.formkey}}">
<div class="w-full md:w-80">
<input type="text" name="song" class="form-input" value="{% if v.song %}https://youtu.be/{{v.song}}{% endif %}" placeholder='Enter a youtube video link here'>
</div>
<small class="block mt-2 text-gray-400">Must be a youtube video link</small>
<div class="mt-4">
<input class="ml-auto btn btn-gray" type="submit" value="Change profile anthem">
</div>
</form>
</div>
</div>
<!-- Username Color -->
<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
<div class="px-4 py-4">
<h2 class="label text-black">Username Color</h2>
<form action="/settings/namecolor" id="color-code-form" method="post">
<input type="hidden" name="formkey" value="{{v.formkey}}">
<div class="w-full md:w-44">
<input class="form-input" type="text" name="color" id="color-code" maxlength="6" value="{% if v.namecolor %}{{v.namecolor}}{% endif %}">
</div>
<div class="mt-4">
<input class="ml-auto btn btn-gray" type="submit" value="Change username color">
</div>
</form>
</div>
</div>
{% if not v.flairchanged %}
<!-- Flair -->
<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
<div class="px-4 py-4">
<h2 class="label text-black">Flair</h2>
<form id="profile-settings" action="/settings/title_change" method="post">
<input type="hidden" name="formkey" value="{{v.formkey}}">
<div class="inline-block w-full md:w-80">
<input id="customtitlebody" type="text" name="title" class="form-input" placeholder='Enter a flair here' value="{% if v.customtitleplain %}{{v.customtitleplain}}{% endif %}">
</div>
<button type="button" class="inline-block ml-2 text-gray-500 hover:text-gray-600" onclick="loadEmojis('customtitlebody')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add Emoji">
<i class="fas fa-smile-beam"></i>
</button>
<small class="block mt-2 text-gray-400">Limit of 100 characters</small>
<div class="mt-4">
<input class="ml-auto btn btn-gray" type="submit" value="Change flair">
</div>
</form>
</div>
</div>
{% endif %}
<!-- Title Color -->
<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
<div class="px-4 py-4">
<h2 class="label text-black">Flair Color</h2>
<form action="/settings/titlecolor" id="color-code-form" method="post">
<input type="hidden" name="formkey" value="{{v.formkey}}">
<div class="w-full md:w-44">
<input class="form-input" type="text" name="color" id="color-code" maxlength="6" value="{% if v.titlecolor %}{{v.titlecolor}}{% endif %}">
</div>
<div class="mt-4">
<input class="ml-auto btn btn-gray" type="submit" value="Change flair color">
</div>
</form>
</div>
</div>
{% if v.verified %}
<!-- Bluecheck Color -->
<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
<div class="px-4 py-4">
<h2 class="label text-black">Bluecheck Color</h2>
<form action="/settings/titlecolor" id="color-code-form" method="post">
<input type="hidden" name="formkey" value="{{v.formkey}}">
<div class="w-full md:w-44">
<input class="form-input" type="text" name="color" id="color-code" maxlength="6" value="{% if v.titlecolor %}{{v.titlecolor}}{% endif %}">
</div>
<div class="mt-4">
<input class="ml-auto btn btn-gray" type="submit" value="Change flair color">
</div>
</form>
</div>
</div>
{% endif %}
<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
<div class="px-4 py-4">
<h2 class="label text-black">Bio</h2>
<form id="profile-bio" action="/settings/profile" method="post" enctype="multipart/form-data">
<input type="hidden" name="formkey" value="{{v.formkey}}">
<div class="input-group mb-2">
<textarea id="bio-text" class="form-input rounded" aria-label="With textarea" placeholder="Tell the community a bit about yourself." rows="3" name="bio" form="profile-bio" maxlength="1500">{% if v.bio %}{{v.bio}}{% endif %}</textarea>
</div>
<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-white border-opacity-10">
<li>
<button type="button" class="text-gray-500 hover:text-gray-400" onclick="makeBold('bio-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Bold">
<i class="fas fa-bold fa-fw fa-sm"></i>
</button>
</li>
<li>
<button type="button" class="text-gray-500 hover:text-gray-400" onclick="makeItalics('bio-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Italicize">
<i class="fas fa-italic fa-fw fa-sm"></i>
</button>
</li>
<li>
<button type="button" class="text-gray-500 hover:text-gray-400" onclick="makeQuote('bio-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Quote">
<i class="fas fa-quote-right fa-fw fa-sm"></i>
</button>
</li>
<li>
<button type="button" class="text-gray-500 hover:text-gray-400" onclick="commentForm('bio-text');getGif()">
<span class="font-bold text-sm text-uppercase" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add GIF">GIF</span>
</button>
</li>
<li>
<button type="button" class="text-gray-500 hover:text-gray-400" onclick="loadEmojis('bio-text')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add Emoji">
<i class="fas fa-smile-beam fa-fw fa-sm"></i>
</button>
</li>
</ul>
<!-- <div class="hidden">
<pre style="padding-top:0.7rem" class="btn btn-secondary format d-inline-block m-0 fas fa-bold" aria-hidden="true" onclick="makeBold('bio-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Bold"></pre>
&nbsp;
<pre style="padding-top:0.7rem" class="btn btn-secondary format d-inline-block m-0 fas fa-italic" aria-hidden="true" onclick="makeItalics('bio-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Italicize"></pre>
&nbsp;
<pre style="padding-top:0.7rem" class="btn btn-secondary format d-inline-block m-0 fas fa-quote-right" aria-hidden="true" onclick="makeQuote('bio-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Quote"></pre>
&nbsp;
<pre style="padding-top:0.7rem;line-height:1;" class="btn btn-secondary format d-inline-block m-0 font-weight-bolder text-uppercase" onclick="commentForm('bio-text');getGif()" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add GIF">GIF</pre>
&nbsp;
<pre style="padding-top:0.7rem" class="btn btn-secondary format d-inline-block m-0 fas fa-smile-beam" onclick="loadEmojis('bio-text')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add Emoji"></pre>
&nbsp;
<label class="inline-block ml-2 text-gray-500 hover:text-gray-200">
<div id="filename-show"><i class="far fa-image"></i></div>
<input id="file-upload" type="file" name="file" {% if request.headers.get('cf-ipcountry')=="T1" %}disabled{% endif %} accept="image/*" onchange="document.getElementById('filename-show').innerHTML='image';" hidden>
</label>
</div> -->
<small class="block mt-2 text-gray-400">Limit of 1500 characters</small>
<div class="mt-4">
<input class="ml-auto btn btn-gray" type="submit" value="Save bio">
</div>
</form>
</div>
</div>
<!-- Privacy -->
<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
<div class="px-4 py-4">
<h2 class="label text-black">Privacy</h2>
<div class="mb-4">
<input type="checkbox" id="privateswitch" name="private"{% if v.is_private%} checked{% endif %} onchange="post_toast('/settings/profile?private='+document.getElementById('privateswitch').checked)">
<label for="privateswitch" class="inline-block pl-2 text-gray-400">Hide my posts and comments from others and search engines.</label>
</div>
<div>
<input type="checkbox" id="nofollowswitch" name="nofollow"{% if v.is_nofollow%} checked{% endif %} onchange="post_toast('/settings/profile?nofollow='+document.getElementById('nofollowswitch').checked)">
<label for="nofollowswitch" class="inline-block pl-2 text-gray-400">Prevent other users from following you.</label>
</div>
</div>
</div>
<div class="settings-section rounded mb-0">
<!-- <div class="body d-lg-flex border-bottom">
<label class="text-black w-lg-25">Friends</label>
<div class="w-lg-100">
<form id="profile-friends" action="/settings/profile" method="post" enctype="multipart/form-data">
<input type="hidden" name="formkey" value="{{v.formkey}}">
<div class="input-group mb-2">
<textarea id="friends-text" class="form-input rounded" aria-label="With textarea" placeholder="Enter your friends on the site..." rows="3" name="friends" form="profile-friends" maxlength="1500">{% if v.friends %}{{v.friends}}{% endif %}</textarea>
</div>
<pre></pre>
<div class="flex">
<small>Limit of 500 characters</small>
<input class="btn btn-primary ml-auto" id="friendsSave" type="submit" value="Save Changes">
</div>
</form>
</div>
</div> -->
<!-- <div class="body d-lg-flex border-bottom">
<label class="text-black w-lg-25">Enemies</label>
<div class="w-lg-100">
<form id="profile-enemies" action="/settings/profile" method="post" enctype="multipart/form-data">
<input type="hidden" name="formkey" value="{{v.formkey}}">
<div class="input-group mb-2">
<textarea id="enemies-text" class="form-input rounded" aria-label="With textarea" placeholder="Enter your enemies on the site..." rows="3" name="enemies" form="profile-enemies" maxlength="1500">{% if v.enemies %}{{v.enemies}}{% endif %}</textarea>
</div>
<pre></pre>
<div class="flex">
<small>Limit of 500 characters</small>
<input class="btn btn-primary ml-auto" id="enemiesSave" type="submit" value="Save Changes">
</div>
</form>
</div>
</div> -->
{% if v.patron or v.id == 1904 %}
<div class="body d-lg-flex border-bottom">
<label class="text-black w-lg-25">Signature</label>
<div class="w-lg-100">
<form id="profile-sig" action="/settings/profile" method="post" enctype="multipart/form-data">
<input type="hidden" name="formkey" value="{{v.formkey}}">
<div class="input-group mb-2">
<textarea id="sig-text" class="form-input rounded" aria-label="With textarea" placeholder="Enter a signature..." rows="3" name="sig" form="profile-sig" maxlength="200">{% if v.sig %}{{v.sig}}{% endif %}</textarea>
</div>
<div class="flex">
<pre style="padding-top:0.7rem" class="btn btn-secondary format d-inline-block m-0 fas fa-bold" aria-hidden="true" onclick="makeBold('sig-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Bold"></pre>
&nbsp;
<pre style="padding-top:0.7rem" class="btn btn-secondary format d-inline-block m-0 fas fa-italic" aria-hidden="true" onclick="makeItalics('sig-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Italicize"></pre>
&nbsp;
<pre style="padding-top:0.7rem" class="btn btn-secondary format d-inline-block m-0 fas fa-quote-right" aria-hidden="true" onclick="makeQuote('sig-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Quote"></pre>
&nbsp;
<pre style="padding-top:0.7rem;line-height:1;" class="btn btn-secondary format d-inline-block m-0 font-weight-bolder text-uppercase" onclick="commentForm('sig-text');getGif()" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add GIF">GIF</pre>
&nbsp;
<pre style="padding-top:0.7rem" class="btn btn-secondary format d-inline-block m-0 fas fa-smile-beam" onclick="loadEmojis('sig-text')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add Emoji"></pre>
</div>
<pre></pre>
<div class="flex">
<small>Limit of 200 characters</small>
<input class="btn btn-primary ml-auto" id="sigSave" type="submit" value="Save Changes">
</div>
</form>
</div>
</div>
{% endif %}
</div>
</div>
{% endblock %}
{% block modals %}
{% include "emoji_modal.html" %}
{% include "gif_modal.html" %}
{% endblock %}
{% block scripts %}
<script src="/assets/js/settings_profile.js?v=57"></script>
<script>
document.onpaste = function(event) {
var focused = document.activeElement;
if (focused.id == 'bio-text') {
f=document.getElementById('file-upload');
files = event.clipboardData.files
filename = files[0].name.toLowerCase()
if (filename.endsWith(".jpg") || filename.endsWith(".jpeg") || filename.endsWith(".png") || filename.endsWith(".webp") || filename.endsWith(".gif"))
{
f.files = files;
document.getElementById('filename-show').textContent = filename;
}
}
}
</script>
{% endblock %}