zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-04-24 17:22:35 +02:00
Code Issues Projects Releases Packages Wiki Activity

Move mockups to subdir

Browse source
This commit is contained in:
Kyle Drake 2016-10-13 20:18:40 -05:00
parent dec243f14d
commit dadeb778c9
6 changed files with 988 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
app/mockup.rb
View file

@ -1,37 +1,37 @@
# :nocov:
get '/home_mockup' do
erb :'home_mockup'
get '/mockup/home' do
erb :'mockup/home'
end
get '/edit_mockup' do
erb :'edit_mockup'
get '/mockup/edit' do
erb :'mockup/edit'
end
get '/profile_mockup' do
get '/mockup/profile' do
require_login
erb :'profile_mockup', locals: {site: current_site}
erb :'mockup/profile', locals: {site: current_site}
end
get '/browse_mockup' do
erb :'browse_mockup'
get '/mockup/browse' do
erb :'mockup/browse'
end
get '/tips_mockup' do
erb :'tips_mockup'
get '/mockup/tips' do
erb :'mockup/tips'
end
get '/welcome_mockup' do
get '/mockup/welcome' do
require_login
erb :'welcome_mockup', locals: {site: current_site}
erb :'mockup/welcome', locals: {site: current_site}
end
get '/stats_mockup' do
get '/mockup/stats' do
require_login
erb :'stats_mockup', locals: {site: current_site}
erb :'mockup/stats', locals: {site: current_site}
end
get '/tutorial_mockup_c1p2' do
get '/mockup/tutorial-c1p2' do
require_login
erb :'tutorial_mockup_c1p2', locals: {site: current_site}
erb :'mockup/tutorial-c1p2', locals: {site: current_site}
end
# :nocov:
# :nocov:

287
views/mockup/home.erb Normal file
View file

