254 lines
15 KiB
HTML
254 lines
15 KiB
HTML
{% extends '__layout__.html' %}
|
|
{% block title %}{{profile.username}}{% endblock %}
|
|
{% block head %}
|
|
<link href="/static/css/profile.css" rel="stylesheet"/> <!-- Its just easier to resuse this-->
|
|
<style>
|
|
.text-secondary {
|
|
color: rgb(199, 199, 199) !important;
|
|
}
|
|
.border {
|
|
border-color: rgb(60,60,60) !important;
|
|
}
|
|
.nav-link {
|
|
color: #c7c7c7!important
|
|
}
|
|
.nav-link.active {
|
|
color: #fff!important
|
|
}
|
|
.place-card {
|
|
height: 220px !important;
|
|
aspect-ratio: 0.640909/1;
|
|
}
|
|
.place-card-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
gap: 0px;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div id="main">
|
|
<div class="container" style="max-width: 800px;">
|
|
{% with messages = get_flashed_messages() %}
|
|
{% if messages %}
|
|
<div>
|
|
{% for message in messages %}
|
|
<div class="alert border border-danger p-2 text-center messagealerts">
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
<div class="row mb-2">
|
|
<div class="col-md-7 d-flex">
|
|
<div class="image-container">
|
|
<img class="rounded overflow-hidden" src="/Thumbs/Head.ashx?x=150&y=150&userId={{profile.id}}" width="130px" height="130px" alt="{{profile.username}}"/>
|
|
{% if profile.isonline: %}<div class="status-icon {% if profile.ingame: %}status-icon-green{% endif %}"></div>{% endif %}
|
|
</div>
|
|
<div>
|
|
<div class="d-flex align-items-center">
|
|
<h1 class="m-0">{{profile.username}}</h1>
|
|
{% if profile.membershipValue == 1: %}
|
|
<span class="rbx-icon-bc ms-2"></span>
|
|
{%endif%}
|
|
{% if profile.membershipValue == 2: %}
|
|
<span class="rbx-icon-tbc ms-2"></span>
|
|
{%endif%}
|
|
{% if profile.membershipValue == 3: %}
|
|
<span class="rbx-icon-negative-obc ms-2"></span>
|
|
{%endif%}
|
|
</div>
|
|
{% if profile.id != currentuser.id : %}
|
|
{% if profile.doestargetuserfollowviewer: %}
|
|
<p class="m-0" style="font-size: 11px;">This user is currently following you</p>
|
|
{%endif%}
|
|
{%endif%}
|
|
<div class="d-flex mt-1">
|
|
<div style="width: fit-content;" class="me-3">
|
|
<p class="m-0 text-secondary w-100 text-center d-block" style="font-size: 15px;">Friends</p>
|
|
<a href="/users/{{profile.id}}/friends" class="m-0 text-decoration-none text-white w-100 text-center d-block" style="font-size: 25px;">{{profile.friendcount}}</a>
|
|
</div>
|
|
<div style="width: fit-content;" class="me-3">
|
|
<p class="m-0 text-secondary w-100 text-center d-block" style="font-size: 15px;">Followers</p>
|
|
<a href="/users/{{profile.id}}/followers" class="m-0 text-decoration-none text-white w-100 text-center d-block" style="font-size: 25px;">{{profile.FollowerCount}}</a>
|
|
</div>
|
|
<div style="width: fit-content;" class="me-3">
|
|
<p class="m-0 text-secondary w-100 text-center d-block" style="font-size: 15px;">Following</p>
|
|
<a href="/users/{{profile.id}}/following" class="m-0 text-decoration-none text-white w-100 text-center d-block" style="font-size: 25px;">{{profile.FollowingCount}}</a>
|
|
</div>
|
|
<div style="width: fit-content;">
|
|
<p class="m-0 text-secondary w-100 text-center d-block" style="font-size: 15px;">User RAP</p>
|
|
<p class="m-0 text-decoration-none text-white w-100 text-center d-block" style="font-size: 25px;">{{profile.UserRAP}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<div>
|
|
<div class="dropdown d-flex justify-content-end">
|
|
<button class="btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="bi bi-three-dots-vertical"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
{% if profile.id != currentuser.id : %}
|
|
{% if not profile.isviewerfollowing: %}
|
|
<li><form action="/users/{{profile.id}}/followuser" method="post"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/><button class="dropdown-item" type="submit">Follow</button></form></li>
|
|
{%else%}
|
|
<li><form action="/users/{{profile.id}}/unfollowuser" method="post"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/><button class="dropdown-item" type="submit">Unfollow</button></form></li>
|
|
{%endif%}
|
|
<li><a class="dropdown-item" href="/trade/{{profile.id}}/create">Trade</a></li>
|
|
{% endif %}
|
|
<li><a class="dropdown-item" href="/users/{{profile.id}}/inventory">Inventory</a></li>
|
|
</ul>
|
|
</div>
|
|
{% if profile.id != currentuser.id : %}
|
|
<div class="d-flex justify-content-end me-3 mt-4">
|
|
<a href="/messages/new/{{profile.id}}"><button class="btn border me-2 text-white">Message</button></a>
|
|
{% if profile.isfriends: %}
|
|
<form action="/users/{{profile.id}}/unfriend" method="post">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
|
|
<button class="btn border-danger text-danger">Unfriend</button>
|
|
</form>
|
|
{% else: %}
|
|
{% if profile.friendrequestpending: %}
|
|
<button class="btn border" disabled>Pending</button>
|
|
{% else: %}
|
|
{% if profile.friendrequesttoauthenticateduser: %}
|
|
<form action="/users/{{profile.id}}/acceptfriend" method="post">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
|
|
<button class="btn border-success">Accept Friend Request</button>
|
|
</form>
|
|
{% else: %}
|
|
<form action="/users/{{profile.id}}/addfriend" method="post">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
|
|
<button class="btn border text-white">Add Friend</button>
|
|
</form>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<nav class="mt-3 rounded-top mb-2" style="background-color: rgb(40, 40, 40) !important;overflow: hidden;">
|
|
<div class="nav nav-underline nav-fill page-tabs" id="nav-tab" role="tablist">
|
|
<a href="#about" class="nav-link active" id="nav-about-tab" data-bs-toggle="tab" data-bs-target="#nav-about" type="button" role="tab" aria-controls="nav-about" aria-selected="true">About</a>
|
|
<a href="#games" class="nav-link" id="nav-games-tab" data-bs-toggle="tab" data-bs-target="#nav-games" type="button" role="tab" aria-controls="nav-games" aria-selected="false">Games</a>
|
|
</div>
|
|
</nav>
|
|
<div class="tab-content ps-2 pe-2 pt-1 pb-3" id="nav-tabContent">
|
|
<div class="tab-pane show active" id="nav-about" role="tabpanel" aria-labelledby="nav-about-tab" tabindex="0">
|
|
<h5 class="m-0 mb-1">Description</h5>
|
|
{% for line in descriptionlines: %}
|
|
{% if line.strip() != '' %}
|
|
<p class="text-secondary m-0">{{line}}</p>
|
|
{%else%}
|
|
<br>
|
|
{%endif%}
|
|
{% endfor %}
|
|
<div class="linebreak"></div>
|
|
<div class="row">
|
|
<div class="col-md-6 p-2">
|
|
<img src="/Thumbs/Avatar.ashx?x=420&y=420&userId={{profile.id}}" class="w-100 border rounded" alt="{{profile.username}} Avatar" />
|
|
</div>
|
|
<div class="col-md-6 p-2">
|
|
<div class="border rounded w-100 h-100 p-2">
|
|
<h5 class="text-center w-100 m-0">Currently wearing</h5>
|
|
<div class="row p-1">
|
|
{% for asset in profile.wearing %}
|
|
<div class="col-3 p-1">
|
|
<a href="/catalog/{{asset.asset_id}}/">
|
|
<img src="/Thumbs/Asset.ashx?assetId={{asset.asset_id}}&x=100&y=100" width="100%" class="rounded p-1" style="background-color: rgb(30,30,30);">
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center">
|
|
<h5>Friends</h5>
|
|
<div class="ms-auto">
|
|
<a href="/users/{{profile.id}}/friends" class="text-decoration-none">View All ( {{profile.friendcount}} )</a>
|
|
</div>
|
|
</div>
|
|
<div class="rounded dark-container p-2 d-flex">
|
|
{% for friend in profile.friendsdata %}
|
|
<a href="/users/{{friend.id}}/profile">
|
|
<div style="height: fit-content; width: 90px;" class="me-3">
|
|
<div class="image-container-friend">
|
|
<img class="rounded w-100 d-table" src="/Thumbs/Head.ashx?x=100&y=100&userId={{friend.id}}" style="margin: 0 auto; max-width: 100px;aspect-ratio: 1/1;" alt="{{friend.username}}"/>
|
|
{% if friend.isonline: %}<div class="status-icon {% if friend.ingame: %}status-icon-green{% endif %}"></div>{% endif %}
|
|
</div>
|
|
<p class="text-white w-100 text-center d-inline-block m-0 text-truncate" style="font-size: 12px;">{{friend.username}}</p>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
{% if profile.friendcount == 0: %}
|
|
<p style="margin: auto auto;" class="d-table">This user has no friends{% if profile.id != currentuser.id : %}, maybe you should send them a friend request!{% endif %}</p>
|
|
{% endif %}
|
|
</div>
|
|
<div class="rounded mt-3 mb-3 p-2 dark-container row d-flex align-items-center" style="min-height: 75px !important;">
|
|
<div class="col text-center">
|
|
<b class="text-secondary">Join Date</b>
|
|
<h4>{{profile.joindate}}</h4>
|
|
</div>
|
|
<div class="col text-center">
|
|
<b class="text-secondary">Place Visits</b>
|
|
<h4>{{profile.TotalVisits}}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="nav-games" role="tabpanel" aria-labelledby="nav-games-tab" tabindex="0">
|
|
<h5 class="m-0 mb-1">Games</h5>
|
|
<div class="w-100 place-card-container">
|
|
{% for place in profile.UserGames: %}
|
|
<a class="text-decoration-none p-1" href="/games/{{place.id}}/{{place.slug}}">
|
|
<div class="overflow-hidden place-card w-100">
|
|
<div class="position-relative">
|
|
<img width="100%" style="aspect-ratio: 1/1;" src="/Thumbs/PlaceIcon.ashx?assetId={{place.id}}&x=150&y=150" alt="{{place.name}}">
|
|
<div class="position-absolute" style="bottom: 0px;left: 0px;">
|
|
<div class="fw-bold bg-dark text-white" style="font-size: 12px;padding: 3px;border-top-right-radius: 4px;">{{place.placeyear.value}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-1">
|
|
<h5 class="mb-0" style="font-size: 17px;text-overflow: ellipsis;">{{place.name}}</h5>
|
|
<div class="d-flex align-items-center">
|
|
<p style="margin:0;font-size: 14px;" class="text-secondary"><i class="bi bi-people"></i> {{place.playingcount}} <span style="font-size: 13px;">Playing</span></p>
|
|
</div>
|
|
<div class="w-100 votePercentageBackground">
|
|
<div class="votePercentageFill" style="width: {{place.likePercentage}}%;"></div>
|
|
<div>
|
|
<div class="segment" style="left: 18%;"></div>
|
|
<div class="segment" style="left: 38%;"></div>
|
|
<div class="segment" style="left: 58%;"></div>
|
|
<div class="segment" style="left: 78%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% if len(profile.UserGames) == 0:%}
|
|
<p class="text-center w-100 p-5">This user has no games</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", async function() {
|
|
var Navtabs = document.querySelectorAll(".page-tabs a");
|
|
Navtabs.forEach(function(element) {
|
|
element.addEventListener("click", function() {
|
|
var TabTarget = element.getAttribute("href");
|
|
window.location.hash = TabTarget;
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |