-
Notifications
You must be signed in to change notification settings - Fork 0
/
retropod.html
executable file
·197 lines (183 loc) · 13.3 KB
/
retropod.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
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
<!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, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
<title>Retropod</title>
</head>
<body>
<!-- Monitoren som bakgrunnsbilde inkludert alt som skal vises på selve displayet -->
<div class="bgcontainer hide">
<div class="onLight hide">
</div>
<main class="onMonitor hide">
<!-- Hovedmeny -->
<header class="hide">
<nav class="navbar hide">
<ul>
<li><a href="index.html">START</a></li>
<li><a href="portfolio.html">PORTFOLIO</a></li>
<li><a href="retropod.html" style="background-color: black; color: white;">RETROPOD</a></li>
<li><a href="om.html">OM</a></li>
</ul>
</nav>
</header>
<!-- Slutt på hovedmeny -->
<!-- Informasjon på selve displayet -->
<section class="sectionA hide">
<header>
<h1 class="headline">
RETROPODDEN
</h1>
</header>
<article>
<p class="textWithSpace"><span id="podcast" class="anchor"></span>
Retropodden er, som navnet kanskje avslører, en podcast om retro.
Spesifikt om retro teknologi, data og spill.
Det er ikke å feie under en stol at episodene primært handler om spill,
men sånn har det blitt...
</p>
<p class="textWithSpace">Jeg og Peder har lagd podcasten siden 2019, og til tross for at episodene kommer ut litt sporadisk, og tidvis med flere mnd. mellomrom, holder vi på fremdeles.</p>
<iframe class="audioPlayer" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/665571995&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true">
</iframe>
</article>
</section>
</main>
<!-- Slutt på iformasjon på selve displayet -->
<!-- Knappeseksjonen på monitoren inkludert postit lapper -->
<section class="sectionB hide">
<div class="postit-1-wrapper hide">
<figure class="postit-1">
<img src="https://i.ibb.co/JB8HGYW/postit-Tiny.png" alt="postitnote">
<figcaption>
Sorte
knapper
=
Retro
essay
</figcaption>
</figure>
</div>
<div class="postit-2 hide">
<figure class="postit-2-wrapper">
<img src="https://i.ibb.co/JB8HGYW/postit-Tiny.png" alt="postitnote">
<figcaption>
Hvite
knapper
=
Flere
episoder
</figcaption>
</figure>
</div>
<div class="whiteButtons"><a href="#adInfoContainer" id="btn1" class="button" onclick="toggleHide()">White buttons</a></div>
<div class="blackButtons"><a href="#adInfo2Container" id="btn2" class="button" onclick="toggleHide2()">Black buttons</a></div>
</section>
</div>
<!-- Slutt på knappeseksjonen på selve monitoren inkludert postit lappene -->
<!-- Slutt på monitoren som bakgrunnsbilde inkludert alt som skal vises på selve displayet -->
<!-- Alt som er nedenfor monitoren som quotes, og ekstra informasjon -->
<section class="sectionC hide" >
<figure class="quoteContainer">
<blockquote class="quote" cite="https://www.ibm.com/no-en">
<p>
“All parts should go together without forcing.
You must remember that the parts you are reassembling were disassembled by you.
Therefore, if you can’t get them together again, there must be a reason.
By all means, do not use a hammer.”
</p>
</blockquote>
<figcaption>
- Utdrag fra en
<cite>
<a href="https://www.ibm.com/no-en" target="_blank">
IBM</a> manual
fra 1925.
</cite>
</figcaption>
</figure>
<!-- Første setning i adInfo kan skrives fram til pilspissen -->
<!--Resten av setningene kan skrives fram til denne pilspissen-->
<aside id="adInfoContainer" class="hidden">
<h3>5 spill du ikke må glemme <br> når Zombieapokalypsen vasker over landet.</h3>
<iframe class="audioPlayer asidePlayer" allow="autoplay"
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/793984198&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true">
</iframe>
<h3>Velkommen til Another World.</h3>
<iframe class="audioPlayer asidePlayer" allow="autoplay"
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/635144265&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true">
</iframe>
<h3>Velkommen til Prince of Percia</h3>
<iframe class="audioPlayer asidePlayer" allow="autoplay"
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/682370042&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true">
</iframe>
<h3>Retropoddens Amigaguide Del 1.</h3>
<iframe class="audioPlayer asidePlayer" allow="autoplay"
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1133604211&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true">
</iframe>
</aside>
<!--Resten av setningene kan skrives fram til denne pilspissen-->
<!-- Første setning i adInfo2 kan skrives fram til pilspissen -->
<aside id="adInfo2Container" class="hidden"><h2>En time i sofaen</h2>
<p class="subheading">Hvorfor er gamle datamaskiner så sjarmerende?</p>
<p class="textWithSpace">Gammelt datautstyr har en spesiell lukt. Den er nærmest umulig å beskrive, men maner fornemmelser om fint støv og statisk elektrisitet.
Lukten er definitivt grå, for de som foretrekker en slik definisjon, og viktigst av alt er at den alltid tar meg 20 år tilbake i tid.
Til en tid da fantasien var sterkere enn fornuften og dagene virket å strekke seg til det uendelige. Hvis lukten alene sitter dypt nok til å transportere meg tilbake i tid, og tilbake til en svunnen sinnstilstand,
kan ikke denne lukten komme av alderdom, den må alltid ha vært der. En magisk kombinasjonen av plastikk, silikon og varme som har vist seg å være mitt sterkeste sanselige minne fra barndommen. </p>
<p class="textWithSpace">Mitt første møte med gammelt datautstyr var for litt nesten 30 år siden. Vår første datamaskin hadde akkurat kommet i hus; en Commodore 128, eller C128 (kundreogtjueåtte som det kalles på folkemunne).
På denne tiden var C128 allerede en ‘gammel’ maskin, men mine eventyr inn i pikselerte skoger tok sine første steg vekk fra krybben. Jeg husker fremdeles følelsen av uendelige muligheter ved fingertuppene.
Hvis jeg bare kunne lære meg å kommunisere med denne maskinen ville verdener ligge for mine føtter. Denne følelsen av å bare glimte toppen av isfjellet var sentralt i mine første år med datamaskiner.
På C128 måtte man utføre kommandoer i BASIC for å laste spill eller programvare. Hvis maskinen ikke var fornøyd med kommandoene mine fikk jeg beskjed om det, men hvis jeg hadde spurt pent nok ville den åpne dørene for meg.
Det var sånn det føltes i hvert fall. Eventyrspill sto alltid sterkt hos meg, og muligens mye fordi disse spillene frembringer noe av den samme følelsen av endeløse muligheter.
De tidlig tekstbaserte eventyrene opplevdes ikke som begrenset, men som uendelige. Det var min manglende evne til å kommunisere som var problemet.
Disse spillene var en luke inn i en annen verden, hvor jeg inntok en ny og pikselert form og fikk frie tøyler til å utforske etter ønske.</p>
<p class="textWithSpace">Mange gamle datamaskiner frembringer noe av den samme følelsen. Man er nærmere maskinen.
Det er bare et tynt lag med tolkningsrutiner mellom meg og HAL. Eller HAL’s tilbakestående grand-onkel.</p>
<p class="textWithSpace">Til tross for at disse gamle maskinene åpenbart er mye ‘dummere’ en neon-beistene og aluminiums-flakene dagens unge vokser opp med føles kommunikasjonen med maskinene mye mer verdifull og ‘intelligent’.
Jeg mener ikke med det at jeg føler meg spesielt intelligent når jeg setter meg ned foran C128’en for å stotre frem kommandoer i håp om å få spilt et 30 år gammelt dataspill.
Men fremdeles den dag i dag føler jeg at kommunikasjonen på en eller annen måte er mer betydningsfull.</p>
<p class="textWithSpace">Jeg husker godt hvordan ting endret seg de neste 10 årene. Amiga og Macintosh kom med elegante, grafiske operativsystemer, og plutselig brukte alle Windows 95.
Før vi visste ordet av det kom verdensveven og snart også yahoo og google. Alle hadde e-post, alle hadde mobiltelefon, alle var på MSN eller irc, og gapet mellom meg og maskinene hadde vokst seg enormt stort.
Tilsynelatende over natten. Samtidig var spillene fulle av barrierer. Man ble tildelt et våpen og bedt om å følge den blinkende pilen. «Bare noen hundre meter til nå så får du et nytt plott-dryss».
Maskinene og spillene ble mer intelligente, kommunikasjonen ble mer innfløkt og i sin enorme brukervennlighet hadde både spillene og operativsystemene vokst seg mindre. Over alt hvor jeg gikk ble jeg møtt av en vegg. </p>
<p class="textWithSpace">Det er langt fra hønsebingen til Manannan i King’s Quest III til skuddvekslingene i Advanced Warfare: Modern Squad Arena (DLC edition). Både langt frem og langt tilbake.
Å sette seg ned med en flysimulator for plutselig å bli møtt av et quick time event er deprimerende.
«Da jeg var ung kunne du bare GLEMME å komme deg av landingsbanen før manualen var finlest minst to ganger!». Min indre 70-åring nærmer seg overflaten i en forrykende fart.</p>
<p class="textWithSpace">Disse gamle datamaskinene hadde personlighet. På den tiden kunne en datamodell forbli aktuell i årevis. Hver maskin hadde sine styrker og svakheter, og spillene og programvaren var skreddersydd for hver platform.
Man kan argumentere for at dette har endret seg til det bedre, men for oss nostalgikere er dette noe av sjarmen. Disse maskinene var bygd for å leve lenge.
Mine gamle datamaskiner fungerer like godt den dag i dag som de gjorde da de ble kjøpt, men min Acer laptop og min Mac Pro har begge vært igjennom utallige system-gjenopprettinger og reparasjoner.</p>
<p class="textWithSpace">Jeg har en drøm om å en dag gå fra å være en relativt ung, eksentrisk entusiast til å bli en sær gammel skrulling.
Da skal jeg innrede bomberommet mitt med hyller fulle av hjemlagede hermetiserte gourmetretter og huset skal være fult av nettverkskoblede PET-maskiner og internett skal byttes ut med elektroniske oppslagstavler.</p>
<p class="textWithSpace">Men, den tid den sorg. Nå er min time på sofaen over for denne gang. Takk for meg og til lykke med dagen, alle sammen.</p>
<hr>
<p class="textWithSpace">Excerpt:</p>
<p class="textWithSpace">Hva er det egentlig ved gamle datamaskiner og gamle dataspill som gjør dem så uimotståelige? Dette er ikke så mye en grundig analyse av spørsmålet som en liten økt i terapisofaen for en hardnakket nostalgiker.</p>
</aside>
<!--Resten av setningene kan skrives fram til denne pilspissen-->
</section>
<!-- Slutt på alt som er nedenfor monitoren som quotes, og ekstra informasjon -->
<footer class="hide">
<p class="validation">
<a href="https://jigsaw.w3.org/css-validator/check/referer">
<img
src="https://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" />
</a>
</p>
<p>© 2021</p>
<p>Pål Holdahl | Sander Hjermstad | Leif Kielland</p>
</footer>
<div class="turndevice">
<p>
Vennligst snu enheten din til portrettmodus.
</p>
</div>
<script>
</script>
</body>
</html>