145 lines
5.0 KiB
HTML
145 lines
5.0 KiB
HTML
<!doctype f0ck>
|
|
<html>
|
|
<head>
|
|
<title>{{ id }} - f0ck.me</title>
|
|
<link rel="stylesheet" type="text/css" href="./s/css/video-js.min.css" />
|
|
<link rel="stylesheet" type="text/css" href="./s/css/vsg-skin.css" />
|
|
<link rel="stylesheet" type="text/css" href="./s/css/bootstrap.css">
|
|
<link rel="stylesheet" type="text/css" href="./s/css/f0ck-custom.css">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" type="image/png" href="./s/img/favicon.png" />
|
|
<meta property="og:site_name" content="f0ck.me" />
|
|
<meta property="og:description" content="f0cked by {{ username }}" />
|
|
<meta name="Description" content="f0cked by {{ username }}" />
|
|
<meta property="og:image" content="{{ thumbnail }}" />
|
|
<meta charset="utf-8" />
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg">
|
|
<a class="navbar-brand" href="/">
|
|
<img id="biohaz" src="./s/img/biohazard.svg"> <img src="./s/img/f0ckme.png" width="112" height="28">
|
|
</a>
|
|
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item active">
|
|
<a class="nav-link" id="random" href="/random"><span class="rndtext">Random</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/how"><span class="hlptext">Help</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/contact"><span class="cnttext">Contact</span></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<div class="container">
|
|
<div class="controls">
|
|
<a id="rndbtn" href="/random">Random</a>
|
|
</div>
|
|
<div class="content">
|
|
|
|
<div class="next-post">
|
|
{% if next != null %}
|
|
<a id="next" href="/{{ next }}">«</a>
|
|
{% else %}
|
|
<a id="next" href="#" style="color: #ccc !important;">«</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="media-object">
|
|
{% if item == "video" %}
|
|
<div class="embed-responsive embed-responsive-16by9">
|
|
<video id="my-video" class="video-js embed-responsive-item" width="640" height="360" src="{{ dest }}" preload="auto" autoplay controls loop data-setup="{}"></video>
|
|
</div>
|
|
{% elseif item == "audio" %}
|
|
|
|
{% if thumb != null %}
|
|
<div>
|
|
|
|
<!-- <img src="{{ thumb }}" /><br /> -->
|
|
|
|
{% endif %}
|
|
<div class="embed-responsive embed-responsive-16by9">
|
|
<audio id="my-video" class="embed-responsive-item video-js audiojs" autoplay controls loop src="{{ dest }}" data-setup="{}" poster="{% if thumb !== null %}{{ thumb }}{% else %}/s/200.gif{% endif %}" type="audio/mp3" ></audio>
|
|
</div>
|
|
{% if thumb != null %}
|
|
</div>
|
|
|
|
{% endif %}
|
|
{% elseif item == "image" %}
|
|
<a href="{{ dest }}" id="elfe" target="_blank"><img id="f0ck-image" src="{{ dest }}" /></a>
|
|
{% else %}
|
|
|
|
<h1>404 - Not f0cked</h1>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="previous-post">
|
|
{% if prev != null %}
|
|
<a id="prev" href="/{{ prev }}">»</a>
|
|
{% else %}
|
|
<a id="prev" href="#" style="color: #ccc !important;">»</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
</div>
|
|
<div class="metadata">
|
|
<span class="badge badge-dark"><a href="/{{ id }}" class="id-link">{{ id }} </a> by {{ username }}</span>
|
|
<span class="badge badge-dark">{{ usernetwork }} / {{ userchannel }}</span>
|
|
<span class="badge badge-dark"><a id="post_source" href="{{ srcurl }}" target="_blank">{{ src }}</a></span>
|
|
<span class="badge badge-dark">{{ size }}</span>
|
|
<span class="badge badge-dark"><time class="timeago" title="{{ timestamp }}" datetime="{{ timestamp }}"> </time></span>
|
|
<span class="badge badge-dark" id="themes"></span>
|
|
</div>
|
|
</div>
|
|
<script src="./s/js/shit.js"></script>
|
|
<script src="./s/js/theme.js"></script>
|
|
<script src="./s/js/video.min.js"></script>
|
|
<script src="./s/js/videojs.persistvolume.js"></script>
|
|
<script>
|
|
(function() {
|
|
let video = document.querySelector(".video-js");
|
|
if(!video)
|
|
return;
|
|
var vid1 = videojs(video);
|
|
vid1.persistvolume({
|
|
namespace: "f0ck"
|
|
});
|
|
if(vid1.autoplay() && !vid1.paused() && vid1.hasClass('vjs-paused')) {
|
|
vid1.pause();
|
|
vid1.play();
|
|
}
|
|
})();
|
|
const epochs = [
|
|
["year", 31536000],
|
|
["month", 2592000],
|
|
["day", 86400],
|
|
["hour", 3600],
|
|
["minute", 60],
|
|
["second", 1]
|
|
];
|
|
const getDuration = timeAgoInSeconds => {
|
|
for(let [name, seconds] of epochs) {
|
|
const interval = ~~(timeAgoInSeconds / seconds);
|
|
if (interval >= 1) {
|
|
return {
|
|
interval: interval,
|
|
epoch: name
|
|
};
|
|
}
|
|
}
|
|
};
|
|
const timeAgo = date => {
|
|
const timeAgoInSeconds = ~~((new Date() - new Date(date)) / 1000);
|
|
const {interval, epoch} = getDuration(timeAgoInSeconds);
|
|
const suffix = interval === 1 ? "" : "s";
|
|
return `${interval} ${epoch}${suffix} ago`;
|
|
};
|
|
(() => {
|
|
document.querySelectorAll("time.timeago").forEach(e => e.innerHTML = timeAgo(e.title));
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|