413 lines
18 KiB
Plaintext
413 lines
18 KiB
Plaintext
|
<script type="text/javascript">
|
||
|
|
$(function() {
|
||
|
|
var jk = JamKazam();
|
||
|
|
jk.initialize();
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="curtain"></div>
|
||
|
|
<div layout="header" class="header">
|
||
|
|
<h1>JamKazam</h1>
|
||
|
|
<div class="userinfo">
|
||
|
|
<%= image_tag "avatars/avatar_jonathon.png", :class=> "avatar medium" %>
|
||
|
|
<div class="username">
|
||
|
|
<h2>Jonathon Wilson</h2>
|
||
|
|
<%= image_tag "down_arrow.png", :class=> "profile-toggle" %>
|
||
|
|
<ul>
|
||
|
|
<li>Profile</li>
|
||
|
|
<li>Log Out</li>
|
||
|
|
<li>Log Out</li>
|
||
|
|
<li>Log Out</li>
|
||
|
|
<li>Log Out</li>
|
||
|
|
</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>
|
||
|
|
<div layout="sidebar" class="sidebar">
|
||
|
|
<div layout-sidebar-expander="visible" class="expander visible">
|
||
|
|
<p>>> Hide</p>
|
||
|
|
</div>
|
||
|
|
<div layout-sidebar-expander="hidden" class="expander hidden">
|
||
|
|
<p><<</p>
|
||
|
|
</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>
|
||
|
|
<p class="current">Create Session (1/3): Session Info</p>
|
||
|
|
</div>
|
||
|
|
<p>Viewers: If it isn't obvious, no visual work has been done on this. Just putting the "stuff" on the page. We should be able to start making it function, and then styling can happen in parallel later.</p>
|
||
|
|
<form>
|
||
|
|
<fieldset>
|
||
|
|
<legend>Session Type</legend>
|
||
|
|
<label><input type="radio" name="session-type"> Band</label>
|
||
|
|
<label><input type="radio" name="session-type"> Invitation Only</label>
|
||
|
|
<label><input type="radio" name="session-type"> Invitation and Request</label>
|
||
|
|
<label><input type="radio" name="session-type" checked="true"> Open</label>
|
||
|
|
</fieldset>
|
||
|
|
<div class="formrow">
|
||
|
|
<label>Genre
|
||
|
|
<select>
|
||
|
|
<option>African</option>
|
||
|
|
<option>Ambient</option>
|
||
|
|
<option>Asian</option>
|
||
|
|
<option>Blues</option>
|
||
|
|
<option>Classical</option>
|
||
|
|
<option>Country</option>
|
||
|
|
<option>Electronic</option>
|
||
|
|
<option>Folk</option>
|
||
|
|
<option>Hop Hop</option>
|
||
|
|
<option>Jazz</option>
|
||
|
|
<option>Latin</option>
|
||
|
|
<option>Metal</option>
|
||
|
|
<option>Pop</option>
|
||
|
|
<option>R&B</option>
|
||
|
|
<option>Reggae</option>
|
||
|
|
<option>Religious</option>
|
||
|
|
<option>Rock</option>
|
||
|
|
<option>Ska</option>
|
||
|
|
<option>Other</option>
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="formrow">
|
||
|
|
<label>Description</label>
|
||
|
|
<textarea></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="formrow">
|
||
|
|
<label>
|
||
|
|
<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>
|
||
|
|
<div class="footer">
|
||
|
|
<button layout-link="createSessionInvite">Continue</button>
|
||
|
|
<button layout-link="home">Cancel</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Create Session:Invite Screen -->
|
||
|
|
<div layout="screen" layout-id="createSessionInvite" class="screen secondary">
|
||
|
|
<div class="breadcrumb">
|
||
|
|
<p layout-link="home">Home > </p>
|
||
|
|
<p class="current">Create a Session (2/3): Invite</p>
|
||
|
|
</div>
|
||
|
|
<form>
|
||
|
|
<fieldset>
|
||
|
|
<legend>Invite Musicians</legend>
|
||
|
|
<label> JamKazam Friends
|
||
|
|
<select>
|
||
|
|
<option>David Wilson</option>
|
||
|
|
<option>Brian Smith</option>
|
||
|
|
<option>Peter Walker</option>
|
||
|
|
<option>Seth Call</option>
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
<label> Add musicians as JamKazam friends from:
|
||
|
|
<a href="#">Facebook</a>
|
||
|
|
<a href="#">Twitter</a>
|
||
|
|
<a href="#">Google+</a>
|
||
|
|
<a href="#">Email</a>
|
||
|
|
</label>
|
||
|
|
</fieldset>
|
||
|
|
<fieldset>
|
||
|
|
<legend>Invite Fans</legend>
|
||
|
|
<label>
|
||
|
|
<input type="radio" checked="checked">Yes</input>
|
||
|
|
<input type="radio">No</input>
|
||
|
|
Let other JamKazam musicians listen to the session
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<input type="radio" checked="checked">Yes</input>
|
||
|
|
<input type="radio">No</input>
|
||
|
|
Let fans listen to the session
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<input type="radio" checked="checked">Yes</input>
|
||
|
|
<input type="radio">No</input>
|
||
|
|
Let fans text chat with the musicians in the session
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
Post session link for fans on:
|
||
|
|
<a href="#">Facebook</a>
|
||
|
|
<a href="#">Twitter</a>
|
||
|
|
<a href="#">Google+</a>
|
||
|
|
</label>
|
||
|
|
</fieldset>
|
||
|
|
<div class="footer">
|
||
|
|
<button layout-link="createSession">Back</button>
|
||
|
|
<button layout-link="createSessionAudio">Continue</button>
|
||
|
|
<button layout-link="home">Cancel</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Create Session:Audio Screen -->
|
||
|
|
<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 -->
|
||
|
|
<div layout="screen" layout-id="session" class="screen secondary">
|
||
|
|
<div class="breadcrumb">
|
||
|
|
<p layout-link="home">Home > </p>
|
||
|
|
<p class="current">Session</p>
|
||
|
|
</div>
|
||
|
|
<h1>TODO: Next</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Find Session Screen -->
|
||
|
|
<div layout="screen" layout-id="findSession" class="screen secondary">
|
||
|
|
<h1>Find a Session</h1>
|
||
|
|
<p>TODO</p>
|
||
|
|
<p layout-link="home">Home</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 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>
|
||
|
|
|
||
|
|
<div layout="dialog" layout-id="dialog1" class="dialog">
|
||
|
|
<h1>Dialog 1</h1>
|
||
|
|
<a layout-action="close">Close</a>
|
||
|
|
</div>
|
||
|
|
<div layout="notify" class="notify">
|
||
|
|
<h1>Notification Popup</h1>
|
||
|
|
<a layout-action="close">Close</a>
|
||
|
|
<p></p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Templates for use by JS -->
|
||
|
|
<script type="text/template" id="channel-view">
|
||
|
|
<div class="channel-container">
|
||
|
|
<div class="input-meter">
|
||
|
|
</div>
|
||
|
|
<div class="slider-guide">
|
||
|
|
</div>
|
||
|
|
<div class="slider-handle">
|
||
|
|
</div>
|
||
|
|
<div class="mute">
|
||
|
|
<div class="mute-button"></div>
|
||
|
|
<p>Mute</p>
|
||
|
|
</div>
|
||
|
|
<div class="channel-info">
|
||
|
|
<p>{name}</p>
|
||
|
|
<p>{instrument}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</script>
|