mail and social

author: pdp8 <pdp8@pdp8.info> 2023-08-16 15:25:17 +0200
committer: pdp8 <pdp8@pdp8.info> 2023-08-16 15:25:17 +0200
commit: ac90ab7c69b35546135cacf9ed2ed98261047dac (patch)
tree: 0eac8141030f85525ec56dbee3dea90ea4a5c600 /html
parent: a3ab009e96db2269dcf3f6dd1c103aa885186ee4 (diff)
11 files changed, 261 insertions, 0 deletions
diff --git a/html/540px-PDP-8_.jpg b/html/540px-PDP-8_.jpg
new file mode 100644
index 0000000..1f67d13
--- /dev/null
+++ b/html/540px-PDP-8_.jpg
diff --git a/html/about.html b/html/about.html
new file mode 100644
index 0000000..55f6131
--- /dev/null
+++ b/html/about.html
@@ -0,0 +1,7 @@
+<img src="540px-PDP-8_.jpg" alt="pdp-8" title="By Kris Arnold - https://www.flickr.com/photos/wka/3735964493/, CC BY-SA 2.0, https://commons.wikimedia.org/w/index.php?curid=110392229">
+<br>
+The PDP-8 is a 12-bit minicomputer that was produced by Digital Equipment Corporation (DEC). It was the first commercially successful minicomputer, with over 50,000 units being sold over the model's lifetime. Its basic design follows the pioneering LINC but has a smaller instruction set, which is an expanded version of the PDP-5 instruction set.
+<p>
+The PDP-8 combines low cost, simplicity, expandability, and careful engineering for value. The greatest historical significance was that the PDP-8's low cost and high volume made a computer available to many new customers for many new uses. Its continuing significance is as a historical example of value-engineered computer design.
+<p>
+<a href="https://en.wikipedia.org/wiki/PDP-8">https://en.wikipedia.org/wiki/PDP-8</a>
diff --git a/html/code.html b/html/code.html
new file mode 100644
index 0000000..6b43fee
--- /dev/null
+++ b/html/code.html
@@ -0,0 +1 @@
+<iframe src='https://git.pdp8.info/' title="pdp8 git repositories"/>"
diff --git a/html/contact.html b/html/contact.html
new file mode 100644
index 0000000..4582664
--- /dev/null
+++ b/html/contact.html
@@ -0,0 +1,15 @@
+<h1>email</h1>
+<a href='mailto:info@pdp8.info'>info@pdp8.info</a>
+<h1>fediverse</h1>
+<a href='https://social.pdp8.info/pdp8'>@pdp8@social.pdp8.info</a>
+<!--
+<h1>matrix</h1>
+<a href='https://matrix.to/#/@pdp8:matrix.pdp8.info'>@pdp8:matrix.pdp8.info</a>
+-->
+<h1>newsletter</h1>
+<h2>subscribe</h2>
+send a mail to <a href='mailto:info@pdp8.info?subject=Subscribe'>info@pdp8.info</a> with <b>subscribe</b> in the subject
+(your address will be used only for the newsletter and won't be shared with anyone)
+<h2>unsubscribe</h2>
+send a mail to <a href='mailto:info@pdp8.info?subject=Subscribe'>info@pdp8.info</a> with <b>unsubscribe</b> in the
+subject
+\ No newline at end of file
diff --git a/html/head.html b/html/head.html
new file mode 100644
index 0000000..78f38da
--- /dev/null
+++ b/html/head.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
+    <title>pdp8</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="/style.css">
+    <link rel="icon" type="image/png" href="/pdp8.png">
+    <link rel="alternate" type="application/rss+xml" title="pdp8 rss feed" href="https://pdp8.info/rss.xml">
+  </head>
+
+  <body>
diff --git a/html/pdp8.png b/html/pdp8.png
new file mode 100644
index 0000000..a11a860
--- /dev/null
+++ b/html/pdp8.png
diff --git a/html/pictures.html b/html/pictures.html
new file mode 100644
index 0000000..25bf1c2
--- /dev/null
+++ b/html/pictures.html
@@ -0,0 +1,22 @@
+<script src="https://media.pdp8.info/pictures/distances.js"></script>
+<script src="/slideshow.js"></script>
+
+<img id="image"
+  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII="
+  alt />
+
+<div id="controller">
+  <a class="btn" onclick="toggle_play()"><i id="play-indicator" title="Pause slideshow" class="fa fa-pause"
+      aria-hidden="true"></i></a>
+  <a class="btn" onclick="new_selection()"><i id="shuffle-indicator" title="Next slideshow" class="fa fa-random"
+      aria-hidden="true"></i></a>
+  <p>&copy; pdp8 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0
+      International License</a>
+</div>
+
+<a id="prev" onclick="prev()">&lsaquo;</a>
+<a id="next" onclick="next()">&rsaquo;</a>
+
+<script>
+  (function () {new_selection(); play()})();
+</script>
+\ No newline at end of file
diff --git a/html/robots.txt b/html/robots.txt
new file mode 100644
index 0000000..eb05362
--- /dev/null
+++ b/html/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
diff --git a/html/slideshow.js b/html/slideshow.js
new file mode 100644
index 0000000..ea265e4
--- /dev/null
+++ b/html/slideshow.js
@@ -0,0 +1,80 @@
+selection = []
+visited = []
+current = 0
+playing = 1
+
+document.addEventListener('keyup', function(event) {
+  if(event.keyCode == 37) { prev() } // left
+  else if(event.keyCode == 39) { next() } // right
+  else if(event.keyCode == 32) {
+    toggle_play()
+  } // space
+  else if(event.keyCode == 13) { new_selection() } // enter
+});
+
+function new_selection() {
+  images = Object.keys(distances)
+  start = images[Math.floor(Math.random()*images.length)]
+  sortable = []
+  for (file in distances[start]) {
+    if (visited.indexOf(file) == -1) { // not in visited
+      sortable.push([file,distances[start][file]]) // objects cannot be sorted in js, use array instead
+    }
+  }
+  n = 6
+  selection = []
+  sorted = sortable.sort(function(a, b) { return a[1] - b[1]; }).slice(0,n); // sort by distance, get first n elements
+  sorted.forEach(function(img,index) { 
+    selection.push(img[0])
+    visited.push(img[0])
+  }) 
+  selection = selection.sort(() => Math.random() - 0.5); // shuffle
+  current = 0
+  update()
+}
+
+function src(id,path) { document.getElementById(id).src = path }
+function onclick(id,fun) { document.getElementById(id).onclick = fun }
+
+function hide_controls() {
+  document.getElementById("prev").style.display = "none"
+  document.getElementById("next").style.display = "none"
+}
+
+function show_controls() {
+  document.getElementById("prev").style.display = "block"
+  document.getElementById("next").style.display = "block"
+}
+
+function toggle_play() { playing == 1 ? stop() : play() }
+
+function play() {
+  playing = 1
+  interval = setInterval(function () { next() }, 3000);
+  document.getElementById("play-indicator").title = "Pause slideshow"
+  document.getElementById("play-indicator").className = "fa fa-pause"
+  hide_controls()
+}
+
+function stop() {
+  playing = 0
+  clearInterval(interval)
+  document.getElementById("play-indicator").title = "Play slideshow"
+  document.getElementById("play-indicator").className = "fa fa-play"
+  show_controls()
+}
+
+function prev() {
+  current = (current-1+selection.length) % selection.length // js % cannot handle negative values
+  update()
+}
+
+function next() {
+  current = (current+1) % selection.length
+  update()
+}
+
+function update() {
+  src('image',"https://media.pdp8.info/pictures/"+selection[current])
+}
+
diff --git a/html/style.css b/html/style.css
new file mode 100644
index 0000000..63fdb65
--- /dev/null
+++ b/html/style.css
@@ -0,0 +1,108 @@
+body {
+  width: 100vw;
+  margin: 0;
+  font-family: sans-serif;
+}
+
+nav {
+  background: #000;
+  color: #fff;
+  padding: 0.75em 0 1em 0;
+}
+
+nav a {
+  padding: 0 1em;
+  text-decoration: none;
+}
+
+nav img {
+  height: 2em;
+  display: inline;
+  vertical-align: bottom;
+}
+
+nav #logo img { height: 2em; }
+
+nav .current { color: #fff; }
+
+nav #menu { display:none; }
+
+nav a:hover { color: #fff; }
+
+@media screen and (max-width: 600px) {
+  nav .item {
+    display: none;
+    padding-left: 1em;
+    padding-top: 0.5em;
+  }
+
+  nav #menu {
+    float: right;
+    display: inline;
+    font-size: 2em;
+  }
+}
+
+.post { padding: 1em; }
+
+img, video {
+  max-width: 100%;
+  max-height: 80vh;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+iframe {
+  width: 100%;
+  height: 90vh;
+  border: none;
+}
+
+a {
+  color: #888;
+}
+
+#image {
+  padding-top: 2.5%;
+  padding-bottom: 1%;
+}
+
+.cover {
+  max-height: 50vh;
+  margin-left: 0;
+}
+
+
+#controller {
+  position: fixed;
+  left: 0;
+  bottom: 2.5%;
+  width: 100%;
+  text-align: center;
+  padding: 0
+}
+
+.btn {
+  display: inline-block;
+  cursor: pointer;
+  color: #000;
+  font-size: 2em;
+  font-weight: bold;
+  width: 4em;
+}
+
+#prev, #next {
+  cursor: pointer;
+  position: absolute;
+  color: lightgrey;
+  font-weight: bold;
+  font-size: 8em;
+  transition: 0.5s ease;
+  bottom: 6vh;
+}
+
+#prev { left: 1%; }
+#next { right: 1%; }
+#prev:hover, #next:hover { text-decoration: none; }
+#prev:active, #next:active { color: black; }
diff --git a/html/tail.html b/html/tail.html
new file mode 100644
index 0000000..53ca8ca
--- /dev/null
+++ b/html/tail.html
@@ -0,0 +1,11 @@
+    <script>
+      function show_vertical_menu() {
+        document.getElementById("menu").style.display = "none"
+        items = document.getElementsByClassName("item")
+        for (i = 0; i < items.length; i++) {
+          items[i].style.display = "block"
+        }
+      }
+    </script>
+  </body>
+</html>
author	pdp8 <pdp8@pdp8.info>	2023-08-16 15:25:17 +0200
committer	pdp8 <pdp8@pdp8.info>	2023-08-16 15:25:17 +0200
commit	ac90ab7c69b35546135cacf9ed2ed98261047dac (patch)
tree	0eac8141030f85525ec56dbee3dea90ea4a5c600 /html
parent	a3ab009e96db2269dcf3f6dd1c103aa885186ee4 (diff)