diff options
Diffstat (limited to 'theme/templates')
| -rw-r--r-- | theme/templates/base.html | 107 | ||||
| -rw-r--r-- | theme/templates/index.html | 404 |
2 files changed, 485 insertions, 26 deletions
diff --git a/theme/templates/base.html b/theme/templates/base.html index 2f0be01..eb26bc6 100644 --- a/theme/templates/base.html +++ b/theme/templates/base.html @@ -7,14 +7,13 @@ <title>{% block title %}{{ SITENAME }}{% endblock title %}</title> <!-- <meta charset="utf-8" /> --> {% block stylesheets %} -<link rel="stylesheet" type="text/css" href="/static/style/bootswatch_flatly.min.css" /> +<link rel="stylesheet" type="text/css" href="/static/style/bootswatch_flatly.css" /> <link rel="stylesheet" type="text/css" href="/static/style/archive3k.css" /> {% endblock %}{% block externaljs %} {% endblock %}{% block otherhead %}{% endblock %} {% endblock head %} </head> <body> -<body> <!-- Static navbar --> <nav class="navbar navbar-default navbar-static-top"> @@ -26,35 +25,37 @@ <span class="icon-bar"></span> <span class="icon-bar"></span> </button> - <a class="navbar-brand" href="#">Project name</a> + <li class="dropdown"> + <a class="navbar-brand" href="#" style="padding-top: 0.8em;"> + <img src="/static/style/ia_logo_small.png" alt=""> + </a> + <a href="#" class="navbar-brand dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Internet Archive<span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#">Internet Archive Home</a></li> + <li role="separator" class="divider"></li> + <li class="dropdown-header">Services</li> + <li><a href="https://web.archive.org">Wayback Machine</a></li> + <li><a href="https://openlibrary.org">Open Library</a></li> + <li><a href="https://archive.org/details/tv"></a></li> + </ul> + </li> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#about">About</a></li> - <li><a href="#contact">Contact</a></li> - <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> - <ul class="dropdown-menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li role="separator" class="divider"></li> - <li class="dropdown-header">Nav header</li> - <li><a href="#">Separated link</a></li> - <li><a href="#">One more separated link</a></li> - </ul> - </li> </ul> <ul class="nav navbar-nav navbar-right"> + <li><a href="https://archive.org/donate/">Donate!</a></li> +<!-- <li><a href="../navbar/">Default</a></li> <li class="active"><a href="./">Static top <span class="sr-only">(current)</span></a></li> <li><a href="../navbar-fixed-top/">Fixed top</a></li> +--> </ul> </div><!--/.nav-collapse --> </div> </nav> +{% block postnav %}{% endblock %} <div class="container"> {% block content %} <!-- Main component for a primary marketing message or call to action --> @@ -68,19 +69,75 @@ </div> {% endblock %} </div> <!-- /container --> -<footer class="footer"> +<footer class="page-footer text-muted"> + <div class="container-fluid footer-one"> <div class="container"> - <div class="media"> - <div class="media-left"> - <img src="/static/ia_logo_small.png" alt="IA logo"> - </div> - <div class="media-body"> - <p class="text-muted">Paper Search is prototype by the <a href="//archive.org/">Internet Archive</a>, a 501(c)(3) non-profit, building a digital library of Internet sites and other cultural artifacts in digital form. Other <a href="//archive.org/projects/">projects</a> include the <a href="https//web.archive.org/">Wayback Machine</a>, <a href="https//openlibrary.org">openlibrary.org</a>, <a href="https//archive.org/">archive.org</a> and <a href="https//archive-it.org">archive-it.org</a></p> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-4"> + <div class="media"> + <div class="media-left" style="padding-top: 5px;"> + <img src="/static/style/ia_logo_small.png" alt=""> + </div> + <div class="media-body"> + <p><a href="//archive.org/">Internet Archive</a> is a 501(c)(3) non-profit headquarted in the USA, building a library of Internet sites and other cultural artifacts in digital form. + <p>Copyright 2017 <a href="https://archive.org"> archive.org</a> + </div> </div> </div> + + <div class="col-md-2"> + <h5 class="title mb-4 mt-3 font-bold">Home</h5> + <ul class="list-unstyled"> + <li><a href="#!">Wayback Machine</a></li> + <li><a href="#!">Openlibrary</a></li> + <li><a href="#!">Archive-It</a></li> + <li><a href="#!">Catalog</a> + </ul> + </div> + + <div class="col-md-2"> + <h5 class="title mb-4 mt-3 font-bold">Contact</h5> + <ul class="list-unstyled"> + <li><a href="#!">Blog</a></li> + <li><a href="#!">Twitter</a></li> + </ul> + + <br> + <h5 class="title mb-4 mt-3 font-bold">Systems</h5> + <ul class="list-unstyled"> + <li><a href="#!">Status <span style="color: green; font-size: larger;">✓</span></a> + <li><a href="http://monitor.archive.org/weathermap/weathermap.html">Network</a></li> + <li><a href="https://catalogd.archive.org/report/space.php">Storage</a></li> + <li><a href="#!">Open Source</a> + <li><a href="#!">Developer API</a> + </ul> + </div> + + <div class="col-md-2"> + <h5 class="title mb-4 mt-3 font-bold">About</h5> + <ul class="list-unstyled"> + <li><a href="#!">Help</a></li> + <li><a href="#!">Abuse</a></li> + <li><a href="#!">Terms</a></li> + <li><a href="#!">People</a></li> + <li><a href="#!">Volunteer</a></li> + <li><a href="#!">Jobs</a></li> + </ul> + </div> + </div> <!-- row --> + </div> + </div> </div> + + <div class="footer-copyright"> + <div class="container-fluid"> + </div> + </div> + </footer> <script src="/static/js/jquery.min.js"></script> <script src="/static/js/bootstrap.min.js"></script> +<script src="/static/js/archive3k.js"></script> </body> </html> diff --git a/theme/templates/index.html b/theme/templates/index.html index e397ee7..ba3b46d 100644 --- a/theme/templates/index.html +++ b/theme/templates/index.html @@ -6,6 +6,408 @@ {% 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 of millions of free books, movies, software, music, websites, and more. + <p style="font-size: 1.5em;">Since 1996 our mission has been to provide <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="media"> + <div class="media-left media-middle"> + <a href="https://web.archive.org"> + <img class="media-object" src="/static/img/wayback-logo.gif" alt="" width="200px"> + </a> + </div> + <div class="media-body"> + <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> + </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="media"> + <div class="media-left media-middle"> + <a href="https://web.archive.org"> + <img class="media-object" src="/static/img/openlibrary-logo.png" alt="" width="200px"> + </a> + </div> + <div class="media-body"> + <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> + </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="media"> + <div class="media-left media-middle"> + <a href="https://archive.org/tv/details/"> + <img class="media-object" src="/static/img/tvpoliticaladlogo-medium.png" alt="" width="200px"> + </a> + </div> + <div class="media-body"> + <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> + </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="media"> + <div class="media-left media-middle"> + <a href="https://archive.org/music/details/"> + <img class="media-object" src="/static/img/78rpm-logo.png" alt="" width="200px"> + </a> + </div> + <div class="media-body"> + <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> + </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="media"> + <div class="media-left media-middle"> + <a href="https://archive.org/video/details/"> + <img class="media-object" src="/static/img/film-icon.jpg" alt="" width="200px"> + </a> + </div> + <div class="media-body"> + <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> + </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="media"> + <div class="media-left media-middle"> + <a href="https://archive.org/video/details/"> + <img class="media-object" src="/static/img/internet_arcade.jpg" alt="" width="200px"> + </a> + </div> + <div class="media-body"> + <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> + </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="media"> + <div class="media-left media-middle"> + <a href="https://archive.org/search.php"> + <img class="media-object" src="/static/img/archive_racks.jpg" alt="" width="200px"> + </a> + </div> + <div class="media-body"> + <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> + </div> +</div> <!-- row --> +</div> <!-- container-fluid --> + +</div> <!-- container --> +</div> <!-- container-fluid postnav-content --> +{% endblock %} + {% block content %} -Main Content Goes Here +<div class="container"> + +<div class="row"> + + <div class="col-md-4"> + <h4>Featured Content: September 2017</h4> + <img src="/static/img/78rpm-label.jpg" alt="Headquarters Photo" width="300px;"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <a href="#">tempor incididunt</a> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + </div> + + <div class="col-md-4"> + <h4>Upcoming Events at Headquarters</h4> + <img src="/static/img/internet_archive_hq_photo.jpg" alt="Headquarters Photo" width="300px;"> + <p>300 Funston Ave, Inner Richmond + <p>San Franscisco, CA, USA + <ul> + <li>October 11th: Annual Event + <li>More Film Screenings on Sundays + <li>Free Lunch every Friday + </ul> + </div> + + <div class="col-md-4"> + <h4>Keep in Touch!</h4> + <p>From the Blog + <ul> + <li>The world is flooding and we won't forget + <li>Why the largest democracy in the world blocked our domain + <li>What we're doing with robots.txt these days + </ul> + + <p>Twitter (inevitably) + + <p>Subscribe to Newsletter: + <br><input placeholder="email@domain.net"></input><button>Submit</button> + </ul> + + </div> + +</div> <!-- row --> + +<h2>What Does Internet Archive Do?</h2> +<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="" width="300px;"> + <p>We built our own scanning hardware and digital workflow. Have dozens of workers in centers world-wide. Work with partners, have XYZ books so far. + </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="" width="300px;"> + <p>News is important. Who said what? We have been recording since 2009 and have a lot of it, Search by captions, see what you can find, hold everybody accountable! Check <a href="#">these examples</a>. + </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="" width="300px;"> + <p>Web is flux-y, always disapearing, big 20th/21st century cultural heritige. We use Heritrix to crawl the web a whole bunch, get big numbers of pages and petabytes. + <p>Some partners submit data or pay, some use Archive-It. + <p>All results available via Wayback Machine. + <p>Archive a page now: + <br><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="" width="300px;"> + <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, some <a href="#">details</a>. + </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="" width="300px;"> + <p>Physical artifacts are cool as well, so we have a bunch of that over in the east bay. XYZ tons! Neato! + </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 Partners</h3> + </div> + <div class="panel-body"> + <img src="/static/img/archive-it_logo.png" alt="" width="300px;"> + <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, usually provide as part of wayback. + <p>Over a petabyte so far, thousands of partners. + </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="" width="300px;"> + <p>Have a great and unique relationship with the radical self-organized Archive Team group, which goes out and saves the web. Horray! Eg, 301works, URLteam, + </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="" width="300px;"> + <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 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="" width="300px;"> + <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="" width="300px;"> + <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="" width="300px;"> + <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 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="" width="300px;"> + <p>Want to use our huge set of data in a research context? Great. Contact us. + </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="" width="300px;"> + <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="" width="300px;"> + <p>Funded by viewers like you! + <p>Also accept some equipment, and you can volunteer. + </div> + </div> + </div> + + <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="" width="300px;"> + <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> <!-- row --> + + +</div> <!-- container --> {% endblock %} |