@ -0,0 +1,287 @@
<div class="header-Outro with-columns">
<div class="row content">
<div class="col col-66">
<h3>My Feed</h3>
<div class="feed-filter"><a href="">All Activity</a> <a href="">Activity on your profile</a></div>
</div>
<div class="col col-32">
<h3>My Website</h3>
<a href="/dashboard" class="btn-Action edit">Edit Site</a>
</div>
</div>
</div>
<div class="container">
<div class="content misc-page columns right-col"><div class="col-left">
<div class="col col-66">
<% if false %>
<div class="welcome">
<h4>Welcome to your Neocities news feed!</h4>
<p>You aren't following any websites yet! Once you do, updates will show up here and you can like and comment on them. Here are some website suggestions based on your tags, or <a href="/browse">check out all the sites on Neocities!</a></p>
</div>
<div class="site-suggestion">
<div class="site-portrait">
<a href="http://dragonquest.neocities.org">
<img src="http://neocities.org/site_screenshots/dragonquest.jpg" alt="">
<span class="caption">dragonquest</span>
</a>
</div>
<a class="tag" href="http://neocities.org">Games</a>
<a class="tag" href="http://neocities.org">Anime</a>
<a class="tag" href="http://neocities.org">Art</a>
<a class="tag" href="http://neocities.org">Cooking</a>
</div>
<div class="site-suggestion">
<div class="site-portrait">
<a href="http://dragonquest.neocities.org">
<img src="http://neocities.org/site_screenshots/dragonquest.jpg" alt="">
<span class="caption">dragonquest</span>
</a>
</div>
<a class="tag" href="http://neocities.org">Games</a>
<a class="tag" href="http://neocities.org">Anime</a>
<a class="tag" href="http://neocities.org">Art</a>
</div>
<div class="site-suggestion">
<div class="site-portrait">
<a href="http://dragonquest.neocities.org">
<img src="http://neocities.org/site_screenshots/dragonquest.jpg" alt="">
<span class="caption">dragonquest</span>
</a>
</div>
<a class="tag" href="http://neocities.org">Games</a>
<a class="tag" href="http://neocities.org">Anime</a>
</div>
<div class="site-suggestion">
<div class="site-portrait">
<a href="http://dragonquest.neocities.org">
<img src="http://neocities.org/site_screenshots/dragonquest.jpg" alt="">
<span class="caption">dragonquest</span>
</a>
</div>
<a class="tag" href="http://neocities.org">Games</a>
</div>
<div class="site-suggestion">
<div class="site-portrait">
<a href="http://dragonquest.neocities.org">
<img src="http://neocities.org/site_screenshots/dragonquest.jpg" alt="">
<span class="caption">dragonquest</span>
</a>
</div>
<a class="tag" href="http://neocities.org">Games</a>
<a class="tag" href="http://neocities.org">Anime</a>
</div>
<div class="site-suggestion">
<div class="site-portrait">
<a href="http://dragonquest.neocities.org">
<img src="http://neocities.org/site_screenshots/dragonquest.jpg" alt="">
<span class="caption">dragonquest</span>
</a>
</div>
<a class="tag" href="http://neocities.org">Games</a>
</div>
<% end %>
<!-- --------------------------------------------------------------------------------------------------------------------------- -->
<!-- need to add a class of "first" to the first news-item element -->
<div class="news-item comment">
<div class="title">
<div class="icon"></div>
<a href="" class="user">Foo</a> commented on <a href="" class="user">Derp's</a> website: <a href="" class="comment">I really like your site, your graphics are awesome and...</a>
<span class="date">30m</span>
</div>
</div>
<div class="news-item tags">
<div class="title">
<div class="icon"></div>
New sites in <a href="" class="tag">games</a><span class="date">3h</span>
</div>
<div class="content">
<div class="site-suggestion">
<div class="site-portrait">
<a href="http://dragonquest.neocities.org">
<img src="http://neocities.org/site_screenshots/dragonquest.jpg">
<span class="caption">dragonquest</span>
</a>
</div>
</div>
<div class="site-suggestion">
<div class="site-portrait">
<a href="http://dragonquest.neocities.org">
<img src="http://neocities.org/site_screenshots/dragonquest.jpg">
<span class="caption">dragonquest</span>
</a>
</div>
</div>
<div class="site-suggestion">
<div class="site-portrait">
<a href="http://dragonquest.neocities.org">
<img src="http://neocities.org/site_screenshots/dragonquest.jpg">
<span class="caption">dragonquest</span>
</a>
</div>
</div>
<div class="site-suggestion">
<div class="site-portrait">
<a href="http://dragonquest.neocities.org">
<img src="http://neocities.org/site_screenshots/dragonquest.jpg">
<span class="caption">dragonquest</span>
</a>
</div>
</div>
</div>
</div>
<div class="news-item follow">
<div class="title">
<div class="icon"></div>
<a href="" class="user">Foo</a> followed <a href="" class="user">Derp's</a> website<span class="date">7h</span>
</div>
</div>
<div class="news-item tip">
<div class="title">
<div class="icon"></div>
You tipped <a href="" class="user">Derp's</a> website: <a href="" class="comment">Wow, great work here! Please keep updating :)</a><span class="date">Apr 23</span>
</div>
</div>
<div class="news-item comment">
<div class="title">
<div class="icon"></div>
<a href="" class="user">Foo</a> commented on <a href="" class="user">Derp's</a> website: <a href="" class="comment">I had a question - how did you make it so that the...</a>
<span class="date">Apr 20</span>
</div>
</div>
<div class="news-item follow">
<div class="title">
<div class="icon"></div>
You followed <a href="" class="user">Derp's</a> website<span class="date">Apr 7</span>
</div>
</div>
<div class="news-item update">
<div class="title">
<div class="icon"></div>
<a href="" class="user">Derp</a> made an update <span class="date">Apr 7</span>
</div>
<div class="content">
<div class="files">
<div class="file">
<div class="html-thumbnail misc"><a href=""><span class="misc-icon">css</span><span class="title">styles.css</span></a></div>
</div>
<div class="file">
<div class="html-thumbnail html"><a href=""><img src="http://neocities.org/site_screenshots/codeventurer.jpg"><span class="title">styles.css</span></a></div>
</div>
<div class="file">
<div class="html-thumbnail misc"><a href=""><span class="misc-icon">js</span><span class="title">styles.css</span></a></div>
</div>
<div class="file">
<div class="html-thumbnail image"><a href=""><img src="/site_thumbnails/victoria/constructioncat2.png.105x63.png"><span class="title">cat.jpg</span></a></div>
</div>
<div class="file">
<div class="html-thumbnail misc"><a href=""><span class="misc-icon">js</span><span class="title">styles.css</span></a></div>
</div>
</div>
<div class="actions"><a href="">Like (1)</a> <a href="">Reply</a></div>
</div>
</div>
<div class="news-item comment for-me">
<div class="title">
<div class="icon" style="background-image:url(https://neocities.org/site_screenshots/codeventurer.jpg);"></div>
<a href="" class="user">Derpie</a>
<span class="date">Apr 7</span>
<div class="comment">Your site is amazing. Very helpful information. Would love to see more updates if you have time. Your site is amazing. Very helpful information. Would love to see more updates if you have time. </div>
</div>
<div class="content">
<div class="actions"><a href="">Like (1)</a> <a href="">Reply</a></div>
<div class="comments">
<div class="comment">
<img class="avatar" src="https://neocities.org/site_screenshots/victoria.jpg">
<a href="" class="user">victoria</a> Indeed, it's great!<span class="date">Apr 7</span>
<div class="actions"><a href="">Like (1)</a></div>
</div>
</div>
</div>
</div>
<div class="news-item comment">
<div class="title">
<div class="icon"></div>
<a href="" class="user">Foo</a> commented on <a href="" class="user">Derp's</a> website: <a href="" class="comment">I had a question - how did you make it so that the...</a>
<span class="date">Apr 7</span>
</div>
</div>
<div class="news-item follow">
<div class="title">
<div class="icon"></div>
You followed <a href="" class="user">Derp's</a> website<span class="date">Apr 7</span>
</div>
</div>
<div class="news-item tip for-me">
<div class="title">
<div class="icon" style="background-image:url(https://neocities.org/site_screenshots/victoria.jpg);"></div>
<a href="" class="user">victoria</a> tipped you .01 BTC
<span class="date">Apr 7</span>
<div class="comment">Hey, this looks great!</div>
</div>
<div class="content">
<div class="actions"><a href="">Like (1)</a> <a href="">Reply</a></div>
</div>
</div>
</div>
<div class="col col-33">
<p class="site-url"><a href="http://<%= current_site.username %>.neocities.org" target="_blank">http://<%= current_site.username %>.neocities.org</a></p>
<div class="stats">
<div class="col col-50">Last updated<br><strong><%= current_site.updated_at ? current_site.updated_at.ago : '' %></strong></div>
<div class="col col-50">
<div><strong><%= current_site.hits.to_s.reverse.gsub(/...(?=.)/,'\&,').reverse %></strong> hits</div>
<div><strong>24</strong> followers</div>
<div><strong>3</strong> tips ($13.55)</div>
</div>
</div>
<a href=""><img src="http://neocities.org/site_screenshots/codeventurer.jpg" style="width:340px" class="large-portrait"></a>
<h3>Following</h3>
<div class="following">
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
</div>
<h3>Tags</h3>
<a class="tag" href="http://neocities.org">Games</a>
<a class="tag" href="http://neocities.org">Anime</a>
<a class="tag" href="http://neocities.org">Art</a>
<a class="tag" href="http://neocities.org">Cooking</a>
<a class="tag" href="http://neocities.org">Games</a>
<a class="tag" href="http://neocities.org">Anime</a>
<a class="tag" href="http://neocities.org">Art</a>
<a class="tag" href="http://neocities.org">Cooking</a>
</div>
</div></div>
</div>

192
views/mockup/profile.erb Normal file
View file

@ -0,0 +1,192 @@
<div class="header-Outro with-site-image">
<div class="row content">
<div class="col col-50 signup-Area large">
<div class="signup-Form">
<fieldset class="content">
<img class="screenshot" src="http://neocities.org/site_screenshots/codeventurer.jpg" style="width: 358px;height: 215px;">
</fieldset>
</div>
</div>
<div class="col col-50">
<h2 class="eps title-with-badge"><span>Derp's Website</span><a href="/plan" class="supporter-badge" title="Neocities Supporter"></a></h2>
<p class="site-url" style="margin-top: -9px;"><a href="http://<%= site.username %>.neocities.org" target="_blank">http://<%= site.username %>.neocities.org</a></p>
<div class="stats">
<div class="stat"><strong>23.5K</strong> <span>visitors</span></div>
<div class="stat"><strong>342</strong> <span>followers</span></div>
<div class="stat tips"><strong>7</strong> <span>tips</span></div>
</div>
<div class="actions">
<a href="" class="btn-Action follow"><span>Follow</span></a>
<a href="" class="btn-Action tip"><span>Tip</span></a>
<a href="" class="btn-Action share"><span>Share</span></a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="content misc-page columns right-col"><div class="col-left">
<div class="col col-66">
<div class="post-comment">
<input class="" type="text" placeholder="Post on Derp's profile...">
<a href="" class="btn-Action">Post</a>
</div>
<div class="news-item follow">
<div class="title">
<div class="icon"></div>
<a href="" class="user">Derp</a> followed <a href="" class="user">Foo's</a> website<span class="date">7h</span>
</div>
</div>
<div class="news-item tip">
<div class="title">
<div class="icon"></div>
<a href="" class="user">Derp</a> tipped <a href="" class="user">Foo's</a> website: <a href="" class="comment">Wow, great work here! Please keep updating :)</a><span class="date">Apr 23</span>
</div>
</div>
<div class="news-item comment">
<div class="title">
<div class="icon"></div>
<a href="" class="user">Derp</a> commented on <a href="" class="user">victoria's</a> website: <a href="" class="comment">I had a question - how did you make it so that the...</a>
<span class="date">Apr 20</span>
</div>
</div>
<div class="news-item follow">
<div class="title">
<div class="icon"></div>
<a href="" class="user">Derp</a> followed <a href="" class="user">victoria's</a> website<span class="date">Apr 7</span>
</div>
</div>
<div class="news-item update">
<div class="title">
<div class="icon"></div>
<a href="" class="user">Derp</a> made an update <span class="date">Apr 7</span>
</div>
<div class="content">
<div class="files">
<div class="file">
<div class="html-thumbnail misc"><a href=""><span class="misc-icon">css</span><span class="title">styles.css</span></a></div>
</div>
<div class="file">
<div class="html-thumbnail html"><a href=""><img src="http://neocities.org/site_screenshots/codeventurer.jpg"><span class="title">styles.css</span></a></div>
</div>
<div class="file">
<div class="html-thumbnail misc"><a href=""><span class="misc-icon">js</span><span class="title">styles.css</span></a></div>
</div>
<div class="file">
<div class="html-thumbnail image"><a href=""><img src="/site_thumbnails/victoria/constructioncat2.png.105x63.png"><span class="title">cat.jpg</span></a></div>
</div>
<div class="file">
<div class="html-thumbnail misc"><a href=""><span class="misc-icon">js</span><span class="title">styles.css</span></a></div>
</div>
</div>
<div class="actions"><a href="">Like (1)</a> <a href="">Reply</a></div>
</div>
</div>
<div class="news-item comment for-me">
<div class="title">
<div class="icon" style="background-image:url(https://neocities.org/site_screenshots/codeventurer.jpg);"></div>
<a href="" class="user">Foo</a>
<span class="date">Apr 7</span>
<div class="comment">Your site is amazing. Very helpful information. Would love to see more updates if you have time. Your site is amazing. Very helpful information. Would love to see more updates if you have time. </div>
</div>
<div class="content">
<div class="actions"><a href="">Like (1)</a> <a href="">Reply</a></div>
<div class="comments">
<div class="comment">
<img class="avatar" src="https://neocities.org/site_screenshots/victoria.jpg">
<a href="" class="user">victoria</a> Indeed, it's great!<span class="date">Apr 7</span>
<div class="actions"><a href="">Like (1)</a></div>
</div>
</div>
</div>
</div>
<div class="news-item comment">
<div class="title">
<div class="icon"></div>
<a href="" class="user">Derp</a> commented on <a href="" class="user">Foo's</a> website: <a href="" class="comment">I had a question - how did you make it so that the...</a>
<span class="date">Apr 7</span>
</div>
</div>
<div class="news-item tip for-me">
<div class="title">
<div class="icon" style="background-image:url(https://neocities.org/site_screenshots/victoria.jpg);"></div>
<a href="" class="user">victoria</a> tipped .01 BTC
<span class="date">Apr 7</span>
<div class="comment">Hey, this looks great!</div>
</div>
<div class="content">
<div class="actions"><a href="">Like (1)</a> <a href="">Reply</a></div>
</div>
</div>
</div>
<div class="col col-33">
<h3>Website Stats</h3>
<div class="stats">
<div class="stat">
<span>Last updated</span>
<strong>
<% if site.updated_at.nil? %>
Just Created
<% else %>
<%= site.updated_at.ago.downcase %>
<% end %>
</strong>
</div>
<div class="stat"><span>Total updates</span><strong><%= site.changed_count %></strong></div>
<div class="stat"><span>Created</span><strong><%= site.created_at.strftime('%B %-d, %Y') %></strong></div>
</div>
<h3>Archives</h3>
<div class="archives">
<a href=""><img src="http://neocities.org/site_screenshots/codeventurer.jpg"></a>
<a href=""><img src="http://neocities.org/site_screenshots/codeventurer.jpg"></a>
<a href=""><img src="http://neocities.org/site_screenshots/codeventurer.jpg"></a>
<a href=""><img src="http://neocities.org/site_screenshots/codeventurer.jpg"></a>
<a href="" class="more">See all versions</a>
</div>
<h3>Following</h3>
<div class="following">
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
<a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
</div>
<h3>Tags</h3>
<a class="tag" href="http://neocities.org">Games</a>
<a class="tag" href="http://neocities.org">Anime</a>
<a class="tag" href="http://neocities.org">Art</a>
<a class="tag" href="http://neocities.org">Cooking</a>
<a class="tag" href="http://neocities.org">Games</a>
<a class="tag" href="http://neocities.org">Anime</a>
<a class="tag" href="http://neocities.org">Art</a>
<a class="tag" href="http://neocities.org">Cooking</a>
<div class="report">
<a href="">Report</a> | <a href="">Block</a>
</div>
</div>
</div></div>
</div>

