David A. Windham
david
/
daveo-webrtc
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

format for site

windhamdavid 9 years ago
parent
35a5df4159
commit
c240d84022
4 changed files with 73 additions and 85 deletions
Split View Show Diff Stats
  1. 4 23
      package.json
  2. 24 13
      site/index.html
  3. 5 12
      site/script.js
  4. 40 37
      site/style.css

+ 4 - 23
package.json
View File 

@@ -1,7 +1,7 @@
 
 {
 
-  "name": "MultiWebRTC",
 
-  "description": "Example of multi user webrtc",
 
-  "version": "0.0.2-1",
 
+  "name": "webrtc",
 
+  "description": "webrtc",
 
+  "version": "0.0.1",
 
   "engines": {
 
     "node": ">= 0.6.0"
 
   },
 
@@ -10,24 +10,5 @@
 
     "webrtc.io-client": "latest",
 
     "express": "3.1.0",
 
     "ws": "latest"
 
-  },
 
-  "subdomain": "MultiWebRTC",
 
-  "scripts": {
 
-    "start": "example/server.js"
 
-  },
 
-  "author": "Ben Brittain",
 
-  "contributors": [
 
-    {
 
-      "name": "Ben Brittain",
 
-      "email": "ben@brittain.org"
 
-    },
 
-    {
 
-      "name": "Dennis Mårtensson",
 
-      "email": "me@dennis.is"
 
-    },
 
-    {
 
-      "name": "David Peter",
 
-      "email": "david.a.peter@gmail.com"
 
-    }
 
-  ]
 
+  }
 
 }

+ 24 - 13
site/index.html
View File 

@@ -1,14 +1,25 @@
 
-<html>
 
-  <head>
 
-    <title>Daveo (chat)</title>
 
-    <link type="text/css" href="/style.css" rel="stylesheet"></link>
 
-    <script src="/webrtc.io.js"></script>
 
-  </head>
 
-  <body onload="init()">
 
-    <div id="videos">
 
-      <video id="you" class="flip" autoplay width="263" height="200" style="position: absolute; left: 0px; bottom: 0px;"></video>
 
-    </div>
 
-	<p style="color:white;font-family:helvetica;float:right;margin:0 10px 0 0"><small>fyi: you'll get a feedback loop if your volume be too high</small></p>
 
-    <script src="/script.js"></script>
 
-  </body>
 
+<!DOCTYPE html>
 
+<html lang="en-US">
 
+<head>
 
+<meta charset="UTF-8" />
 
+<meta name="viewport" content="width=device-width, initial-scale=1">
 
+<head>
 
+<title>David</title>
 
+<link type="text/css" href="/style.css" rel="stylesheet"></link>
 
+<script src="/webrtc.io.js"></script>
 
+</head>
 
+<body onload="init()">
 
+	<div id="videos">
 
+		<video muted="muted" id="you" class="flip" autoplay width="263" height="200" style="position: absolute; left: 0px; bottom: 0px;"></video>
 
+	</div>
 
+	<div id="chatbox">
 
+		<div id="messages"></div>
 
+		<input id="chatinput" type="text" placeholder="Message:"/>
 
+	</div>
 
+	<div class="buttonBox">
 
+		<div id="hideShowMessages" class="button chat">chat</div>
 
+		<div id="newRoom" class="button room">&clubs;</div>
 
+	</div>
 
+<script src="/script.js"></script>
 
+</body>
 
 </html>

+ 5 - 12
site/script.js
View File 

@@ -60,9 +60,9 @@ function addToChat(msg, color) {
 
   var messages = document.getElementById('messages');
 
   msg = sanitize(msg);
 
   if(color) {
 
-    msg = '<span style="color: ' + color + '; padding-left: 15px">' + msg + '</span>';
 
+    msg = '<span style="color: ' + color + '; padding-left:5px">' + msg + '</span>';
 
   } else {
 
-    msg = '<strong style="padding-left: 15px">' + msg + '</strong>';
 
+    msg = '<span>' + msg + '</span>';
 
   }
 
   messages.innerHTML = messages.innerHTML + msg + '<br>';
 
   messages.scrollTop = 10000;
 
@@ -72,14 +72,7 @@ function sanitize(msg) {
 
   return msg.replace(/</g, '&lt;');
 
 }
 
 
-function initFullScreen() {
 
-  var button = document.getElementById("fullscreen");
 
-  button.addEventListener('click', function(event) {
 
-    var elem = document.getElementById("videos");
 
-    //show full screen
 
-    elem.webkitRequestFullScreen();
 
-  });
 
-}
 
+
 
 
 function initNewRoom() {
 
   var button = document.getElementById("newRoom");
 
@@ -187,7 +180,7 @@ function init() {
 
       //subdivideVideos();
 
     });
 
   } else {
 
-    alert('Your browser is not supported or you have to turn on flags. In chrome you go to chrome://flags and turn on Enable PeerConnection remember to restart chrome');
 
+    alert('Your browser is not supported');
 
   }
 
 
 
