BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New BigBlueButton Landing Page

Browse Source
This commit is contained in:
Tyler Copeland 2012-01-26 15:35:04 -05:00
parent b8af5fb241
commit fa54fdbf98
4 changed files with 98 additions and 324 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

323
bigbluebutton-config/web/css/style.css
View File

@ -1,297 +1,50 @@
@charset "UTF-8";
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
body {margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background-image:url(../images/bg.png); color:#777;}
img { border:0; }
img {
border:0;
}
h1, h2, h3 { margin: 0; color: #00445E; letter-spacing:0.5px; font-weight:100; line-height: 125%; text-shadow: 0 2px 0 rgba(0, 0, 0, .15);}
h1 { font-size: 40px;}
h2 { font-size: 24px; margin-top:13px;}
h3 { font-size: 18px; margin-top:10px; text-align: center;}
h1 {
font-size: 40px;
margin: 0;
font-family:"Helvetica";
/* color: #555b63; */
color: #919da6;
letter-spacing:0.5px;
font-weight:100;
line-height: 125%;
}
h1.api{
font-size: 18px;
margin: 0;
font-family:"Trebuchet MS";
font-weight:bold;
color: #303030;
letter-spacing:0.5px;
}
h2 {
font-size: 25px;
margin: 0;
margin-top:13px;
font-family:"Helvetica";
color: #919da6;
letter-spacing:0.5px;
font-weight:100;
line-height: 125%;
}
h2.api{
font-size: 16px;
margin: 0;
font-family:"Trebuchet MS";
font-weight:bold;
color: #666;
}
h3 {
font-size: 14px;
margin:0;
font-family:"Helvetica";
color: #000;
}
p, ol {
margin: 0 0 0.2em 0;
/* text-align: justify; */
font-family: Arial, Helvetica, sans-serif;
color: #303030;
}
p.small{
/* text-align: justify; */
font-family: Arial, Helvetica, sans-serif;
color: #666;
letter-spacing:0.5px;
font-size:11px;
margin-top:10px;
}
p.content {
margin: 0.5em 0 0.5em 0;
/* text-align: justify; */
font-family:"Helvetica";
line-height:20px;
letter-spacing:0.2px;
color: #303030;
}
p.join{
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
color: #303030;
margin-top:-20px;
margin-left:30px;
}
ul{
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
}
li {
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
}
a{
color:#adb1ca;
text-decoration:none;
}
a:hover{
color:#919da6;
text-decoration:underline;
}
a:active{
color:#919da6;
text-decoration:underline;
}
#wrapper {
background: #b2bad9;
height: 136px;
}
p, ol { margin: 0 0 0.2em 0; }
p.small { color: #666; letter-spacing:0.5px; font-size:11px; margin-top:10px; }
p.content { margin: 0.5em 0 0.5em 0; line-height:20px; letter-spacing:0.2px; }
p.join{ text-align: justify; margin-top:-20px; margin-left:30px;}
ul, li {text-align: justify; }
a { color: #00445E; text-decoration:none; }
a:hover { text-decoration:underline; }
/* Header */
#header { height: 75px; }
#header_content { width: 278px; height: auto; margin: 0 auto 20px auto; padding-top: 10px; }
#logo { display:block; float: left; height: 89px; width: 364px; margin-top: 10px;}
#versionNum { display:block; float: right; margin-top: 15px; width:250px; height:50px; }
#versionNum p { text-align: right; color:#404040;}
#header {
width: 800px;
height: 120px;
margin: 0 auto 20px auto;
padding-top: 10px;
/*border:solid #FF0000 1px;*/
}
#header_bottom {
width:800px;
height:21px;
margin: 0 auto;
}
#logo {
float: left;
height: 89px;
width: 364px;
margin-top: 10px;
}
#logo a {
text-decoration: none;
}
#slogan{
float:right;
margin-top:-25px;
letter-spacing:1px;
}
#versionNum{
float: right;
margin-top: 15px;
/*border:solid #666 1px;*/
width:250px;
height:50px;
}
#menu {
margin-left:-5px;
}
#menu ul {
margin: 0;
padding: 0 0 0 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
background:#d5d9ec;
float:left;
margin-left: 5px;
padding: 7px 10px;
line-height: 140%;
font-family:"Trebuchet MS";
letter-spacing:1px;
font-size: 12pt;
text-decoration: none;
color: #666;
border-bottom:solid #666 1px;
margin-top:20px;
}
#menu a:hover {
background:#c0c4d4;
}
#menu a:active {
background:#c0c4d4;
}
/* Page */
#nav{
width: 700px;
margin: 0 auto;
}
#content {
width: 800px;
height:auto;
min-height: 400px;
margin: 0 auto;
/*padding: 20px 20px;*/
margin-top:32px;
/*border:solid #FF0000 1px;*/
}
#content_api {
width: 750px;
height:auto;
min-height: 400px;
margin: 0 auto;
padding: 20px 20px;
margin-top:56px;
border:solid #666 1px;
}
#welcome{
width:452px;
height:200px;
/*border:solid #666 1px;*/
float:left;
}
#join{
width:315px;
height:200px;
/*border:solid #666 1px;*/
float:right;
}
#about{
width:452px;
height:200px;
/*border:solid #666 1px;*/
margin-top:15px;
float:left;
}
#api{
width:315px;
height:200px;
/*border:solid #666 1px;*/
margin-top:15px;
float:right;
}
/* Content */
#main { margin: 0 auto; position: relative; width: 800px;}
#main_content { margin-top:40px; height:580px; padding:30px; border:solid #D7D8D9 1px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; box-shadow: 0 1px 0 #fff, inset 0 2px 3px rgba(0,0,0,0.06), inset 0 0 2px rgba(0,0,0,0.04); text-shadow: 0 1px 0 white; }
#content_api { width: 750px; height:auto; min-height: 400px; margin: 0 auto; padding: 20px 20px; margin-top:56px; border:solid #666 1px; }
#welcome { width:390px; height:250px; display: block; float:left; }
#welcome img { padding-right:10px; padding-top: 3px;}
#join { width:295px; height:250px; display:block; float:right; }
#vids { height:215px; }
.vids_1 { display:block; float:left; padding-top:10px; }
.vids_2 { display:block; float:left; padding-top:10px; }
.vids_3 { display:block; float:left; padding-top:10px; }
.left { margin-left: 60px; }
.field{width: 175px;font-family: Arial, Helvetica, sans-serif; border: 1px solid #9dabb8; font-size:13px; padding:4px 5px 6px 10px; color: #919aa7; height: 19px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; -webkit-box-shadow: inset 0 3px 5px 1px #dee2e7; -moz-box-shadow: inset 0 1px 5px 1px #dee2e7; box-shadow: inset 0 1px 3px 1px #dee2e7; background: #f1f3f6; text-shadow: 0 2px 0 #fff; margin-top: 15px; }
.submit_btn { margin-left:-5px; width: 95px; height:31px; color: #00445e; border: 1px solid #9dabb8; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; -webkit-border-top-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; background-image: -webkit-gradient(linear, center top, center bottom, from(#fcfcfc), to(#bfbfbf), color-stop(3%, #f7f7f7), color-stop(12%, #f2f2f2), color-stop(90%, #d9d9d9)); background-image: -webkit-linear-gradient(top, #fcfcfc, #f7f7f7 3%, #f2f2f2 12%, #d9d9d9 90%, #bfbfbf); background-image: -moz-linear-gradient(top, #fcfcfc, #f7f7f7 3%, #f2f2f2 12%, #d9d9d9 90%, #bfbfbf); background-image: -o-linear-gradient(top, #fcfcfc, #f7f7f7 3%, #f2f2f2 12%, #d9d9d9 90%, #bfbfbf); background-image: -ms-linear-gradient(top, #fcfcfc, #f7f7f7 3%, #f2f2f2 12%, #d9d9d9 90%, #bfbfbf); background-image: linear-gradient(to bottom, #fcfcfc, #f7f7f7 3%, #f2f2f2 12%, #d9d9d9 90%, #bfbfbf);}
.arrow { background: transparent url(../images/arrow.png) no-repeat; padding: 5px 6px 5px 30px; }
.divider { clear:both; margin: 0 auto; position: relative; width: 692px; height:45px; margin-top: 30px; }
/* Footer */
#footer {
height: 200px;
min-height: 74px;
padding: 10px 0 0 0;
/*background: #000;*/
clear:both;
}
html>body #footer {
height: auto;
}
#legal {
clear: both;
padding-top: 20px;
text-align: center;
font-size: 10px;
color: #666;
}
#legal a {
color: #cacaca;
}
#footer { height: 200px; min-height: 74px; padding: 10px 0 0 0; clear:both; }
html>body #footer { height: auto; }
#legal { clear: both; padding-top: 20px; text-align: center; font-size: 10px; color: ##777; }
#legal a { color: #00445E; }