342
views/mockup/stats.erb Normal file
View file

@ -0,0 +1,342 @@
<div class="header-Outro with-columns">
<div class="row content">
<div class="col col-66">
<h3>Your Stats</h3>
<div class="feed-filter">
<% if !@events.empty? && (site.followings_dataset.count > 0) %>
<a href="/" <% if params[:activity].nil? %>class="selected"<% end %>>All</a>
<a href="/?activity=mine" <% if params[:activity] == 'mine' %>class="selected"<% end %>>Profile Activity</a>
<% end %>
<a href="/activity">Global Activity</a>
</div>
</div>
<div class="col col-32">
<h3>Your Site</h3>
<a href="/dashboard" class="btn-Action edit"><i class="fa fa-edit" title="Edit"></i>Edit Site</a>
</div>
</div>
</div>
<div class="container news-feed">
<div class="content misc-page columns right-col">
<div class="col-left">
<div class="col col-66">
<div class="row">
<div class="col col-50 globe">
<h2>Latest Visitors</h2>
<div id="earth_div"></div>
</div>
<div class="col col-50" style="padding-right: 0;">
<table class="table table-striped" id="latest-visitors">
<tbody>
<tr>
<td>
<span class="location">San Francisco, CA</span>
<a class="referrer" href=""><i class="fa fa-link"></i> neocities.org</a>
</td>
<td>
<span class="time">7:11PM</span>
<span class="paths"><a href="">/index</a>, <a href="">/links</a>, <a href="">/art</a></span>
</td>
</tr>
<tr>
<td>
<span class="location">Portland, OR</span>
<a class="referrer" href=""><i class="fa fa-search"></i> Google search</a>
</td>
<td>
<span class="time">7:11PM</span>
<span class="paths"><a href="">/index</a></span>
</td>
</tr>
<tr>
<td>
<span class="location">London, UK</span>
<a class="referrer" href=""><i class="fa fa-link"></i> Twitter URL</a>
</td>
<td>
<span class="time">7:11PM</span>
<span class="paths"><a href="">/index</a>, <a href="">/about</a></span>
</td>
</tr>
<tr>
<td>
<span class="location">Hong Kong, China</span>
<a class="referrer" href=""><i class="fa fa-search"></i> Google search</a>
</td>
<td>
<span class="time">7:11PM</span>
<span class="paths"><a href="">/index</a>, <a href="">/links</a>, <a href="">/art</a>, <a href="">/music</a></span>
</td>
</tr>
<tr>
<td>
<span class="location">San Francisco, CA</span>
<a class="referrer" href=""><i class="fa fa-link"></i> Facebook URL</a>
</td>
<td>
<span class="time">7:11PM - 4/27/15</span>
<span class="paths"><a href="">/index</a></span>
</td>
</tr>
<tr>
<td>
<span class="location">San Francisco, CA</span>
<a class="referrer" href=""><i class="fa fa-link"></i> neocities.org</a>
</td>
<td>
<span class="time">7:11PM - 4/27/15</span>
<span class="paths"><a href="">/index</a>, <a href="">/links</a>, <a href="">/art</a>, <a href="">/music</a>, <a href="">/about</a></span>
</td>
</tr>
<tr>
<td>
<span class="location">Portland, OR</span>
<a class="referrer" href=""><i class="fa fa-search"></i> Google search</a>
</td>
<td>
<span class="time">7:11PM - 4/27/15</span>
<span class="paths"><a href="">/index</a></span>
</td>
</tr>
<tr>
<td>
<span class="location">London, UK</span>
<a class="referrer" href=""><i class="fa fa-link"></i> Twitter URL</a>
</td>
<td>
<span class="time">7:11PM - 4/27/15</span>
<span class="paths"><a href="">/index</a>, <a href="">/about</a></span>
</td>
</tr>
<tr>
<td>
<span class="location">Hong Kong, China</span>
<a class="referrer" href=""><i class="fa fa-search"></i> Google search</a>
</td>
<td>
<span class="time">7:11PM - 4/27/15</span>
<span class="paths"><a href="">/index</a>, <a href="">/links</a>, <a href="">/art</a>, <a href="">/music</a>, <a href="">/tech</a>, <a href="">/about</a></span>
</td>
</tr>
<tr>
<td>
<span class="location">Hong Kong, China</span>
<a class="referrer" href=""><i class="fa fa-search"></i> Google search</a>
</td>
<td>
<span class="time">7:11PM - 4/27/15</span>
<span class="paths"><a href="">/index</a>, <a href="">/links</a>, <a href="">/art</a>, <a href="">/music</a></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h2>Last 7 Days</h2>
<p>(<a href="/plan">Upgrade</a> to see up to see stats for all time)</p>
<ul class="nav h-Nav">
<li><a href="">Month</a></li>
<li><a href="">3 months</a></li>
<li><a href="">1 Year</a></li>
<li><a href="">All time</a></li>
</ul>
<canvas id="myChart" style="width:100%;height:300px;display:block"></canvas>
<div class="row">
<div class="col col-50">
<h2>Top Paths</h2>
<table class="table table-striped">
<thead>
<tr>
<th>Path</th>
<th>Visits</th>
</tr>
</thead>
<tbody>
<tr>
<td>/</td>
<td>130</td>
</tr>
<tr>
<td>/contact</td>
<td>110</td>
</tr>
<tr>
<td>/art</td>
<td>101</td>
</tr>
<tr>
<td>/about</td>
<td>99</td>
</tr>
<tr>
<td>/links</td>
<td>33</td>
</tr>
</tbody>
</table>
<h2>Top Locations</h2>
<table class="table table-striped">
<thead>
<tr>
<th>City</th>
<th>Visits</th>
</tr>
</thead>
<tbody>
<tr>
<td>Portland, OR, USA</td>
<td>22</td>
</tr>
<tr>
<td>Portland, OR, USA</td>
<td>22</td>
</tr>
<tr>
<td>Portland, OR, USA</td>
<td>22</td>
</tr>
<tr>
<td>Portland, OR, USA</td>
<td>22</td>
</tr>
<tr>
<td>Portland, OR, USA</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
<div class="col col-50">
<h2>Top Referrers</h2>
<table class="table table-striped">
<thead>
<tr>
<th>Referrer</th>
<th>Visits</th>
</tr>
</thead>
<tbody>
<tr>
<td>Google search</td>
<td>22</td>
</tr>
<tr>
<td>Google search</td>
<td>22</td>
</tr>
<tr>
<td>Google search</td>
<td>22</td>
</tr>
<tr>
<td>Google search</td>
<td>22</td>
</tr>
<tr>
<td>Google search</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col col-33">
<div class="news-site-info">
<p class="site-url"><a href="<%= current_site.uri %>" target="_blank"><%= site.title %></a></p>
<div class="stats">
<div class="col col-50">
<% if site.updated_at %>
Last updated<br><strong><%= site.updated_at.ago %></strong>
<% else %>
Your new website!<br><strong><a href="/dashboard"><i class="fa fa-edit" title="Edit"></i> Start Building</a></strong>
<% end %>
</div>
<div class="col col-50">
<div><strong><%= site.views.format_large_number %></strong> views</div>
<% follows_count = site.follows_dataset.count %>
<div><strong><%= follows_count.format_large_number %></strong> follower<%= follows_count == 1 ? '' : 's' %></div>
</div>
</div>
</div>
<a href="<%= site.uri %>" class="large-portrait" style="background-image:url(<%= site.screenshot_url('index.html', '540x405') %>);"></a>
<div class="news-profile-button">
<a href="/site/<%= site.username %>" class="btn-Action"><i class="fa fa-user"></i> Profile</a>
<a href="#" id="shareButton" class="btn-Action" data-container="body" data-toggle="popover" data-placement="bottom" data-content='<%== erb :'_share', layout: false, locals: {site: current_site} %>'><i class="fa fa-share-alt"></i> Share</a>
</div>
<%== erb :'_follows', layout: false, locals: {site: site, is_current_site: site == current_site} %>
<%== erb :'_tags', layout: false, locals: {site: site, is_current_site: site == current_site} %>
</div>
</div>
</div>
</div>
<script src="http://www.webglearth.com/v2/api.js"></script>
<script src="/js/Chart.min.js"></script>
<script>
//OpenGL globe
$(document).ready(function() {
var earth = new WE.map('earth_div');
earth.setView([20, -100], 2.07);
WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
attribution: '© OpenStreetMap'
}).addTo(earth);
// Start a simple rotation animation
var before = null;
requestAnimationFrame(function animate(now) {
var c = earth.getPosition();
var elapsed = before? now - before: 0;
before = now;
earth.setCenter([c[0], c[1] + 0.1*(elapsed/30)]);
requestAnimationFrame(animate);
});
//chart.js
var data = {
labels: ["May 1", "May 2", "May 3", "May 4", "May 5", "May 6", "May7"],
datasets: [
{
label: "Hits",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 65]
},
{
label: "Visits",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 66, 33, 27, 45]
}
]
};
// Get context with jQuery - using jQuery's .get() method.
var ctx = $("#myChart").get(0).getContext("2d");
// This will get the first returned node in the jQuery collection.
//var myNewChart = new Chart(ctx);
var myLineChart = new Chart(ctx).Line(data, {bezierCurve: false});
})
</script>

