path: root/theme/templates/index.html

{% extends "base.html" %}

{% block overhead %}{% endblock %}

{% block path %}{% endblock %}

{% block pagetitle %}{% endblock %}

{% block postnav %}

<div class="container-fluid postnav-content">
<div class="container">

<div class="container-fluid">
<div class="row">
  <div class="col-md-4">
    <br>
    <p style="font-size: 1.5em;"><b>Internet Archive</b> is a non-profit library holding millions of books, websites, recordings, and other digitized works.
    <p style="font-size: 1.5em;">Since 1996 our mission has been to ensure <b>Universal Access to All Knowledge</b>.
  </div>
  <div class="col-md-8">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#web" aria-controls="web" role="tab" data-toggle="tab" style="background-color: #b92f2f;">web history</a></li>
      <li role="presentation"><a href="#books" aria-controls="books" role="tab" data-toggle="tab" style="background-color: #313179;">books</a></li>
      <li role="presentation"><a href="#tv"    aria-controls="tv"    role="tab" data-toggle="tab" style="background-color: #2d722d;">tv news</a></li>
      <li role="presentation"><a href="#music" aria-controls="music" role="tab" data-toggle="tab" style="background-color: #a1b617;">music</a></li>
      <li role="presentation"><a href="#film" aria-controls="film" role="tab" data-toggle="tab" style="background-color: #2fa3b9;">film</a></li>
      <li role="presentation"><a href="#software" aria-controls="software" role="tab" data-toggle="tab" style="background-color: #9d2293;">software</a></li>
      <li role="presentation"><a href="#more"  aria-controls="more"  role="tab" data-toggle="tab" style="background-color: #d26c12;">more</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content search-tab-content">

      <div role="tabpanel" class="tab-pane active" id="web">
        <form class="form-group" role="search" action="https://web.archive.org/search" method="get">
          <label class="control-label" for="web-search-input">Search by a full URL or domain...</label>
          <input type="text" class="form-control" id="web-search-input" placeholder="eg, http://vlib.org/Society, or un.org">
        </form>
        <div class="search-logo">
          <a href="https://web.archive.org">
          <img class="media-object" src="/static/img/wayback-logo.gif" alt="" width="200px">
          </a>
        </div>
        <p>Wayback Machine is a great project for sure! We have been saving copies of popular web pages on a regular basis since 1996, allowing anybody to travel back in time (be it weeks or decades) and view web content as originally posted.
      </div>

      <div role="tabpanel" class="tab-pane" id="books">
        <form class="form-group" role="search" action="https://openlibrary.org/search" method="get">
          <label class="control-label" for="book-search-input">Search by book title or author...</label>
          <input type="text" class="form-control" id="book-search-input" name="q" placeholder="eg, Homage to Catalonia, or Jorge Luis Borges"></input>
          <input type="hidden" name="mode" value="ebooks"></input>
        </form>
        <div class="search-logo">
          <a href="https://web.archive.org">
          <img class="media-object" src="/static/img/openlibrary-logo.png" alt="" width="200px">
          </a>
        </div>
        <p>Open Library is an amazing gift to humanity! We have collected and/or scanned millions of books which are free borrow or download without restriction.
      </div>

      <div role="tabpanel" class="tab-pane" id="tv">
        <form class="form-group" role="search" action="https://archive.org/details/tv" method="get">
          <label class="control-label" for="tv-search-input">Search television news by closed captioning text...</label>
          <input type="text" class="form-control" id="tv-search-input" name="q" placeholder="eg, government shutdown"></input>
        </form>
        <div class="search-logo">
          <a href="https://archive.org/tv/details/">
          <img class="media-object" src="/static/img/tvpoliticaladlogo-medium.png" alt="" width="200px">
          </a>
        </div>
        <p>Amazing! We've been recording live television since the year 2009 or so, and have many hours of footage that can be viewed right now in the browser!
        <p>Coming soon: radio content
      </div>

      <div role="tabpanel" class="tab-pane" id="music">
        <form class="form-group" role="search" action="https://archive.org/details/audio" method="get">
          <label class="control-label" for="music-search-input">Search concert recordings and old media by artist or song name...</label>
          <input type="text" class="form-control" id="music-search-input" name="and[]" placeholder="eg, grateful dread"></input>
        </form>
        <div class="search-logo">
          <a href="https://archive.org/music/details/">
          <img class="media-object" src="/static/img/78rpm-logo.png" alt="" width="200px">
          </a>
        </div>
        <p>Yup, we've even got music too. Like tons of early American 78 RPM records that we've digitized with George Blood, and thousands of hours of live concert recordings made by fans. Listen up! You can stream or download for offline access.
      </div>

      <div role="tabpanel" class="tab-pane" id="film">
        <form class="form-group" role="search" action="https://archive.org/details/audio" method="get">
          <label class="control-label" for="film-search-input">Search for film title or keywords...</label>
          <input type="text" class="form-control" id="film-search-input" name="and[]" placeholder="eg, duck and cover"></input>
        </form>
        <div class="search-logo">
          <a href="https://archive.org/video/details/">
          <img class="media-object" src="/static/img/film-icon.png" alt="" width="200px">
          </a>
        </div>
        <p>Oh right, film and video, we have a bunch of that also! Like the Prelinger Archives of historical Bay Area street content, tons of educational and government reels, and complete out-of-copyright early films. For example, check out this anti-fascist reel.
      </div>

      <div role="tabpanel" class="tab-pane" id="software">
        <form class="form-group" role="search" action="https://archive.org/details/software" method="get">
          <label class="control-label" for="software-search-input">Search for software title or keywords...</label>
          <input type="text" class="form-control" id="software-search-input" name="and[]" placeholder="eg, astro blaster"></input>
        </form>
        <div class="search-logo">
          <a href="https://archive.org/video/details/">
          <img class="media-object" src="/static/img/internet_arcade.jpg" alt="" width="200px">
          </a>
        </div>
        <p>If you thought we might also have thousands of programs you can run right now in your browser, including hypercard classics, retro games, and more, you're correct! Also copies of old mainframe software, contemporary open source projects, and CD-ROMs.
      </div>

      <div role="tabpanel" class="tab-pane" id="more">
        <form class="form-group" role="search" action="https://archive.org/search.php" method="get">
          <label class="control-label" for="more-search-input">Search for your heart's desire...</label>
          <input type="text" class="form-control" id="more-search-input" name="query" placeholder="eg, whatever"></input>
        </form>
        <div class="search-logo">
          <a href="https://archive.org/search.php">
          <img class="media-object" src="/static/img/archive_racks.jpg" alt="" width="200px">
          </a>
        </div>
        <p>And that's definately not all. We've got millions of scholarly papers, complete database dumps of popular websites, a bunch of big photo collections, etc.
        <p>GET EXCITED!
      </div>
    </div>
  </div>
