neocities/views/index.erb
2025-03-13 09:24:54 -05:00

323 lines
No EOL
13 KiB
Text
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<body class="hp">
<a id="new"></a>
<div class="page">
<header class="header-Base" role="banner">
<nav class="header-Nav clearfix" role="navigation">
<a href="#!" title="show small screen nav" class="small-Nav">
<img src="/img/nav-Icon.png" alt="navigation icon" />
</a>
<ul class="h-Nav constant-Nav" role="presentation">
<%== erb :'_header_links', layout: false %>
</ul>
<ul class="status-Nav">
<% if !signed_in? %>
<li>
<a href="/signin" class="sign-In">Sign In</a>
</li>
<% else %>
<li>
<a href="/dashboard" class="sign-In">Dashboard</a>
</li>
<li>
<a href="/settings" class="sign-In">Settings</a>
</li>
<li>
<a href="/signout" class="sign-In">Sign Out</a>
</li>
<% end %>
</ul>
</nav>
<%== flash_display centered: true %>
<div class="int-Logo hp-Logo">
<a href="/" title="back to home">
<span class="hidden">Neocities.org</span>
<img src="/img/cat.png" alt="Neocities.org" />
</a>
</div>
<section class="header-Intro">
<h1 class="logo header-Content content">
<span class="hidden">Neocities.org</span>
<img src="/img/neocities-Logo.png" alt="Neocities.org" />
</h1>
</section>
<div class="header-Outro">
<div class="row header-Content content">
<div class="col intro">
<h2 class="section-header">Create your own free website.<br>Unlimited creativity, zero ads.</h2>
<p class="intro-text">
Neocities is a social network of <a href="/browse"><%= @sites_count.to_s.reverse.gsub(/...(?=.)/,'\&,').reverse %> web sites</a> that are bringing back the lost individual creativity of the web. We offer free static web hosting and tools that allow you to create your own web site. Join us!
</p>
<ul class="intro-List">
<li class="intro-Tools">
<span class="intro-Icon"></span>
<h3 class="delta">Powerful features to help you build</h3>
<p class="base">
Weve made it easy to build your web site and explore other sites. Neocities features an in-browser HTML editor, a <a href="/cli">command line tool</a>, custom domain support, fast site performance, easy file uploading, RSS feeds, and so much more.
</p>
</li>
<li class="intro-Social">
<span class="intro-Icon"></span>
<h3 class="delta">Share your web creation with the world</h3>
<p class="base">
It's your web site, your vision. Make it as normal or crazy as you want. You're the artist, you're in control.
</p>
</li>
</ul>
</div>
<div class="col signup-Area">
<% if signed_in? %>
<div class="signup-Form">
<div class="content">
<h3 class="gamma txt-Center">Build your Website!</h3>
</div>
<p class="txt-Center">
Go to your dashboard to<br> start editing your website!
</p>
<br />
<div class="txt-Center">
<a href="/dashboard" class="btn-Action">Get Started</a>
</div>
</div>
<% else %>
<form id="createSiteForm" class="signup-Form" onsubmit="return false">
<input type="hidden" name="csrf_token" value="<%= csrf_token %>">
<input type="hidden" name="is_education" value="false">
<fieldset class="content">
<h2 class="gamma">Sign up for free</h2>
<hr />
<% if @create_disabled %>
<p>Sign up is not currently available, please try again later.</p>
<% else %>
<div class="siteCreateInputs">
<label for="create-Input">Username</label>
<input type="text" name="prevent_autofill_username" id="prevent_autofill_username" value="" style="position:absolute; top:-2000px; left:-2000px;" />
<input type="password" name="prevent_autofill_password" id="prevent_autofill_password" value="" style="position:absolute; top:-2000px; left:-2000px;" />
<input type="text" class="input-Area" id="create-Input" name="username" placeholder="my-site-name" data-placement="left" data-trigger="manual" autocapitalize="off" autocorrect="off" autocomplete="off" />
<label for="create-Input" id="domain-name">.neocities.org</label>
<label for="tags-input">Tags (your interests, site topics)</label>
<input type="text" class="input-Area" id="tags-input" name="new_tags_string" placeholder="art, videogames, food, music, programming, gardening, cats" data-placement="left" data-trigger="manual" autocapitalize="off" autocorrect="off" autocomplete="off" />
<div class="col col-50" style="padding-left:0;">
<label for="password-input">
Password
</label>
<input type="password" class="input-Area" id="password-input"
name="password" placeholder="password"
data-placement="left" data-trigger="manual"
autocapitalize="off" autocorrect="off" autocomplete="off" />
</div>
<div class="col col-50">
<label for="email-input">
Email
</label>
<input type="email" class="input-Area"
id="email-input" name="email"
placeholder="me@example.com" data-placement="left"
data-trigger="manual" autocapitalize="off"
autocorrect="off" autocomplete="off" />
</div>
<div class="col col-50" style="padding-left:0">
<label>
Confirm you are human
</label>
<%== hcaptcha_input %>
</div>
<div class="col col-50">
<div style="margin-top: 15px">
<input type="submit" value="Create My Site" class="btn-Action float-Right" />
</div>
</div>
</div>
<% end %>
</fieldset>
</form>
<% end %>
</div> <!-- end .col-50 -->
</div> <!-- end .row -->
</div> <!-- end .header-Outro -->
</header>
<main class="content-Base">
<div class="section featured-Websites">
<h2 class="delta">Featured Sites</h2>
<!--
<div class="nav prev"></div>
-->
<ul class="website-Gallery hp-Gallery">
<% @featured_sites.each do |site| %>
<li>
<a href="<%= site[:uri] %>" title="<%= site[:title] %>" target="_blank">
<img src="<%= site[:screenshot_url] %>" class="neo-SS" alt="<%= site[:title] %>" />
</a>
</li>
<% end %>
</ul>
<!--
<div class="nav next"></div>
-->
<a href="/browse" class="btn-Action float-Right">Browse more sites</a>
</div>
<div class="section previews">
<h2 class="delta">Our mission: To make the web fun again by giving you back control of how you express yourself online.</h2>
<div class="row content">
<div class="col col-50"><div class="screenshot" style="background-image:url(/img/front-editor-screenshot.png)"></div></div>
<div class="col col-50 text">
<h3><i class="fa fa-edit"></i> HTML editor, right in your browser</h3>
<p>No tools needed. With our easy-to-use HTML editor, you're ready to start building your awesome website right now.</p>
<p>If you'd rather use your favorite desktop editor, no problem. Uploading files is as easy as drag-n-drop.</p>
</div>
</div>
<div class="row content right">
<div class="col col-50"><div class="screenshot" style="background-image:url(/img/front-browse-screenshot.jpg);"></div></div>
<div class="col col-50 text">
<h3><i class="fa fa-globe"></i> Welcome back, web surfing</h3>
<p>All Neocities sites are viewable and easily surfable in our <a href="/browse">website gallery</a>.</p>
<p>Using tags (our version of Web Rings) you can easily discover new sites related to your interests.</p>
</div>
</div>
<div class="row content">
<div class="col col-50"><div class="screenshot" style="background-image:url(/img/front-follow-screenshot.jpg);"></div></div>
<div class="col col-50 text">
<h3><i class="fa fa-user-plus"></i> Follow your favorite Neocities sites</h3>
<p>Keep track of all your favorite sites by following them. Any changes to the sites automatically show up in your news feed. You'll also see what sites they follow.</p>
</div>
</div>
<div class="row content right">
<div class="col col-50"><div class="screenshot" style="background-image:url(/img/front-comment-screenshot.png);"></div></div>
<div class="col col-50 text">
<h3><i class="fa fa-comments-o"></i> Web creativity plus community</h3>
<p>Interact with your favorite web builders by posting comments, and sharing their sites on your social network of choice.</p>
</div>
</div>
</div>
<section class="section features">
<div class="row">
<div class="col col-50">
<h3>
<i class="fa fa-eye-slash"></i>Zero Advertising, Zero AI Data Selling
</h3>
<p>
<strong>Neocities will never sell your data for AI training or put advertising on your site.</strong> Instead, we are funded directly by people just like you with <a href="/supporter">supporter accounts</a> and <a href="/donate">donations</a>.
</p>
</div>
<div class="col col-50">
<h3><i class="fa fa-tachometer"></i>Fast Site Loading</h3>
<p>Neocities operates our own caching anycast CDN in over a dozen datacenters all over the world to quickly serve your site to visitors with strong SSL and support for HTTP/2. Our strict focus on static web hosting allows us to routinely out-perform the pricey cloud services on reliability, speed and uptime.</p>
</div>
</div>
<div class="row">
<div class="col col-50">
<h3><i class="fa fa-wrench"></i>Developer Tools</h3>
<p>Our fast static hosting comes with a great in-browser HTML editor, easy file uploading, a <a href="/cli">command line tool</a>, RSS feeds for every site, <a href="/api">APIs</a> for building developer applications, and much more!
</div>
<div class="col col-50">
<h3><i class="fa fa-university"></i>Open Source</h3>
<p>We <a href="https://github.com/neocities" target="_blank">publish</a> the code that powers the site for inspection. We want to win your trust—not lock you in.</p>
</div>
</div>
<div class="col col-100">
<div class="row stats">
<div class="col col-33">
<h2><%= @total_hits_count.to_comma_separated %></h2>
<h3 style="text-align: center">Site Hits</h3>
</div>
<div class="col col-33">
<h2><%= @total_views_count.to_comma_separated %></h2>
<h3 style="text-align: center">Site Visitors</h3>
</div>
<div class="col col-33">
<h2><%= @changed_count.to_comma_separated %></h2>
<h3 style="text-align: center">Site Updates</h3>
</div>
</div>
<div class="col col-100">
<div class="row quote">
<h3>
Rather than a constantly rushing river of information, Neocities sites are like homes where users fix them up, spend time on them, and invite others to visit.
<br />
<cite>— Rosy Hearts, <a href="https://www.polygon.com/23024357/neocities-social-media-alternative" target="_blank">Polygon</a>. <a href="/press">View All Press »</a></cite>
</h3>
</div>
</div>
</section>
<% # erb :'plan/_pricing' %>
<section class="section bottom-signup">
<h2>What are you waiting for? <a href="#new">Start building your website now!</a></h2>
</section>
<footer class="footer-Base" role="contentinfo">
<div class="footer-Intro">
<div class="footer-Content">
<div class="row">
<div class="col col-33">
<div class="f-Col f-Col-1 clearfix">
<span class="footer-icon"></span>
<h2 class="delta">Support Us</h2>
<p class="tiny">
Neocities doesn't have investors. Since 2013, we have been 100% powered by <a href="/supporter">supporters</a> and <a href="/donate">donations</a> from people just like you.
</p>
<a href="/donate" title="Donate to Neocities" class="action-Link">Donate</a>
</div>
</div>
<div class="col col-33">
<div class="f-Col f-Col-2 clearfix">
<span class="footer-icon"></span>
<h2 class="delta">About Us</h2>
<p class="tiny">
Neocities is here to bring back the creativity and
free expression to the world wide web that made it great.
</p>
<a href="/about" title="More about Neocities" class="action-Link">More About Us</a>
</div>
</div>
<div class="col col-33">
<div class="f-Col f-Col-3 clearfix">
<span class="footer-icon"></span>
<h2 class="delta">News</h2>
<p class="tiny">
<%== @blog_feed_html %>
</p>
<a href="//blog.neocities.org" title="Read about Neocities news and updates" class="action-Link">Read More Posts</a>
</div>
</div>
</div>
</div>
</div>
<%== erb :'_footer', layout: false %>
</footer>
</div>
<%== erb :'_index_signup_script', layout: false %>
</body>