neocities
/
neocities
mirror of https://github.com/neocities/neocities


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348
							<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">
          We’ve 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, folder support, 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">
  <% Site.featured.each do |site| %>
    <li>
      <a href="<%= site.uri %>" title="<%= site.title %>" target="_blank">
        <img src="<%= site.screenshot_url 'index.html', '210x158' %>" class="neo-SS" alt="<%= site.title %>" />
      </a>
    </li>
  <% end %>
</ul>
<!--
<div class="nav next"></div>
-->
<a href="/browse" class="btn-Action float-Right">Browse all 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
      </h3>
      <p>
        <strong>Neocities will never sell your personal data 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 press">
      <a href="http://www.wired.com/2013/07/neocities/" class="logo wired"></a>
      <a href="http://www.fastcodesign.com/3037028/why-the-internet-is-time-traveling-back-to-1994" class="logo fastco"></a>
      <a href="http://motherboard.vice.com/blog/neocities-is-recreating-the-garish-web-10-creativity-of-geocities" class="logo vice"></a>
      <a href="http://arstechnica.com/tech-policy/2014/05/web-host-gives-fcc-a-28-8kbps-slow-lane-in-net-neutrality-protest/" class="logo ars"></a>
      <!--<a href="/press" class="more">See all press »</a>-->
    </div>
    <div class="row quote">
        <h3>
          "Designed as a 21st century reincarnation of GeoCities, Neocities lets you make your own site for free. <strong>And it just might spark a renaissance of creativity online.</strong>"
          <br />
          <cite>— Matthew Guay, <a href="http://web.appstorm.net/reviews/web-dev/neocities-the-free-place-to-code-your-own-site-from-scratch" target="_blank">AppStorm</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>

<!--
<section class="section thankyou">
  <div class="row">
    <p>Sponsored by</p>
    <h2>Your Company Name Here</h2>
    <p>Interested in sponsoring Neocities? <a href="https://neocities.org/contact">Let's get in touch.</a></p>
  </div>
</section>
</main>
-->

<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 is 100% powered by <a href="/supporter">supporters</a> and <a href="/donate">contributions</a> from amazing people just like you.
            </p>
            <a href="/donate" title="Donate to Neocities" class="action-Link">Contribute Today</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">From Our Blog</h2>
            <!--
            <p class="tiny">
              <a href="#">Neocities now has SSL Sites</a><br>
              The latest news on Neocities can be found on our blog.
            </p>
          -->
            <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>