hsist
/
cryptoparty-web
6
1
Fork 2
Code Issues Pull Requests Releases Wiki Activity
Labels Milestones
New Pull Request

canlı yayın ekranı güncellemesi #1

Merged
ooguz merged 4 commits from mrtmrcbr/cryptoparty-web:master into master 4 years ago
Conversation 0 Commits 4 Files Changed 4
4 changed files with 289 additions and 96 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 264
      canli.html
  2. 1
      css/jumbotron.css
  3. 27
      css/live-counter.css
  4. 91
      js/live-counter.js

264
canli.html
Unescape View File

@ -1,63 +1,96 @@
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="CryptoParty Istanbul">
<meta name="author" content="Hackerspace İstanbul">
<link rel="icon" href="img/favicon.ico">
<meta property="og:title" content="Canlı Yayın - CryptoParty Lite" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://cryptoparty.online/canli.html" />
<meta property="og:description" content="CryptoParty, tüm dünyada gayrimerkezi olarak yürütülen bir harekettir. COVID-19 koşullarında yüzyüze etkinlikler düzenlenemediği için, bu kez CryptoParty Lite adıyla çevrimiçi olarak konferans tadında bir CryptoParty düzenlenecektir. " />
<meta property="og:image" content="img/cp_social.jpg?v=2" />
<meta property="og:site_name" content="CryptoParty Istanbul" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@oydorgtr" />
<meta name="twitter:title" content="Canlı Yayın - CryptoParty Online">
<meta name="twitter:description" content="CryptoParty, tüm dünyada gayrimerkezi olarak yürütülen bir harekettir. COVID-19 koşullarında yüzyüze etkinlikler düzenlenemediği için, bu kez CryptoParty Lite adıyla çevrimiçi olarak konferans tadında bir CryptoParty düzenlenecektir. ">
<meta name="twitter:creator" content="@oydorgtr" />
<meta name="twitter:image" content="img/cp_social.jpg?v=2">
<title>CryptoParty Istanbul</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/cryptoparty.css" rel="stylesheet">
<link href="css/jumbotron.css" rel="stylesheet">
<link href="css/roboto-mono.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="css/fixedsys-excelsior.css" />
<script type="text/javascript">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="CryptoParty Istanbul">
<meta name="author" content="Hackerspace İstanbul">
<link rel="icon" href="img/favicon.ico">
<meta property="og:title" content="Canlı Yayın - CryptoParty Lite" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://cryptoparty.online/canli.html" />
<meta property="og:description"
content="CryptoParty, tüm dünyada gayrimerkezi olarak yürütülen bir harekettir. COVID-19 koşullarında yüzyüze etkinlikler düzenlenemediği için, bu kez CryptoParty Lite adıyla çevrimiçi olarak konferans tadında bir CryptoParty düzenlenecektir. " />
<meta property="og:image" content="img/cp_social.jpg?v=2" />
<meta property="og:site_name" content="CryptoParty Istanbul" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@oydorgtr" />
<meta name="twitter:title" content="Canlı Yayın - CryptoParty Online">
<meta name="twitter:description"
content="CryptoParty, tüm dünyada gayrimerkezi olarak yürütülen bir harekettir. COVID-19 koşullarında yüzyüze etkinlikler düzenlenemediği için, bu kez CryptoParty Lite adıyla çevrimiçi olarak konferans tadında bir CryptoParty düzenlenecektir. ">
<meta name="twitter:creator" content="@oydorgtr" />
<meta name="twitter:image" content="img/cp_social.jpg?v=2">
<title>CryptoParty Istanbul</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/cryptoparty.css" rel="stylesheet">
<link href="css/jumbotron.css" rel="stylesheet">
<link href="css/roboto-mono.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="css/fixedsys-excelsior.css" />
<link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<link href="css/live-counter.css" rel="stylesheet">
<script src="js/live-counter.js"></script>
<script>
window.addEventListener("load", function () {
// (C) COUNTDOWN TO GIVEN DATE
// Use counter.toSecs(YEAR, MONTH, DAY, HR, MIN, SEC) to help
// counter.init("demoC", counter.toSecs(2020, 7, 1, 0, 0, 0));
// For this example, we just set to 2 days from now
let dtlater = new Date(2020, 7, 4, 15, 0, 0);
console.log(dtlater.getHours());
counter.init(
"live-counter",
counter.toSecs(
dtlater.getFullYear(),
dtlater.getMonth(),
dtlater.getDate(),
dtlater.getHours(),
dtlater.getMinutes(), 0),
function (idx) {
document.getElementById("live-info").style.display = "none";
document.getElementById("live-player").style.display = "block";
}
);
});
</script>
<script type="text/javascript">
// @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat
(function() {
(function () {
var blinks = document.getElementsByTagName('blink');
var blinks = document.getElementsByTagName('blink');
var visibility = 'hidden';
var visibility = 'hidden';
window.setInterval(function() {
window.setInterval(function () {
for (var i = blinks.length - 1; i >= 0; i--) {
for (var i = blinks.length - 1; i >= 0; i--) {
blinks[i].style.visibility = visibility;
blinks[i].style.visibility = visibility;
}
}
visibility = (visibility === 'visible') ? 'hidden' : 'visible';
visibility = (visibility === 'visible') ? 'hidden' : 'visible';
}, 750);
}, 750);
})();
})();
// @license-end
</script>
</head>
</script>
</head>
<body>
<body>
<header>
<nav class="navbar navbar-expand navbar-custom fixed-top">
<span class="sr-only">
<pre>
<header>
<nav class="navbar navbar-expand navbar-custom fixed-top">
<span class="sr-only">
<pre>
_ _
___ _ __ _ _ _ __ | |_ ___ _ __ __ _ _ __| |_ _ _
/ __| '__| | | | '_ \| __/ _ \| '_ \ / _` | '__| __| | | |
@ -70,59 +103,100 @@
</pre>
</span>
<ul class="navbar-nav ml-auto nav-pills">
<li class="nav-item">
<a class="nav-link" href=".">Nedir? <span class="sr-only"> (şu anda buradasınız)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="coc.html">Code of Conduct</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" style="background-color: #240028;">Türkçe</a>
<div class="dropdown-menu dropdown-menu-right">
<h6 class="dropdown-header">Language</h6>
<a class="dropdown-item dr-active" href="#">Türkçe</a>
<a class="dropdown-item" href="en/">English</a>
</div>
</li>
</ul>
</nav>
</header>
<main role="main">
<div class="container">
<div class="row">
<div class="col">
<div class="jumbotron">
<div class="container">
<h1 class="display-3"><span style="color: #982EB3;">crypto</span><span style="color: #CC2581;">party</span> <br><span style="color: #5D9C0F;">lite<blink>_</blink></span></h1>
</span>
<ul class="navbar-nav ml-auto nav-pills">
<li class="nav-item">
<a class="nav-link" href=".">Nedir? <span class="sr-only"> (şu anda buradasınız)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="coc.html">Code of Conduct</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false" style="background-color: #240028;">Türkçe</a>
<div class="dropdown-menu dropdown-menu-right">
<h6 class="dropdown-header">Language</h6>
<a class="dropdown-item dr-active" href="#">Türkçe</a>
<a class="dropdown-item" href="en/">English</a>
</div>
</li>
</ul>
</nav>
</header>
<main role="main">
<div class="container">
<div class="row">
<div class="col">
<div class="jumbotron">
<div class="container">
<center>
<h1 class="display-4"><span style="color: #982EB3;">crypto</span><span
style="color: #CC2581;">party</span> <span style="color: #5D9C0F;">lite<blink>_</blink></span></h1>
</center>
</div>
<div class="container">
<center>
<h3 class="display-5" style="color: white;"> 4 Ağustos 2020, Çevrimiçi </h3>
</center>
<center><a class="btn btn-outline-light" href="https://twitter.com/oydorgtr" target="_blank"
style="margin: 10px;">Twitter</a></center>
</div>
</div>
</div>
<div class="container">
<h3 class="display-5" style="color: white;"> 4 Ağustos 2020, Çevrimiçi </h3>
<center><a class="btn btn-outline-light" href="canli.html" target="_blank" style="margin: 10px;">Canlı yayın</a><a class="btn btn-outline-light" href="https://twitter.com/oydorgtr" target="_blank" style="margin: 10px;">Twitter</a></center>
</div>
<div class="row">
<div class="col">
<div class="jumbotron">
<div id="live-info" class="container">
<center>
<h3 class="display-5" style="color: white; font-family: 'Allerta Stencil', sans-serif;"> Etkinlik günü
saat 19:00'dan itibaren canlı yayını izleyebilirsiniz. </h3>
</center>
<center>
<div id="live-counter"></div>
</center>
</div>
<div id="live-player" style="display:none;">
<video id="cryptoparty-live" class="video-js" controls preload="auto" width="550px" height="300px"
data-setup="{}">
<source src="http://157.245.67.168:5080/LiveApp/streams/574124576795213170096798.m3u8?token=null"/>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
</div>
</div>
</div>
<div class="col">
<div class="jumbotron">
<div class="container">
<div>
<center><iframe style="width: 30vw; height: 60vh;"
src="https://kiwiirc.com/client/chat.freenode.net/?&theme=cli#oyd"></iframe></center>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<span class="text-muted">© 2019 Hackerspace Istanbul ve Özgür Yazılım Derneği. <a href="lisans.html"
target="_blank">CC BY-ND</a> <a href="javascript.html" rel="jslicense">JavaScript license
information</a></span>
</div>
<div class="col">
<div class="jumbotron">
<div class="container">
<h3 class="display-5" style="color: white;"> Etkinlik günü saat 19:00'dan itibaren canlı yayını izleyebilirsiniz. </h3>
</footer>
<script src="js/jquery-3.2.1.slim.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
</body>
</div>
</div>
</div>
</div>
<br>
</main>
<footer class="footer">
<div class="container">
<span class="text-muted">© 2019 Hackerspace Istanbul ve Özgür Yazılım Derneği. <a href ="lisans.html" target="_blank">CC BY-ND</a> <a href="javascript.html" rel="jslicense">JavaScript license information</a></span>
</div>
</footer>
<script src="js/jquery-3.2.1.slim.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

