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

Compare commits

base: hsist:2242a870c7eeacb8c329916e0aede2ce0da957b6
Branches Tags
hsist:master
...
compare: hsist:2748c6aceebce6e3696aff5a0c23521d5aa333c9
Branches Tags
hsist:master

5 Commits
2242a870c7 ... 2748c6acee

Author SHA1 Message Date
Özcan Oğuz 2748c6acee Merge pull request 'canlı yayın ekranı güncellemesi' (#1) from mrtmrcbr/cryptoparty-web:master into master
4 years ago
murat emir cabaroğlu 652f689098 yayın urlsi ve süresi güncellendi
4 years ago
murat emir cabaroğlu 74b699edab canlı yayın için geri sayım göstergesi eklendi
4 years ago
murat emir cabaroğlu 7f480976a1 canlı yayın arayuzu içim tasarım değişikliği yapıldı
4 years ago
murat emir cabaroğlu a8aa179ed1 canlı yayın arayuzu için güncelleme yapıldı
4 years ago
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
  1. 266
      canli.html
  2. 1
      css/jumbotron.css
  3. 27
      css/live-counter.css
  4. 91
      js/live-counter.js

266
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>
</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