87 lines
4.1 KiB
Plaintext
87 lines
4.1 KiB
Plaintext
<table class="w100">
|
|
<tr>
|
|
<td valign="top" width="40%"><h3>Get a Widget:</h3>
|
|
<!-- ########## Javascript code for widget ########## -->
|
|
<textarea class="w95" rows="10">
|
|
<!-- widget -->
|
|
<div id="divWidgetCode" class="widget">
|
|
<!-- header -->
|
|
<div id="divWidgetCodeHeader" class="widget-header"><strong><span id="lblWidgetCodeType"></span></strong> by <span id="spnWidgetCodeArtistName"></span></div>
|
|
<!-- start widget content -->
|
|
<div class="widget-content">
|
|
<!-- band avatar -->
|
|
<div class="widget-avatar"><img id="imgWidgetCodeAvatar" alt=""/></div>
|
|
<a href="javascript:void(0)" class="widget-pausebutton" title="pause"></a>
|
|
<!-- song title -->
|
|
<div class="widget-controls">
|
|
<!-- timeline and controls -->
|
|
<div class="w100">
|
|
<!-- recording play controls -->
|
|
<div class="recording-controls">
|
|
<!-- playback position -->
|
|
<div class="recording-position">
|
|
<!-- start time -->
|
|
<div class="recording-time">0:00</div>
|
|
<!-- playback background & slider -->
|
|
<div class="recording-playback">
|
|
<div class="recording-slider"><%= css_image_sprite src: "images/content/slider_playcontrols.png", width: "5", height: "16" %></div>
|
|
</div>
|
|
<!-- end time -->
|
|
<div class="recording-time">4:59</div>
|
|
</div>
|
|
<!-- end playback position -->
|
|
<!-- current playback time -->
|
|
<div class="recording-current">1:23</div>
|
|
</div>
|
|
<!-- end recording play controls -->
|
|
</div>
|
|
</div>
|
|
<!-- band member avatars -->
|
|
<div class="widget-social">
|
|
<a href="#"><<%= css_image_sprite src: "images/content/icon_like.png", width: "12", height: "12", alt: "" %> LIKE</a>
|
|
<a href="#"><%= css_image_sprite class: "space", src: "images/content/icon_comment.png", width: "12", height: "12", alt: "" %> COMMENT</a>
|
|
<a href="#"><%= css_image_sprite class: "space", src: "images/content/icon_share.png", width: "13", height: "15", alt: "" %> SHARE</a>
|
|
</div>
|
|
<!-- jamkazam branding -->
|
|
<div class="widget-branding"><span id="spnWidgetCodeBranding"></span> on
|
|
<a href="http://jamkazam.com"><img src="images/shared/jk_logo_small.png" alt="" width="142" height="26" align="absbottom" /></a>
|
|
</div>
|
|
</div>
|
|
<!-- end widget content -->
|
|
</div>
|
|
<!-- /widget -->
|
|
</textarea> <br /><br />
|
|
<div class="right"><a class="button-orange mr10">COPY WIDGET CODE</a></div>
|
|
</td>
|
|
<td>
|
|
<div class="ml10">Preview:
|
|
<!-- recording widget -->
|
|
<div id="divWidgetPreview" class="widget">
|
|
<!-- header -->
|
|
<div id="divWidgetPreviewHeader" class="widget-header"><strong><span id="lblWidgetPreviewType"></span></strong> by <span id="spnWidgetPreviewArtistName"></span></div>
|
|
<!-- start widget content -->
|
|
<div class="widget-content">
|
|
<!-- band avatar -->
|
|
<div class="widget-avatar"><img id="imgWidgetPreviewAvatar" src="" alt=""/></div>
|
|
<a href="javascript:void(0)" class="widget-playbutton" title="play"></a>
|
|
|
|
<!-- song title -->
|
|
<div id="divWidgetPreviewTitle" class="widget-title"></div>
|
|
|
|
<!-- avatars -->
|
|
<div class="widget-members"></div>
|
|
|
|
<!-- jamkazam branding -->
|
|
<div class="widget-branding"><span id="spnWidgetPreviewBranding"></span> on
|
|
<a href=<%= "#{root_url}" %>>
|
|
<%= image_sprite_tag "shared/jk_logo_small.png", :size => "142x26", :align => "absbottom", :alt => "" %>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- end widget content -->
|
|
</div>
|
|
<!-- /widget -->
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table> |