From 9d7877bb39a0ff45ce67e95ca04d32077027a23a Mon Sep 17 00:00:00 2001 From: Scott Ostler Date: Sun, 3 Jan 2010 00:57:07 -0500 Subject: Adding latest content --- static/about.html | 98 ++++++++++++++++++++++++++ static/bg-btn-blue.png | Bin 0 -> 411 bytes static/chat.st | 92 +++++++++++++++++++++++++ static/dblue2.png | Bin 222 -> 289 bytes static/dumpteam.png | Bin 0 -> 441855 bytes static/header.css | 183 +++++++++++++++++++++++++++++++++++++++++++++++-- static/index.html | 12 ++-- static/jquery.tipsy.js | 60 ++++++++++++++++ static/pichat.css | 123 +++++++++++++++++---------------- static/profile.css | 121 ++++++++++++++++++++------------ static/scroll.js | 49 +++++++++++++ static/topgrad.png | Bin 319 -> 177 bytes 12 files changed, 619 insertions(+), 119 deletions(-) create mode 100644 static/about.html create mode 100755 static/bg-btn-blue.png create mode 100755 static/chat.st create mode 100644 static/dumpteam.png create mode 100755 static/jquery.tipsy.js create mode 100644 static/scroll.js (limited to 'static') diff --git a/static/about.html b/static/about.html new file mode 100644 index 0000000..85adbad --- /dev/null +++ b/static/about.html @@ -0,0 +1,98 @@ + + + + + + + + + + +

+ + + + +

+ +

$if(user_nick)$ + Profile | + $else$ Register | + $endif$ + Room A + $if(user_nick)$ $endif$

$if(user_nick)$ Logout $else$ Log In$endif$ +

+ +

+ Ryder Ripps - Lead Vocals
+ Scott Ostler - Drum Machines/Vocoder
+ Tim Baker - Keytar
+ Stefan Moore - Chick Magnet

+ +

@2010 dump.fm About Us Blog Goodies Help Terms Privacy

+ + \ No newline at end of file diff --git a/static/bg-btn-blue.png b/static/bg-btn-blue.png new file mode 100755 index 0000000..2f5da4c Binary files /dev/null and b/static/bg-btn-blue.png differ diff --git a/static/chat.st b/static/chat.st new file mode 100755 index 0000000..aecf87c --- /dev/null +++ b/static/chat.st @@ -0,0 +1,92 @@ + + + dump.fm + + + + + + + + + + + + + + + $header()$ + +

+ +

+ $users: { u | +

$u$
+

+ }$ +

+ +

+ $messages: { m | +

$m.nick$: + $m.content$

+ }$ +

+ $if(user_nick)$ +

+ + +

+ $endif$ +

+ + + + + + + + +

+ $footer()$

