diff --git a/web/app/assets/javascripts/jamtrack_landing.js.coffee b/web/app/assets/javascripts/jamtrack_landing.js.coffee
new file mode 100644
index 000000000..32ded4f14
--- /dev/null
+++ b/web/app/assets/javascripts/jamtrack_landing.js.coffee
@@ -0,0 +1,93 @@
+$ = jQuery
+context = window
+context.JK ||= {};
+
+context.JK.JamTrackLanding = class JamTrackLanding
+ constructor: (@app) ->
+ console.log "CONSTRUCTING", @app
+ @client = context.jamClient
+ @logger = context.JK.logger
+ @screen = null
+
+ initialize:() =>
+ screenBindings =
+ 'beforeShow': @beforeShow
+ 'afterShow': @afterShow
+ @app.bindScreen('jamtrackLanding', screenBindings);
+ @screen = $('#jamtrackLanding')
+ console.log "INITIALIZING", @screen
+
+ beforeShow:() =>
+ console.log "beforeShow"
+
+ afterShow:() =>
+ console.log "afterShow"
+
+ # selectWebcam:(e, data) =>
+ # console.log 'Selecting control: ', @webcamSelect
+ # device = @webcamSelect.val()
+ # if device != null and device != ''
+ # console.log 'Selecting webcam: ', device
+
+ # selectResolution:() =>
+ # console.log 'Selecting res control: ', @resolutionSelect
+ # @resolution = @resolutionSelect.val()
+ # if @resolution != null and @resolution != ''
+ # console.log 'Selecting res: ', @resolution
+ # @client.FTUESetVideoEncodeResolution @resolution
+
+ # setVideoOff:() =>
+ # if this.isVideoShared()
+ # @client.SessStopVideoSharing()
+
+ # isVideoShared:() =>
+ # @videoShared
+
+ # setToggleState:() =>
+ # available = @webcamSelect.find('option').size() > 0
+ # shared = this.isVideoShared()
+ # console.log 'Setting toggle from : ', shared
+ # @toggleBtn.prop 'disabled', true
+ # @toggleBtn.prop 'disabled', !available
+
+ # toggleWebcam:() =>
+ # console.log 'Toggling webcam from: ', this.isVideoShared()
+ # if this.isVideoShared()
+ # @client.SessStopVideoSharing()
+ # @videoShared = false
+ # else
+ # @client.SessStartVideoSharing 0
+ # @videoShared = true
+
+ # loadWebCams:() =>
+ # devices = @client.FTUEGetVideoCaptureDeviceNames()
+ # selectedDevice = @client.FTUECurrentSelectedVideoDevice()
+ # selectControl = @webcamSelect
+ # context._.each devices, (device) ->
+ # selected = device == selectedDevice
+ # option = $('',
+ # id: device
+ # value: device
+ # text: device)
+ # console.log("Appending ", option, selectControl)
+ # selectControl.append option
+ # selectControl.val selectedDevice
+
+ # if devices.length == 0
+ # @root.find('.no-webcam-msg').removeClass 'hidden'
+ # else
+ # @root.find('.no-webcam-msg').addClass 'hidden'
+
+ # loadResolutions:() =>
+ # resolutions = @client.FTUEGetAvailableEncodeVideoResolutions()
+ # selectControl = @resolutionSelect
+ # console.log 'FOUND THESE RESOLUTIONS', resolutions, selectControl
+ # context._.each resolutions, (value, key, obj) ->
+ # console.log 'RRR', key, value
+ # option = $('',
+ # value: value
+ # text: value)
+ # selectControl.append option
+
+ # if @resolution != null and @resolution != ''
+ # selectControl.val(@resolution)
diff --git a/web/app/assets/stylesheets/client/jamtrack.css.scss b/web/app/assets/stylesheets/client/jamtrack.css.scss
index 7d69b1b6f..1ca25d110 100644
--- a/web/app/assets/stylesheets/client/jamtrack.css.scss
+++ b/web/app/assets/stylesheets/client/jamtrack.css.scss
@@ -1,3 +1,29 @@
+#jamtrackLanding {
+ .list-columns {
+ h2 {
+ font-size: 1.4em;
+ font-weight:300;
+ font-style: bolder;
+ font-family: verdana;
+ text-transform: lowercase;
+ }
+ .about {
+ float: left;
+ width: 50%;
+ > * {
+ margin: 4px;
+ }
+ }
+ .browse {
+ float: left;
+ width: 50%;
+ > * {
+ margin: 4px;
+ }
+ }
+ }
+}
+
#jamtrackScreen {
a.jamtrack_help {
color: #fff;
diff --git a/web/app/views/clients/_home.html.slim b/web/app/views/clients/_home.html.slim
index 8130e82cc..e96de5c3b 100644
--- a/web/app/views/clients/_home.html.slim
+++ b/web/app/views/clients/_home.html.slim
@@ -71,7 +71,7 @@
.homebox-info
-if jamtracks
/! 1 session invitation, 19 public sessions active
- .homecard.jamtrack layout-grid-columns=small_tile_size layout-grid-position=column_positions[2] layout-grid-rows="1" layout-link="jamtrack"
+ .homecard.jamtrack layout-grid-columns=small_tile_size layout-grid-position=column_positions[2] layout-grid-rows="1" layout-link="jamtrackLanding"
h2 jamtracks
.homebox-info
/! 5 followers, 3 following
diff --git a/web/app/views/clients/_jamtrack_landing.html.slim b/web/app/views/clients/_jamtrack_landing.html.slim
new file mode 100644
index 000000000..9467a52df
--- /dev/null
+++ b/web/app/views/clients/_jamtrack_landing.html.slim
@@ -0,0 +1,18 @@
+#jamtrackLanding.screen.secondary layout='screen' layout-id='jamtrackLanding'
+ .content
+ .content-head
+ .content-icon=image_tag("content/icon_jamtracks.png", height:19, width:19)
+ h1 jamtracks
+ = render "screen_navigation"
+ .content-body
+ .list-columns
+ .about
+ h2 what are jamtracks?
+ .browse
+ h2 my jamtracks
+ .howto
+ ="To play with your JamTracks, open a JamTrack while in a session in the JamKazam app. Or "
+ a.jamtrack_help href="client#/jamtrack" visit the JamTracks Section of your account.
+ h2 browse jamtracks
+
+
diff --git a/web/app/views/clients/index.html.erb b/web/app/views/clients/index.html.erb
index 7586d0e9b..2c575c2a9 100644
--- a/web/app/views/clients/index.html.erb
+++ b/web/app/views/clients/index.html.erb
@@ -37,6 +37,7 @@
<%= render "users/feed_music_session_ajax" %>
<%= render "users/feed_recording_ajax" %>
<%= render "jamtrack" %>
+<%= render "jamtrack_landing" %>
<%= render "shopping_cart" %>
<%= render "signin" %>
<%= render "order" %>
@@ -245,6 +246,9 @@
var jamtrackScreen = new JK.JamTrackScreen(JK.app);
jamtrackScreen.initialize();
+ var jamtrackLanding = new JK.JamTrackLanding(JK.app);
+ jamtrackLanding.initialize();
+
var shoppingCartScreen = new JK.ShoppingCartScreen(JK.app);
shoppingCartScreen.initialize();