@@ -206,7 +199,7 @@ function init() {
 
     console.log('remove ' + data);
 
     removeVideo(data);
 
   });
 
-  initFullScreen();
 
+
 
   initNewRoom();
 
   initChat();
 
 }

+ 40 - 37
site/style.css
View File 

@@ -1,17 +1,14 @@
 
 html, body {
 
   height: 100%;
 
 }
 
-
 
 html {
 
   overflow-y: scroll;
 
 }
 
-
 
 body {
 
   padding: 0;
 
   margin: 0;
 
   background: #000000;
 
 }
 
-
 
 #videos {
 
   position: absolute;
 
   top: 0px;
 
@@ -20,56 +17,45 @@ body {
 
   bottom: 0px;
 
   z-index: 0;
 
 }
 
-
 
+.flip {
 
+-webkit-transform: rotateY(180deg);
 
+}
 
 #chatbox {
 
   position: absolute;
 
-  right: 20px;
 
-  bottom: 0px;
 
+  right: 1px;
 
+  bottom: 1px;
 
   z-index: 1;
 
 }
 
-
 
 #chatinput {
 
-  background: none repeat scroll 0 0 #F9F9F9;
 
-  border: 1px solid #CCCCCC;
 
-  border-radius: 0px 0px 5px 5px;
 
-  font: 300 18px/40px 'light','Helvetica Neue',Arial,Helvetica,sans-serif;
 
-  height: 40px;
 
-  letter-spacing: 1px;
 
+  background: repeat scroll 0 0 #fff;
 
+  font: 16px/18px 'Helvetica Neue',Arial,Helvetica,sans-serif;
 
+  height: 20px;
 
   margin-bottom: 0px;
 
-  padding: 5px 10px;
 
-  width: 277px;
 
+  padding: 5px;
 
+  width: 246px;
 
 }
 
-
 
 #messages {
 
   overflow: scroll;
 
-  background: none repeat scroll 0 0 #F9F9F9;
 
-  border: 1px solid #CCCCCC;
 
-  border-radius: 5px 5px 0px 0px;
 
-  font: 300 18px/40px 'light','Helvetica Neue',Arial,Helvetica,sans-serif;
 
-  height: 400px;
 
+  background: none repeat scroll 0 0 #cecece;
 
+  font: 16px/18px 'Helvetica Neue',Arial,Helvetica,sans-serif;
 
+  height: 154px;
 
   letter-spacing: 1px;
 
   margin-bottom: 0px;
 
-  padding: 5px 10px;
 
-  width: 255px;
 
+  padding: 5px;
 
+  width: 250px;
 
 }
 
-
 
-.flip {
 
--webkit-transform: rotateY(180deg);
 
-}
 
-
 
 .buttonBox {
 
   position: absolute;
 
-  top: 2px;
 
-  left: 2px;
 
+  top: 1px;
 
+  right: 1px;
 
   z-index: 1;
 
 }
 
+#hideShowMessages.chat {display:none;}
 
+#newRoom.room {display:none;}
 
 .button {
 
   -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
 
   -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
 
   box-shadow:inset 0px 1px 0px 0px #ffffff;
 
-  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
 
-  background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
 
-  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
 
   background-color:#ededed;
 
   -moz-border-radius:6px;
 
   -webkit-border-radius:6px;
 
@@ -78,13 +64,30 @@ body {
 
   display:inline-block;
 
   color:#777777;
 
   font-family:arial;
 
-  font-size:15px;
 
+  font-size:10px;
 
   font-weight:bold;
 
-  padding:6px 24px;
 
+  padding:5px;
 
   text-decoration:none;
 
-  text-shadow:1px 1px 0px #ffffff;
 
 }
 
-
 
+.btn {
 
+  display: inline-block;
 
+  padding: 6px 12px;
 
+  margin-bottom: 0;
 
+  font-size: 14px;
 
+  font-weight: normal;
 
+  line-height: 1.42857143;
 
+  text-align: center;
 
+  white-space: nowrap;
 
+  vertical-align: middle;
 
+  cursor: pointer;
 
+  -webkit-user-select: none;
 
+     -moz-user-select: none;
 
+      -ms-user-select: none;
 
+          user-select: none;
 
+  background-image: none;
 
+  border: 1px solid transparent;
 
+  border-radius: 4px;
 
+}
 
 .button:hover {
 
   background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
 
   background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );