Merge branch '1page' of github.com:/finalsclubdev/FinalsClub
[oweals/finalsclub.git] / public / index.html
index 17d90287d19926647d70aca78d43d49918c0837c..4a6e3828b29c6fc4ca448900884593167e53f642 100644 (file)
@@ -1,36 +1,30 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
-       <!-- 
-                Currently tested with:
-                                               Mac             Windows
-                                        ______________________
-                       Chrome  |       15              -
-                       Safari  |       5               -
-                       FF              |       8               8
-                       IE              |       N/A             9
-       -->
 
        <head>
                <title>FinalsClub.org</title>
 
                <!-- XXX Some SEO here would be nice -->
+
                <link rel='stylesheet' href='/stylesheets/fc2.css'>
 
                <script type='text/javascript' src='/javascripts/jquery.min.js'></script>
                <script type='text/javascript' src='/javascripts/es5-shim.min.js'></script>
-               <script type='text/javascript' src='/socket.io/socket.io.js'></script>
                <script type='text/javascript' src='/javascripts/protodiv.js'></script>
                <script type='text/javascript' src='/javascripts/main.js'></script>
+               <script type='text/javascript' src='/socket.io/socket.io.js'></script>
 
                <meta name="viewport" content="width=device-width,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0">
                <meta name="apple-touch-icon" href=""> <!-- XXX -->
                <meta name="icon" href="">
 
        </head>
+
        <body>
+
                <div class="masthead">
                        <div class="logbar">
-                               <div class="loginstatus">&nbsp;</div>
+        <div class="loginstatus"><div id="login_status"><div id="PROTO_login_info">Currently logged in as <span class="username">__name__</span></div></div></div>
                        </div>
                        <div class="navbar">
                                <table>
                                                        <a href="/"><img src="/images/finals-club-wht.png" class="logo"/></a>
                                                </td>
                                                <td class="menu">
-                                                       <a href="javascript:goPage('/schools')">Start Here!</a>
+                                                       <a href="/schools">Start Here!</a>
                                                        <a href="http://blog.finalsclub.org">Blog</a>
-                                                       <a href="javascript:goPage('/archive')">Archive</a>
-                                                       <a href="javascript:goPage('/press')">Press</a>
-                                                       <a href="javascript:goPage('/register')">Create an Account</a>
-                                                       <a href="javascript:goPage('/login')" class="special">Login</a>
+                                                       <a href="/archive">Archive</a>
+                                                       <a href="/press">Press</a>
+                                                       <a href="/register" id="register_link">Create an Account</a>
+                                                       <a href="/profile" id="profile_link" style="display:none;">Profile</a>
+                                                       <a href="/login" id="login_link" class="special">Login</a>
                                                </td>
                                        </tr>
                                </table>
 
                <div id="topofcontent"></div>
 
+               <div id="messages" class="page">
+                       <div id="PROTO_message" class="__type__">__msg__</div>
+               </div>
+
                <div class="content">
                        <style>
                                /* The is here is because it's related less to "styling" and more to UI "behavior" */
                                .page { display: none; }
                        </style>
+
+
+
+
                        <div class=page id=pg_home>
                                <div class="contenthome">
                                        <div class="tagline">
                                                <p></p>
                                                <div id="learnsomething" class="button green">Learn something &gt;&gt; </div>
                                                <p></p>
-                                               <iframe src="http://player.vimeo.com/video/30647271?title=0&amp;byline=0&amp;portrait=0" width="350" height="250" frameborder="0" webkitallowfullscreen="webkitAllowFullScreen" allowfullscreen="allowFullScreen"></iframe>
+            <div id="screencast"></div>
                                        </div>
                                </div>
+                               
                        </div>
 
+
+
                        <div class=page id=pg_schools>
                                <h1>Universities</h1>
                                <div class="proto school" id=PROTO_school onclick="goPage('/school/___id__')">
                                </div>
                        </div>
 
+
+
                        <div class=page id=pg_courses>
                                <h1>Courses for <span id=school_name></span></h1>
                                <div class="proto course" id=PROTO_course>
                                        <div class=dept>__department__</div>
                                        <div class=name>
-                                               <a href="javascript:goPage('/course/___id__')">__number__: __name__</a>
+                                               <a href="/course/___id__">__number__: __name__</a>
                                        </div>
                                </div>
+        <div>
+          <span class="sub_menu">
+            <a href="" id="new_course" style="display:none;">New Course</a>
+          </span>
+          <form method="POST" id="form_course" style="display:none;">
+            <h1>Create New Course</h1>
+            <p>Use this form to create a new course. After creating the course, you can create a lecture within it.</p>
+            <div class="row">
+              <div class="label">Course number</div>
+              <div class="field">
+                <input type="text" name="number">
+              </div>
+            </div>
+            <div class="row">
+              <div class="label">Course name</div>
+              <div class="field">
+                <input type="text" name="name">
+              </div>
+            </div>
+            <div class="row">
+              <div class="label">Course subject</div>
+              <div class="field">
+                <input type="text" name="subject">
+              </div>
+            </div>
+            <div class="row">
+              <div class="label">Course department</div>
+              <div class="field">
+                <input type="text" name="department">
+              </div>
+            </div>
+            <div class="row">
+              <div class="label">Instructor's Name</div>
+              <div class="field">
+                <input type="text" name="instructorName">
+              </div>
+            </div>
+            <div class="row">
+              <div class="label">Instructor's Email</div>
+              <div class="field">
+                <input type="text" name="email">
+              </div>
+            </div>
+            <div class="row">
+              <div class="label">&nbsp;</div>
+              <div class="field">
+                <button>Create Course</button>
+              </div>
+            </div>
+          </form>
+        </div>
                        </div>
 
+
+
                        <div class=page id=pg_lectures>
                                <div class="proto lectures_head" id=PROTO_lectures_head>
                                        <h1>Lectures for Course __number__ : __name__</h1>
                                        Department: __department__<br>
                                </div>
                                <div class="proto lectures_instructor" id=PROTO_lectures_instructor>
-                                       Instructor: __name__ (__email__)<br>
+          Instructor: __name__ <span class="instructor_email">(__email__)</span><br>
                                </div>
                                <div class="proto lecture" id=PROTO_lecture>
                                        <div class=name>
-                                               <a href="javascript:goPage('/lecture/___id__')">__name__</a><br>
+                                               <a href="/lecture/___id__">__name__</a><br>
                                                Created: __date__<br>
                                        </div>
                                </div>
+        <div>
+          <span class="sub_menu">
+            <a href="" id="new_lecture" style="display:none;">New Lecture</a>
+          </span>
+          <form method="POST" id="form_lecture" style="display:none;">
+            <h1>Create New Lecture</h1>
+            <p>Use this form to create a new lecture. After creating the lecture, you can then create a notes-taking session within it.</p>
+            <div class="row">
+              <div class="label">Lecture Name</div>
+              <div class="field">
+                <input type="text" name="name">
+              </div>
+            </div>
+            <div class="row">
+              <div class="label">&nbsp;</div>
+              <div class="field">
+                <button>Create Lecture</button>
+              </div>
+            </div>
+          </form>
+        </div>
                        </div>
 
+
+
                        <div class=page id=pg_notes>
-                               <h1>Notepads </h1>
+                               <div class="proto notes_head" id=PROTO_notes_head>
+                                       <h1>Note pads for Course __number__ : __name__</h1>
+                                       Subject: __subject__<br>
+                                       Department: __department__<br>
+                               </div>
+                               <div class="proto notes_instructor" id=PROTO_notes_instructor>
+          Instructor: __name__ <span class="instructor_email">(__email__)</span><br>
+                               </div>
                                <div class="proto note" id=PROTO_note>
                                        <div class=name>
-                                               <a href="/note/___id__">__name__</a>
+                                               <a href="/note/___id__">__name__</a> Visits: __visits__
                                        </div>
                                </div>
+        <div>
+          <span class="sub_menu">
+            <a href="" id="new_note" style="display:none;">New Note Pad</a>
+          </span>
+          <form method="POST" id="form_note" style="display:none;">
+            <h1>Create New Note Pad</h1>
+            <p>Use this form to create a new note pad. You can then use this as a notes-taking session.</p>
+            <div class="row">
+              <div class="label">Note Pad Name</div>
+              <div class="field">
+                <input type="text" name="name">
+              </div>
+            </div>
+            <div class="row">
+              <div class="label">Private</div>
+              <div class="field">
+                <input type="checkbox" name="private" value="true">
+              </div>
+            </div>
+            <div class="row">
+              <div class="label">&nbsp;</div>
+              <div class="field">
+                <button>Create Note Pad</button>
+              </div>
+            </div>
+          </form>
+        </div>
                        </div>
 
+
+
                        <div class=page id=pg_archive_subjects>
                                <h1>Archived Subjects</h1>
                                <p>
                                </p>
                                <ul>
                                        <li class=proto id=PROTO_archive_subject>
-                                               <a href="javascript:goPage('/archive/subject/__id__')">__name__</a>
+                                               <a href="/archive/subject/__id__">__name__</a>
                                        </li>
                                </ul>
+
                        </div>
 
+
+
                        <div class=page id=pg_archive_courses>
                                <h1>Archived Courses</h1>
                                <ul>
                                        <li class=proto id=PROTO_archive_course>
-                                               <a href="javascript:goPage('/archive/course/__id__')">__name__</a>
+                                               <a href="/archive/course/__id__">__name__</a>
                                        </li>
                                </ul>
+
                        </div>
 
+
+
                        <div class=page id=pg_archive_notes>
                                <h1>Archived Notes</h1>
                                <ul>
                                        <li class=proto id=PROTO_archive_note>
-                                               <a href="javascript:goPage('/archive/note/___id__')">__topic__</a>
+                                               <a href="/archive/note/___id__">__topic__</a>
                                        </li>
                                </ul>
                        </div>
 
+
+
                        <div class=page id=pg_archive_note_display>
                                <div id=PROTO_archive_note_display>
                                        <h1>__topic__</h1>
                                        <div>__text__</div>
-<pre>__err__</pre>
                                </div>
                        </div>
 
+
+
                        <div class=page id=pg_register>
                                <h1>Create an Account</h1>
-                               <form id="credentials" action="/register" method="POST">
+                               <form id="form_register" action="/register" method="POST">
                                        <div class="zarea">
                                                <div class="row">
                                                        <div class="label">
                                </form>
                        </div>
 
+      <div class="page" id="pg_profile">
+        <h1>User Profile</h1>
+        <form id="form_profile" action="/profile" method="POST">
+          <h2>Account Information</h2>
+          <div class="area">
+            <div class="row">
+              <div class="label">
+                <span>Email</span>
+              </div>
+              <div class="field">
+                <span class="email"></span>
+              </div>
+            </div>
+            <div class="row">
+              <div class="label">
+                <label for="affiliation">Affiliation</label>
+              </div>
+              <div class="field">
+                <select id="affiliation" name="affiliation">
+                  <option value="Student">Student</option>
+                  <option value="Teachers Assistant">Teachers Assistant</option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <h2>Profile Information</h2>
+          <div class="area">
+            <div class="row">
+              <div class="label">
+                <label for="name">User Name</label>
+              </div>
+              <div class="field">
+                <input id="name" type="text" name="name" value="">
+              </div>
+            </div>
+            <div class="row">
+              <div class="label">
+                <label>&nbsp;</label>
+              </div>
+              <div class="field">
+                <input style="width: auto;" id="showName" type="checkbox" name="showName">
+                Display your real name in contributions
+              </div>
+            </div>
+              <!--
+            <div class="row">
+              <div class="label">
+                <label for="major">Major</label>
+              </div>
+              <div class="field">
+                <input id="major" type="text" name="major" value="">
+              </div>
+            </div>
+            <div class="row">
+              <div class="label">
+                <label for="bio">Bio</label>
+              </div>
+              <div class="field">
+                <input id="bio" type="text" name="bio" value="">
+              </div>
+            </div>
+            -->
+          </div>
+          <h2>Change Password</h2>
+          <div class="area">
+            <div class="row">
+              <div class="label">
+                <label for="existingPassword">Old Password</label>
+              </div>
+              <div class="field">
+                <input id="existingPassword" type="password" name="existingPassword">
+              </div>
+            </div>
+            <div class="row">
+              <div class="label">
+                <label for="newPassword">New Password</label>
+              </div>
+              <div class="field">
+                <input id="newPassword" type="password" name="newPassword">
+              </div>
+            </div>
+            <div class="row">
+              <div class="label">
+                <label for="newPasswordConfirm">Confirm Password</label>
+              </div>
+              <div class="field">
+                <input id="newPasswordConfirm" type="password" name="newPasswordConfirm">
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="label">&nbsp;</div>
+            <div class="field">
+              <button>Submit</button>
+            </div>
+          </div>
+        </form>
+      </div>
+
+
                        <div class=page id=pg_login>
                                <h1>Login</h1>