1
css/jumbotron.css
Unescape View File

@ -3,6 +3,7 @@ body {
background-color: #240028;
}
.jumbotron {
padding: 1rem;
background-color: #240028;
}
.jumbotron h1 {

27
css/live-counter.css
Unescape View File

@ -0,0 +1,27 @@
/* THE WRAPPER */
.countdown {
display: flex;
margin: 0 auto;
max-width: 350px;
background: #000;
font-family: Impact, Charcoal, sans-serif;
text-align: center;
}
/* DAY/HR/MIN/SEC */
.countdown .square {
flex-grow: 1;
padding: 10px;
margin: 5px;
}
.countdown .digits {
font-size: 24px;
background: #fff;
color: #000;
padding: 20px 10px;
border-radius: 5px;
}
.countdown .text {
margin-top: 10px;
color: #ddd;
}

91
js/live-counter.js
Unescape View File

@ -0,0 +1,91 @@
var counter = {
instances : [],
init : function (target, seconds, after) {
// init() : attach countdown timer to target
// target : ID of target HTML div
// seconds : seconds to countdown
// after : what to do after countdown end (function)
// (A) THIS INSTANCE
let idx = counter.instances.length;
counter.instances[idx] = {};
let inst = counter.instances[idx];
inst.remain = seconds;
if (typeof after == "function") { inst.after = after; }
// (B) GENERATE HTML
target = document.getElementById(target);
target.classList.add("countdown");
inst.wrap = target;
let gensquare = function(txt){
let square = document.createElement("div"),
digits = document.createElement("div"),
text = document.createElement("div"),
ltxt = txt.toLowerCase();
digits.innerHTML = "00";
text.innerHTML = txt;
square.classList.add("square");
square.classList.add(ltxt);
digits.classList.add("digits");
text.classList.add("text");
square.appendChild(digits);
square.appendChild(text);
inst[ltxt] = digits;
return square;
};
target.innerHTML = "";
if (seconds >= 86400) { target.appendChild(gensquare("DAYS")); }
if (seconds >= 3600) { target.appendChild(gensquare("HOURS")); }
if (seconds >= 60) { target.appendChild(gensquare("MINUTES")); }
target.appendChild(gensquare("SECONDS"));
// (C) TIMER
inst.timer = setInterval(function(){
counter.tick(idx);
}, 1000);
},
tick : function(idx){
// tick() : count down ticker
// idx : target count down timer
// (A) TIMER STOP
let inst = counter.instances[idx];
inst.remain--;
if (inst.remain <= 0 ) {
clearInterval(inst.timer)
inst.remain = 0;
}
// (B) CALCULATE REMAINING TIME
let secs = inst.remain;
let days = Math.floor(secs / 86400); // 1 day = 60 secs * 60 mins * 24 hrs
secs -= days * 86400;
let hours = Math.floor(secs / 3600); // 1 hr = 60 secs * 60 mins
secs -= hours * 3600;
let mins = Math.floor(secs / 60); // 1 min = 60 secs
secs -= mins * 60;
// (C) UPDATE HTML
inst.seconds.innerHTML = secs;
if (inst.minutes !== undefined) { inst.minutes.innerHTML = mins; }
if (inst.hours !== undefined) { inst.hours.innerHTML = hours; }
if (inst.days !== undefined) { inst.days.innerHTML = days; }
// (D) AFTER TIMER END
if (inst.remain == 0) {
if (typeof inst.after == "function") { inst.after(idx); }
}
},
toSecs : function(yr, mth, day, hr, min, sec){
// toSecs() : convert given date/time to remaining seconds
// BEWARE - MONTH IS 0 to 11, JAN = 0 > DEC = 11
let remain = Date.UTC(yr, mth, day, hr, min, sec);
remain = Math.floor(remain / 1000);
remain = remain - Math.floor(Date.now() / 1000);
if (remain < 0) { remain = 0; }
return remain;
}
};
Write Preview
Loading…
Cancel
Save