-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathemulator.html
159 lines (146 loc) · 9.31 KB
/
emulator.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emulator</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Monoton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Neucha&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cinzel:400,700,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=La+Belle+Aurore&display=swap" rel="stylesheet">
<!-- Personal stylesheet -->
<link rel="stylesheet" href="style.css">
<style>
#artnavbar {
justify-content: center;
font-family: 'Monoton', cursive;
}
.material-icons.md-light {
color: rgba(255, 255, 255, 1);
}
.Epigraphy{
font-family: 'Cinzel', cursive;
color: antiquewhite;
}
.Bauhaus{
font-family: 'Righteous', cursive;
color: antiquewhite;
}
.Artist{
font-family: 'Neucha', cursive;
color: antiquewhite;
}
.Future{
font-family: 'La Belle Aurore', cursive;
color: antiquewhite;
}
.size {
font-size: 1.5rem;
}
iframe {
width: 99vw;
height: 100vh;
}
</style>
</head>
<body>
<!-- Navigation -->
<div class="sticky-top">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="index.html" id="color">MIMIC_LAB</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="emulator.html">Emulator</a>
</li>
<li class="nav-item">
<a class="nav-link" href="documentation.html">Documentation</a>
</li>
<li class="nav-item">
<!-- Button trigger modal -->
<a class="nav-link" href="#" role="button" data-toggle="modal" data-target="#disclaimerModal">
Disclaimer
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">Team</a>
</li>
</ul>
</div>
</nav>
<div class="d-flex align-items-center justify-content-sm-between flex-wrap" style="background: linear-gradient(90deg, rgba(177,126,232,1) 0%, rgba(210,173,250,1) 37%, rgba(228,209,249,1) 100%);">
<div class="float-left size ml-1" id="artnavbar">
<button type="button" class="btn btn-outline-dark" onclick="displayArticle('articles/TheCut/JessicaPresler.html')">ART1</button>
<button type="button" class="btn btn-outline-dark" onclick="displayArticle('articles/Harpers/ImaniPerry.html')">ART2</button>
<button type="button" class="btn btn-outline-dark" onclick="displayArticle('articles/TimesLiterarySupplement/CarlMiller.html')">ART3</button>
<button type="button" class="btn btn-outline-dark" onclick="displayArticle('articles/Bloomberg/ShinoFukada.html')">ART4</button>
<button type="button" class="btn btn-outline-dark" onclick="displayArticle('articles/HuffingtonPost/JasonFagone.html')">ART5</button>
<button type="button" class="btn btn-outline-dark" onclick="displayArticle('articles/EUDirective/L125-75.html')">ART6</button>
</div>
<div class="float-right size mr-1">
<button type="button" class="btn btn-dark btn-sm" onclick="applyStyle('../../themes/roman-epigraphy/roman_template.css')"><i class="material-icons md-light">museum</i><span class="Epigraphy">Epigraphy</span></button>
<button type="button" class="btn btn-dark btn-sm" onclick="applyStyle('../../themes/first-xx/first_XX.css')"><i class="material-icons md-light">category</i><span class="Bauhaus">Bauhaus</span></button>
<button type="button" class="btn btn-dark btn-sm" onclick="applyStyle('../../themes/keith-haring/keith_haring_template.css')"><i class="material-icons md-light">emoji_people</i><span class="Artist">Keith Haring</span></button>
<button type="button" class="btn btn-dark btn-sm" onclick="applyStyle('../../themes/futuristic/futurist.css')"><i class="material-icons md-light">grain</i><span class="Future">Future</span></button>
</div>
</div>
</div>
<iframe id="myFrame" src="">
</iframe>
<!-- Disclaimer Modal -->
<div class="modal" id="disclaimerModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Disclaimer</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>The purpose of this web site is to explore various types of typographic and layout
style for text documents, as an end-of-course project for the "Information
Modeling and Web technologies" course of the Master Degree in Digital
Humanities and Digital Knowledge of the University of Bologna, under prof. Fabio
Vitali.
</p>
<p>
The documents contained in this web site have been selected for their length and
complexity among the best picks of 2018 of www.longreads.com. Their
publication here is not intended to be an alternative or replace their original
locations:
<ol>
<li> Pressler, Jessica. "Maybe She Had So Much Money She Just Lost Track of It". The Cut, 28th May 2018: <a href=" https://www.thecut.com/2018/05/how-anna-delvey-tricked-new-york.html" target="_blank"> https://www.thecut.com/2018/05/how-anna-delvey-tricked-new-york.html</a></li>
<li> Perry, Imani. "As Goes the South, so Goes the Nation". Harpers, July 2018: <a href="https://harpers.org/archive/2018/07/as-goes-the-south-so-goes-the-nation/" target="_blank">https://harpers.org/archive/2018/07/as-goes-the-south-so-goes-the-nation/</a></li>
<li> Miller, Carl. "God is in the machine". Times Literary Supplement: <a href="https://www.the-tls.co.uk/articles/ridiculously-complicated-algorithms/" target="_blank">https://www.the-tls.co.uk/articles/ridiculously-complicated-algorithms/</a></li>
<li> Fukada, Shiho. "Japan's Prisons Are a Haven for Elderly Women". Bloomberg, 16th March 2018:<a href="https://www.bloomberg.com/news/features/2018-03-16/japan-s-prisons-are-a-haven-for-elderly-women" target="_blank">https://www.bloomberg.com/news/features/2018-03-16/japan-s-prisons-are-a-haven-for-elderly-women</a></li>
<li> Fagone, Jason. "Jerry and Marge Go Large". The Huffington Post: <a href="https://highline.huffingtonpost.com/articles/en/lotto-winners/" target="_blank">https://highline.huffingtonpost.com/articles/en/lotto-winners/</a></li>
<li> "L 125/75, DIRECTIVE 2009/41/EC OF THE EUROPEAN PARLIAMENT AND OF THE COUNCIL of 6 May 2009 on the contained use of genetically modified micro-organisms": <a href=" https://eur-lex.europa.eu/legal-content/it/TXT/?uri=CELEX:32009L0041" target="_blank"> https://eur-lex.europa.eu/legal-content/it/TXT/?uri=CELEX:32009L0041</a></li>
</ol>
<p>
All copyrights and related rights on the content remain with their original owners.
All copyright on the typographic and layout choices are 2019 © XY
</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="emulatorScript.js"></script>
<!--Scripts-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>