2012-11-17 21:03:06 +00:00
<div class="curtain" style="width:100%; height:100%; z-index:9999; background-color:#ffffff;"></div>
<!-- Shown to users who are not logged in -->
<div layout="landing" class="landing" style="display:none;">
<h1>Welcome to JamKazam!</h1>
<p>This is a landing page for users who haven't registered or signed-in. Marketing text to convince you how great it would be to use the service goes here.</p>
<p>No account? <a href="signup">Register!</a></p>
<p>or <a href="/signin">Sign In</a></p>
</div>
2012-11-22 19:36:43 +00:00
<div class="footer">
<p class="left">
Copyright © 2012 JamKazam, Inc. All Rights Reserved.
</p>
<p class="right">
<a href="/#/contact">contact</a> |
<a href="/#/terms">terms fo use</a> |
<a href="/#/privacy">privacy</a>
</p>
</div>
2012-11-17 21:03:06 +00:00
<!-- Normal signed-in user content -->
<div layout="header" class="header" style="display:none;">
2012-11-18 17:27:20 +00:00
<h1>Jamkazam</h1>
2012-11-13 04:12:17 +00:00
<div class="search">
<input type="text" class="searchtextinput" placeholder="Search for Bands, Musicians and Fans"/>
</div>
<script type="text/template" id="template-search-section">
<h2>{section}</h2>
<ul>
{items}
</ul>
</script>
<script type="text/template" id="template-search-noresults">
<h2 class="emptyresult">No Matches</h2>
<p>No results returned</p>
</script>
<script type="text/template" id="template-search-item">
<li>
<a>
<img src="{image}"/>
2012-11-15 09:30:30 +00:00
<span class="text">{first_name} {last_name}</span>
2012-11-13 04:12:17 +00:00
<span class="subtext">{subtext}</span>
</a>
</li>
</script>
2012-09-21 04:46:45 +00:00
<div class="userinfo">
2012-11-17 21:03:06 +00:00
<!-- gravatar_for current_user, size: 52, hclass: "avatar medium" -->
2012-09-21 04:46:45 +00:00
<div class="username">
2012-11-18 17:27:20 +00:00
<h2>TODO Name</h2>
2012-09-21 04:46:45 +00:00
<%= image_tag "down_arrow.png", :class=> "profile-toggle" %>
<ul>
2012-11-11 20:34:05 +00:00
<li><a layout-link="account">Profile</a></li>
2012-09-28 08:20:43 +00:00
<li><%= link_to "Sign out", signout_path, method: "delete" %></li>
2012-09-21 04:46:45 +00:00
</ul>
</div>
</div>
</div>
<div layout="screen" layout-id="home" class="screen">
<!-- Grid is the count of the smallest spaces, then
individual spells span those spaces -->
<div layout-grid="2x4" class="grid">
<div layout-grid-position="0,0" layout-grid-rows="1" layout-grid-columns="2"
layout-link="createSession" class="homecard createsession">
<h2>Create Session</h2>
</div>
<div layout-grid-position="2,0" layout-grid-rows="1" layout-grid-columns="2"
layout-link="findSession" class="homecard findsession">
<h2>Find Session</h2>
</div>
<div layout-grid-position="0,1" layout-grid-rows="1" layout-grid-columns="1"
layout-link="bands" class="homecard bands">
<h2>Bands</h2>
</div>
<div layout-grid-position="1,1" layout-grid-rows="1" layout-grid-columns="2"
layout-link="recordings" class="homecard recordings">
<h2>Recordings</h2>
</div>
<div layout-grid-position="3,1" layout-grid-rows="1" layout-grid-columns="1"
layout-link="practice" class="homecard practice">
<h2>Practice</h2>
</div>
</div>
</div>
2012-11-11 20:34:05 +00:00
2012-11-17 21:03:06 +00:00
<div layout="sidebar" class="sidebar" style="display:none;">
2012-09-21 04:46:45 +00:00
<div layout-sidebar-expander="visible" class="expander visible">
2012-11-22 19:36:43 +00:00
<p>Hide <span>>></span></p>
2012-09-21 04:46:45 +00:00
</div>
<div layout-sidebar-expander="hidden" class="expander hidden">
2012-11-22 19:36:43 +00:00
<p><span><<</span></p>
2012-09-21 04:46:45 +00:00
</div>
<div layout="panel" layout-id="panel1">
<div layout-panel="collapsed">
F
</div>
<div layout-panel="expanded" class="panel expanded">
<div layout-panel="header" class="panel-header">
<h2>Friends</h2>
</div>
<div layout-panel="contents" class="panelcontents">
<ul>
<li>
<%= image_tag "avatars/avatar_david.jpg", :class => "avatar small" %>
<p class="name">David Wilson</p>
<p class="status">Session: <a href="#">Blues at Seven</a></p>
</li>
<li>
<%= image_tag "avatars/avatar_brian.jpg", :class => "avatar small" %>
<p class="name">Brian Smith</p>
<p class="status">Available</p>
</li>
<li>
<%= image_tag "avatars/avatar_peter.jpg", :class => "avatar small" %>
<p class="name">Peter Walker</p>
<p class="status">Practicing</p>
</li>
<li class="offline">
<%= image_tag "avatars/avatar_seth.jpg", :class => "avatar small" %>
<p class="name">Seth Call</p>
<p class="status">Offline</p>
</li>
</ul>
</div>
</div>
</div>
<div layout="panel" layout-id="panel2">
<div layout-panel="collapsed">
S
</div>
<div layout-panel="expanded" class="panel expanded">
<div layout-panel="header" class="panel-header">
<h2>Session</h2>
</div>
<div layout-panel="contents" class="panelcontents">
When in a session, this will show details.
</div>
</div>
</div>
</div>
<!-- Create Session Screen -->
<div layout="screen" layout-id="createSession" class="screen secondary">
<div class="breadcrumb">
<p layout-link="home">Home > </p>
2012-09-29 17:48:23 +00:00
<p class="current">Create Session</p>
2012-09-21 04:46:45 +00:00
</div>
2012-09-29 17:48:23 +00:00
<form id="create-session-form">
<div class="body">
<fieldset class="unstyled">
2012-10-14 15:48:56 +00:00
<legend>Unstyled and Lots of things omitted</legend>
<!--
2012-09-29 17:48:23 +00:00
<div class="formrow">
<label>Band
<select>
<option>Not a band session</option>
<option>The Killers</option>
<option>J&J AdHoc Electronica Duo</option>
</select>
</label>
</div>
2012-09-21 04:46:45 +00:00
2012-09-29 17:48:23 +00:00
<div class="formrow">
<label>Fan Access
<label>
<input type="radio" name="fan_access"/>
Public
</label>
<label>
<input type="radio" name="fan_access"/>
Private
</label>
</label>
</div>
<div class="formrow">
<label>Fan Chat
<label>
<input type="radio" name="fan_chat"/>
Yes
</label>
<label>
<input type="radio" name="fan_chat"/>
No
</label>
</label>
</div>
2012-10-26 03:24:05 +00:00
-->
2012-11-03 00:29:58 +00:00
<div class="formrow">
<fieldset>Musician Access
<label>By request/approval
<input type="radio" value="false" name="musician_access"/>
</label>
<label>Open
<input type="radio" value="true" checked="checked" name="musician_access"/>
</label>
</fieldset>
</div>
2012-09-29 17:48:23 +00:00
<div class="formrow">
2012-11-03 00:29:58 +00:00
<label>Genres
<select multiple="multiple" name="genres">
2012-09-29 17:48:23 +00:00
</select>
</label>
2012-10-26 03:24:05 +00:00
<input type="text" class="hidden"/>
2012-09-29 17:48:23 +00:00
</div>
2012-11-08 15:13:47 +00:00
<div class="formrow">
<label>Tracks (TODO! - hardcoded in form handler)
</label>
</div>
2012-09-29 17:48:23 +00:00
<div class="formrow">
<label>Session Description</label>
2012-10-06 16:36:05 +00:00
<textarea name="description"></textarea>
2012-09-29 17:48:23 +00:00
</div>
<div class="formrow">
2012-11-08 15:13:47 +00:00
<div id="added-invitations"></div>
<div id="invitation-controls">
<label>Musician Invitations
<input id="invitations" type="text"/>
</label>
</div>
2012-09-29 17:48:23 +00:00
</div>
2012-11-08 15:13:47 +00:00
<!--
2012-09-29 17:48:23 +00:00
<div class="formrow">
<label>Fan Invitations
<label>
<input type="checkbox"/>
Post link to this session for fans on
</label>
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">Google+</a>
</label>
<p><a href="#">
Upgrade your Studio subscription to let more fans listen
</a></p>
</div>
<div class="formrow">
<label>Legal Terms
<input type="checkbox"/>
I agree that intellectual property ownership of any musical works created during this session shall be governed by the terms of the Creative Commons CC BY-NC-SA license in accordance with the JamKazam Terms of Service.
</label>
</div>
2012-10-14 15:48:56 +00:00
-->
2012-09-21 04:46:45 +00:00
</fieldset>
2012-09-29 17:48:23 +00:00
</div>
2012-09-21 04:46:45 +00:00
<div class="footer">
2012-10-06 16:36:05 +00:00
<input type="submit" id="btn-create-session" value="Create Session"/>
2012-09-29 17:48:23 +00:00
<button layout-link="home">Cancel</button>
2012-09-21 04:46:45 +00:00
</div>
</form>
</div>
2012-11-08 15:13:47 +00:00
<!-- Added Invitation Template -->
<script type="text/template" id="template-added-invitation">
<div class="invitation" user-id="{userId}">{userName} <span>X</span></div>
</script>
2012-10-26 03:24:05 +00:00
<!-- Genre option template -->
<script type="text/template" id="template-genre-option">
<option value="{value}">{label}</option>
</script>
2012-09-21 04:46:45 +00:00
<!-- Create Session:Audio Screen -->
2012-09-29 17:48:23 +00:00
<!-- Keeping as this will move into a user settings dialog... -->
2012-09-21 04:46:45 +00:00
<div layout="screen" layout-id="createSessionAudio" class="screen secondary">
<div class="breadcrumb">
<p layout-link="home">Home > </p>
<p class="current">Create a Session (3/3): Audio</p>
</div>
<form>
<p>Configure your instruments, headphones or speakers, and voice chat settings. Then play your instrument and sing or speak into your microphone, and ensure you hear everything correctly before entering the session.</p>
<fieldset>
<legend>Audio Settings</legend>
<fieldset>
<legend>Instrument 1</legend>
<label>
Sound Card
<select>
<option>Internal Intel Audio</option>
<option>Tascam US-800</option>
</select>
</label>
<label>
Driver
<select>
<option>These will be tied to the sound card</option>
</select>
</label>
<label>
Input
<select>
<option>Input 1</option>
<option>Input 2</option>
<option>Input 3</option>
<option>Input 4</option>
<option>Input 5</option>
<option>Input 6</option>
</select>
</label>
<label>
Instrument
<select>
<optgroup label="High Popular">
<option>Acoustic Guitar</option>
<option>Bass Guitar</option>
<option>Computer</option>
<option>Drums</option>
<option>Electric Guitar</option>
<option>Keyboard</option>
<option>Voice</option>
</optgroup>
<optgroup label="Mid Popular">
<option>Flute</option>
<option>Clarinet</option>
<option>Saxophone</option>
<option>Trumpet</option>
<option>Violin</option>
<option>Trombone</option>
<option>Banjo</option>
<option>Harmonica</option>
<option>Accordian</option>
</optgroup>
<optgroup label="Low Popular">
<option>French Horn</option>
<option>Euphonium</option>
<option>Tuba</option>
<option>Oboe</option>
<option>Ukulele</option>
<option>Cello</option>
<option>Viola</option>
<option>Mandolin</option>
</optgroup>
</select>
</label>
<label>Other <input type="text"/></label>
<label>Gain Slider goes here</label>
<label>VU Meter goes here</label>
</fieldset>
</fieldset>
<fieldset>
<legend>Headphone/Speaker Settings</legend>
<label>
Sound Card
<select>
<option>Internal Intel Audio</option>
<option>Tascam US-800</option>
</select>
</label>
<label>
Driver
<select>
<option>These will be tied to the sound card</option>
</select>
</label>
<label>
Output
<select>
<option>Output 1</option>
<option>Output 2</option>
<option>Output 3</option>
<option>Output 4</option>
<option>Output 5</option>
<option>Output 6</option>
</select>
</label>
</fieldset>
<fieldset>
<legend>Voice Chat Settings</legend>
<label>
Sound Card
<select>
<option>Internal Intel Audio</option>
<option>Tascam US-800</option>
</select>
</label>
<label>Gain Slider goes here</label>
<label>VU Meter goes here</label>
</fieldset>
<div class="footer">
<button layout-link="createSessionInvite">Back</button>
<button layout-link="session">Jam</button>
<button layout-link="home">Cancel</button>
</div>
</form>
</div>
<!-- Actual Session Screen -->
2012-10-06 16:36:05 +00:00
<div layout="screen" layout-id="session" layout-arg="id" class="screen secondary">
2012-09-21 04:46:45 +00:00
<div class="breadcrumb">
<p layout-link="home">Home > </p>
<p class="current">Session</p>
</div>
2012-10-06 16:36:05 +00:00
<div id="session-contents">
2012-10-21 23:03:46 +00:00
<div id="session-info"></div>
<div id="session-tracks"></div>
2012-10-06 16:36:05 +00:00
</div>
2012-09-21 04:46:45 +00:00
</div>
2012-10-06 16:36:05 +00:00
<script type="text/template" id="template-session-contents">
<h1>Session Info</h1>
<p>Description: {description}</p>
<p>Participants: {participants}</p>
<p><a action="delete" action-id="{id}">Delete?</a></p>
</script>
2012-10-21 23:03:46 +00:00
<!-- Template for an individual session track -->
<script type="text/template" id="template-session-track">
<div class="session-track" client-id="{clientId}">
2012-10-22 02:55:05 +00:00
<div track-role="latency" class="latency {latency}">Network</div>
<div track-role="vu" class="vu">VU: {vu}</div>
<div track-role="gain" class="gain">Gain: {gain}</div>
<div track-role="mute" class="mute">Muted: {mute}</div>
<div track-role="name" class="name">{name}</div>
<div track-role="part" class="part">{part}</div>
<div track-role="avatar" class="avatar"><img src="{avatar}"/></div>
2012-10-21 23:03:46 +00:00
</div>
</script>
2012-09-21 04:46:45 +00:00
<!-- Find Session Screen -->
<div layout="screen" layout-id="findSession" class="screen secondary">
<h1>Find a Session</h1>
<p layout-link="home">Home</p>
2012-10-06 16:36:05 +00:00
<table>
<tr>
<th>Members</th>
<th>Name</th>
<th>Delete</th>
</tr>
<tbody id="findSession-tableBody">
</tbody>
</table>
2012-09-21 04:46:45 +00:00
</div>
2012-10-06 16:36:05 +00:00
<script type="text/template" id="template-findSession-row">
<tr>
<td>{participants}</td>
<td><a href="#/session/{id}">{description}</a></td>
<td><a action="delete" action-id="{id}">X</a></td>
</tr>
</script>
2012-09-21 04:46:45 +00:00
<!-- Practice Screen -->
<div layout="screen" layout-id="practice" class="screen secondary">
<h1>Practice</h1>
<p>TODO</p>
<p layout-link="home">Home</p>
</div>
<!-- Bands Screen -->
<div layout="screen" layout-id="bands" class="screen secondary">
<h1>Bands</h1>
<p>TODO</p>
<p layout-link="home">Home</p>
</div>
<!-- Recordings Screen -->
<div layout="screen" layout-id="recordings" class="screen secondary">
<h1>Recordings</h1>
<p>TODO</p>
<p layout-link="home">Home</p>
</div>
2012-11-11 20:34:05 +00:00
<!-- Account Summary Dialog -->
<div layout="dialog" layout-id="account" class="dialog">
<h1>Account Settings</h1>
<div class="panel">
<h2>Identity</h2>
<div id="identity-summary"></div>
<a layout-link="account-identity">Update</a>
</div>
<div class="panel">
<h2>Profile</h2>
<div id="profile-summary"></div>
<a layout-link="account-profile">Update</a>
</div>
<div class="buttonrow">
<a layout-action="close" class="button1">Close</a>
</div>
2012-09-21 04:46:45 +00:00
</div>
2012-11-11 20:34:05 +00:00
<script type="text/template" id="template-identity-summary">
<p>Username: {email}</p>
<p>Change Password Here</p>
</script>
<!-- Account Identity Update Form -->
<div layout="dialog" layout-id="account-identity" class="dialog">
<form id="account-identity-form">
<fieldset>
<legend>Identity</legend>
<div class="formrow">
<label>Email
<input name="email" type="text"/>
</label>
</div>
<div class="formrow">
<label>Password
<input name="password" type="password"/>
</label>
<p class="tip">Leave blank to leave unchanged</p>
</div>
<div class="formrow">
<label>Confirm Password
<input name="password_confirmation" type="password"/>
</label>
</div>
<div class="buttonrow">
<button layout-action="close">Cancel</button>
<input type="submit" value"Update"/>
</div>
</fieldset>
</form>
</div>
<!-- Account Profile Update Form -->
<div layout="dialog" layout-id="account-profile" class="dialog">
<form id="account-profile-form">
<fieldset>
<legend>Profile</legend>
<div class="formrow">
<label>Name
<input type="text" name="name"/>
</label>
</div>
<div class="formrow">
<label>Profile Picture
<p>TO DO</p>
</label>
</div>
<div class="formrow">
<div id="added-profile-instruments"></div>
<div id="profile-instruments-controls">
<label>Instruments
<input id="profile-instruments" type="text"/>
</label>
<p class="tip">Limit of 5</p>
</div>
</div>
<div class="buttonrow">
<button layout-action="close">Cancel</button>
<input type="submit" value"Update"/>
</div>
</fieldset>
</form>
</div>
<script type="text/template" id="template-profile-instrument">
<div class="profile-instrument" instrument-id="{instrumentId}">
<div class="instrument">{instrumentName} <span>X</span></div>
<div class="proficiency">
<select>
<option value="1">Beginner</option>
<option selected="selected" value="2">Intermediate</option>
<option value="3">Advanced</option>
<option value="4">Expert</option>
</select>
</div>
</div>
</script>
2012-09-21 04:46:45 +00:00
<div layout="notify" class="notify">
<h1>Notification Popup</h1>
<a layout-action="close">Close</a>
<p></p>
2012-11-08 15:13:47 +00:00
<div></div>
2012-09-21 04:46:45 +00:00
</div>
2012-09-22 19:21:56 +00:00
<script type="text/javascript">
2012-09-22 02:14:44 +00:00
$(function() {
2012-11-11 20:34:05 +00:00
2012-11-17 21:03:06 +00:00
JK = JK || {};
<% if current_user %>
JK.currentUserId = '<%= current_user.id %>';
<% else %>
JK.currentUserId = null;
<% end %>
if (JK.currentUserId) {
2012-11-11 20:34:05 +00:00
2012-11-17 21:03:06 +00:00
var jk = JK.JamKazam();
jk.initialize();
2012-09-28 08:20:43 +00:00
2012-11-17 21:03:06 +00:00
var header = new JK.Header(jk);
header.initialize();
2012-11-11 20:34:05 +00:00
2012-11-17 21:03:06 +00:00
var homeScreen = new JK.HomeScreen(jk);
homeScreen.initialize();
2012-11-11 20:34:05 +00:00
2012-11-17 21:03:06 +00:00
var createSessionScreen = new JK.CreateSessionScreen(jk);
createSessionScreen.initialize();
2012-11-11 20:34:05 +00:00
2012-11-17 21:03:06 +00:00
var findSessionScreen = new JK.FindSessionScreen(jk);
findSessionScreen.initialize();
2012-10-14 15:48:56 +00:00
2012-11-17 21:03:06 +00:00
var sessionScreen = new JK.SessionScreen(jk);
sessionScreen.initialize();
2012-10-14 15:48:56 +00:00
2012-11-17 21:03:06 +00:00
var jam_server = JK.JamServer;
jam_server.connect();
2012-10-14 15:48:56 +00:00
2012-11-17 21:03:06 +00:00
} else {
var landing = new JK.LandingPage(jk);
landing.initialize();
}
2012-11-11 20:34:05 +00:00
2012-09-22 02:14:44 +00:00
})
2012-09-22 19:21:56 +00:00
</script>
2012-09-22 02:14:44 +00:00