BIN
bigbluebutton-config/web/images/arrow.png Executable file → Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
bigbluebutton-config/web/images/bbb_logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

99
bigbluebutton-config/web/index.html
View File

@ -3,71 +3,92 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>BigBlueButton -- Open Source Web Conferencing</title>
<meta name="description" content="BigBlueButton enables universities and colleges to deliver a high-quality learning experience to remote students." />
<meta name="keywords" content="BigBlueButton, Open Source Web Conferencing, Distance Education, Courses Online, Web Conferencing, Open Source, Desktop Sharing, Video Conferencing, Video Collaboration, Presentation Sharing, Audio Sharing, Voice Collaboration, Public Chat, Webcam Sharing, Annotation, Whiteboard, Integrated Voice Over IP, Collaboration Software, Online Collaboration, Collaborative Learning, Virtual Classroom">
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<!-- Header Start -->
<div id="wrapper">
<div id="header">
<div id="header">
<div id="header_content">
<div id="logo">
<a href="http://www.bigbluebutton.org" target="_blank"> <img src="images/bbb_logo.png" width="364" height="89" border="0" /></a>
<div id="slogan"><h3>Demo Server</h3></div>
</div>
<div id="versionNum">
<p style="text-align:right;"><strong>What's new in version 0.8-beta-4</strong></p>
<p style="text-align:right;">Recording of sessions</p>
<p style="text-align:right;">HTML5 playback of recordings</p>
<p style="text-align:right;">Improved audio</p>
<p style="text-align:right;"><a href="http://code.google.com/p/bigbluebutton/wiki/ReleaseNotes"><font color="#0000FF">more....</font></a></p>
<a href="http://www.bigbluebutton.org" target="_blank" title="BigBlueButton Home"> <img src="images/bbb_logo.png" alt="bbb_logo" width="278" height="69" title="BigBlueButton Demo Server" alt="BigBlueButton Demo Server" /> </a>
</div>
</div>
</div>
<div id="header_bottom">
<img src="images/banner_bottom.png" width="1000" height="21" border="0" />
</div>
<!-- Content Start -->
<div id="content">
<div id="main">
<div id="main_content">
<div id="vids">
<!-- <h1> Getting to know BigBlueButton</h1> -->
<div class="vids_1">
<a href="http://youtu.be/S4eNl9Afipo" title="BigBlueButton Presenter Overview" target="_blank"><img src="images/presenter_overview.png" alt="Presenter Overview" title="Presenter Overview" width="200" height="165" /> </a>
<h3><a href="http://youtu.be/S4eNl9Afipo" title="BigBlueButton Presenter Overview" target="_blank">Teacher Overview</a></h3>
</div>
<div class="vids_2 left">
<a href="http://youtu.be/U8P9RJDk42M" title="Viewer Overview" target="_blank"> <img src="images/student_overview.png" alt="Student Overview" title="Student Overview" width="200" height="165" /> </a>
<h3><a href="http://youtu.be/U8P9RJDk42M" title="Viewer Overview" target="_blank">Student Overview</a></h3>
</div>
<div class="vids_3 left">
<a href="http://youtu.be/--yC6LpeFqA" title="Developer Overview" target="_blank"><img src="images/developer_overview.png" alt="Developer Overview" title="Developer Overview" width="200" height="165" /></a>
<h3><a href="http://youtu.be/--yC6LpeFqA" title="Developer Overview" target="_blank">Developer Overview</a></h3>
</div>
</div>
<img class="divider" src="images/divider.png"/>
<div id="welcome">
<h1>WELCOME</h1>
<p class="content"> <a href="http://www.bigbluebutton.org/sites/all/videos/join/index.html"><img src="http://www.bigbluebutton.org/sites/default/files/images/vm_overview.png" width="138" height="91" border="0" align="right" style="padding-left:10px; padding-top: 3px;" /> </a>BigBlueButton supports sharing of slides (PDF and PPT), video, whiteboard, chat, VoIP (using FreeSWITCH), and desktops. It supports record and playback. It's built using over <a href="http://bigbluebutton.org/components">fifteen open source components</a>, runs on Mac, Unix, and PC computers, and is supported by a <a href="http://bigbluebutton.org/support">community</a> that cares about good design and a streamlined user experience.</p>
<h1>Welcome</h1>
<p class="content"> BigBlueButton is an open source web conferencing system for distance education. It supports sharing of slides (PDF and PPT), video, whiteboard, chat, VoIP (using FreeSWITCH), and desktops. Along with these feature, BigBlueButton also supports the ability for record and playck. For this product to come together, it needed the help of <a href="http://bigbluebutton.org/components" title="BigBlueButton Components"> fifteen open source components</a>, runs on Mac, Unix, and PC computers, and is supported by a <a href="http://bigbluebutton.org/support" title="BigBlueButton Support"> community</a> that cares about good design and a streamlined user experience. </a>
<div class="social-links">
<table>
<td><strong> Follow Us:</strong></td>
<td><a href="http://www.twitter.com/bigbluebutton" title="BigBlueButton Twitter Page"> </a><img src="images/twitter.png" alt="twitter" title="BigBlueButton Twitter Page" width="24" height="24" /></a></td>
<td><a href="http://www.facebook.com/bigbluebutton" title="BigBlueButton Facebook Page"><img src="images/facebook.png" alt="Facebook" title="BigBlueButton Facebook Page" width="24" height="24" /></a></td>
<td><a href="http://www.youtube.com/bigbluebuttonshare" title="BigBlueButton YouTube Page"><img src="images/youtube.png" alt="YouTube" title="BigBlueButton YouTube Page" width="24" height="24" /></a></td>
<td><a href="http://www.flickr.com/photos/bigbluebutton" title="BigBlueButton Flickr Page"><img src="images/flickr.png" alt="flickr" title="BigBlueButton Flickr Page" width="24" height="24" /></a></td>
</table>
</div>
</div>
<div id="join">
<h2>Join a Demo Meeting</h2>
<p/>&nbsp;<p/>
<FORM NAME="form1" METHOD="GET" onSubmit="return checkform(this);" action="/demo/demo1.jsp">
<p class="content">Enter your name:</p>
<input type="text" id="username" required autofocus name="username" size="29" /><input type="submit" value="Join"/> <br />
<input type="text" id="username" required autofocus name="username" value="Enter your name.." size="29" class="field" />
<input type="submit" value="Join" class="submit_btn" /> <br />
<input TYPE="hidden" NAME="action" VALUE="create">
</form>
<p class="content"></p>
<img src="images/arrow.png" width="15" height="17" border="0" />
<div style="margin-top:-17px; margin-left:20px;"><a href="http://bigbluebutton.org/content/videos">View Tutorial Videos</a></div>
</div>
<div id="about">
<h2>About BigBlueButton</h2>
<p class="content">BigBlueButton is an open source web conferencing system that enables universities and colleges to deliver a high-quality learning experience to remote students.</p>
</div>
<div id="api">
<h2>API Demos</h2>
<p class="content">See examples of how you can integrate BigBlueButton into your applications.</p>
<img src="images/arrow.png" width="15" height="17" border="0" />
<div style="margin-top:-17px; margin-left:20px;"><a href="/demo/demo1.jsp">View API Demos</a></div>
</form>
<br>
<a class="arrow" href="http://bigbluebutton.org/content/videos" title="BigBlueButton Videos">View Tutorial Videos</a>
<br><br>
<h2>API Demos</h2>
<p class="content">See examples of how you can integrate BigBlueButton into your applications.</p>
<a class="arrow" href="/demo/demo1.jsp" title="BigBlueButton API Demos">View API Demos</a>
</div>
</div>
</div>
<!-- Content End -->
<!-- Footer Start -->
<div id="footer">
<p id="legal">Copyright © 2011 <a href="http://bigbluebutton.org/">BigBlueButton Inc.</a></p>
<p id="legal">Copyright © 2011 <a href="http://bigbluebutton.org/">BigBlueButton Inc.</a> <br> <a href="http://code.google.com/p/bigbluebutton/wiki/ReleaseNotes"> 0.8-beta4 </a></p>
</div>
<!-- Footer End -->