summaryrefslogtreecommitdiffstats
path: root/theme/templates/index.html
blob: 65883d1ba9761056bf751a3e119786e89aa2e759 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
{% 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="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.png" 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 %}
<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 %}