49
views/mockup/tutorial-c1p2.erb Normal file
View file

@ -0,0 +1,49 @@
<section class="section tutorial">
<div class="row">
<div class="col col-60 lesson">
<h1>Chapter 1</h1>
<h2 class="subtitle">Page 2/10</h2>
<div class="comic" style="height: 500px">
<div class="dialogue">
All you need to build your first site is a computer language called HTML.
</div>
<div class="dialogue">
And here's some HTML, right in this box! Let's make a change. Replace Hello World with Victoria's Website, and click save!
</div>
<div class="dialogue">
You'll see the results of your site here.
</div>
<div class="dialogue">
Make sure to check the green boxes below for important bonus info!
</div>
</div>
<div class="welcome">
<h4>Opening and Closing Tags</h4>
<p>HTML is just a bunch of tags. There's usually an opening tag and a closing tag, with content between them like this:</p>
<pre>tag Content visible on your site /tag</pre>
<p>Don't worry if this seems confusing - you'll get the hang of it after a few more examples! If you ever get stuck, click the <strong>Help</strong> link below.</p>
</div>
</div>
<div class="col col-40 interact">
<input class="btn btn-action" type="submit" value="Save">
<h3>HTML</h3>
<textarea class="editor">
<html>
<body>
Hello World!
</body>
</html>
</textarea>
<h3>Site Preview</h3>
<div class="preview">
</div>
</div>
</div>
</section>

