<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="css/bootstrap.css" type="text/css"> <link rel="stylesheet" href="css/jpreloader.css" type="text/css"> <link rel="stylesheet" href="css/animate.css" type="text/css"> <link rel="stylesheet" href="css/plugin.css" type="text/css"> <link rel="stylesheet" href="css/owl.carousel.css" type="text/css"> <link rel="stylesheet" href="css/owl.theme.css" type="text/css"> <link rel="stylesheet" href="css/owl.transitions.css" type="text/css"> <link rel="stylesheet" href="css/magnific-popup.css" type="text/css"> <link rel="stylesheet" href="css/style.css" type="text/css"> <link rel="stylesheet" href="css/twentytwenty.css" type="text/css"> <!-- custom background --> <link rel="stylesheet" href="css/bg.css" type="text/css"> <!-- color scheme --> <link rel="stylesheet" href="css/colors/magenta.css" type="text/css" id="colors"> <link rel="stylesheet" href="css/color.css" type="text/css"> <!-- load fonts --> <link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.css" type="text/css"> <link rel="stylesheet" href="fonts/elegant_font/HTML_CSS/style.css" type="text/css"> <link rel="stylesheet" href="fonts/et-line-font/style.css" type="text/css"> <!-- RS5.0 Stylesheet --> <link rel="stylesheet" href="revolution/css/settings.css" type="text/css"> <link rel="stylesheet" href="revolution/css/layers.css" type="text/css"> <link rel="stylesheet" href="revolution/css/navigation.css" type="text/css"> <link rel="stylesheet" href="css/rev-settings.css" type="text/css"> <!-- custom font --> <link rel="stylesheet" href="css/font-style.css" type="text/css"> <!-- development version, includes helpful console warnings --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- The core Firebase JS SDK is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-firestore.js"></script> <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script> <script> window.OneSignal = window.OneSignal || []; OneSignal.push(function() { OneSignal.init({ appId: "e77e3adf-4776-4973-8be0-1dcd0976f6c9", }); }); </script> </head> <body> <section> <div class="wm wm-border dark wow fadeInDown ">live</div> <div class="container"> <div class="row"> <div class="col-md-6 offset-md-3 text-center wow fadeInUp"> <h1>LIVE!</h1> <div class="separator"><span><i class="fa fa-square"></i></span></div> <div class="spacer-single"></div> </div> </div> <center> <p id="live">Click on the below banner to watch the live webcast of the Lovers' Quarrel.</p> </center> </div> <div class="wrap-element"> <iframe class="wrapped-iframe" src="https://www.youtube.com/embed/DNy6cKFaeVw?autoplay=1" allow="encrypted-media autoplay" allowfullscreen frameborder="0"></iframe> </div> </section> <!-- scorecard section begin --> <section id="full-scorecard" class="cool_facts_area clearfix"> <div class="wm wm-border dark wow fadeInDown ">scores</div> <div class="container"> <div class="row"> <div class="col-md-6 offset-md-3 text-center wow fadeInUp"> <h1>Score Card</h1> <div class="separator"><span><i class="fa fa-square"></i></span></div> <div class="spacer-single"></div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-12 col-md-3 col-lg-3"> <div class="single-cool-fact d-flex justify-content-center wow fadeInUp" data-wow-delay="0.2s"> <img src="images-event\logo\mcg.png" width="50%" height="50%"> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12 text-center col-lg-6" data-wow-delay="0.6s"> <div class="service-item" id="mainScore"> <a id="Batting" class="page-scroll" style="color: gold;">{{ msg }}</a> <h1 class="mainScore"><span id="score">{{ score }}</span>/<span id="wickets">{{ wickets }}</span></h1> <h2><span class="mainOvers" id="Overs">{{ overs }}<span id="overs"></span> OVERS</h2> <p id="MatchStatus"></p> </div> </div> <div class="col-12 col-md-3 col-lg-3"> <div class="single-cool-fact d-flex justify-content-center wow fadeInUp" data-wow-delay="0.8s"> <img src="images-event\logo\rcg.png" width="50%" height="50%"> </div> </div> </div> <div id="scorecard" data-speed="10" data-type="background" style="padding-top: 50px; padding-bottom: 50px; background-position: 100% -429.8px;"> <div class="row"> <div class="align-self-center col-md-8 offset-md-2 section-heading2 animated fadeInUp visible" style="text-align:center" data-animation="fadeInUp" data-animation-delay="0"> <h2 class="lq-head">Lovers Quarrel 2022</h2> <h1>Full Scorecard</h1> <div class="separator"><span><i class="fa fa-square"></i></span></div> <p class="line"> </p> <div class="quotes-p fullscore"> <div class="items" v-for="(inning, index) in innings"> <div class="name">{{ inning.displayName }}</div> <div class="text table-responsive"> <batting-card v-bind:inning="inning" v-bind:batting="battingCard" v-bind:innings="inningCard"></batting-card> <bowling-card v-bind:inning="inning" v-bind:bowling="bowlingCard"></bowling-card> </div> </div> </div> </div> </div> </div> </section> <div class="container"> <h2>Dynamic Tabs</h2> <p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#home">Home</a></li> <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> <li><a data-toggle="tab" href="#menu3">Menu 3</a></li> </ul> <div class="tab-content"> <div id="home" class="tab-pane fade in active"> <h3>HOME</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div id="menu1" class="tab-pane fade"> <h3>Menu 1</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div id="menu2" class="tab-pane fade"> <h3>Menu 2</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div> <div id="menu3" class="tab-pane fade"> <h3>Menu 3</h3> <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> </div> </div> </div> <!-- Javascript Files ================================================== --> <script src="js/jquery.min.js"></script> <script src="js/jpreLoader.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.isotope.min.js"></script> <script src="js/easing.js"></script> <script src="js/jquery.flexslider-min.js"></script> <script src="js/jquery.scrollto.js"></script> <script src="js/owl.carousel.js"></script> <script src="js/jquery.countTo.js"></script> <script src="js/classie.js"></script> <script src="js/video.resize.js"></script> <script src="js/validation.js"></script> <script src="js/wow.min.js"></script> <script src="js/jquery.magnific-popup.min.js"></script> <script src="js/jquery.stellar.min.js"></script> <script src="js/enquire.min.js"></script> <script src="js/designesia.js"></script> <script src="js/jquery.event.move.js"></script> <script src="js/jquery.plugin.js"></script> <script src="js/jquery.twentytwenty.js"></script> <!-- RS5.0 Core JS Files --> <script src="revolution/js/jquery.themepunch.tools.min.js?rev=5.0"></script> <script src="revolution/js/jquery.themepunch.revolution.min.js?rev=5.0"></script> <!-- RS5.0 Extensions Files --> <script src="revolution/js/extensions/revolution.extension.video.min.js"></script> <script src="revolution/js/extensions/revolution.extension.slideanims.min.js"></script> <script src="revolution/js/extensions/revolution.extension.layeranimation.min.js"></script> <script src="revolution/js/extensions/revolution.extension.navigation.min.js"></script> <script src="revolution/js/extensions/revolution.extension.actions.min.js"></script> <script src="revolution/js/extensions/revolution.extension.kenburn.min.js"></script> <script src="revolution/js/extensions/revolution.extension.migration.min.js"></script> <script src="revolution/js/extensions/revolution.extension.parallax.min.js"></script> <script> jQuery(document).ready(function() { // revolution slider jQuery("#slider-revolution").revolution({ sliderType: "standard", sliderLayout: "fullwidth", delay: 5000, navigation: { arrows: { enable: true }, bullets: { enable: false, style: 'hermes' }, }, parallax: { type: "mouse", origo: "slidercenter", speed: 2000, levels: [2, 3, 4, 5, 6, 7, 12, 16, 10, 50], }, spinner: "off", gridwidth: 1140, gridheight: 700, disableProgressBar: "on" }); }); </script> <script> $(window).on("load", function() { $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({ default_offset_pct: 0.7 }); $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({ default_offset_pct: 0.3, orientation: 'vertical' }); }); </script> <script> // Your web app's Firebase configuration var firebaseConfig = { apiKey: "AIzaSyB_fCrqzAGkDkAYDtdtERw_IMwoCgmkrJQ", authDomain: "lqlk-5370b.firebaseapp.com", databaseURL: "https://lqlk-5370b.firebaseio.com", projectId: "lqlk-5370b", storageBucket: "lqlk-5370b.appspot.com", messagingSenderId: "612878491224", appId: "1:612878491224:web:be9732520ddf14b97c742d", measurementId: "G-0QQYMZPR82" }; // Initialize Firebase var app = firebase.initializeApp(firebaseConfig); var db = firebase.firestore(app); var mainRef = db.collection('main').doc('live'); var streamRef = db.collection('main').doc('config'); var battingCardRef = db.collection('batting').orderBy('timestamp', 'asc'); var bowlingCardRef = db.collection('bowling').orderBy('timestamp', 'asc'); var inningRef = db.collection('innings'); new Vue({ el: "#live", data: { url: null }, created() { // streamRef.get().then(doc=>{ // this.url = doc.data().youtubelink; // }) } }); new Vue({ el: "#scorecard", data: { innings: [], battingCard: [], inningCard: [], bowlingCard: [] }, created() { streamRef .get() .then(doc => { this.innings = doc.data().inningOrder }) battingCardRef .get() .then(querySnapshot => { querySnapshot.forEach(doc => { this.battingCard.push(doc.data()) }); }) inningRef .get() .then(querySnapshot => { querySnapshot.forEach(doc => { this.inningCard.push(doc.data()) }) }); bowlingCardRef .get() .then(querySnapshot => { querySnapshot.forEach(doc => { this.bowlingCard.push(doc.data()) }) }); } }) new Vue({ el: "#mainScore", data: { msg: null, score: null, overs: null, wickets: null }, created() { mainRef.onSnapshot(doc => { this.msg = doc.data().message; this.score = doc.data().score; var balls = doc.data().balls; this.overs = Math.floor(balls / 6) + (balls % 6) / 10; this.wickets = doc.data().wickets; }) } }); Vue.component('batting-card', { props: ['inning', 'batting', 'innings'], computed: { battingCard: function() { var filter = { team: this.inning.team, inning: this.inning.inning } var players = this.batting.filter(function(player) { for (var key in filter) { if (player[key] === undefined || player[key] != filter[key]) return false; } return true }) return players; }, currentInning: function() { var filter = { team: this.inning.team, inning: this.inning.inning } var currrentInning = this.innings.filter(function(inning) { for (var key in filter) { if (inning[key] === undefined || inning[key] != filter[key]) return false; } return true }) return currrentInning; } }, template: ` <table class="table text-center"> <thead> <tr align="center"> <th>Batsman</th> <th style="text-align:center;" width="12%">Runs</th> <th style="text-align:center;" width="12%">Balls</th> <th style="text-align:center;" width="8%">4s</th> <th style="text-align:center;" width="8%">6s</th> <th style="text-align:center;" width="8%">S/R</th> </tr> </thead> <tbody> <tr v-for="(player, index) in battingCard"> <td style="text-align:left;padding-bottom:3px;padding-top:3px;">{{ player.name }}<br><span style="font-size: 12px;padding-top: 10px;font-style: italic;">{{ player.status }}</span></td> <td>{{ player.score }}</td> <td>{{ player.balls }}</td> <td>{{ player.four }}</td> <td>{{ player.six }}</td> <td v-if="player.balls !== 0">{{ ((player.score*100)/player.balls).toFixed(2) }}</td> <td v-else>0</td> </tr> <tr v-for="(inning, index) in currentInning"> <td style="text-align:left;" colspan="9"> Extras : {{inning.extra.total}} ( <span v-if="inning.extra.b !== 0"> b {{inning.extra.b}}</span> <span v-if="inning.extra.lb !== 0"> lb {{inning.extra.lb}}</span> <span v-if="inning.extra.nb !== 0"> nb {{inning.extra.nb}}</span> <span v-if="inning.extra.wd !== 0"> wd {{inning.extra.wd}}</span> ) </td> </tr> <tr v-for="(inning, index) in currentInning"> <td style="text-align:left;" colspan="9">Total : {{inning.score}}</td> </tr> </tbody> </table> ` }); Vue.component('bowling-card', { props: ['inning', 'bowling'], computed: { bowlingCard: function() { var filter = { team: this.inning.team, inning: this.inning.inning } var players = this.bowling.filter(function(player) { for (var key in filter) { if (player[key] === undefined || player[key] != filter[key]) return false; } return true }) return players; }, }, template: ` <div class="text table-responsive score-table"> <table class="table text-center score-table"> <thead> <tr align="center"> <th>Bowler</th> <th style="text-align:center;" width="12%">Overs</th> <th style="text-align:center;" width="12%">Runs</th> <th style="text-align:center;" width="12%">Maidens</th> <th style="text-align:center;" width="12%">Wickets</th> <th style="text-align:center;" width="8%">Econ</th> </tr> </thead> <tbody> <tr v-for="(player, index) in bowlingCard"> <td style="text-align:left;">{{ player.name }} </td> <td>{{ Math.floor(player.balls/6)+(player.balls%6)/10 }}</td> <td>{{ player.score }}</td> <td>{{ player.maiden }}</td> <td>{{ player.wickets }}</td> <td v-if="player.balls !== 0">{{ (player.score/(Math.floor(player.balls/6)+(player.balls%6)/10)).toFixed(2) }}</td> <td v-else>0</td> </tr> </tbody> </table> </div> ` }) </script> <script> document.getElementsByClassName('sk_branding')[0].style.visibility = 'hidden'; </script> </body> </html>