enigma-bbs/www/wf/profile.template.html

118 lines
2.5 KiB
HTML

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>%NAME%</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Profile of %PREFERRED_USERNAME% of %BOARDNAME%">
</head>
<style>
body {
margin: 0 auto;
padding: 0;
background: #000;
}
.left {
left: 25px;
}
.right {
right: 25px;
}
.center {
text-align: center;
}
.bottom {
position: absolute;
bottom: 25px;
}
#gradient {
background: #999955;
background-image: linear-gradient(#aa5500 20%, #aa0000 20%, #aa0000 40%, #00aa00 40%, #00aa00 60%, #00aaaa 60%, #00aaaa 80%, #aa00aa 80%);
margin: 0 auto;
margin-top: 100px;
width: 100%;
height: 150px;
}
#gradient:after {
content: "";
position: absolute;
background: #555555;
left: 50%;
margin-top: -67.5px;
margin-left: -270px;
padding-left: 20px;
border-radius: 5px;
width: 520px;
height: 275px;
z-index: -1;
}
#card {
position: absolute;
width: 450px;
height: 225px;
padding: 25px;
padding-top: 0;
padding-bottom: 0;
left: 50%;
top: 67.5px;
margin-left: -250px;
background: #aaaaaa;
box-shadow: -20px 0 35px -25px black, 20px 0 35px -25px black;
z-index: 5;
}
#card img {
width: 150px;
float: left;
border-radius: 5px;
margin-right: 20px;
-webkit-filter: sepia(1);
-moz-filter: sepia(1);
filter: sepia(1);
}
#card h2 {
font-family: courier;
color: #ff55ff;
background: #aa00aa;
margin: 0 auto;
padding: 0;
font-size: 15pt;
}
#card p {
font-family: courier;
color: #000000;
font-size: 13px;
}
#card span {
font-family: courier;
}
</style>
<body>
<div id="gradient"></div>
<div id="card">
<img src="%USER_ICON%" />
<h2>%NAME%</h2>
<p>
<b>Name</b>: %NAME% <br>
<b>Location</b>: %LOCATION% <br>
<b>Login Count</b>: %LOGIN_COUNT% <br>
<b>Last Login <b>: %LAST_LOGIN% <br>
<b>Affils</b>: %AFFILIATIONS% <br>
<b>Account Since</b>: %ACCOUNT_CREATED% <br>
</p>
<span class="left bottom">%SUBJECT%</span>
<span class="right bottom">%BOARDNAME%!</span>
</div>
</body>
</html>