101
views/mockup/welcome.erb Normal file
View file

@ -0,0 +1,101 @@
<section class="section plans welcome">
<h2>Welcome to Neocities, <%= current_site.username %>!</h2>
<h3 class="subtitle">Free accounts will always be free and ad-free.
You can support our quest to bring back the creative, independent web by upgrading to the Supporter&nbsp;Plan.</h3>
<div class="plan-overview">
<div class="col free">
<div class="row content">
<div class="col col-100">
<h3>Free Plan</h3>
<div class="plan-image free">
</div>
<div class="price">$<%= Site::PLAN_FEATURES[:free][:price] %></div>
<div class="interval">per month</div>
<ul class="main-features">
<li><strong><%= Site::PLAN_FEATURES[:free][:space].to_space_pretty %></strong> <span data-original-title="How much disk space you can use for your site. More space means you can upload more files.">storage</span></li>
<li><strong><%= Site::PLAN_FEATURES[:free][:bandwidth].to_space_pretty %></strong> <span data-original-title="How much content you can serve in one month. Don’t worry—these are soft limits. Temporary surges are fine, we won't take your site down automatically, and we're very flexible.">bandwidth</span></li>
</ul>
</div>
</div>
<div class="row content txt-Center">
<a href="/" class="btn-Action">Continue</a>
</div>
</div>
<div class="col supporter">
<div class="row content">
<div class="col col-33">
<h3>Supporter Plan</h3>
<div class="plan-image supporter">
</div>
<% if parent_site && parent_site.legacy_supporter? %>
<div class="price">$<%= Site::LEGACY_SUPPORTER_PRICES[parent_site[:plan_type].to_sym] %></div>
<div class="interval">per month, billed annually</div>
<% else %>
<div class="price">$<%= Site::PLAN_FEATURES[:supporter][:price] %></div>
<div class="interval">per month</div>
<% end %>
<ul class="main-features">
<li><strong><%= Site::PLAN_FEATURES[:supporter][:space].to_space_pretty %></strong> <span data-original-title="How much disk space you can use for your site. More space means you can upload more files.">storage</span></li>
<li><strong>1000 GB</strong> <span data-original-title="How much content you can serve in one month. Don’t worry—these are soft limits. Temporary surges are fine, we won't take your site down automatically, and we're very flexible.">bandwidth</span></li>
</ul>
<ul>
<li><span data-original-title="No whitelists—you can upload anything you want (no copyrighted content, trojans, or w4r3z, please).">No File Upload Type Restrictions</span></li>
<li><span data-original-title="Make as many sites as you want with one account, and easily switch between them.">Unlimited Site Creation</span></li>
<li><span data-original-title="Add your domain name (yoursite.com) to your site!">Custom Domain Support</span></li>
<li><span data-original-title="With WebDAV, you can mount your Neocities site to your computer as a hard drive, making it easy to update with your favorite HTML editor.">Remote Filesystem Support</span></li>
<li><span data-original-title="Upload your SSL certificate for your custom domain name, preventing snoops from seeing your user’s traffic.">Custom SSL Certs (coming soon)</span></li>
</ul>
</div>
<div class="col col-66">
<p>To upgrade, enter your credit card info below:</p>
<div><img src="/img/skeuocard.png" style="max-width:377px"></div>
</div>
</div>
<div class="row content txt-Center">
<a href="/" class="btn-Action">Upgrade for
<% if parent_site && parent_site.legacy_supporter? %>
$<%= Site::LEGACY_SUPPORTER_PRICES[parent_site[:plan_type].to_sym] %>
<% else %>
$<%= Site::PLAN_FEATURES[:supporter][:price] %>
<% end %>/mo
</a>
or pay with <a href="/plan/alternate/">PayPal</a> or <a href="/plan/alternate/">Bitcoin</a>
</div>
</div>
</div>
<div class="row">
<div class="col col-50">
<h3><i class="fa fa-users"></i> Powered by supporters like you</h3>
<p>Neocities will never sell your personal data or embed advertising on member sites. Instead, we are funded directly by our community through supporter plans and donations. This allows us to base all our decisions on making the best possible web building experience for you, rather than on appeasing ad companies.</p>
</div>
<div class="col col-50">
<h3><i class="fa fa-lock"></i> Risk-free and secure</h3>
<p>You can downgrade back to a free account at any time on the plan page. If you do, we’ll refund the amount you didn’t use.</p>
<p>We use Stripe and PayPal for payments, and never store your credit card information directly. </p>
</div>
</div>
<div class="row">
<div class="col col-50">
<h3><i class="fa fa-globe"></i> Making a better web</h3>
<p>Maybe something about our goals to 1. bring back the creative web and 2. give a diverse group of people a welcoming place to learn coding skills...</p>
</div>
<div class="col col-50">
<h3><i class="fa fa-github"></i> Giving back</h3>
<p>Maybe something about open source...</p>
</div>
</div>
</section>