add website
This commit is contained in:
lx
@@ -0,0 +1,248 @@
|
||||
{% extends '__layout__.html' %}
|
||||
{% block title %}{{profile.username}}{% endblock %}
|
||||
{% block head %}
|
||||
<link href="/static/css/profile.css" rel="stylesheet"/>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
|
||||
<style>
|
||||
.place-card { height:220px !important; aspect-ratio:0.640909/1; }
|
||||
.place-card-container { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:0; }
|
||||
</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="130" height="130" 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-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="d-flex justify-content-end">
|
||||
<div class="nav-account-dropdown-wrap" id="profileActionsDropdown" style="position:relative;">
|
||||
<button class="btn btn-secondary" onclick="document.getElementById('profileActionsDropdown').classList.toggle('open')" type="button">
|
||||
<i class="bi bi-three-dots-vertical"></i>
|
||||
</button>
|
||||
<div class="nav-dropdown-menu" style="right:0;left:auto;">
|
||||
{% if profile.id != currentuser.id : %}
|
||||
{% if not profile.isviewerfollowing: %}
|
||||
<form action="/users/{{profile.id}}/followuser" method="post">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
|
||||
<button class="nav-dropdown-item" type="submit">Follow</button>
|
||||
</form>
|
||||
{%else%}
|
||||
<form action="/users/{{profile.id}}/unfollowuser" method="post">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
|
||||
<button class="nav-dropdown-item" type="submit">Unfollow</button>
|
||||
</form>
|
||||
{%endif%}
|
||||
<a class="nav-dropdown-item" href="/trade/{{profile.id}}/create">Trade</a>
|
||||
{% endif %}
|
||||
<a class="nav-dropdown-item" href="/users/{{profile.id}}/inventory">Inventory</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if profile.id != currentuser.id : %}
|
||||
<div class="d-flex justify-content-end me-3 mt-3" style="gap:8px;">
|
||||
<a href="/messages/new/{{profile.id}}"><button class="btn btn-secondary">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 btn-danger">Unfriend</button>
|
||||
</form>
|
||||
{% else: %}
|
||||
{% if profile.friendrequestpending: %}
|
||||
<button class="btn btn-secondary 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 btn-primary">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 btn-secondary">Add Friend</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="mt-3 mb-2">
|
||||
<div class="page-tabs" id="nav-tab" role="tablist">
|
||||
<a href="#about" class="nav-link active" id="nav-about-tab" role="tab">About</a>
|
||||
<a href="#games" class="nav-link" id="nav-games-tab" role="tab">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">
|
||||
<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:#1e1e1e;">
|
||||
</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" style="text-decoration:none;">
|
||||
<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;" class="d-table">This user has no friends{% if profile.id != currentuser.id : %}, maybe 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">
|
||||
<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:0;left:0;">
|
||||
<div class="fw-bold text-white" style="font-size:12px;padding:3px;border-top-right-radius:4px;background:rgba(0,0,0,0.55);">{{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>
|
||||
(function(){
|
||||
document.addEventListener('click',function(e){
|
||||
var wrap=document.getElementById('profileActionsDropdown');
|
||||
if(wrap&&!wrap.contains(e.target)){wrap.classList.remove('open');}
|
||||
});
|
||||
var tabs=document.querySelectorAll(".page-tabs .nav-link");
|
||||
var panes=document.querySelectorAll(".tab-content .tab-pane");
|
||||
function activate(tab){
|
||||
tabs.forEach(function(t){t.classList.remove("active");});
|
||||
panes.forEach(function(p){p.classList.remove("show","active");});
|
||||
tab.classList.add("active");
|
||||
var target=document.querySelector(tab.getAttribute("href"));
|
||||
if(target){target.classList.add("show","active");}
|
||||
}
|
||||
tabs.forEach(function(tab){
|
||||
tab.addEventListener("click",function(e){
|
||||
e.preventDefault();
|
||||
activate(tab);
|
||||
window.location.hash=tab.getAttribute("href");
|
||||
});
|
||||
});
|
||||
var hash=window.location.hash;
|
||||
if(hash){
|
||||
var matchTab=document.querySelector('.page-tabs .nav-link[href="'+hash+'"]');
|
||||
if(matchTab){activate(matchTab);}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user