Implements welcome page.

app.js

@@ -1115,6 +1115,33 @@ function getCameraVideoSize(videoWidth,
 }
 
 $(document).ready(function () {
+
+    if(config.enableWelcomePage && window.location.pathname == "/")
+    {
+        $("#videoconference_page").hide();
+        $("#enter_room_button").click(function()
+        {
+            var val = Util.escapeHtml($("#enter_room_field").val());
+            window.location.pathname = "/" + val;
+        });
+
+        $("#enter_room_field").keydown(function (event) {
+            if (event.keyCode === 13) {
+                var val = Util.escapeHtml(this.value);
+                window.location.pathname = "/" + val;
+            }
+        });
+
+        if(!config.isBrand)
+        {
+            $("#brand_logo").hide();
+            $("#brand_header").hide();
+            $("#header_text").hide();
+        }
+        return;
+    }
+
+    $("#welcome_page").hide();
     Chat.init();
 
     $('body').popover({ selector: '[data-toggle=popover]',

config.js

@@ -19,5 +19,7 @@ var config = {
 //    channelLastN: -1, // The default value of the channel attribute last-n.
 //    useRtcpMux: true,
 //    useBundle: true,
-    enableRecording: false
+    enableRecording: false,
+    enableWelcomePage: false,
+    isBrand: false
 };

css/main.css

@@ -259,3 +259,153 @@ form {
     overflow: visible;
     z-index: 100;
 }
+
+#enter_room_field {
+    border-radius: 10px;
+    font-size: 16px;
+    padding: 15px 55px 10px 30px;
+    border: none;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    -webkit-appearance: none;
+    width: 318px;
+    height: 55px;
+    position:absolute;
+    font-weight: 500;
+    font-family: Helvetica;
+    box-shadow: none;
+    z-index: 2;
+ }
+
+#enter_room_button {
+    width: 73px;
+    height: 45px;
+    background-color: #16a8fe;
+    moz-border-radius: 15px;
+    -webkit-border-radius: 15px;
+    color: #ffffff;
+    font-weight: 600;
+    border: none;
+    position:absolute;
+    margin-left: 240px;
+    margin-top: 5px;
+    font-size: 19px;
+    font-family: Helvetica;
+    padding-top: 6px;
+    z-index: 2;
+    outline: none;
+}
+
+#enter_room {
+    margin: 70px auto 0px auto;
+    width:318px;
+}
+
+#welcome_page_header
+{
+    background-image: url(../images/welcome_page/pattern-header.png);
+    height: 290px;
+    width: 100%;
+    position: absolute;
+}
+
+#welcome_page_main
+{
+    background-image:url(../images/welcome_page/pattern-body.png);
+    width: 100%;
+    position: absolute;
+    margin-top: 290px;
+}
+
+#jitsi_logo
+{
+    background-image:url(../images/welcome_page/jitsi-logo.png);
+    width: 186px;
+    height: 74px;
+    position: absolute;
+    top: 15px;
+    left: 30px;
+}
+
+#brand_logo
+{
+    background-image:url(../images/welcome_page/unicef-logo.png);
+    width: 215px;
+    height: 55px;
+    position: absolute;
+    top: 15px;
+    right: 30px;
+
+}
+
+#brand_header
+{
+    background-image:url(../images/welcome_page/unicef-header-big.png);
+    position:absolute;
+    width: 583px;
+    height: 274px;
+    left: 340px;
+    top:15px;
+}
+
+#header_text
+{
+    position: absolute;
+    left: 200px;
+    top: 150px;
+    width: 885px;
+    height: 100px;
+    color: #ffffff;
+    font-family: Helvetica;
+    font-size: 24px;
+    text-align: center;
+}
+
+#features
+{
+    margin-top: 30px;
+}
+
+.feature_row
+{
+    width: 100%;
+    left: 115px;
+    position: relative;
+    float: left;
+    margin-bottom: 30px;
+}
+
+.feature_holder
+{
+    float:left;
+    width: 169px;
+    padding-left: 75px;
+}
+
+.feature_icon
+{
+    background-image:url(../images/welcome_page/bubble.png);
+    background-repeat: no-repeat;
+    width: 169px;
+    height: 169px;
+    font-family: Helvetica;
+    color: #ffffff;
+    font-size: 22px;
+    /*font-weight: bold;*/
+    text-align: center;
+    display: table-cell;
+    padding: 50px 29px 0px 17px;
+}
+
+.feature_description
+{
+    width: 169px;
+    font-family: Helvetica;
+    color: #ffffff;
+    font-size: 16px;
+    padding-top: 30px;
+    line-height: 22px;
+    font-weight: 200;
+}
+
+

index.html

@@ -1,4 +1,4 @@
-<html itemscope itemtype="http://schema.org/Product" prefix="og: http://ogp.me/ns#">
+<html itemscope itemtype="http://schema.org/Product" prefix="og: http://ogp.me/ns#" xmlns="http://www.w3.org/1999/html">
   <head>
     <title>Jitsi Videobridge meets WebRTC</title>
     <link rel="icon" type="image/png" href="/images/favicon.ico"/>
@@ -61,110 +61,186 @@
     <script src="libs/prezi_player.js?v=2"></script>
   </head>
   <body>
-    <div style="position: relative;" id="header_container">
-        <div id="header">
-            <span id="toolbar">
-                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Mute / Unmute" onclick='toggleAudio();'>
-                    <i id="mute" class="icon-microphone"></i>
-                </a>
-                <div class="header_button_separator"></div>
-                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Start / stop camera" onclick='buttonClick("#video", "icon-camera icon-camera-disabled");toggleVideo();'>
-                    <i id="video" class="icon-camera"></i>
-                </a>
-                <span id="recording" style="display: none">
+    <div id="welcome_page">
+        <div id="welcome_page_header">
+            <a href="http://jitsi.org" target="_new">
+                <div id="jitsi_logo"></div>
+            </a>
+            <a href="http://unicefuganda.org/" target="_new">
+                <div id="brand_logo"></div>
+            </a>
+            <div id="enter_room">
+                <input id="enter_room_field" type="text" placeholder="Enter room name" />
+                <input id="enter_room_button" type="button" value="GO" />
+            </div>
+            <div id="brand_header"></div>
+            <div id="header_text">
+                Welcome to uTalk! A free and open-source WebRTC video conferencing system developed by BlueJimp and UNICEF Uganda in collaboration with the Jitsi.org community.
+            </div>
+        </div>
+        <div id="welcome_page_main">
+            <div id="features">
+                <div class="feature_row">
+                    <div class="feature_holder">
+                        <div class="feature_icon">Simple to use</div>
+                        <div class="feature_description">
+                            No downloads required. uTalk works directly within your browser. Simply share your conference URL with others to get started.
+                        </div>
+                    </div>
+                    <div class="feature_holder">
+                        <div class="feature_icon">Low bandwidth</div>
+                        <div class="feature_description">
+                            Multi-party video conferences work with as little as 128Kbps. Screen-sharing and audio-only conferences are possible with far less.
+                        </div>
+                    </div>
+                    <div class="feature_holder">
+                        <div class="feature_icon">Open source</div>
+                        <div class="feature_description">
+                            uTalk is licensed under the &lt;GPL/LGPL/WHATEVER&gt;. You can download, use, modify, and share the software without any restrictions.
+                        </div>
+                    </div>
+                    <div class="feature_holder">
+                        <div class="feature_icon">Unlimited users</div>
+                        <div class="feature_description">
+                            There are no artificial restrictions on the number of users or conference participants. Server power and bandwidth are the only limiting factors.
+                        </div>
+                    </div>
+                </div>
+                <div class="feature_row">
+                    <div class="feature_holder">
+                        <div class="feature_icon">Screen sharing</div>
+                        <div class="feature_description">
+                            It's easy to share your screen with others. uTalk is ideal for on-line presentations, lectures, and tech support sessions.
+                        </div>
+                    </div>
+                    <div class="feature_holder">
+                        <div class="feature_icon">Secure rooms</div>
+                        <div class="feature_description">
+                            Need some privacy? uTalk conference rooms can be secured with a password in order to exclude unwanted guests and prevent interruptions.
+                        </div>
+                    </div>
+                    <div class="feature_holder">
+                        <div class="feature_icon">Shared notes</div>
+                        <div class="feature_description">
+                            uTalk features Etherpad, a real-time collaborative text editor that's great for meeting minutes, writing articles, and more.
+                        </div>
+                    </div>
+                    <div class="feature_holder">
+                        <div class="feature_icon">Usage statistics</div>
+                        <div class="feature_description">
+                            Learn about your users through easy integration with Piwik, Google Analytics, and other usage monitoring and statistics systems.
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="videoconference_page">
+        <div style="position: relative;" id="header_container">
+            <div id="header">
+                <span id="toolbar">
+                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Mute / Unmute" onclick='toggleAudio();'>
+                        <i id="mute" class="icon-microphone"></i>
+                    </a>
                     <div class="header_button_separator"></div>
-                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Record" onclick='toggleRecording();'>
-                        <i id="recordButton" class="icon-recEnable"></i>
+                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Start / stop camera" onclick='buttonClick("#video", "icon-camera icon-camera-disabled");toggleVideo();'>
+                        <i id="video" class="icon-camera"></i>
                     </a>
-                </span>
-                <div class="header_button_separator"></div>
-                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Lock / unlock room" onclick="Toolbar.openLockDialog();">
-                    <i id="lockIcon" class="icon-security"></i>
-                </a>
-                <div class="header_button_separator"></div>
-                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Invite others" onclick="Toolbar.openLinkDialog();">
-                    <i class="icon-link"></i>
-                </a>
-                <div class="header_button_separator"></div>
-                <span class="toolbar_span">
-                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Open / close chat" onclick='Chat.toggleChat();'>
-                        <i id="chatButton" class="icon-chat"></i>
+                    <span id="recording" style="display: none">
+                        <div class="header_button_separator"></div>
+                        <a class="button" data-toggle="popover" data-placement="bottom" data-content="Record" onclick='toggleRecording();'>
+                            <i id="recordButton" class="icon-recEnable"></i>
+                        </a>
+                    </span>
+                    <div class="header_button_separator"></div>
+                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Lock / unlock room" onclick="Toolbar.openLockDialog();">
+                        <i id="lockIcon" class="icon-security"></i>
                     </a>
-                    <span id="unreadMessages"></span>
-                </span>
-                <div class="header_button_separator"></div>
-                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Share Prezi" onclick='Prezi.openPreziDialog();'>
-                    <i class="icon-prezi"></i>
-                </a>
-                <span id="etherpadButton">
                     <div class="header_button_separator"></div>
-                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Shared document" onclick='Etherpad.toggleEtherpad(0);'>
-                        <i class="icon-share-doc"></i>
+                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Invite others" onclick="Toolbar.openLinkDialog();">
+                        <i class="icon-link"></i>
                     </a>
-                </span>
-                <div class="header_button_separator"></div>
-                <span id="desktopsharing" style="display: none">
-                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Share screen" onclick="toggleScreenSharing();">
-                        <i class="icon-share-desktop"></i>
+                    <div class="header_button_separator"></div>
+                    <span class="toolbar_span">
+                        <a class="button" data-toggle="popover" data-placement="bottom" data-content="Open / close chat" onclick='Chat.toggleChat();'>
+                            <i id="chatButton" class="icon-chat"></i>
+                        </a>
+                        <span id="unreadMessages"></span>
+                    </span>
+                    <div class="header_button_separator"></div>
+                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Share Prezi" onclick='Prezi.openPreziDialog();'>
+                        <i class="icon-prezi"></i>
                     </a>
-                </span>
-                <div class="header_button_separator"></div>
-                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Enter / Exit Full Screen" onclick='buttonClick("#fullScreen", "icon-full-screen icon-exit-full-screen");Toolbar.toggleFullScreen();'>
-                    <i id="fullScreen" class="icon-full-screen"></i>
-                </a>
-                <span id="sipCallButton">
+                    <span id="etherpadButton">
+                        <div class="header_button_separator"></div>
+                        <a class="button" data-toggle="popover" data-placement="bottom" data-content="Shared document" onclick='Etherpad.toggleEtherpad(0);'>
+                            <i class="icon-share-doc"></i>
+                        </a>
+                    </span>
+                    <div class="header_button_separator"></div>
+                    <span id="desktopsharing" style="display: none">
+                        <a class="button" data-toggle="popover" data-placement="bottom" data-content="Share screen" onclick="toggleScreenSharing();">
+                            <i class="icon-share-desktop"></i>
+                        </a>
+                    </span>
                     <div class="header_button_separator"></div>
-                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Call SIP number" onclick='callSipButtonClicked();'>
-                        <i class="icon-telephone"></i></a>
+                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Enter / Exit Full Screen" onclick='buttonClick("#fullScreen", "icon-full-screen icon-exit-full-screen");Toolbar.toggleFullScreen();'>
+                        <i id="fullScreen" class="icon-full-screen"></i>
+                    </a>
+                    <span id="sipCallButton">
+                        <div class="header_button_separator"></div>
+                        <a class="button" data-toggle="popover" data-placement="bottom" data-content="Call SIP number" onclick='callSipButtonClicked();'>
+                            <i class="icon-telephone"></i></a>
+                    </span>
                 </span>
-            </span>
+            </div>
+            <div id="subject"></div>
         </div>
-        <div id="subject"></div>
-    </div>
-    <div id="settings">
-      <h1>Connection Settings</h1>
-      <form id="loginInfo">
-        <label>JID: <input id="jid" type="text" name="jid" placeholder="me@example.com"/></label>
-        <label>Password: <input id="password" type="password" name="password" placeholder="secret"/></label>
-        <label>BOSH URL: <input id="boshURL" type="text" name="boshURL" placeholder="/http-bind"/></label>
-        <input id="connect" type="submit" value="Connect" />
-      </form>
-    </div>
-    <div id="reloadPresentation"><a onclick='Prezi.reloadPresentation();'><i title="Reload Prezi" class="fa fa-repeat fa-lg"></i></a></div>
-    <div id="videospace" onmousemove="Toolbar.showToolbar();">
-        <div id="largeVideoContainer" class="videocontainer">
-            <div id="presentation"></div>
-            <div id="etherpad"></div>
-            <a href="http://jitsi.org" target="_new"><div class="watermark" id="leftwatermark"></div></a>
-            <!-- a href="http://jitsi.org" target="_new"><div class="watermark" id="rightwatermark"></div></a -->
-            <video id="largeVideo" autoplay oncontextmenu="return false;"></video>
+        <div id="settings">
+          <h1>Connection Settings</h1>
+          <form id="loginInfo">
+            <label>JID: <input id="jid" type="text" name="jid" placeholder="me@example.com"/></label>
+            <label>Password: <input id="password" type="password" name="password" placeholder="secret"/></label>
+            <label>BOSH URL: <input id="boshURL" type="text" name="boshURL" placeholder="/http-bind"/></label>
+            <input id="connect" type="submit" value="Connect" />
+          </form>
         </div>
-        <div id="remoteVideos">
-            <span id="localVideoContainer" class="videocontainer">
-                <span id="localNick" class="nick"></span>
-                <span id="localVideoWrapper">
-                    <!--<video id="localVideo" autoplay oncontextmenu="return false;" muted></video> - is now per stream generated -->
+        <div id="reloadPresentation"><a onclick='Prezi.reloadPresentation();'><i title="Reload Prezi" class="fa fa-repeat fa-lg"></i></a></div>
+        <div id="videospace" onmousemove="Toolbar.showToolbar();">
+            <div id="largeVideoContainer" class="videocontainer">
+                <div id="presentation"></div>
+                <div id="etherpad"></div>
+                <a href="http://jitsi.org" target="_new"><div class="watermark" id="leftwatermark"></div></a>
+                <!-- a href="http://jitsi.org" target="_new"><div class="watermark" id="rightwatermark"></div></a -->
+                <video id="largeVideo" autoplay oncontextmenu="return false;"></video>
+            </div>
+            <div id="remoteVideos">
+                <span id="localVideoContainer" class="videocontainer">
+                    <span id="localNick" class="nick"></span>
+                    <span id="localVideoWrapper">
+                        <!--<video id="localVideo" autoplay oncontextmenu="return false;" muted></video> - is now per stream generated -->
+                    </span>
+                    <audio id="localAudio" autoplay oncontextmenu="return false;" muted></audio>
+                    <span class="focusindicator"></span>
                 </span>
-                <audio id="localAudio" autoplay oncontextmenu="return false;" muted></audio>
-                <span class="focusindicator"></span>
-            </span>
-            <audio id="userJoined" src="sounds/joined.wav" preload="auto"></audio>
-            <audio id="userLeft" src="sounds/left.wav" preload="auto"></audio>
-        </div>
-    </div>
-    <div id="chatspace">
-        <div id="nickname">
-            Enter a nickname in the box below
-            <form>
-                <input type='text' id="nickinput" placeholder='Choose a nickname' autofocus>
-            </form>
+                <audio id="userJoined" src="sounds/joined.wav" preload="auto"></audio>
+                <audio id="userLeft" src="sounds/left.wav" preload="auto"></audio>
+            </div>
         </div>
+        <div id="chatspace">
+            <div id="nickname">
+                Enter a nickname in the box below
+                <form>
+                    <input type='text' id="nickinput" placeholder='Choose a nickname' autofocus>
+                </form>
+            </div>
 
-        <!--div><i class="fa fa-comments">&nbsp;</i><span class='nick'></span>:&nbsp;<span class='chattext'></span></div-->
-        <div id="chatconversation"></div>
-        <audio id="chatNotification" src="sounds/incomingMessage.wav" preload="auto"></audio>
-        <textarea id="usermsg" placeholder='Enter text...' autofocus></textarea>
+            <!--div><i class="fa fa-comments">&nbsp;</i><span class='nick'></span>:&nbsp;<span class='chattext'></span></div-->
+            <div id="chatconversation"></div>
+            <audio id="chatNotification" src="sounds/incomingMessage.wav" preload="auto"></audio>
+            <textarea id="usermsg" placeholder='Enter text...' autofocus></textarea>
+        </div>
+        <a id="downloadlog" onclick='dump(event.target);' data-toggle="popover" data-placement="right" data-content="Download logs" ><i class="fa fa-cloud-download"></i></a>
     </div>
-    <a id="downloadlog" onclick='dump(event.target);' data-toggle="popover" data-placement="right" data-content="Download logs" ><i class="fa fa-cloud-download"></i></a>
   </body>
 </html>