+ + diff --git a/static/dblue2.png b/static/dblue2.png index 0b7253b..3b5c667 100755 Binary files a/static/dblue2.png and b/static/dblue2.png differ diff --git a/static/dumpteam.png b/static/dumpteam.png new file mode 100644 index 0000000..f879d01 Binary files /dev/null and b/static/dumpteam.png differ diff --git a/static/header.css b/static/header.css index 2087142..da1afaf 100644 --- a/static/header.css +++ b/static/header.css @@ -12,7 +12,13 @@ text-decoration: none; text-shadow: -1px 1px 1px #; background-color:#036aca; + height:60px; + bottom:0px; + box-shadow: 3px 2px 2px #036aca; +-webkit-box-shadow: 3px 2px 2px #036aca; +-moz-box-shadow: 3px 2px 2px #036aca; +filter: progid:DXImageTransform.Microsoft.dropShadow(color=#036aca, offX=3, offY=4, positive=true); color: #fff; @@ -34,13 +40,13 @@ height: 69px; } #bar7{ - top:35px; + top:33px; position:absolute; font-family: Arial, Helvetica, sans-serif; width: 500px; - font-size: 18px; + font-size: 15px; left: 150px; - margin-left: 3%; + margin-left: 2%; margin-right: 8%; letter-spacing: -1px; z-index: 999; @@ -68,9 +74,178 @@ left:0px; position:absolute; width: 100%; - height: 78px; + height: 62px; z-index: 1000; } +#topnav { + padding:10px 0px 12px; + font-size:11px; + line-height:23px; + text-align:right; +} +#topnav a.signin { + background:#88bbd4; + padding:4px 6px 6px; + text-decoration:none; + font-weight:bold; + color:#fff; + -webkit-border-radius:4px; + -moz-border-radius:4px; + border-radius:4px; + *background:transparent url("images/signin-nav-bg-ie.png") no-repeat 0 0; + *padding:4px 12px 6px; +} +#topnav a.signin:hover { + background:#59B; + *background:transparent url("images/signin-nav-bg-hover-ie.png") no-repeat 0 0; + *padding:4px 12px 6px; +} +#topnav a.signin, #topnav a.signin:hover { + *background-position:0 3px!important; +} + +a.signin { + position:relative; + margin-left:3px; +} +a.signin span { + background-image:url("images/toggle_down_light.png"); + background-repeat:no-repeat; + background-position:100% 50%; + padding:4px 16px 6px 0; +} +#topnav a.menu-open { + background:#ddeef6!important; + color:#666!important; + outline:none; +} +#small_signup { + display:inline; + float:none; + line-height:23px; + margin:25px 0 0; + width:170px; +} +a.signin.menu-open span { + background-image:url("images/toggle_up_dark.png"); + color:#789; +} + +#signin_menu { + -moz-border-radius-topleft:5px; + -moz-border-radius-bottomleft:5px; + -moz-border-radius-bottomright:5px; + -webkit-border-top-left-radius:5px; + -webkit-border-bottom-left-radius:5px; + -webkit-border-bottom-right-radius:5px; + display:none; + background-color:#ddeef6; + position:absolute; + width:210px; + z-index:100; + border:1px transparent; + text-align:left; + padding:12px; + top: 24.5px; + right: 0px; + margin-top:5px; + margin-right: 0px; + *margin-right: -1px; + color:#789; + font-size:11px; +} + +#signin_menu input[type=text], #signin_menu input[type=password] { + display:block; + -moz-border-radius:4px; + -webkit-border-radius:4px; + border:1px solid #ACE; + font-size:13px; + margin:0 0 5px; + padding:5px; + width:203px; +} +#signin_menu p { + margin:0; +} +#signin_menu a { + color:#6AC; +} +#signin_menu label { + font-weight:normal; +} +#signin_menu p.remember { + padding:10px 0; +} +#signin_menu p.forgot, #signin_menu p.complete { + clear:both; + margin:5px 0; +} +#signin_menu p a { + color:#27B!important; +} +#signin_submit { + -moz-border-radius:4px; + -webkit-border-radius:4px; + background:#39d url('images/bg-btn-blue.png') repeat-x scroll 0 0; + border:1px solid #39D; + color:#fff; + text-shadow:0 -1px 0 #39d; + padding:4px 10px 5px; + font-size:11px; + margin:0 5px 0 0; + font-weight:bold; +} +#signin_submit::-moz-focus-inner { +padding:0; +border:0; +} +#signin_submit:hover, #signin_submit:focus { + background-position:0 -5px; + cursor:pointer; +} + +.tipsy-inner { + padding:10px 15px; + line-height:1.5em; + font-weight:bold; +} +.tipsy { + opacity:.8; + filter:alpha(opacity=80); + background-repeat:no-repeat; + padding:5px; +} +.tipsy-inner { + padding:8px 8px; + max-width:200px; + font:11px 'Lucida Grande', sans-serif; + font-weight:bold; + -moz-border-radius:4px; + -khtml-border-radius:4px; + -webkit-border-radius:4px; + border-radius:4px; + background-color:#000; + color:white; + text-align:left; +} +.tipsy-north { + background-image:url(images/tipsy-north.gif); + background-position:top center; +} +.tipsy-south { + background-image:url(images/tipsy-south.gif); + background-position:bottom center; +} +.tipsy-east { + background-image:url(images/tipsy-east.gif); + background-position:right center; +} +.tipsy-west { + background-image:url(images/tipsy-west.gif); + background-position:left center; +} + .btnav { border: 0px #000000 solid;} body { diff --git a/static/index.html b/static/index.html index 4615d9f..6c6450a 100755 --- a/static/index.html +++ b/static/index.html @@ -129,13 +129,9 @@ td { } .btnav { border: 0px #000000 solid;} body { - background-color:#e3e3e3; - - background-image:url(static/brokenlinkk.gif); + background-image:url(static/shaq.gif); background-position:center; - - background-repeat:no-repeat; overflow:hidden; } .submit { @@ -202,13 +198,13 @@ body {

