Initial commit

2020-12-30 00:30:45 +01:00
commit 6e1bb198ec
210 changed files with 21648 additions and 0 deletions
@@ -0,0 +1,281 @@
+/* reset */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+/* main styles */
+
+body {
+  padding: 50px 75px;
+  min-width: 460px;
+  background: #ddd;
+  text-align: left;
+  overflow-y: scroll;
+}
+
+body, input, button, select, article, label {
+  font: 16px/1.5 'Ek Mukta', sans-serif;
+}
+
+em {
+  font-style: italic;
+}
+
+input, button, select {
+  margin: 0 10px 10px 0;
+  padding: 5px 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background: #fff;
+}
+
+button {
+  cursor: pointer;
+}
+
+button:active, button.active {
+  background: #eee;
+}
+
+.asc:after {
+  content: ' ↑';
+}
+
+.desc:after {
+  content: ' ↓';
+}
+
+nav {
+  margin-top: 50px;
+  display: flex;
+  justify-content: space-between;
+}
+
+nav button:last-child {
+  margin-right: 0;
+}
+
+select {
+  padding: 3px 10px;
+}
+
+label {
+  margin-right: 10px;
+}
+
+h1 {
+  font-size: 48px;
+}
+
+h1 span {
+  color: #fff;
+}
+
+h2 {
+  font-size: 20px;
+  margin: 20px;
+}
+
+header {
+  margin: 0 auto 50px auto;
+}
+
+main {
+  font-size: 0;
+}
+
+main > div {
+  font-size: 28px;
+  display: none;
+}
+
+ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  font-size: 0;
+}
+
+li {
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  display: inline-block;
+  margin: 120px 10px 10px 10px;
+  padding: 19px;
+  width: 330px;
+  height: 370px;
+  position: relative;
+  background: #fff;
+  text-align: center;
+}
+
+#faq li {
+  margin-top: 10px;
+  text-align: left;
+}
+
+li.left {
+  text-align: left;
+}
+
+li img {
+  width: 250px;
+  height: 200px;
+  margin: -120px 0 -20px 0;
+  display: inline-block;
+}
+
+li p {
+  margin: 20px;
+  font-size: 16px;
+}
+
+li p span {
+  display: block;
+}
+
+li aside {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-top: 1px solid #ddd;
+  background: #f3f3f3;
+  border-radius: 0 0 5px 5px;
+  display: flex;
+}
+
+li aside div, .link {
+  text-align: center;
+  font-size: 16px;
+  color: #666;
+  padding: 15px;
+  border-right: 1px solid #ddd;
+  flex-grow: 1;
+}
+
+li aside div:last-child {
+  border-right: none;
+}
+
+a {
+  color: #000;
+}
+
+a:hover, h1 a {
+  text-decoration: none;
+}
+
+a.active {
+  font-weight: 700;
+}
+
+h1 a:hover {
+  color: #aaa;
+}
+
+strong {
+  font-weight: 700;
+}
+
+p span:first-child {
+  margin-bottom: 20px;
+}
+
+p span a {
+  margin-right: 20px;
+}
+
+p span a:last-child {
+  margin-right: 0;
+}
+
+li a.link {
+  display: block;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  right: 0;
+  bottom: -60px;
+  background: #fff;
+  z-index: 2;
+  border-radius: 0 0 5px 5px;
+  color: #000;
+}
+
+li a.link:active {
+  background: #ddd;
+}
+
+[v-cloak] {
+  display: none;
+}
+
+/* media queries */
+
+@media (max-width: 600px) {
+
+body {
+  padding: 25px 50px 50px 50px;
+}
+
+input, select {
+  display: block;
+  width: 100%;
+}
+
+}
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>analog film space - faq</title>
+  <link href="favicon.png" rel="icon">
+  <link href="favicon.png" rel="shortcut icon">
+  <link href="css/style.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Ek+Mukta:400,700" rel="stylesheet">
+</head>
+<body>
+  <div id="faq">
+    <header>
+      <h1><a href="index.html">analog film<span>.space</span></a></h1>
+      <p>a database of currently available 35mm, 110 and medium format film stocks</p>
+      <p><a href="index.html">overview</a> / <a href="faq.html" class="active">frequently asked questions</a> / <a href="guide.html">film guide</a> / <a href="random.html">random film</a></p>
+    </header>
+    <main>
+      <ul>
+        <li>
+          <h2>What should I look out for when buying film?</h2>
+          <p>When you see a deal too good to be true, the film is usually expired. That in itself is not a problem since film is usually still good years after the expiration date, especially when it was stored under good cooling conditions.</p>
+          <aside>
+            <div>My recommendation: <a href="https://www.fotoimpex.de/" target="_blank">Fotoimpex</a></div>
+          </aside>
+        </li>
+        <li>
+          <h2>Where can I get my film developed?</h2>
+          <p>Try to find a nice local lab to support. If there is none in your city, you can try one of the big retail chains in your country. Make sure to check that the lab supports your films development process (C41, E6, B&W).</p>
+          <aside>
+            <div><a href="https://www.google.com/maps/d/u/0/viewer?mid=1i28X63e5Diz9KeCv_ri_ua0VpL8&hl=en_US" target="_blank">The Emulsive Global Film Lab Map</a></div>
+          </aside>
+        </li>
+        <li>
+          <h2>How can I develop film myself?</h2>
+          <p>Black & white film developing is not very difficult and can be done without a darkroom. Look for a film developing starter kit or find a local photographer group which might even have a darkroom.</p>
+          <aside>
+            <div>My recommendation: <a href="https://www.youtube.com/watch?v=aPQ7OPy8T2w" target="_blank">Video Tutorial</a></div>
+          </aside>
+        </li>
+        <li>
+          <h2>Why isn’t film x listed here?</h2>
+          <p>The films on this site should meet a few requirements: they are not a one-off production run, they are available from multiple international retailers and are (ideally) not just a simple rebranding of another film. You can find more complete lists on Wikipedia:</p>
+          <aside>
+            <div><a href="https://en.wikipedia.org/wiki/List_of_photographic_films" target="_blank">Current Films</a></div>
+            <div><a href="https://en.wikipedia.org/wiki/List_of_discontinued_photographic_films" target="_blank">Discontinued Films</a></div>
+          </aside>
+        </li>
+        <li>
+          <h2>What about other film formats and processes?</h2>
+          <p>If this site generates enough interest, I’ll add these in the future. For now I only added film formats and processes I use myself.<br>If you would like to contribute to this site, contact me via the issues in the repository on GitHub:</p>
+          <aside>
+            <div><a href="https://github.com/sebastianlay/analog-film-space/issues" target="_blank">GitHub repository</a></div>
+          </aside>
+        </li>
+        <li>
+          <h2>What does -chromatic mean?</h2>
+          <p>It indicates which wavelengths a film emulsion is sensitive to.<br>
+            <strong>superpanchromatic (infrared):</strong><br>
+            sensitive up to ~730-820nm<br>
+            <strong>panchromatic (stronger red):</strong><br>
+            sensitive up to ~720nm<br>
+            <strong>orthopanchromatic (reduced red):</strong><br>
+            sensitive up to ~720nm<br>
+            <strong>orthochromatic (insensitive to red):</strong><br>
+            sensitive up to ~600nm
+          </p>
+        </li>
+        <li>
+          <h2>What about the price ranges?</h2>
+          <p>The prices are rough estimates for prices of a single roll (36 exposures for 135, 24 exposures for 110) in Germany in 2020. Some of the films you can get in bundles which are significantly cheaper per roll.</p>
+          <p>€ - cheap (ca. 3-6 € per roll)<br>€€ - moderate (ca. 6-12 € per roll)<br>€€€ - expensive (ca. 12-20 € per roll)</p>
+        </li>
+        <li>
+          <h2>How is the popularity measured?</h2>
+          <p>It’s not easy to measure this. Currently it’s just the number of search results on a popular photo site. I’m very open to alternative ideas! Please let me know via the issues in the repository on GitHub if you have an idea:</p>
+          <aside>
+            <div><a href="https://github.com/sebastianlay/analog-film-space/issues" target="_blank">GitHub repository</a></div>
+          </aside>
+        </li>
+        <li>
+          <h2>Who runs this site?</h2>
+          <p>This site is made by me, Sebastian. I’m happy to take your comments, additions and corrections to this site! Meanwhile you can find some of my personal photography on my personal website:</p>
+          <aside>
+            <div><a href="https://fotos.sebastian-lay.de/" target="_blank">Personal Website</a></div>
+          </aside>
+        </li>
+      </ul>
+    </main>
+  </div>
+</body>
+</html>
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>analog film space - guide</title>
+  <link href="favicon.png" rel="icon">
+  <link href="favicon.png" rel="shortcut icon">
+  <link href="css/style.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Ek+Mukta:400,700" rel="stylesheet">
+</head>
+<body>
+  <div id="guide">
+    <header>
+      <h1><a href="index.html">analog film<span>.space</span></a></h1>
+      <p>a database of currently available 35mm, 110 and medium format film stocks</p>
+      <p><a href="index.html">overview</a> / <a href="faq.html">frequently asked questions</a> / <a href="guide.html" class="active">film guide</a> / <a href="random.html">random film</a></p>
+    </header>
+    <main>
+      <ul>
+        <li class="left">
+          <h2>{{currenttitle}}</h2>
+          <p v-html="currenttext"></p>
+          <p v-if="previousstep">« <a href="#" v-on:click="goto(previousstep)">go to previous question</a></p>
+          <p v-if="films.length">« <a href="#" v-on:click="goto(1)">start over</a></p>
+        </li>
+        <li v-for="answer in answers" class="left">
+          <h2>{{answer.title}}</h2>
+          <p v-html="answer.text"></p>
+          <aside>
+            <div><a href="#" v-on:click="goto(answer.next)">choose this one</a> »</div>
+          </aside>
+        </li>
+        <li v-for="film in films">
+          <img :src="film.image" :alt="film.name">
+          <h2>{{film.name}}</h2>
+          <p>
+            <span v-if="film.description">{{film.description}}</span>
+            <span>
+              <a v-if="film.flickr" :href="film.flickr" target="_blank" rel="noopener">flickr</a>
+              <a v-if="film.lomography" :href="film.lomography" target="_blank" rel="noopener">lomography</a>
+              <a v-if="film.datasheet" :href="film.datasheet" target="_blank" rel="noopener">datasheet</a>
+            </span>
+          </p>
+          <aside>
+            <div title="film type">{{film.color}} {{film.type}}</div>
+            <div title="film format">{{film.format}}</div>
+            <div title="film launched/updated" v-if="film.launched">{{film.launched}}</div>
+            <div title="price range">{{formatPrice(film.price)}}</div>
+          </aside>
+        </li>
+      </ul>
+    </main>
+  </div>
+  <script src="js/current-films.js"></script>
+  <script src="js/guide.js"></script>
+  <script src="js/vue.js"></script>
+  <script src="js/script-guide.js"></script>
+</body>
+</html>
--- a/Show More
+++ b/Show More