summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rwxr-xr-xhtml.rb58
-rw-r--r--html/pictures.html8
-rw-r--r--html/slideshow.js4
-rw-r--r--html/style.css83
4 files changed, 113 insertions, 40 deletions
diff --git a/html.rb b/html.rb
index fd944bd..7e9d2f0 100755
--- a/html.rb
+++ b/html.rb
@@ -9,12 +9,12 @@ SNIPPETS = File.join(File.dirname(__FILE__), 'html')
def nav(cat)
html = '<nav>'
html += "<a id='logo' href='/about.html'><img src='/pdp8.png' alt='pdp8'></a>"
- %w[music pictures videos code contact].each do |c|
+ %w[music pictures videos climbing code contact].each do |c|
cl = c == cat ? 'item current' : 'item'
- html += "<a class='#{cl}' href='/#{c}.html'>#{c}</a>"
+ html += "&nbsp;<a class='#{cl}' href='/#{c}.html'>#{c}</a>"
end
- html += "<a class='item' href='/rss.xml'>rss</a>"
- html += "<a id='menu' href='#' onclick='show_vertical_menu()'>&equiv;</a>"
+ html += "&nbsp;<a class='item' href='/rss.xml'>rss</a>"
+ html += "&nbsp;<a id='menu' href='#' onclick='show_vertical_menu()'>&equiv;</a>"
html += '</nav>'
html
end
@@ -43,30 +43,34 @@ def music_html
html = File.read(File.join(SNIPPETS, 'head.html'))
html += nav 'music'
music.each do |dir|
+ next if dir.match 'alfadeo'
+
date = File.basename(dir).split('_')[0]
html += "<div class='post' id='#{date}'>"
title = File.basename(dir).split('_')[1..-1].join(' ')
html += "<h1>#{title}</h1>"
- html += File.read(File.join(dir, 'README')).chomp.gsub("\n\n", '<p>').gsub("\n", '<br>') + '<p>'
- cover = File.join(MEDIA_URL, dir.sub(MEDIA_DIR, ''), 'cover.jpeg')
- html += "<img class='cover' src='#{cover}' alt='cover'>"
+ html += File.read(File.join(dir, 'README')).chomp.gsub("\n\n", '<p>').gsub("\n", '<br>') # + '<p>'
+ cover = File.join(MEDIA_URL, dir.sub(MEDIA_DIR, ''), 'cover.webp')
+ html += "<img class='cover' loading='lazy' width='1024' height='1024' src='#{cover}' alt='cover'>"
html += '<table>'
copyrights_file = File.join(dir, 'copyrights')
copyrights = File.readlines(copyrights_file).collect { |l| l.chomp } if File.exist? copyrights_file
Dir[File.join(dir, '*mp3')].each_with_index do |mp3, _i|
mp3 = File.join(MEDIA_URL, mp3.sub(MEDIA_DIR, ''))
- name = File.basename(mp3, '.mp3')[3..-1]
+ name = File.basename(mp3, '.mp3')[3..-1].gsub('_', ' ')
# name += " &copy;#{copyrights[i]}" if copyrights
html += '<tr>'
+ html += "<td>#{name}</td>"
html += "<td>
- <audio controls>
+ <audio preload='none' controls>
<source src='#{mp3}' type='audio/mpeg'>
</audio>
</td>"
- html += "<td>#{name}</td>"
html += '</tr>'
end
html += '</table>'
+ ia = "https://archive.org/details/pdp8_#{title.gsub(' ', '_')}"
+ html += "<p>Internet Archive: <a href='#{ia}'>#{ia}</a>"
bc = if File.exist?(File.join(dir, 'bandcamp'))
File.read(File.join(dir, 'bandcamp')).chomp
else
@@ -74,7 +78,7 @@ def music_html
end
html += "<p>Bandcamp: <a href='#{bc}'>#{bc}</a>"
html += '</div>'
- html += '<hr>'
+ # html += '<hr>'
end
html += '<p>&copy; pdp8 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>'
html += File.read(File.join(SNIPPETS, 'tail.html'))
@@ -99,22 +103,50 @@ def video_html
webm = File.join(MEDIA_URL, 'videos', File.basename(dir), title.gsub(' ', '_') + '.webm')
poster = File.join(MEDIA_URL, 'videos', File.basename(dir), 'poster.png')
- html += "<video controls poster='#{poster}'>
+ html += "<video controls preload='none' poster='#{poster}'>
<source src='#{webm}' type='video/webm'>
<source src='#{mp4}' type='video/mp4'>
</video><p>
"
html += lines.join('<br>')
html += '</div>'
- html += '<hr>'
+ # html += '<hr>'
end
html += '<p>&nbsp;&copy; pdp8 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>'
html += File.read(File.join(SNIPPETS, 'tail.html'))
print_html 'videos', html
end
+def climbing_html
+ html = File.read(File.join(SNIPPETS, 'head.html'))
+ html += nav 'climbing'
+ Dir[File.join(MEDIA_DIR, 'climbing', '*.txt')].collect do |txt|
+ lines = File.read(txt).lines.collect { |l| l.chomp }
+ { date: lines.shift,
+ text: lines.join('<br>'),
+ mp4: txt.sub(MEDIA_DIR, MEDIA_URL).sub('.txt', '.mp4'),
+ webm: txt.sub(MEDIA_DIR, MEDIA_URL).sub('.txt', '.webm'),
+ webp: txt.sub(MEDIA_DIR, MEDIA_URL).sub('.txt', '.webp') }
+ end.sort_by { |m| m[:date] }.reverse.each do |post|
+ html += '<div class="post">'
+ html += "<h1>#{post[:date]}</h1>"
+ html += "<video controls preload='none' poster=#{post[:webp]}>
+ <source src='#{post[:webm]}' type='video/webm'>
+ <source src='#{post[:mp4]}' type='video/mp4'>
+ <a href=#{post[:mp4]}>#{post[:mp4]}</a>
+ </video><p>
+ "
+ html += post[:text]
+ html += '</div>'
+ end
+ html += '<p>&nbsp;&copy; pdp8 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>'
+ html += File.read(File.join(SNIPPETS, 'tail.html'))
+ print_html 'climbing', html
+end
+
music_html
video_html
+climbing_html
%w[about code pictures contact].each do |basename|
file_html basename
diff --git a/html/pictures.html b/html/pictures.html
index 25bf1c2..e733266 100644
--- a/html/pictures.html
+++ b/html/pictures.html
@@ -1,15 +1,15 @@
<script src="https://media.pdp8.info/pictures/distances.js"></script>
<script src="/slideshow.js"></script>
-<img id="image"
+<img id="image" width="1024" height="768"
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"
+ <a class="btn" onclick="toggle_play()"><i id="play-indicator" title="Pause slideshow" class="fa fa-inverse fa-pause"
aria-hidden="true"></i></a>
+ <a class="btn" onclick="new_selection()"><i id="shuffle-indicator" title="Next slideshow"
+ class="fa fa-inverse 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>
diff --git a/html/slideshow.js b/html/slideshow.js
index ea265e4..48a5395 100644
--- a/html/slideshow.js
+++ b/html/slideshow.js
@@ -52,7 +52,7 @@ function play() {
playing = 1
interval = setInterval(function () { next() }, 3000);
document.getElementById("play-indicator").title = "Pause slideshow"
- document.getElementById("play-indicator").className = "fa fa-pause"
+ document.getElementById("play-indicator").className = "fa fa-inverse fa-pause"
hide_controls()
}
@@ -60,7 +60,7 @@ function stop() {
playing = 0
clearInterval(interval)
document.getElementById("play-indicator").title = "Play slideshow"
- document.getElementById("play-indicator").className = "fa fa-play"
+ document.getElementById("play-indicator").className = "fa fa-inverse fa-play"
show_controls()
}
diff --git a/html/style.css b/html/style.css
index 63fdb65..1c8bf59 100644
--- a/html/style.css
+++ b/html/style.css
@@ -1,12 +1,12 @@
body {
+ background-color: black;
+ color: #eee;
width: 100vw;
margin: 0;
font-family: sans-serif;
}
nav {
- background: #000;
- color: #fff;
padding: 0.75em 0 1em 0;
}
@@ -21,13 +21,21 @@ nav img {
vertical-align: bottom;
}
-nav #logo img { height: 2em; }
+nav #logo img {
+ height: 2em;
+}
-nav .current { color: #fff; }
+nav .current {
+ color: white;
+}
-nav #menu { display:none; }
+nav #menu {
+ display: none;
+}
-nav a:hover { color: #fff; }
+nav a:hover {
+ color: white;
+}
@media screen and (max-width: 600px) {
nav .item {
@@ -43,16 +51,32 @@ nav a:hover { color: #fff; }
}
}
-.post { padding: 1em; }
+.post {
+ padding: 1em;
+}
-img, video {
- max-width: 100%;
+img,
+video {
max-height: 80vh;
+ max-width: 80vw;
+ object-fit: contain;
display: block;
margin-left: auto;
margin-right: auto;
}
+#image {
+ padding-top: 2.5%;
+ padding-bottom: 1%;
+}
+
+.cover {
+ max-height: min(50vh, 90vw);
+ max-width: min(50vh, 90vw);
+ margin-left: 0;
+ padding: 1em 0;
+}
+
iframe {
width: 100%;
height: 90vh;
@@ -63,16 +87,19 @@ a {
color: #888;
}
-#image {
- padding-top: 2.5%;
- padding-bottom: 1%;
+td {
+ padding-right: 1em;
+ font-size: larger;
}
-.cover {
- max-height: 50vh;
- margin-left: 0;
+audio {
+ width: 12.5em;
+ height: 2.5em;
}
+audio::-webkit-media-controls-panel {
+ background-color: #aaa;
+}
#controller {
position: fixed;
@@ -86,13 +113,14 @@ a {
.btn {
display: inline-block;
cursor: pointer;
- color: #000;
+ color: #111;
font-size: 2em;
font-weight: bold;
width: 4em;
}
-#prev, #next {
+#prev,
+#next {
cursor: pointer;
position: absolute;
color: lightgrey;
@@ -102,7 +130,20 @@ a {
bottom: 6vh;
}
-#prev { left: 1%; }
-#next { right: 1%; }
-#prev:hover, #next:hover { text-decoration: none; }
-#prev:active, #next:active { color: black; }
+#prev {
+ left: 1%;
+}
+
+#next {
+ right: 1%;
+}
+
+#prev:hover,
+#next:hover {
+ text-decoration: none;
+}
+
+#prev:active,
+#next:active {
+ color: black;
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2024-10-16 13:27:37 +0000