u -
p - @@ -231,7 +227,7 @@ onchange="this.beenchanged = true;"/> -
+ \ No newline at end of file diff --git a/static/jquery.tipsy.js b/static/jquery.tipsy.js new file mode 100755 index 0000000..03ae8e4 --- /dev/null +++ b/static/jquery.tipsy.js @@ -0,0 +1,60 @@ +(function($) { + $.fn.tipsy = function(opts) { + + opts = $.extend({fade: false, gravity: 'n'}, opts || {}); + var tip = null, cancelHide = false; + + this.hover(function() { + + $.data(this, 'cancel.tipsy', true); + + var tip = $.data(this, 'active.tipsy'); + if (!tip) { + tip = $('
' + $(this).attr('title') + '
'); + tip.css({position: 'absolute', zIndex: 100000}); + $(this).attr('title', ''); + $.data(this, 'active.tipsy', tip); + } + + var pos = $.extend({}, $(this).offset(), {width: this.offsetWidth, height: this.offsetHeight}); + tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body); + var actualWidth = tip[0].offsetWidth, actualHeight = tip[0].offsetHeight; + + switch (opts.gravity.charAt(0)) { + case 'n': + tip.css({top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-north'); + break; + case 's': + tip.css({top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-south'); + break; + case 'e': + tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}).addClass('tipsy-east'); + break; + case 'w': + tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}).addClass('tipsy-west'); + break; + } + + if (opts.fade) { + tip.css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: 1}); + } else { + tip.css({visibility: 'visible'}); + } + + }, function() { + $.data(this, 'cancel.tipsy', false); + var self = this; + setTimeout(function() { + if ($.data(this, 'cancel.tipsy')) return; + var tip = $.data(self, 'active.tipsy'); + if (opts.fade) { + tip.stop().fadeOut(function() { $(this).remove(); }); + } else { + tip.remove(); + } + }, 100); + + }); + + }; +})(jQuery); diff --git a/static/pichat.css b/static/pichat.css index f7ec7a8..2d099d8 100644 --- a/static/pichat.css +++ b/static/pichat.css @@ -4,6 +4,7 @@ body { background-color:#e3e3e3; + } a { font-size: 12px; @@ -29,6 +30,7 @@ a:active { #content{ z-index: 3; overflow: auto; + min-width:600px; } #chatboxx { @@ -46,31 +48,29 @@ a:active { position:absolute; width:100%; bottom:0px; - font-size:12px; - font-family:"Times New Roman", Times, serif; - background-image:url(/static/footer.png); - background-repeat:repeat-x; - background-position:top; - height:30px; +line-height:2.5; + font-size:11px; +word-spacing:8px; +height:28px; color: #000; - line-height: 2; + } #messagePane { - border: 2px solid #15fff3; -height:78%; + border: 2px solid #c8cbce; + padding: 5px; +top:58px; +bottom:65px; position:fixed; width: 98%; - background-color:#FFF; left:7px; right:10px; - top:60px; + float: left; min-width:500px; z-index:5; - } #messageList { @@ -96,94 +96,103 @@ height:78%; #msgInputDiv { position:relative; min-width:500px; + z-index:100; left:0px; -bottom:6px; - +bottom:5px; width: 100%; } #msgInput { width: 100%; - + z-index:100; + background-color:#FFF; margin-top: 15px; left:0px; position:relative; - border:2px solid #999; + border:2px solid #c8cbce; height:36px; font-size:20px; min-width:500px; + border-top-left-radius:5px; + border-top-right-radius:5px; + -webkit-border-top-left-radius:5px; + -webkit-border-top-right-radius:5px; + -moz-border-radius-topleft:5px; + -moz-border-radius-topright:5px; + border-bottom-left-radius:5px; + border-bottom-right-radius:5px; + -webkit-border-bottom-left-radius:5px; + -webkit-border-bottom-right-radius:5px; + -moz-border-radius-bottomleft:5px; + -moz-border-radius-bottomright:5px; + box-shadow: 2px 3px 4px #c8cbce; +-webkit-box-shadow: 2px 3px 4px #c8cbce; +-moz-box-shadow: 2px 3px 4px #c8cbce; +filter: progid:DXImageTransform.Microsoft.dropShadow(color=#c8cbce, offX=3, offY=4, positive=true); } .msgInput { - - min-width:500px; + z-index:100; } #msgSubmit { + position:absolute; display:inline-block; width:120px; height:35px; right:0px; font-size:20px; +background-image:url(/static/bg-btn-blue.png); top:15px; text-align:center; + z-index:100; cursor:pointer; - background-color:#087cff; - -moz-border-radius:2px; - -webkit-border-radius:2px; - -opera-border-radius:2px; - -khtml-border-radius:2px; + border-top-right-radius:10px; + -webkit-border-top-right-radius:5px; + -moz-border-radius-topright:5px; + border-bottom-right-radius:5px; + -webkit-border-bottom-right-radius:5px; + -moz-border-radius-bottomright:5px; border-radius:2px; font-size:12px; color:#fff; text-shadow:1px 1px 3px rgba(0,0,0,0.5); - - } - .msgDiv img{ max-width:650px; width: expression(this.width > 650 ? 650: true); max-height:400px; height: expression(this.width > 400 ? 400: true); max-width:400px; - - - z-index: 1; - - - - - - - + z-index: 1; +} +.msgDiv {padding:2px; } -.msgDiv {padding:2px; } - .oldmsg { color: #666; } - #userList { overflow-x: hidden; - - height: 75%; + overflow-y:auto; + height: auto; margin: 0px; position: absolute; padding: 5px; - top:70px; - width: 150px; + top:85px; + min-width: 150px; + width:11%; float:right; - right: 40px; + right: 5%; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight:420; border-top-left-radius:5px; border-top-right-radius:5px; -webkit-border-top-left-radius:5px; + background-color:#FFF; -webkit-border-top-right-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; @@ -193,18 +202,20 @@ top:15px; -webkit-border-bottom-right-radius:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; - min-width:90px; - + max-height:250px; + box-shadow: 3px 4px 4px #c8cbce; +-webkit-box-shadow: 3px 4px 4px #c8cbce; +-moz-box-shadow: 3px 3px 4px #c8cbce; +filter: progid:DXImageTransform.Microsoft.dropShadow(color=#c8cbce, offX=3, offY=4, positive=true); text-overflow:ellipsis; - - z-index:18; text-align: left; } .username{height:30px; margin-top:2px; line-height:20px; -text-indent:4px; +text-indent:6px; +z-index:18; min-width:90px; overflow:hidden; @@ -218,25 +229,15 @@ text-decoration:none; .username a:hover { display:block; width:100%; - - height:100%; color:#000; - text-decoration:none; background-color:#f3f3f3; - - border-top-right-radius:5px; - -webkit-border-top-right-radius:5px; - -moz-border-radius-topright:5px; - border-bottom-right-radius:5px; - -webkit-border-bottom-right-radius:5px; - -moz-border-radius-bottomright:5px; } #userList img{ @@ -249,7 +250,6 @@ background-color:#f3f3f3; right:1px; z-index:77; height:30px; - border-top-left-radius:5px; border-top-right-radius:5px; -webkit-border-top-left-radius:5px; @@ -287,8 +287,7 @@ background-color:#f3f3f3; } #avatar -{ - +{ right:1px; float:right; text-align:left; diff --git a/static/profile.css b/static/profile.css index ff11cac..dec02ae 100644 --- a/static/profile.css +++ b/static/profile.css @@ -2,34 +2,45 @@ float: right; padding: 20px; width: 180px; -position:absolute; -top:0px; -right:15; + position:absolute; + top:0px; + right:35; margin-top:15px; background-color:#f5f5f5; background-image:url(/static/spex.ppng); border:solid 1px #999; - - - + text-overflow: ellipsis-word; background-position:center; z-index:999; - -min-height:600px; -height:98%; - -line-height:1.6; - + min-height:600px; + border-top-left-radius:5px; + border-top-right-radius:5px; + -webkit-border-top-left-radius:5px; + -webkit-border-top-right-radius:5px; + -moz-border-radius-topleft:5px; + -moz-border-radius-topright:5px; + border-bottom-left-radius:5px; + border-bottom-right-radius:5px; + -webkit-border-bottom-left-radius:5px; + -webkit-border-bottom-right-radius:5px; + -moz-border-radius-bottomleft:5px; + -moz-border-radius-bottomright:5px; + box-shadow: 3px 4px 10px #c8cbce; +-webkit-box-shadow: 3px 4px 10px #c8cbce; +-moz-box-shadow: 3px 3px 10px #c8cbce; + + line-height:1.6; } #chatrap{ top: 10px; min-width:800px; + position:relative; width:100%; - padding-bottom:105px; + } #footer @@ -49,29 +60,15 @@ width:100%; } #log { - - background-color:#f; - -position:absolute; -width:100%; -top:50px; -margin-right:5px; - padding-bottom: 20px; + position:absolute; + width:100%; + top:50px; + margin-right:5px; + padding-top: 15px; min-height: 800px; - border-top-left-radius:5px; - border-top-right-radius:5px; - -webkit-border-top-left-radius:5px; - -webkit-border-top-right-radius:5px; - -moz-border-radius-topleft:5px; - -moz-border-radius-topright:5px; - border-bottom-left-radius:5px; - border-bottom-right-radius:5px; - -webkit-border-bottom-left-radius:5px; - -webkit-border-bottom-right-radius:5px; - -moz-border-radius-bottomleft:5px; - -moz-border-radius-bottomright:5px; - border:solid 5px #f; + + } #posts { @@ -92,11 +89,11 @@ margin-right:5px; .logged-dump{ - +text-overflow: ellipsis-word; padding: 15px; font-family: Arial, Helvetica, sans-serif; -margin-right:15px; +margin-right:35; @@ -106,42 +103,76 @@ margin-right:15px; line-height:15px; background-color:#fff; - background-image:/static/footer.png; - background-position:bottom; + border-top-left-radius:5px; + border-top-right-radius:5px; + -webkit-border-top-left-radius:5px; + -webkit-border-top-right-radius:5px; + -moz-border-radius-topleft:5px; + -moz-border-radius-topright:5px; + border-bottom-left-radius:5px; + border-bottom-right-radius:5px; + -webkit-border-bottom-left-radius:5px; + -webkit-border-bottom-right-radius:5px; + -moz-border-radius-bottomleft:5px; + -moz-border-radius-bottomright:5px; z-index:4; line-height:20px; text-align: left; - margin-left:15px; + margin-left:35; } .editable { color: #0AA; + width:250px; } .editing { color: #F0F; } div#avatar { - overflow: hidden; - text-overflow: ellipsis; + overflow: hidden; + text-overflow: ellipsis; + max-width: 160px; + padding-bottom:40px; } + #contact { + max-width: 200px; + + + text-overflow: ellipsis-word; + } + #bio { + max-width: 200px; + text-overflow: ellipsis-word; + } h2 { letter-spacing:-1px; - font-weight:lighter; color:#087cff; - - height:28px; + height:48px; font-size:33px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; text-transform:capitalize; + - text-shadow: -6px 4px 4px #ccc; + text-shadow: 3px 4px 4px #c8cbce; } img#avatarPic { max-height:250px; + border-top-left-radius:5px; + border-top-right-radius:5px; + -webkit-border-top-left-radius:5px; + -webkit-border-top-right-radius:5px; + -moz-border-radius-topleft:5px; + -moz-border-radius-topright:5px; + border-bottom-left-radius:5px; + border-bottom-right-radius:5px; + -webkit-border-bottom-left-radius:5px; + -webkit-border-bottom-right-radius:5px; + -moz-border-radius-bottomleft:5px; + -moz-border-radius-bottomright:5px; } #logged-dump { diff --git a/static/scroll.js b/static/scroll.js new file mode 100644 index 0000000..955e188 --- /dev/null +++ b/static/scroll.js @@ -0,0 +1,49 @@ +// JavaScript Document +var scrollbar = new Control.ScrollBar('scrollbar_content','messagePane'); + +$('scroll_down_50').observe('click',function(event){ + scrollbar.scrollBy(-50); + event.stop(); +}); + +$('scroll_up_50').observe('click',function(event){ + scrollbar.scrollBy(50); + event.stop(); +}); + +$('scroll_top').observe('click',function(event){ + scrollbar.scrollTo('top'); + event.stop(); +}); + +$('scroll_bottom').observe('click',function(event){ + //to animate a scroll operation you can pass true + //or a callback that will be called when scrolling is complete + scrollbar.scrollTo('bottom',function(){ + if(typeof(console) != "undefined") + console.log('Finished scrolling to bottom.'); + }); + event.stop(); +}); + +$('scroll_second').observe('click',function(event){ + //you can pass a number or element to scroll to + //if you pass an element, it will be centered, unless it is + //near the bottom of the container + scrollbar.scrollTo($('second_subhead')); + event.stop(); +}); + +$('scroll_third').observe('click',function(event){ + //passing true will animate the scroll + scrollbar.scrollTo($('third_subhead'),true); + event.stop(); +}); + +$('scroll_insert').observe('click',function(event){ + $('scrollbar_content').insert('
Inserted: ' + $('repeat').innerHTML + '
'); + //you only need to call this if ajax or dom operations modify the layout + //this is automatically called when the window resizes + scrollbar.recalculateLayout(); + event.stop(); +}); \ No newline at end of file diff --git a/static/topgrad.png b/static/topgrad.png index b43b6cd..7fd6345 100755 Binary files a/static/topgrad.png and b/static/topgrad.png differ -- cgit v1.2.3-70-g09d2