Advertisement
Guest User

Untitled

a guest
Jul 20th, 2018
97
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 10.01 KB | None | 0 0
  1. <html lang="en">
  2. <head>
  3.     <!-- Meta Info
  4.    �������������������������������������������������� -->
  5.     <meta charset="utf-8">
  6.     <title>DupliMark: Webinar</title>
  7.     <meta name="description" content="Duplimark makes marketing Simple & Easy utilizing our main business strategy: Learn, Grow, Manage. Let us guide your business through this process from start to finish with our revolutionary tools, trianing, and strategies.">
  8.     <meta name="author" content="Duplimark Corporation">
  9.     <meta name="keywords" content="marketing simple easy duplimark business strategies grow learn manage market">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1">
  11.  
  12.     <!-- Scripts
  13.    �������������������������������������������������� -->
  14.     <script src="/socket.io/socket.io.js"></script>
  15.     <script type="text/javascript" src="/easyrtc/easyrtc.js"></script>
  16.     <script type="text/javascript" src="jquery.min.js"></script>
  17.     <script type="text/javascript" src="PushAPI.js"></script>
  18.     <script type="text/javascript" src="keys.js"></script>
  19.     <script type="text/javascript" src="ertc.js"></script>
  20.     <script src="https://cdn.WebRTC-Experiment.com/getScreenId.js"></script>
  21.     <script>
  22.         function keyPress(e) {
  23.             // if user pressed [Enter]
  24.             if (e.keyCode === 13) {
  25.                 e.preventDefault();
  26.                 sendMessage();
  27.             }
  28.         }
  29.     </script>
  30.     <script>
  31.         function openTab(evt, tabName) {
  32.             var i, tabcontent, tablinks;
  33.             tabcontent = document.getElementsByClassName("tabcontent");
  34.             for (i = 0; i < tabcontent.length; i++) {
  35.                tabcontent[i].style.display = "none";
  36.            }
  37.            tablinks = document.getElementsByClassName("tablinks");
  38.            for (i = 0; i < tablinks.length; i++) {
  39.                tablinks[i].className = tablinks[i].className.replace(" active", "");
  40.            }
  41.            document.getElementById(tabName).style.display = "block";
  42.            evt.currentTarget.className += " active";
  43.        }
  44.    </script>
  45.  
  46.     <!-- Style Needs
  47.    �������������������������������������������������� -->
  48.     <link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
  49.     <link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
  50.     <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
  51.  
  52.     <link rel="stylesheet" href="https://duplimark.com/Content/normalize.css">
  53.     <link rel="stylesheet" href="https://duplimark.com/Content/UI/skeleton.css">
  54.     <link rel="stylesheet" href="https://duplimark.com/Content/UI/dashboard.css">
  55.     <link rel="stylesheet" href="https://duplimark.com/Content/UI/VIPThemes/vipdefaultlight.css" id="style">
  56.     <style>/* Temp Copy from VIPTheme stylesheet */#logo { background: url('https://duplimark.com/Images/UI/Front/Duplimark.png') no-repeat;background-size: auto 100%; }.back { background: #e9eaee url('https://duplimark.com/Images/UI/VIPThemes/smoke2.png') no-repeat top left; }</style>
  57.  
  58.     <style>
  59.         /* Basic Page Needs */
  60.         video {
  61.             border: 1px solid black;
  62.             background: black;
  63.             width: 100%;
  64.         }
  65.  
  66.         #users {
  67.             display: block;
  68.         }
  69.  
  70.         .point {
  71.             margin: 0;
  72.             display: inline;
  73.             position: relative;
  74.         }
  75.  
  76.         .above {
  77.             position: absolute;
  78.             width: 12em;
  79.             left: 1vw;
  80.         }
  81.  
  82.         #input {
  83.             width: 100%;
  84.         }
  85.        
  86.         #inputWrapper {
  87.             padding: 10%;
  88.             padding-top: 1%;
  89.             transform: translateY(-10%);
  90.         }
  91.                
  92.         #msgbox div {
  93.             display: inline-block;
  94.         }
  95.  
  96.     <style>
  97.         /* Style the tab */
  98.         .tab {
  99.             padding-top: 3px;
  100.         }
  101.  
  102.         /* Style the buttons inside tab */
  103.         .tablinks {
  104.             background: linear-gradient(#eae9e9 10%, white 80%, lightgray);
  105.             padding: 10px 15px;
  106.             margin-right: 5px;
  107.             line-height: 37px;
  108.             border-top-left-radius: 3px;
  109.             border-top-right-radius: 3px;
  110.             cursor: pointer;
  111.             transition: 0.3s;
  112.         }
  113.  
  114.         /* Change background color of buttons on hover */
  115.         .tablinks:hover {
  116.             background-color: #ddd;
  117.         }
  118.  
  119.  
  120.         /* Style the tab content */
  121.         .tabcontent {
  122.             display: none;
  123.             padding: 6px 12px;
  124.             border: 1px solid #ccc;
  125.             border-top: none;
  126.             height: 494px;
  127.             overflow: auto;
  128.             background: white;
  129.         }
  130.     </style>
  131.     <style>
  132.         /* Initial UI styles */
  133.         h2 {
  134.             font-size: 3rem
  135.         }
  136.  
  137.         .row {
  138.             max-width: 1400px
  139.         }
  140.  
  141.         .back {
  142.             position: relative;
  143.             padding: 5%;
  144.         }
  145.  
  146.         #overlay {
  147.             position: absolute;
  148.             top: 0px;
  149.             z-index: 100;
  150.             color: #fff;
  151.             cursor: pointer;
  152.             display: none;
  153.             width: 100%;
  154.             height: 100%;
  155.         }
  156.  
  157.         .bigbutton {
  158.             background: green;
  159.             background: -webkit-linear-gradient(lightgreen, green);
  160.             background: linear-gradient(lightgreen, green);
  161.             box-shadow: 1px 1px 20px black;
  162.             color: white;
  163.             text-shadow: -1px -1px 1px grey;
  164.             padding: 7px 20px 7px 20px;
  165.             text-decoration: none;
  166.             border-radius: 5px
  167.         }
  168.  
  169.         #roomVideo {
  170.             width: 100%;
  171.         }
  172.  
  173.         @media (max-width: 550px) {
  174.             #list {
  175.                 height: auto
  176.             }
  177.         }
  178.  
  179.         @media (max-width: 750px) {
  180.             .videos {
  181.                 background: none;
  182.                 margin-bottom: 20px
  183.             }
  184.         }
  185.  
  186.         @media (min-width: 750px) {
  187.             .videos, #list {
  188.                 box-shadow: 0px 0px 10px #000000;
  189.                 height: 600px
  190.             }
  191.         }
  192.     </style>
  193.  
  194.     <!-- Favicon
  195.    �������������������������������������������������� -->
  196.     <link rel="icon" type="image/png" href="https://duplimark.com/Images/UI/Front/Duplimark_favicon.png">
  197. </head>
  198.  
  199. <!-- Body
  200. �������������������������������������������������� -->
  201. <body onload="openTab(event, 'info'); start_tasks();">
  202.     <div class="container u-full-width" id="navbar">
  203.         <div id="logo">&nbsp;</div>
  204.     </div>
  205.     <div class="container u-full-width back" style="">
  206.         <h2 class="color" style="margin-bottom:5px;">Live Webinar Event</h2>
  207.         <h4 class="color">Hosted by <span id="author">[Name]</span></h4>
  208.         <div class="row">
  209.             <div class="two-thirds column videos">
  210.                 <div id="roomVideo">
  211.                     <video id="stream" width="600" height="480"></video>
  212.                     <iframe id="screen" width="1200" height="960" style="display:none" src="about:blank"></iframe>
  213.                     <br><br>
  214.                     <div id="inputWrapper">
  215.                         <textarea id="input" onkeypress="keyPress(event)" style="width:600px" placeholder="Truncates messages longer than 500 characters"></textarea>
  216.                     </div>
  217.                 </div>
  218.                 <div class="point" id="joinRoomH" style="display:none"><p>Note: once you join the room, your camera will become active</p></div>
  219.                 <div class="point" id="installPlugin" style="display:none">
  220.                     <p>In order to share your screen, install <a href="https://chrome.google.com/webstore/detail/screen-capturing/ajhifddimkapgcifgcodmmfdlknahffk" target="_blank">this</a></p>
  221.                 </div>
  222.                 <div class="point" id="joinRoom"><button class="above" onclick="init_connection();">Join</button></div>
  223.                 <div class="point" id="loadmsg"><small class="above" style="margin-top:15px">Loading...</small></div>
  224.                 <div id="overlay">
  225.                     <h5><span class="bigbutton">Special Offer</span></h5>
  226.                 </div>
  227.             </div>
  228.             <div class="one-third column list" id="list">
  229.                 <div id="tabBox" style="display: none;">
  230.                     <div class="tab">
  231.                         <span class="tablinks" onclick="openTab(event, 'msgbox')">Chat</span>
  232.                         <span class="tablinks" onclick="openTab(event, 'users')">Users</span>
  233.                         <span class="tablinks" onclick="openTab(event, 'info')">Information</span>
  234.                     </div>
  235.                     <div id="msgbox" class="tabcontent" style="display:none"></div>
  236.                     <div id="users" class="tabcontent" style="display:none"><ul></ul></div>
  237.                     <div id="info" class="tabcontent" style="display:none">
  238.                         <div id="infoTitle"></div><br />
  239.                         <div id="infoHost"></div><br />
  240.                         <br />
  241.                         <button class="point" id="shareScreen" onclick="share_screen();" style="display:none">Share Screen</button><br />
  242.                         <button class="point" id="expireRoom" onclick="expire_room();" style="display:none">End Webinar</button><br />
  243.                     </div>
  244.                 </div>
  245.             </div>
  246.         </div><!-- -End Row -->
  247.     </div><!-- End Back -->
  248.     <footer id="foot">
  249.         &copy; 2018 <a href="/">DupliMark.com</a>
  250.     </footer>
  251. </body>
  252. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement