-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
+<!DOCTYPE html>
+<html class="no-js">
<head>
- <title>FinalsClub.org</title>
-
- <!-- XXX Some SEO here would be nice -->
-
- <link rel='stylesheet' href='/stylesheets/fc2.css'>
+
+ <link rel="stylesheet" href="/assets/css/include.css" type="text/css" media="screen" />
+ <script type="text/javascript" src="/assets/js/modernizr.custom.js"></script>
+ <script type="text/javascript" src="/assets/js/load.js"></script>
+ <script type="text/javascript" src="http://use.typekit.com/cbx6gxx.js"></script>
+ <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<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>
-
- <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="">
+ <script type='text/javascript' src='/socket.io/socket.io.js'></script>
</head>
<body>
-
- <div class="masthead">
- <div class="logbar">
- <div class="loginstatus"> </div>
- </div>
- <div class="navbar">
- <table>
- <tr>
- <td>
- <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="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>
- </td>
- </tr>
- </table>
+ <div class="header">
+ <div class="container-12 highlight">
+ <div class="grid-3">
+ <a id="logo" href="/">
+ <img src="/assets/img/logo-light.png" alt="FinalsClub" />
+ </a>
+ </div>
+ <div class="grid-9">
+ <nav id="user-nav" class="small">
+ <ul>
+ <li><span class="username">Guest</span></li>
+ <li><a id=login_link href="/login">Login</a></li>
+ </ul>
+ </nav>
+ <nav id="main-nav" class="small">
+ <ul>
+ <li id=course_link><a href="/schools" class="active"><em class="icon"></em>Courses</a></li>
+ <li><a href="http://blog.finalsclub.org"><em class="icon"></em>Blog</a></li>
+ <li id=archive_link><a href="/archive"><em class="icon"></em>Library</a></li>
+ <li id=press_link><a href="/press"><em class="icon"></em>Press</a></li>
+ <li id=register_link><a href="/register"><em class="icon"></em>Register</a></li>
+ <li id=profile_link><a href="/profile"><em class="icon"></em>Profile</a></li>
+ <!-- li><a href="#" class="donate"><em class="icon"></em><em class="lc yellow">Donate</em></a></li -->
+ </ul>
+ </nav>
+ </div>
</div>
- <div class="logbar"> </div>
</div>
-
+ <hr class="stripes" />
<div id="topofcontent"></div>
-
-
-
+ <div id="messages" class="page"><span id="PROTO_message" class="__type__">__msg__</span></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>
-
+ <noscript>
+ This site requires JavaScript to properly function.
+ Please enable JavaScript or use a modern browser such as
+ <a href="http://google.com/chrome">Google Chrome</a>
+ or
+ <a href="http://firefox.com">Firefox</a>.
+ </noscript>
<div class=page id=pg_home>
- <div class="contenthome">
- <div class="tagline">
- <p>
- Welcome to FinalsClub.org, a 501(c)(3) non-profit
- open education project dedicated to helping college
- students collaborate, learn, and share their
- knowledge freely online.
+
+ <div class="grid-12">
+ <div class="padded-loose">
+ <h1 class="large-huge spaced centered">Welcome to FinalsClub! <span class="small">Collaborate. Learn. Share.</span></h1>
+ </div>
+ </div>
+
+ <div class="grid-10 grid-centered">
+ <div class="padded-loose">
+ <p class="no-top-margin">
+ Thank you for visiting FinalsClub.org, a 501(c)(3) non-profit open education
+ project dedicated to helping college students share knowledge freely online. While you learn better, faster, and smarter by using FinalsClub with your classmates,
+ we also encourage you to share your scholarship to benefit curious minds everywhere.
</p>
<p>
- Please create an account with your school email address
- to try our tools or browse our course archive to learn
- something new.
- Thank you for helping us improve access to education,
- one lecture at a time.
+ Getting started is easy. Just register with your school email address and confirm
+ your account. Then find your courses or add a new ones. You can also browse our
+ Library to learn something new. Thank you for helping us improve access to education,
+ one lecture at a time.
</p>
- <p></p>
- <div id="learnsomething" class="button green">Learn something >> </div>
- <p></p>
- <iframe src="http://player.vimeo.com/video/30647271?title=0&byline=0&portrait=0" width="350" height="250" frameborder="0" webkitallowfullscreen="webkitAllowFullScreen" allowfullscreen="allowFullScreen"></iframe>
</div>
</div>
-
+
+
+ <div class="grid-12">
+ <div class="button-set vertical half-width centered-rt-parent half-width-buttons">
+ <button class="green">Sign Up</button>
+ <button class="blue">Learn Something</button>
+ </div>
+ </div>
+
+
+ <div class="container-12 spacer">
+ <hr class="stripes spacer" />
+
+ <div class="grid-6">
+ <h3 class="heading">Check out our Screencasts</h3>
+ <div class="video-wrapper">
+ <iframe src="http://player.vimeo.com/video/30647271?title=0&byline=0&portrait=0&color=367da9" width="460" height="259" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe> </div>
+ </div>
+ <div class="grid-6">
+ <h3 class="heading">We currently support the following schools</h3>
+ <div class="schools">
+ <ul>
+ <li><em class="sprite-school brown">Brown Logo</em></li>
+ <li><em class="sprite-school columbia">Columbia Logo</em></li>
+ <li><em class="sprite-school cornell">Cornell Logo</em></li>
+ <li><em class="sprite-school dartmouth">Dartmouth Logo</em></li>
+ <li><em class="sprite-school shield">School Logo</em></li>
+ <li><em class="sprite-school mit">MIT Logo</em></li>
+ <li><em class="sprite-school lock_haven">Lock Haven Logo</em></li>
+ <li><em class="sprite-school cal">Cal Tech Logo</em></li>
+ <li><em class="sprite-school texas">University of Texas Logo</em></li>
+ <li><em class="sprite-school yale">Yale Logo</em></li>
+ <li><em class="sprite-school penn">Penn Logo</em></li>
+ <li><em class="sprite-school harvard">Harvad Logo</em></li>
+ </ul>
+ </div>
+ </div>
+ </div>
</div>
<div class=page id=pg_schools>
<h1>Universities</h1>
- <div class="school" id=PROTO_school onclick="goPage('/school/___id__')">
+ <div class="proto school" id=PROTO_school onclick="goPage('/school/___id__')">
<div class=name>__name__</div>
<div class=desc>__description__</div>
</div>
<div class=page id=pg_courses>
<h1>Courses for <span id=school_name></span></h1>
- <div class=course id=PROTO_course>
+ <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" style="display:none;">
+ <a href="" id="new_course">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"> </div>
+ <div class="field">
+ <button>Create Course</button>
+ </div>
+ </div>
+ </form>
+ </div>
</div>
<div class=page id=pg_lectures>
- <div class=lectures_head id=PROTO_lectures_head>
+ <div class="proto lectures_head" id=PROTO_lectures_head>
<h1>Lectures for Course __number__ : __name__</h1>
Subject: __subject__<br>
Department: __department__<br>
</div>
- <div class=lectures_instructor id=PROTO_lectures_instructor>
- Instructor: __name__ (__email__)<br>
+ <div class="proto lectures_instructor" id=PROTO_lectures_instructor>
+ Instructor: __name__ <span class="instructor_email">(__email__)</span><br>
</div>
- <div class=lecture id=PROTO_lecture>
+ <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" style="display:none;">
+ <a href="" id="new_lecture">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"> </div>
+ <div class="field">
+ <button>Create Lecture</button>
+ </div>
+ </div>
+ </form>
+ </div>
</div>
<div class=page id=pg_notes>
- <h1>Notepads </h1>
- <div class=note id=PROTO_note>
+ <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" style="display:none;">
+ <a href="" id="new_note">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"> </div>
+ <div class="field">
+ <button>Create Note Pad</button>
+ </div>
+ </div>
+ </form>
+ </div>
</div>
- <div class=page id=pg_archive>
+ <div class=page id=pg_archive_subjects>
<h1>Archived Subjects</h1>
<p>
Please browse our archive of past courses
covered at Harvard from 2008 through 2010.
</p>
<ul>
- <li id=PROTO_archived_subjects>
- <a href="/archive/subject/__id__">__title__</a>
+ <li class=proto id=PROTO_archive_subject>
+ <a href="/archive/subject/__id__">__name__</a>
</li>
</ul>
+ <div class=page id=pg_archive_courses>
+ <h1>Archived Courses</h1>
+ <ul>
+ <li class=proto id=PROTO_archive_course>
+ <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="/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>
+ </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> </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"> </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">
<div class="field">
<button class="major">Login</button>
<span class="reglink">
- <a href="/resetpw">Forgot password?</a>
+ <a href="/resetpass">Forgot password?</a>
</span>
</div>
</div>
</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"> </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"> </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">
</div>
-
-
- <div class="footer">
- <table>
- <tr>
- <td class="col1">
- <div class="logo">
- <img src="/images/finals-club-wht.png" title="FinalsClub.org" class="lilogo"/>
+ <hr class="stripes bordered" />
+
+ <div class="footer small">
+ <div class="container-12">
+ <div class="grid-12">
+ <nav id="footer-nav">
+ <ul>
+ <li><a href="/conduct">Code of Conduct</a></li>
+ <li><a href="http://blog.finalsclub.org/about.html">About</a></li>
+ <li><a href="http://blog.finalsclub.org/contact.html">Contact</a></li>
+ <li><a href="http://blog.finalsclub.org/legal.html">Legal</a></li>
+ <li><a href="http://blog.finalsclub.org/team.html">Team</a></li>
+ </ul>
+ </nav>
+ <p>Copyright 2011 Finals Club. All rights reserved.</p>
+ <div class="creative_commons">
+ <div class="section">
+ <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">
+ <img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/88x31.png" />
+ </a>
+ <br />
</div>
- <div>Copyright 2011</div>
- <div>All Rights Reserved</div>
- </td>
- <td class="col2">
- <a href="javascript:goPage('/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>
- <a href="http://blog.finalsclub.org/team.html">Team</a>
- </td>
- </tr>
- </table>
- </div>
- <div class="footerer">
- <p>
- This work is licensed under a
- Creative Commons Attribution-ShareAlike 3.0
- United States License
- </p>
- <p>
- <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/us/88x31.png"/></a>
- <a href="http://mixpanel.com/f/partner"><img alt="Real Time Web Analytics" src="http://mixpanel.com/site_media/images/partner/badge_blue.png" style="border-width:0;margin:2px;"/></a>
- </p>
+ <div class="section">
+ This work is licensed under a
+ <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>.
+ </div>
+ </div>
+ </div>
+ </div>
</div>
-
-
-
-
</body>
</html>
projects / oweals / finalsclub.git / blobdiff