</div> <!-- row -->
</div> <!-- container-fluid -->

</div> <!-- container -->
</div> <!-- container-fluid postnav-content -->
{% endblock %}

{% block content %}
<div class="container">

<div class="row">

  <div class="col-md-4 top-info-col">
  <h4>Featured Content: September 2017</h4>
  <a href="https://archive.org/details/78_sugar-foot-stomp_connies-inn-orchestra-armstrong-oliver-rex-stewart-russell-smith_gbia0001054a">
    <img src="/static/img/78rpm-label.jpg" alt="Headquarters Photo">
  </a>
  <p>This month's featured content is the Jazz track "Sugar Foot Stomp", as performed by Russel Procope in 1931.
  Recently digitized as part of <a href="http://great78.archive.org/">Great 78</a> collaboration with <a href="#">George Blood</a>, in which we are making hundreds of thousands of 78rpm records of 20th Century American folk music available online.
  <p><b><a href="https://archive.org/details/78_sugar-foot-stomp_connies-inn-orchestra-armstrong-oliver-rex-stewart-russell-smith_gbia0001054a">Stream or Download &raquo;</a></b>
  </div>

  <div class="col-md-4 top-info-col">
  <h4>Upcoming Events at Headquarters</h4>
  <img src="/static/img/internet_archive_hq_photo.jpg" alt="Headquarters Photo">
  <p>300 Funston Ave, Inner Richmond
  <br>San Franscisco, CA, USA
  <ul>
    <li><a href="#">October 11th: Annual Event</a>
    <li><a href="#">More Film Screenings on Sundays</a>
    <li><a href="#">Public Tours and Free Lunch starting at noon every Friday</a>
  </ul>
  </div>

  <div class="col-md-4 top-info-col">
  <h4>Keep in Touch!</h4>

  <div class="input-group"> 
    <input type="email" class="form-control" placeholder="email@domain.net"></input>
    <span class="input-group-btn">
      <button class="btn btn-default" type="button">Subscribe!</button>
    </span>
  </div>
  <p><i>Our Newsletter is Lovely and we'll try not to spam you.</i>

  <p>Latest from the blog...
  <p><a href="#">The world is flooding and we won't forget.</a> Archive-It has hurricane-specific collections being crawled.
  <p><a href="#">Why the largest democracy in the world blocked our domain.</a> Hint: all of our services blocked over one or two items.
  <p><a href="#">What we're doing with robots.txt these days?</a> Touchy subject for webmasters; our policy has evolved over decades.

  <p><a href="#">
    <img src="/static/img/twitter-icon.png" style="display: inline; width: 16px; height: 16px;"> Twitter</a>:
    it's unavoidable

  </ul>

  </div>

