New Post Panel
Overlay that can appear on any page.
Default
<div class="new-post-panel" style="display: block">
<div class="new-post-panel--inner">
<div class="start-screen">
<div class="upload-an-image">
<form>
<h2>
Upload an <a href="">image</a
><input name="file" type="file" class="upload-image-input" />
</h2>
</form>
</div>
</div>
<div class="link-to-video">
<h2>Link to a <a href="">video</a></h2>
</div>
</div>
</div>
With Shakes
<div class="new-post-panel" style="display: block">
<div class="new-post-panel--inner">
<div class="start-screen">
<div class="upload-an-image">
<form>
<h2>
Upload an <a href="">image</a
><input name="file" type="file" class="upload-image-input" />
</h2>
<div class="shake-selector">
<h3>
<a href="" class="selected-shake">
In
<span class="green">
Your Shake
<span class="caret"></span>
</span>
</a>
</h3>
<ul>
<li>
<a href=""> Your Shake </a>
</li>
<li>
<a href="">
Shake for Long Names Like
Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</a>
</li>
<li>
<a href=""> Barbarella </a>
</li>
<li>
<a href=""> Dune </a>
</li>
</ul>
</div>
</form>
</div>
</div>
<div class="link-to-video">
<h2>Link to a <a href="">video</a></h2>
<div class="shake-selector">
<h3>
<a href="" class="selected-shake">
In
<span class="green">
Your Shake
<span class="caret"></span>
</span>
</a>
</h3>
<ul>
<li>
<a href=""> Your Shake </a>
</li>
<li>
<a href="">
Shake for Long Names Like
Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</a>
</li>
<li>
<a href=""> Barbarella </a>
</li>
<li>
<a href=""> dune </a>
</li>
</ul>
</div>
</div>
</div>
</div>
With Shakes Open
<div class="new-post-panel" style="display: block">
<div class="new-post-panel--inner">
<div class="start-screen">
<div class="upload-an-image">
<form>
<h2>
Upload an <a href="">image</a
><input name="file" type="file" class="upload-image-input" />
</h2>
<div class="shake-selector is-active">
<h3>
<a href="" class="selected-shake">
In
<span class="green">
Your Shake
<span class="caret"></span>
</span>
</a>
</h3>
<ul style="display: block">
<li>
<a href=""> Your Shake </a>
</li>
<li>
<a href="">
Shake for Long Names Like
Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</a>
</li>
<li>
<a href=""> Barbarella </a>
</li>
<li>
<a href=""> Dune </a>
</li>
</ul>
</div>
</form>
</div>
</div>
<div class="link-to-video">
<h2>Link to a <a href="">video</a></h2>
<div class="shake-selector">
<h3>
<a href="" class="selected-shake">
In
<span class="green">
Your Shake
<span class="caret"></span>
</span>
</a>
</h3>
<ul>
<li>
<a href=""> Your Shake </a>
</li>
<li>
<a href="">
Shake for Long Names Like
Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</a>
</li>
<li>
<a href=""> Barbarella </a>
</li>
<li>
<a href=""> dune </a>
</li>
</ul>
</div>
</div>
</div>
</div>
Save Video
<div class="new-post-panel" style="display: block">
<div class="new-post-panel--inner">
<div class="content">
<h2>Post a Video</h2>
<p>
To post a video enter the URL to the video below. We currently support
videos from YouTube, Flickr, & Vimeo.
</p>
<form class="fun-form save-video-form">
<div class="field-input"><input name="url" class="input-text" /></div>
<a class="btn btn-primary btn-shadow" href="">Go get it!</a>
</form>
</div>
</div>
</div>
Confirm Video
<div class="new-post-panel" style="display: block">
<div class="new-post-panel--inner">
<div class="content">
<h2>Is this the video?</h2>
<iframe
class="youtube-player"
type="text/html"
width="550"
height="339"
src="https://www.youtube.com/embed/JwIbSuYHqV8?fs=1&feature=oembed&rnd=0.436822756211"
frameborder="0"
id="ytframe"
allowfullscreen=""
></iframe>
<form class="post-video-form">
<a class="btn btn-primary btn-shadow" href="">Yes! Post it please!</a>
</form>
</div>
</div>
</div>
Email Unconfirmed
<div class="new-post-panel" style="display: block">
<div class="new-post-panel--inner">
<div class="start-screen">
<div class="email-unverified">
<h2>Email Unconfirmed</h2>
<h3>
In order to post, you have to confirm your email address first. Check
your email for the confirmation link. Visit your
<a href="#">account settings</a> if you need it re-sent.
</h3>
</div>
</div>
</div>
</div>
Over Upload Limit
Note: There does not appear to be a way to reach this view, since the "New Post" button is hidden if you're over the upload limit.
<div class="new-post-panel" style="display: block">
<div class="new-post-panel--inner">
<div class="start-screen">
<div class="over-upload-limit">
<h2>Upload account limit</h2>
<h3>
You’ve reached the limit on the number of megs you can upload in a
month. That limit is 300 megabytes. If you’d like to
<a href="#">become a Double Scoop member</a>! It’s just $2/month.
</h3>
</div>
</div>
<div class="link-to-video">
<h2>Link to a <a href="">video</a></h2>
<div class="shake-selector">
<input type="hidden" name="shake_id" value="" />
<h3>
<a href="" class="selected-shake">
In
<span class="green">
Your Shake
<span class="caret"></span>
</span>
</a>
</h3>
<ul style="display: none">
<li>
<a href=""> Your Shake </a>
</li>
<li>
<a href="">
Shake for Long Names Like
Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</a>
</li>
<li>
<a href=""> Barbarella </a>
</li>
<li>
<a href=""> dune </a>
</li>
</ul>
</div>
</div>
</div>
</div>