-                               <form id="credentials" action="/login" method="POST">
+                               <form id="form_login" action="/login" method="POST">
                                        <div class="zarea">
                                                <div class="row">
                                                        <div class="label">
                                </form>
                        </div>
 
+      <div class="page" id="pg_resetpass">
+        <h1>Password Reset</h1>
+        <form id="form_resetpass" action="/resetpass" method="POST">
+          <div class="zarea">
+            <p>To reset your password, enter your email address click "Reset". An email will be sent to you with a link to reset your password.</p>
+            <div class="row">
+              <div class="label">
+                <label for="email">Email</label>
+              </div>
+              <div class="field">
+                <input type="text" name="email" size="15" value="">
+              </div>
+            </div>
+            <div class="row">
+              <div class="label">&nbsp;</div>
+              <div style="min-width: 200px" class="field">
+                <button>Reset</button>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+
+      <div class="page" id="pg_resetpw">
+        <h1>Password Reset</h1>
+        <form id="form_resetpw" action="/resetpw" method="POST">
+          <div class="zarea">
+            <p>To verify and reset your password, type the full email address and your new password twice, then click submit.</p>
+            <div class="row">
+              <div class="label">
+                <label for="email">Email</label>
+              </div>
+              <div class="field">
+                <input type="text" name="email" size="15" value="">
+              </div>
+            </div>
+            <div class="row">
+              <div class="label">
+                <label for="pass1">New Password</label>
+              </div>
+              <div class="field">
+                <input type="password" name="pass1" size="15" value="">
+              </div>
+            </div>
+            <div class="row">
+              <div class="label">
+                <label for="pass2">Repeat New Password</label>
+              </div>
+              <div class="field">
+                <input type="password" name="pass2" size="15" value="">
+              </div>
+            </div>
+            <div class="row">
+              <div class="label">&nbsp;</div>
+              <div style="min-width: 200px" class="field">
+                <button>Reset</button>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+
                        <div class=page id=pg_conduct>
                                <div class="conduct">
                                        <h1>Code of Conduct</h1>
                                </div>
                        </div>
 
+
+
+
                        <div class=page id=pg_press>
                                <h1>FinalsClub in the Press</h1>
                                <div class="press">
                                        </p>
                                </div>
                        </div>
+
+
+
+
                        <div class=page id=pg_notfound>
                                <h1>Page Not Found</h1>
                                Sorry, there is no content for this page.
                        </div>
+
+
+
+
                </div>
 
+
+
+
                <div class="footer">
                        <table>
                                <tr>
                                                <div>All Rights Reserved</div>
                                        </td>
                                        <td class="col2">
-                                               <a href="javascript:goPage('/conduct')">Code of Conduct</a>
+                                               <a href="/conduct">Code of Conduct</a>
                                                <a href="http://blog.finalsclub.org/about.html">About</a>
                                                <a href="http://blog.finalsclub.org/contact.html">Contact</a>
                                                <a href="http://blog.finalsclub.org/legal.html">Legal</a>
                        </p>
                </div>
 
+
+
+
        </body>
 </html>