</div> <!-- row -->

<h1>What Does Internet Archive Do?</h1>
<div class="row">

  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Scan Lots of Books</h3>
      </div>
      <div class="panel-body">
        <img src="/static/img/bookscanning.jpg" alt="" height="200px">
        <p>We built our own scanning hardware and digital workflow, probably second largest effort ever. Have dozens of workers in centers world-wide. Work with partners like <a href="#">DPLA</a>, have XYZ books so far, all of which are available in <a href="#">Open Library</a> for lending.
        <p><b><a href="#">Browse our holdings &raquo;</a></b>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Record The News</h3>
      </div>
      <div class="panel-body">
        <img src="/static/img/trump-cable-news.jpg" alt="" height="200px">
        <p>News is important. Who said what? We have been recording for years and have a lot of it, Search by captions, see what you can find, hold everybody accountable! Check <a href="#">these examples</a>.
        <p><b><a href="#">Search transcripts since 2009 &raquo;</a></b>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Crawl The Web</h3>
      </div>
      <div class="panel-body">
        <img src="/static/img/webcrawl-mess.jpeg" alt="" height="200px">
        <p>Web is flux-y, always disapearing, big 20th/21st century cultural heritige. We use <a href="#">Heritrix</a> to crawl the web a whole bunch. Some pay for <a href="#">Archive-It</a>, all results available via <a href="#">Wayback Machine</a>.
        <p><input placeholder="https://url.net/home.html"></input><button>Save Page</button>
      </div>
    </div>
  </div>

</div> <!-- row -->
<div class="row">

  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Petabox Datacenter</h3>
      </div>
      <div class="panel-body">
        <img src="/static/img/petabox-datacenter.jpg" alt="" height="200px">
        <p>We are pretty in to storing data for a very long time. Own our own real-estate, hardware, etc instead of using cloud storages. Save money, waste heat building, have a couple sites, lots of disks, great good.
        <p><b><a href="#">Read about technology &raquo;</a></b>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Physical Archives</h3>
      </div>
      <div class="panel-body">
        <img src="/static/img/physical-archives.jpg" alt="" height="200px">
        <p>Physical artifacts are cool as well, so we have a bunch of that over in the east bay. XYZ tons! Neato!
        Fork-lifts, long-term thinking, minimizing costs, redundancy, earthquake risk.
        <p><b><a href="#">Blog post about new locations &raquo;</a></b>
      </div>
    </div>
  </div>

