-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
139 lines (119 loc) · 7.49 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Colorama</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Mapping the past in true color">
<meta name="robots" content="index, follow">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<meta property="og:site_name" content="Colorama">
<meta property="og:type" content="website">
<meta property="og:title" content="Colorama">
<meta property="og:url" content="https://www.colorama.app/">
<meta property="og:image" content="https://www.colorama.app/preview.jpg">
<meta property="og:description" content="Mapping the past in true color">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Colorama">
<meta name="twitter:url" content="https://www.colorama.app/">
<meta name="twitter:description" content="Mapping the past in true color">
<meta name="twitter:image" content="https://www.colorama.app/preview.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<!-- Inter font -->
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<!-- Cash -->
<script src="https://unpkg.com/[email protected]/dist/cash.min.js"></script>
<!-- MapLibre -->
<link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/@maplibre/[email protected]/leaflet-maplibre-gl.js"></script>
<script src="/js/SmoothWheelZoom.js"></script>
<!-- MarkerCluster -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
<!-- LightGallery -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/lightgallery-bundle.min.css" />
<script src="https://unpkg.com/[email protected]/lightgallery.min.js"></script>
<script src="https://unpkg.com/[email protected]/plugins/zoom/lg-zoom.min.js"></script>
<script src="https://unpkg.com/[email protected]/plugins/thumbnail/lg-thumbnail.min.js"></script>
<script src="https://unpkg.com/[email protected]/plugins/hash/lg-hash.min.js"></script>
<!-- Colorama -->
<link rel="stylesheet" href="/css/app.css" />
<script src="/js/app.js"></script>
<!-- Umami -->
<script async src="https://umami.storytracer.org/script.js" data-website-id="8f9130ae-66e8-40d4-b1d4-a939b2c0904b"></script>
</head>
<body>
<div id="about" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p><strong>Colorama</strong> lets you explore true color photographs from the early 20th century on an interactive map.</p>
<p>Before WWII, color photography was too expensive and cumbersome for mass adoption. But a handful of enthusiasts had been experimenting with early color processes since the turn of the century. <strong>Colorama</strong> is a showcase of their work.</p>
<p>The first batch of photos featured on <strong>Colorama</strong> comes from the <a href="https://en.wikipedia.org/wiki/The_Archives_of_the_Planet">Archives of the Planet</a> collected by <a href="https://en.wikipedia.org/wiki/Albert_Kahn_(banker)"></a>Albert Kahn</a>. Between 1908 and 1931 Kahn sent photographers around the globe to capture a disappearing world in vibrant color using the <a href="https://en.wikipedia.org/wiki/Autochrome_Lumi%C3%A8re">Autochrome process</a>. I will add more collections from other sources soon.</p>
<p>The <a href="https://albert-kahn.hauts-de-seine.fr/">Musée Départemental Albert-Kahn</a> has digitized Kahn's collection of more than 60,000 autochrome photos and also published the geolocation data for 50,000 of those photos as an <a href="https://opendata.hauts-de-seine.fr/explore/dataset/archives-de-la-planete/information/">open dataset</a>.</p>
<p>I enhanced the open dataset by applying AI models to the metadata. For non-georeferenced photos I used Large Language Models (LLMs) to extract precise location information from the captions which could be processed by a geocoder. I also used LLMs to translate the captions from French to English.</p>
<p style="text-align: center;">Made with ♥ by <a href="https://www.storytracer.org" target="_blank">Sebastian Majstorovic</a></p>
</div>
</div>
<div class="loading-overlay">
<div class="container">
<h1>Colorama</h1>
<div class="loading-logo">
<div class="loading-circle"></div>
<div class="loading-circle"></div>
<div class="loading-circle"></div>
<div class="loading-circle"></div>
<div class="loading-circle"></div>
<div class="loading-circle"></div>
<div class="loading-circle"></div>
<div class="loading-circle"></div>
<div class="loading-circle"></div>
</div>
</div>
</div>
<div id="map"></div>
<div class="bottom-nav">
<div class="nav-container">
<!-- <a id="backButton" href="#" class="nav-item disabled">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M7 6a1 1 0 0 1 2 0v4l6.4-4.8A1 1 0 0 1 17 6v12a1 1 0 0 1-1.6.8L9 14v4a1 1 0 1 1-2 0V6Z" clip-rule="evenodd"/>
</svg>
<span>Back</span>
</a> -->
<a id="zoomOutButton" href="#" class="nav-item">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m16 17-4-4-4 4m8-6-4-4-4 4"/>
</svg>
<span>Zoom Out</span>
</a>
<a id="shuffleButton" href="#" class="nav-item">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
d="M13.5 9.2 15 7h5m0 0-3-3m3 3-3 3M4 17h4l1.6-2.3M4 7h4l7 10h5m0 0-3 3m3-3-3-3" />
</svg>
<span>Shuffle</span>
</a>
<a id="aboutButton" href="#" class="nav-item">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.5 10a2.5 2.5 0 1 1 5 .2 2.4 2.4 0 0 1-2.5 2.4V14m0 3h0m9-5a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
</svg>
<span>About</span>
</a>
</div>
</div>
<div id="galleries"></div>
</body>
</html>