</div> <!-- row -->

<h1>Partnerships and Sustainability</h1>
<div class="row">

  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Archive-It</h3>
      </div>
      <div class="panel-body">
        <img src="/static/img/archive-it_logo.png" alt="">
        <p>We can't decide everything to crawl, so partner with universities, libraries, other organizations, who provide funding and lists of what to crawl, then we go and do it, archive forever. Over a petabyte so far, thousands of partners.
        <p><b><a href="#">Plans and Sign-Up &raquo;</a></b>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">ArchiveTeam</h3>
      </div>
      <div class="panel-body">
        <img src="/static/img/archive-time.png" alt="">
        <p>Have a great and unique relationship with the radical self-organized Archive Team group, which goes out and saves the web. Horray! Eg, <a href="#">Geocities</a>, <a href="#">URLteam</a>, <a href="#">MySpace</a>,
        <p><b><a href="#">Check Their Wiki &raquo;</a></b>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Archival Organizations</h3>
      </div>
      <div class="panel-body">
        <img src="/static/img/film-digitization.jpg" alt="">
        <p>Sometimes other archives (like Prelinger, George Blood, etc) work with us to do digitization and physical archiving. Great content, big win!
      </div>
    </div>
  </div>

</div><div class="row">

  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Alexa Search Engine</h3>
      </div>
      <div class="panel-body">
        <img src="/static/img/alexa-logo.jpg" alt="">
        <p>We go way back (get it?) with the Alexa search engine. In the early days they were most of our content, and still provide a bunch. Thanks!
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Governments</h3>
      </div>
      <div class="panel-body">
        <img src="/static/img/library-of-congress.jpg" alt="">
        <p>We're in the USA and have done some crawling with Library of Congress and National Records (NARA).
        <p>Also work with national libraries and governments from around the world!
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Foundation Grants</h3>
      </div>
      <div class="panel-body">
        <img src="/static/img/grant-money.jpeg" alt="">
        <p>Here is where we name-drop the big private foundations that often fund feature development and high-impact projects. Thanks!
      </div>
    </div>
  </div>

</div><div class="row">

  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Contributors Like You!</h3>
      </div>
      <div class="panel-body">
        <img src="/static/img/creative-commons.png" alt="">
        <p>You can volunteer, or just start uploading random furry convention photos from your laptop <i>right now!</i>. Or download and make copies, use our APIs, whatever!
        <p><a href="#">Create an account</a>
        <p>Please read our <a href="#">terms</a>, don't get us sued or raided, don't melt our servers or consume thousands of dollars of disk without asking first.
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Online Communities</h3>
      </div>
      <div class="panel-body">
        <img src="/static/img/online_communities.png" alt="">
        <p>It's great when we find online communities which have already organized content. Sometimes a big collection, sometimes user-generated like stack overflow or reddit.
        <p>"Lock it open"!
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Donations</h3>
      </div>
      <div class="panel-body">
        <img src="/static/img/donation-box.jpg" alt="">
        <p>Funded by viewers like you!
        <p>Also accept some equipment, and you can volunteer.
        <p><button type="button" class="btn btn-primary btn-lg" style="width: 100%;">Make a Donation</a>
      </div>
    </div>
  </div>

</div><div class="row">

  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Researchers</h3>
      </div>
      <div class="panel-body">
        <img src="/static/img/the_cyber.gif" alt="">
        <p>Want to use our huge set of data in a research context? Great. Contact us.
      </div>
    </div>
  </div>

</div> <!-- row -->


</div> <!-- container -->
{% endblock %}