Merge branch 'master' of https://git.xpub.nl/XPUB/issue.xpub.nl
@ -0,0 +1,280 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Privacy</title>
|
||||
<link rel="stylesheet" href="style5.css">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: black;
|
||||
padding-left: 30px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
a:link, a:visited {
|
||||
background-color: #000000;
|
||||
color: white;
|
||||
padding: 14px 25px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
div {
|
||||
height: 20%;
|
||||
text-align: center;
|
||||
font-size: 36px;
|
||||
padding: 20px;
|
||||
}
|
||||
svg {
|
||||
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 6%;
|
||||
color: white;
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<header><br>
|
||||
<h1>PRIVACY?</h1>
|
||||
<p><span class="blink">Is privacy guaranteed in social networks?</blink></a></p>
|
||||
</header>
|
||||
<body>
|
||||
<br><br>
|
||||
<svg id="canvas" align="center"></svg>
|
||||
|
||||
</body>
|
||||
|
||||
<div class="wrapper">
|
||||
|
||||
|
||||
<div class="push"></div>
|
||||
</div>
|
||||
<footer class="footer"><a href="privacy-iframes.html">VIDEOS (4)</a><a href="privacy-iframes.html">ARTICLES (4)</a><a href="privacy-iframes.html">BOOKS (1)</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
//find the element with id =message(in dom), return via function: document.getelementbyid, store it in var
|
||||
var svg = document.getElementById('canvas');
|
||||
var padding = 15;
|
||||
var circleRadius = 15;
|
||||
|
||||
/**
|
||||
* Returns a random number between min (inclusive) and max (exclusive)
|
||||
* from: https://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range
|
||||
*/
|
||||
function getRandomArbitrary(min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + min);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns randomly either "true" or "false" with 50% chance for each one.
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function getRandomBoolean() {
|
||||
return getRandomArbitrary(0, 2) === 1;
|
||||
}
|
||||
|
||||
//when we execute sleep (...ms), program waits for (...ms)
|
||||
function sleep(time) {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
resolve();
|
||||
}, time);
|
||||
});
|
||||
}
|
||||
//The parseInt() function parses a string argument and returns an integer of the specified size of svg in pixels
|
||||
function pickARandomCirclePosition() {
|
||||
var w = parseInt(window.getComputedStyle(svg).width);
|
||||
var h = parseInt(window.getComputedStyle(svg).height);
|
||||
var x = getRandomArbitrary(padding + circleRadius, w - circleRadius - padding);
|
||||
var y = getRandomArbitrary(padding + circleRadius, h - circleRadius - padding);
|
||||
//return an object which has 2 properties, named x,y and value the value of var x,y
|
||||
return { x: x, y: y };
|
||||
}
|
||||
|
||||
//======================================================================//
|
||||
// new code 2019.03.02:
|
||||
|
||||
const messages = [
|
||||
"FOSDEM video",
|
||||
"BBC article",
|
||||
"INSTITURE OF NETWORK CULTURES article",
|
||||
"DMYTRI KLEINER video",
|
||||
"MASTODON video",
|
||||
"LAINBLOG article",
|
||||
"RADICAL NETWORKS Scuttlebutt video",
|
||||
"MANUEL CASTELLS PRESS book",
|
||||
"HOMEBREWSERVER article"
|
||||
];
|
||||
|
||||
const clickedCircles = [];
|
||||
const links = [];
|
||||
const positions = [];
|
||||
|
||||
|
||||
class Question {
|
||||
constructor(text) {
|
||||
|
||||
|
||||
|
||||
// Create property "text".
|
||||
this.text = text;
|
||||
|
||||
const position = pickARandomCirclePosition();
|
||||
/*const position = positionsFromJson[positionFromJsonIndex++];*/
|
||||
positions.push(position);
|
||||
|
||||
const htmlCircle = this.createCircle(position);
|
||||
const htmlText = this.createText(position, text);
|
||||
|
||||
|
||||
const onMouseenterShowText = () => { htmlText.style.display = 'block'; };
|
||||
const onMouseleaveHideText = () => { htmlText.style.display = 'none'; };
|
||||
|
||||
|
||||
htmlCircle.addEventListener('mouseleave', onMouseleaveHideText);
|
||||
|
||||
htmlCircle.addEventListener('mouseenter', onMouseenterShowText);
|
||||
|
||||
htmlCircle.addEventListener('mouseenter', () => {
|
||||
htmlCircle.style.fill = 'red';
|
||||
});
|
||||
htmlCircle.addEventListener('mouseleave', () => {
|
||||
htmlCircle.style.fill = 'black';
|
||||
});
|
||||
|
||||
/*htmlCircle.addEventListener('click', () => {
|
||||
htmlText.style.display = 'block';
|
||||
htmlCircle.removeEventListener('mouseenter', onMouseenterShowText);
|
||||
htmlCircle.removeEventListener('mouseleave', onMouseleaveHideText);
|
||||
});*/
|
||||
|
||||
htmlCircle.addEventListener('click', () => {
|
||||
//if(!clickedCircles.includes(htmlCircle)) {
|
||||
clickedCircles.push(htmlCircle);
|
||||
//}
|
||||
this.linkClickedWithPreviouslyClicked();
|
||||
//this.linkClickedWithAllPreviouslyClicked();
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
createCircle(position) {
|
||||
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
||||
circle.style.fill = 'black';
|
||||
circle.setAttribute('cx', position.x);
|
||||
circle.setAttribute('cy', position.y);
|
||||
circle.setAttribute('r', circleRadius);
|
||||
svg.appendChild(circle);
|
||||
return circle;
|
||||
}
|
||||
|
||||
createText(position, textContent) {
|
||||
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||
text.setAttribute('x', position.x + 2*circleRadius);
|
||||
text.setAttribute('y', position.y + circleRadius/2);
|
||||
text.textContent = textContent;
|
||||
text.style.display = 'none';
|
||||
text.style.fontStyle = "italic";
|
||||
text.style.fontStyle = "italic";
|
||||
text.style.fontFamily = "Courier";
|
||||
text.style.fontWeight = "bold";
|
||||
text.style.fontSize = "large";
|
||||
svg.appendChild(text);
|
||||
return text;
|
||||
}
|
||||
|
||||
createLine(position1, position2) {
|
||||
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
||||
line.setAttribute('x1', position1.x);
|
||||
line.setAttribute('y1', position1.y);
|
||||
line.setAttribute('x2', position2.x);
|
||||
line.setAttribute('y2', position2.y);
|
||||
line.setAttribute('stroke', 'black');
|
||||
svg.appendChild(line);
|
||||
return line;
|
||||
}
|
||||
|
||||
linkClickedWithPreviouslyClicked() {
|
||||
const length = clickedCircles.length;
|
||||
if(length < 2) { return; }
|
||||
|
||||
const circle1Pos = this.getCircleCenterPosition(clickedCircles[length - 1]);
|
||||
const circle2Pos = this.getCircleCenterPosition(clickedCircles[length - 2]);
|
||||
|
||||
if(this.linkAlreadyExists(circle1Pos, circle2Pos)) { return; }
|
||||
|
||||
const htmlLine = this.createLine(circle1Pos, circle2Pos);
|
||||
links.push(this.getLinkAsString(circle1Pos, circle2Pos));
|
||||
}
|
||||
|
||||
|
||||
|
||||
getCircleCenterPosition(htmlCircle) {
|
||||
return {
|
||||
x: htmlCircle.cx.baseVal.value,
|
||||
y: htmlCircle.cy.baseVal.value,
|
||||
};
|
||||
}
|
||||
|
||||
getLinkAsString(circle1Pos, circle2Pos) {
|
||||
const pos1AsString = circle1Pos.x + "," + circle1Pos.y;
|
||||
const pos2AsString = circle2Pos.x + "," + circle2Pos.y;
|
||||
|
||||
const linkAsString = pos1AsString + "-" + pos2AsString;
|
||||
|
||||
return linkAsString;
|
||||
}
|
||||
|
||||
linkAlreadyExists(circle1Pos, circle2Pos) {
|
||||
return links.includes(this.getLinkAsString(circle1Pos, circle2Pos));
|
||||
}
|
||||
}
|
||||
|
||||
async function network() {
|
||||
for(let i = 0; i < messages.length; i++) {
|
||||
const message = messages[i];
|
||||
new Question(message);
|
||||
|
||||
//"await" works only inside async functions
|
||||
const delayBetweenQuestionCreations = 50;
|
||||
await sleep(delayBetweenQuestionCreations);
|
||||
}
|
||||
|
||||
console.log(JSON.stringify(positions));
|
||||
|
||||
}
|
||||
network();
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</html>
|
@ -0,0 +1,191 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Questions on Social Networks</title>
|
||||
<style>
|
||||
|
||||
@font-face {
|
||||
font-family: georgia;
|
||||
src: url("fonts/Georgia Regular font.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: bree-serif;
|
||||
src: url("fonts/BreeSerif-Regular.otf");
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#container {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
#left,
|
||||
#right {
|
||||
width: 50%;
|
||||
max-width: 450px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
padding: 20px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
#left {
|
||||
color: black;
|
||||
background-color: rgb(207, 210, 227);
|
||||
}
|
||||
#right {
|
||||
color: black;
|
||||
/*background-color: rgb(170,170,170, .6);*/
|
||||
background-color: rgb(207, 210, 227, .5);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
|
||||
p {
|
||||
font-size: 19px;
|
||||
font-family: georgia;
|
||||
line-height: 26.1px;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p > span {
|
||||
display: inline;
|
||||
background-color: rgb(250, 246, 177);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
p > span:hover {/*
|
||||
color: #df5b57;*/
|
||||
}
|
||||
|
||||
.comment {
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
transition: all 1s linear;
|
||||
width: calc(100% - 40px);
|
||||
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
margin-left: auto;
|
||||
margin-right: 15px;
|
||||
letter-spacing: 0px;
|
||||
text-transform: none;
|
||||
font-family: bree-serif;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- <audio controls autoplay style="display:none">
|
||||
<source src="TurnPage.wav" type="audio/wav">
|
||||
</audio> -->
|
||||
<div id="container" class="wrapper">
|
||||
<div id="left">
|
||||
<h1 style="color:black;font-size:40px;font-family:georgia">For who and from what is a network liberating?</h1>
|
||||
|
||||
<p style="color:black;font-size:16px;font-family:georgia">In the context of the question:<br> <b><i>What gets liberated or controlled, in different networks?</i></b></p>
|
||||
<p></br>
|
||||
Social networking sites are virtual domains of sociality, where social time is transformed into digital space. A virtual, digital space, where millions of users place fragments of their everyday activities, opinions, feelings and experiences, turning them all voluntarily into <span>information</span> of the form that each medium receives. A photo, a "like," a map of a daily route produced by GPS, a comment in 140 characters.
|
||||
</p>
|
||||
<p>
|
||||
It is a cliché that the <span>Internet is "liberating"</span> and that social networking platforms guarantee equality to their users in terms of expression. It is also argued that new networked media have overcome the <span>emotional and intellectual decline of “traditional media”</span>, e.g. the TV.
|
||||
</p>
|
||||
<p>
|
||||
Of course, our TV is not dumped in the trash yet. Instead, it is still part of home furniture in the corner of the living room, or the bedroom, having established its value over the years. Remains active in the background, warmly mind-distracting, without expecting anything, just showing its program with confidence. If we compare our TV with our computer, in the first case, we are in front of a screen, holding the remote control, while in the second case we are again in front of a screen, but our hands are on the keyboard. The big difference is when we become active Internet users; it feels that <span>we are both receivers and transmitters</span>. Is that so?
|
||||
</p>
|
||||
|
||||
<a href="index.html"><h2 style="color:black; font-size:16px; font-family:georgia; margin-top:50px; margin-left: 20px"><i>Go back to the questions</i></h2></a>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="right">
|
||||
|
||||
<!-- <a href="index.html"><h2 style="color:black; font-size:16px; font-family:georgia; margin-top:50px; margin-left: 20px"><img src="reddoor.png" width="13px" height="18px"><i>What gets liberated or controlled, in different networks?</i></h2></a> -->
|
||||
|
||||
<div class="comment">
|
||||
<a href="chapter3-4.html"><h3 style="color:#ec380b;">Visit the green room to find out how much information does the internet fit.</h3></a>
|
||||
</div>
|
||||
|
||||
<div class="comment">
|
||||
<h3 style="color:black;">Internet liberation is usually about the liberation of commercial parties; the liberation to make a market.</h3>
|
||||
</div>
|
||||
|
||||
<div class="comment">
|
||||
<h3 style="color:black;">I believe that forms of yellow journalism always existed. It is not wise to romanticise the past.</h3>
|
||||
<h3 style="color:black;">Further reading:</h3><div style="line-height:50%;"><br></div>
|
||||
<a href="http://please.undo.undo.it/Writing/pdfs/Smythe.pdf"><h3><i>Communications : Blindspot of western marxism</i><br>Dallas Smythe</h3></a>
|
||||
<a href="http://www.fuchs.uti.at/wp-content/uploads/Fuchs_Maxwell.pdf"><h3><i>Dallas Smythe and Digital Labor</i><br>Christian Fuchs</h3></a>
|
||||
</div>
|
||||
|
||||
<div class="comment">
|
||||
<a href="chapter9.html"><h3 style="color:#ea2709;">Visit the aubergine room to read some thoughts about the role of social media.</h3></a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
var left = document.getElementById('left');
|
||||
var spans = Array.from(left.getElementsByTagName('span'));
|
||||
|
||||
var right = document.getElementById('right');
|
||||
var comments = Array.from(right.children);
|
||||
|
||||
function setCommentPosition() {
|
||||
comments.forEach((comment, index) => {
|
||||
var offsetTop = spans[index].offsetTop;
|
||||
comment.style.top = offsetTop + 'px';
|
||||
});
|
||||
}
|
||||
|
||||
setCommentPosition();
|
||||
setTimeout(setCommentPosition, 800);
|
||||
|
||||
function debounce(func){
|
||||
var timer;
|
||||
return function(event) {
|
||||
if(timer) clearTimeout(timer);
|
||||
timer = setTimeout(func, 100, event);
|
||||
};
|
||||
}
|
||||
window.addEventListener("resize", debounce(function(e) {
|
||||
setCommentPosition();
|
||||
}));
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<html>
|
||||
|
||||
|
||||
|
@ -0,0 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Questions on Social Networks</title>
|
||||
<style>
|
||||
|
||||
@font-face {
|
||||
font-family: georgia;
|
||||
src: url("fonts/Georgia Regular font.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: bree-serif;
|
||||
src: url("fonts/BreeSerif-Regular.otf");
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
min-height: 100%;
|
||||
}
|
||||
#left,
|
||||
#right {
|
||||
width: 50%;
|
||||
max-width: 450px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#left {
|
||||
color: black;
|
||||
background-color: rgb(155, 194, 207, .5);
|
||||
}
|
||||
#right {
|
||||
color: black;
|
||||
/*background-color: rgb(170,170,170, .6);*/
|
||||
background-color: rgb(155, 194, 207, .2);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 19px;
|
||||
font-family: georgia;
|
||||
line-height: 26.1px;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p > span {
|
||||
display: inline;
|
||||
background-color: rgb(250, 246, 177);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
p > span:hover {/*
|
||||
color: #df5b57;*/
|
||||
}
|
||||
|
||||
.comment {
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
transition: all 1s linear;
|
||||
width: calc(100% - 40px);
|
||||
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
margin-left: auto;
|
||||
margin-right: 15px;
|
||||
letter-spacing: 0px;
|
||||
text-transform: none;
|
||||
font-family: bree-serif;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="left">
|
||||
<h1 style="color:black;font-size:40px;font-family:georgia">An awkward analogy</h1>
|
||||
<p style="color:black;font-size:16px;font-family:georgia">In the context of the question:<br> <b><i>How does the message differ, depending on the medium?</i></b></p>
|
||||
<p></br>
|
||||
Imagine a platform placed at <span>Stationsplein</span> in front of Rotterdam Centraal station. There is a loudspeaker, which I can grab whenever I want, and shout my personal views, opinions, and everything else that comes to my mind. If that happens, it might draw the attention of a small audience which would gather from time to time, gossiping, clapping or jeering. Such a situation would seem like a spectacle for consumption in the style of reality TV talent shows. It is certain though that this <span>could not be a central part of my daily activity.</span>
|
||||
</p>
|
||||
<p>
|
||||
On social media platforms, this is often the case, except that the views, preferences and personal experiences are stored as data to be processed, presented on electronic “walls” and not on real-world platforms. The Internet creates a sense of private communication since it happens with the help of individual devices in private or public spaces. <span>The information displayed may not be needed or would better not be published.</span>
|
||||
</p>
|
||||
|
||||
<a href="index.html"><h2 style="color:black; font-size:16px; font-family:georgia; margin-top:50px; margin-left: 20px"><i>Go back to the questions</i></h2></a>
|
||||
|
||||
</div>
|
||||
<div id="right">
|
||||
<div class="comment">
|
||||
<img src="images/stationsplein.jpg" alt="Stationsplein" style="width:100%;">
|
||||
</div>
|
||||
|
||||
<div class="comment">
|
||||
<a href="chapter3.html"><h3 style="color:#ea2709;">Visit the turquoise room to find out some of my daily activities.</h3></a>
|
||||
</div>
|
||||
|
||||
<div class="comment">
|
||||
<span class="circle"></span>
|
||||
<h3 style="color:black;">Why are digital social media platforms different than real-world platforms? Is the same message interpreted differently according to the context where we hear it?</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var left = document.getElementById('left');
|
||||
var spans = Array.from(left.getElementsByTagName('span'));
|
||||
|
||||
var right = document.getElementById('right');
|
||||
var comments = Array.from(right.children);
|
||||
|
||||
function setCommentPosition() {
|
||||
comments.forEach((comment, index) => {
|
||||
var offsetTop = spans[index].offsetTop;
|
||||
comment.style.top = offsetTop + 'px';
|
||||
});
|
||||
}
|
||||
|
||||
setCommentPosition();
|
||||
setTimeout(setCommentPosition, 800);
|
||||
|
||||
function debounce(func){
|
||||
var timer;
|
||||
return function(event) {
|
||||
if(timer) clearTimeout(timer);
|
||||
timer = setTimeout(func, 100, event);
|
||||
};
|
||||
}
|
||||
window.addEventListener("resize", debounce(function(e) {
|
||||
setCommentPosition();
|
||||
}));
|
||||
</script>
|
||||
</body>
|
||||
<html>
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,273 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Questions on Networks</title>
|
||||
<link rel="stylesheet" href="style5.css">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: black;
|
||||
padding-left: 30px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
a:link, a:visited {
|
||||
background-color: #000000;
|
||||
color: white;
|
||||
padding: 14px 25px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
div {
|
||||
height: 20%;
|
||||
text-align: center;
|
||||
font-size: 36px;
|
||||
padding: 20px;
|
||||
}
|
||||
svg {
|
||||
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 6%;
|
||||
color: white;
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<header><br>
|
||||
<h1>Questions on Networks</h1>
|
||||
<p><span class="blink">Centralized vs Federated</blink></a></p>
|
||||
</header>
|
||||
<body>
|
||||
<br><br>
|
||||
<svg id="canvas" align="center"></svg>
|
||||
|
||||
</body>
|
||||
|
||||
<div class="wrapper">
|
||||
|
||||
|
||||
<div class="push"></div>
|
||||
</div>
|
||||
<footer class="footer"><a href="privacy.html">PRIVACY</a><a href="privacy.html">FOCUS-GOAL</a><a href="privacy.html">ENERGY CONSUMPTION</a><a href="privacy.html">RESILIENCE IN DISASTER</a><a href="privacy.html">KNOWLEDGE OF TOOLS</a></footer>
|
||||
|
||||
|
||||
<script>
|
||||
//find the element with id =message(in dom), return via function: document.getelementbyid, store it in var
|
||||
var svg = document.getElementById('canvas');
|
||||
var padding = 15;
|
||||
var circleRadius = 15;
|
||||
|
||||
/**
|
||||
* Returns a random number between min (inclusive) and max (exclusive)
|
||||
* from: https://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range
|
||||
*/
|
||||
function getRandomArbitrary(min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + min);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns randomly either "true" or "false" with 50% chance for each one.
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function getRandomBoolean() {
|
||||
return getRandomArbitrary(0, 2) === 1;
|
||||
}
|
||||
|
||||
//when we execute sleep (...ms), program waits for (...ms)
|
||||
function sleep(time) {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
resolve();
|
||||
}, time);
|
||||
});
|
||||
}
|
||||
//The parseInt() function parses a string argument and returns an integer of the specified size of svg in pixels
|
||||
function pickARandomCirclePosition() {
|
||||
var w = parseInt(window.getComputedStyle(svg).width);
|
||||
var h = parseInt(window.getComputedStyle(svg).height);
|
||||
var x = getRandomArbitrary(padding + circleRadius, w - circleRadius - padding);
|
||||
var y = getRandomArbitrary(padding + circleRadius, h - circleRadius - padding);
|
||||
//return an object which has 2 properties, named x,y and value the value of var x,y
|
||||
return { x: x, y: y };
|
||||
}
|
||||
|
||||
//======================================================================//
|
||||
// new code 2019.03.02:
|
||||
|
||||
const messages = [
|
||||
"PRIVACY?",
|
||||
"RESILIENCE IN DISASTER?",
|
||||
"ENERGY CONSUMPTION CONTROL?",
|
||||
"FOCUS ON USE OR PROFIT?",
|
||||
"KNOWLEDGE OF THE TOOLS USED?",
|
||||
];
|
||||
|
||||
const clickedCircles = [];
|
||||
const links = [];
|
||||
const positions = [];
|
||||
|
||||
|
||||
class Question {
|
||||
constructor(text) {
|
||||
|
||||
|
||||
|
||||
// Create property "text".
|
||||
this.text = text;
|
||||
|
||||
const position = pickARandomCirclePosition();
|
||||
/*const position = positionsFromJson[positionFromJsonIndex++];*/
|
||||
positions.push(position);
|
||||
|
||||
const htmlCircle = this.createCircle(position);
|
||||
const htmlText = this.createText(position, text);
|
||||
|
||||
|
||||
const onMouseenterShowText = () => { htmlText.style.display = 'block'; };
|
||||
const onMouseleaveHideText = () => { htmlText.style.display = 'none'; };
|
||||
|
||||
|
||||
htmlCircle.addEventListener('mouseleave', onMouseleaveHideText);
|
||||
|
||||
htmlCircle.addEventListener('mouseenter', onMouseenterShowText);
|
||||
|
||||
htmlCircle.addEventListener('mouseenter', () => {
|
||||
htmlCircle.style.fill = 'red';
|
||||
});
|
||||
htmlCircle.addEventListener('mouseleave', () => {
|
||||
htmlCircle.style.fill = 'black';
|
||||
});
|
||||
|
||||
/*htmlCircle.addEventListener('click', () => {
|
||||
htmlText.style.display = 'block';
|
||||
htmlCircle.removeEventListener('mouseenter', onMouseenterShowText);
|
||||
htmlCircle.removeEventListener('mouseleave', onMouseleaveHideText);
|
||||
});*/
|
||||
|
||||
htmlCircle.addEventListener('click', () => {
|
||||
//if(!clickedCircles.includes(htmlCircle)) {
|
||||
clickedCircles.push(htmlCircle);
|
||||
//}
|
||||
this.linkClickedWithPreviouslyClicked();
|
||||
//this.linkClickedWithAllPreviouslyClicked();
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
createCircle(position) {
|
||||
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
||||
circle.style.fill = 'black';
|
||||
circle.setAttribute('cx', position.x);
|
||||
circle.setAttribute('cy', position.y);
|
||||
circle.setAttribute('r', circleRadius);
|
||||
svg.appendChild(circle);
|
||||
return circle;
|
||||
}
|
||||
|
||||
createText(position, textContent) {
|
||||
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||
text.setAttribute('x', position.x + 2*circleRadius);
|
||||
text.setAttribute('y', position.y + circleRadius/2);
|
||||
text.textContent = textContent;
|
||||
text.style.display = 'none';
|
||||
text.style.fontStyle = "italic";
|
||||
text.style.fontStyle = "italic";
|
||||
text.style.fontFamily = "Courier";
|
||||
text.style.fontWeight = "bold";
|
||||
text.style.fontSize = "large";
|
||||
svg.appendChild(text);
|
||||
return text;
|
||||
}
|
||||
|
||||
createLine(position1, position2) {
|
||||
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
||||
line.setAttribute('x1', position1.x);
|
||||
line.setAttribute('y1', position1.y);
|
||||
line.setAttribute('x2', position2.x);
|
||||
line.setAttribute('y2', position2.y);
|
||||
line.setAttribute('stroke', 'black');
|
||||
svg.appendChild(line);
|
||||
return line;
|
||||
}
|
||||
|
||||
linkClickedWithPreviouslyClicked() {
|
||||
const length = clickedCircles.length;
|
||||
if(length < 2) { return; }
|
||||
|
||||
const circle1Pos = this.getCircleCenterPosition(clickedCircles[length - 1]);
|
||||
const circle2Pos = this.getCircleCenterPosition(clickedCircles[length - 2]);
|
||||
|
||||
if(this.linkAlreadyExists(circle1Pos, circle2Pos)) { return; }
|
||||
|
||||
const htmlLine = this.createLine(circle1Pos, circle2Pos);
|
||||
links.push(this.getLinkAsString(circle1Pos, circle2Pos));
|
||||
}
|
||||
|
||||
|
||||
|
||||
getCircleCenterPosition(htmlCircle) {
|
||||
return {
|
||||
x: htmlCircle.cx.baseVal.value,
|
||||
y: htmlCircle.cy.baseVal.value,
|
||||
};
|
||||
}
|
||||
|
||||
getLinkAsString(circle1Pos, circle2Pos) {
|
||||
const pos1AsString = circle1Pos.x + "," + circle1Pos.y;
|
||||
const pos2AsString = circle2Pos.x + "," + circle2Pos.y;
|
||||
|
||||
const linkAsString = pos1AsString + "-" + pos2AsString;
|
||||
|
||||
return linkAsString;
|
||||
}
|
||||
|
||||
linkAlreadyExists(circle1Pos, circle2Pos) {
|
||||
return links.includes(this.getLinkAsString(circle1Pos, circle2Pos));
|
||||
}
|
||||
}
|
||||
|
||||
async function network() {
|
||||
for(let i = 0; i < messages.length; i++) {
|
||||
const message = messages[i];
|
||||
new Question(message);
|
||||
|
||||
//"await" works only inside async functions
|
||||
const delayBetweenQuestionCreations = 50;
|
||||
await sleep(delayBetweenQuestionCreations);
|
||||
}
|
||||
|
||||
console.log(JSON.stringify(positions));
|
||||
|
||||
}
|
||||
network();
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</html>
|
@ -0,0 +1,32 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>PRIVACY ISSUE</title>
|
||||
|
||||
<style>
|
||||
div {
|
||||
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<br><br>
|
||||
<iframe id="frame1" width="400" height="230" src="https://www.youtube.com/embed/O-x4jQ2UNOw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<iframe id="frame2" src="https://www.bbc.com/news/technology-43465968" height="230" width="400" style="border:none;"></iframe>
|
||||
<iframe id="frame3" name="ifr" src="http://networkcultures.org/unlikeus/2013/03/21/monetizing-privacy-how-much-does-facebook-owe-you/" height="230" width="400" style="border:none;"> </iframe><br>
|
||||
<iframe id="frame4" width="400" height="230" src="https://www.youtube.com/embed/NW5RLBqQmFA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<iframe id="frame5" width="400" height="230" src="https://www.youtube.com/embed/IPSbNdBmWKE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<iframe id="frame6" src="https://blog.soykaf.com/tags/privacy/" height="230" width="400" style="border:none;"> </iframe><br>
|
||||
<iframe id="frame7" width="400" height="230" src="https://www.youtube.com/embed/5R0x_WRZdFM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<iframe id="frame8" src="https://global.oup.com/academic/product/communication-power-9780199681938?cc=nl&lang=en&" height="230" width="400" style="border:none;"> </iframe>
|
||||
<iframe id="frame9" src="https://homebrewserver.club/configuring-a-modern-xmpp-server.html" height="230" width="400" style="border:none;"> </iframe>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
After Width: | Height: | Size: 129 KiB |
After Width: | Height: | Size: 287 KiB |
After Width: | Height: | Size: 362 KiB |
After Width: | Height: | Size: 135 KiB |
After Width: | Height: | Size: 289 KiB |
After Width: | Height: | Size: 99 KiB |
After Width: | Height: | Size: 101 KiB |
After Width: | Height: | Size: 28 KiB |
@ -0,0 +1,159 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Social Networks</title>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: bree-serif;
|
||||
src: url("bree-serif/BreeSerif-Regular.otf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: georgia;
|
||||
src: url("georgiai.ttf");
|
||||
}
|
||||
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html, body {
|
||||
font-family: bree-serif;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
font-size: 57px;
|
||||
text-align: right;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: 0px;
|
||||
text-transform: none;
|
||||
line-height: 1.3em;
|
||||
font-family: bree-serif;
|
||||
margin-right: 50px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: 0px;
|
||||
text-transform: none;
|
||||
line-height: 1.3em;
|
||||
font-family: georgia;
|
||||
margin-right: 50px;
|
||||
margin-left: 75%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #df5b57;
|
||||
}
|
||||
|
||||
#container {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.circle {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background-color: #df5b57;
|
||||
}
|
||||
.text {
|
||||
padding-left: 10px;
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Questions on</br> <span class="underline">Social Networks</span></h1>
|
||||
|
||||
<div id="container">
|
||||
|
||||
</div>
|
||||
<script>
|
||||
|
||||
function shuffle(a) {
|
||||
for(let i = a.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[a[i], a[j]] = [a[j], a[i]];
|
||||
}
|
||||
return a;
|
||||
}
|
||||
|
||||
const messages = shuffle([
|
||||
"Can decentralised web have an impact beyond geeks & social web enthusiasts?",
|
||||
"Why do we need decentralised networks?",
|
||||
"How do we perceive federated publishing?",
|
||||
"Collectivity vs individuality: does decentralisation helps?",
|
||||
"Who moves to a decentralised network and why?",
|
||||
"What content does a federated network host?",
|
||||
"Is the medium the message?",
|
||||
"Does the medium transform the message?",
|
||||
"Does the same story have a different value, according to where is heard?",
|
||||
"How important is to choose, or create our media of communication?",
|
||||
"Is decentralisation a panacea, or a pharmakon?",
|
||||
"Is decentralisation enough?",
|
||||
"What are the dangers of centralised networks?",
|
||||
"Whose voice is amplified or curbed in a centralised network?",
|
||||
"Do we need digital social networking platforms?",
|
||||
"Do we need virtual public spheres that are difficult to shut down?",
|
||||
"Is a federated network oriented towards answering a common goal?",
|
||||
"How is the common goal of the network shaped?",
|
||||
"Is being part of the network as important as being a custodian of it?",
|
||||
"Who maintains a federated network?",
|
||||
"What is the lifespan of a federated network?",
|
||||
"How can a federated network be sustained with economic means?"
|
||||
]);
|
||||
|
||||
function getRandomArbitrary(min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + min);
|
||||
}
|
||||
|
||||
const container = document.getElementById('container');
|
||||
const containerWidth = parseInt(getComputedStyle(container).width) - 40;
|
||||
|
||||
messages.forEach(message => {
|
||||
const row = document.createElement('div');
|
||||
row.classList.add('row');
|
||||
row.style.marginBottom = getRandomArbitrary(10,10) + 'px';
|
||||
|
||||
const circle = document.createElement('div');
|
||||
circle.classList.add('circle');
|
||||
|
||||
const text = document.createElement('div');
|
||||
text.classList.add('text');
|
||||
text.textContent = message;
|
||||
|
||||
row.appendChild(circle);
|
||||
row.appendChild(text);
|
||||
container.appendChild(row);
|
||||
|
||||
const circleWidth = parseInt(getComputedStyle(circle).width);
|
||||
const textWidth = parseInt(getComputedStyle(text).width);
|
||||
|
||||
const dw = containerWidth - circleWidth - textWidth;
|
||||
row.style.marginLeft = getRandomArbitrary(0,dw) + 'px';
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
<html>
|
@ -0,0 +1,197 @@
|
||||
|
||||
//find the element with id =message(in dom), return via function: document.getelementbyid, store it in var
|
||||
var svg = document.getElementById('canvas');
|
||||
var padding = 8;
|
||||
var circleRadius = 8;
|
||||
|
||||
/**
|
||||
* Returns a random number between min (inclusive) and max (exclusive)
|
||||
* from: https://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range
|
||||
*/
|
||||
function getRandomArbitrary(min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + min);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns randomly either "true" or "false" with 50% chance for each one.
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function getRandomBoolean() {
|
||||
return getRandomArbitrary(0, 2) === 1;
|
||||
}
|
||||
|
||||
//when we execute sleep (...ms), program waits for (...ms)
|
||||
function sleep(time) {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
resolve();
|
||||
}, time);
|
||||
});
|
||||
}
|
||||
//The parseInt() function parses a string argument and returns an integer of the specified size of svg in pixels
|
||||
function pickARandomCirclePosition() {
|
||||
var w = parseInt(window.getComputedStyle(svg).width);
|
||||
var h = parseInt(window.getComputedStyle(svg).height);
|
||||
var x = getRandomArbitrary(padding + circleRadius, w - circleRadius - padding);
|
||||
var y = getRandomArbitrary(padding + circleRadius, h - circleRadius - padding);
|
||||
//return an object which has 2 properties, named x,y and value the value of var x,y
|
||||
return { x: x, y: y };
|
||||
}
|
||||
|
||||
//======================================================================//
|
||||
// new code 2019.03.02:
|
||||
|
||||
const messages = [
|
||||
"HOW CAN DECENTRALIZED WEB HAVE AN IMPACT BEYOND GEEKS AND SOCIAL WEB ENTHUSIASTS?",
|
||||
"WHY DO WE NEED A DECENTRALIZED NETWORK?",
|
||||
"HOW DO WE PERCEIVE FEDERATED PUBLISHING?",
|
||||
"WHAT IS THE CONTENT WE WANT TO PRODUCE?",
|
||||
"COLLECTIVITY VS INDIVIDUALITY: DOES DECENTRALIZATION HELPS?",
|
||||
"WHO MAKES A FEDERATED NETWORK? FOR WHO? WHY? HOW?",
|
||||
"WHAT CONTENT DOES A FEDERATED NETWORK HOST?",
|
||||
"IS THE MEDIUM THE MESSAGE?",
|
||||
"DOES THE MEDIUM TRANSFORM THE MESSAGE?",
|
||||
"DOES THE SAME STORY HAVE DIFFERENT VALUE, ACCORDING TO WHERE IS IT HEARD?",
|
||||
"HOW IMPORTANT IS TO CHOOSE, OR CREATE OUR MEDIA OF COMMUNICATION?",
|
||||
"IS DECENTRALIZATION A PANACEA, OR A PHARMAKON?",
|
||||
"IS DECENTRALIZATION ENOUGH?",
|
||||
"WHAT ARE THE DANGERS OF CENTRALIZED NETWORKS?",
|
||||
"WHOSE VOICE IS AMPLIFIED AND WHOSE VOICE IS CURBED IN A CENTRALIZED NETWORK?",
|
||||
"DO WE NEED DIGITAL SOCIAL NETWORKING PLATFORMS?",
|
||||
"DO WE NEED VIRTUAL PUBLIC SPHERES THAT ARE DIFFICULT TO SHUT DOWN?",
|
||||
"IS THE FEDERATED NETWORK ORIENTED TOWARDS ANSWERING A COMMON GOAL?",
|
||||
"HOW IS THE COMMON GOAL OF THE NETWORK SHAPED?",
|
||||
"IS BEING PART OF THE NETWORK AS IMPORTANT AS BEING A CUSTODIAN OF IT?",
|
||||
"WHO MAINTAINS A FEDERATED NETWORK?",
|
||||
"WHAT IS THE LIFESPAN OF A FEDERATED NETWORK?",
|
||||
"HOW CAN A FEDERATED NETWORK BE SUSTAINED WITH ECONOMIC AND ECOLOGICAL MEANS?",
|
||||
];
|
||||
|
||||
const clickedCircles = [];
|
||||
const links = [];
|
||||
const positions = [];
|
||||
|
||||
const positionsFromJson = JSON.parse('[{"x":420,"y":388},{"x":408,"y":269},{"x":356,"y":673},{"x":246,"y":499},{"x":1009,"y":476},{"x":468,"y":399},{"x":714,"y":189},{"x":1336,"y":427},{"x":1307,"y":595},{"x":1496,"y":95},{"x":876,"y":657},{"x":929,"y":373},{"x":356,"y":599},{"x":1375,"y":726},{"x":1293,"y":465},{"x":1512,"y":325},{"x":972,"y":387},{"x":1115,"y":720},{"x":547,"y":85},{"x":663,"y":431},{"x":1583,"y":272},{"x":1019,"y":416},{"x":1500,"y":592}]');
|
||||
let positionFromJsonIndex = 0;
|
||||
|
||||
class Question {
|
||||
constructor(text) {
|
||||
// Create property "text".
|
||||
this.text = text;
|
||||
|
||||
//const position = pickARandomCirclePosition();
|
||||
const position = positionsFromJson[positionFromJsonIndex++];
|
||||
positions.push(position);
|
||||
|
||||
const htmlCircle = this.createCircle(position);
|
||||
const htmlText = this.createText(position, text);
|
||||
|
||||
htmlCircle.addEventListener('mouseenter', () => {
|
||||
htmlText.style.display = 'block';
|
||||
});
|
||||
htmlCircle.addEventListener('mouseleave', () => {
|
||||
htmlText.style.display = 'none';
|
||||
});
|
||||
|
||||
|
||||
htmlCircle.addEventListener('mouseenter', () => {
|
||||
htmlCircle.style.fill = 'red';
|
||||
});
|
||||
htmlCircle.addEventListener('mouseleave', () => {
|
||||
htmlCircle.style.fill = 'black';
|
||||
});
|
||||
|
||||
|
||||
htmlCircle.addEventListener('click', () => {
|
||||
//if(!clickedCircles.includes(htmlCircle)) {
|
||||
clickedCircles.push(htmlCircle);
|
||||
//}
|
||||
this.linkClickedWithPreviouslyClicked();
|
||||
//this.linkClickedWithAllPreviouslyClicked();
|
||||
});
|
||||
}
|
||||
|
||||
createCircle(position) {
|
||||
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
||||
circle.style.fill = 'black';
|
||||
circle.setAttribute('cx', position.x);
|
||||
circle.setAttribute('cy', position.y);
|
||||
circle.setAttribute('r', circleRadius);
|
||||
svg.appendChild(circle);
|
||||
return circle;
|
||||
}
|
||||
|
||||
createText(position, textContent) {
|
||||
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||
text.setAttribute('x', position.x + 2*circleRadius);
|
||||
text.setAttribute('y', position.y + circleRadius/2);
|
||||
text.textContent = textContent;
|
||||
text.style.display = 'none';
|
||||
text.style.fontStyle = "italic";
|
||||
text.style.fontStyle = "italic";
|
||||
text.style.fontFamily = "Courier";
|
||||
text.style.fontWeight = "bold";
|
||||
text.style.fontSize = "large";
|
||||
svg.appendChild(text);
|
||||
return text;
|
||||
}
|
||||
|
||||
createLine(position1, position2) {
|
||||
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
||||
line.setAttribute('x1', position1.x);
|
||||
line.setAttribute('y1', position1.y);
|
||||
line.setAttribute('x2', position2.x);
|
||||
line.setAttribute('y2', position2.y);
|
||||
line.setAttribute('stroke', 'black');
|
||||
svg.appendChild(line);
|
||||
return line;
|
||||
}
|
||||
|
||||
linkClickedWithPreviouslyClicked() {
|
||||
const length = clickedCircles.length;
|
||||
if(length < 2) { return; }
|
||||
|
||||
const circle1Pos = this.getCircleCenterPosition(clickedCircles[length - 1]);
|
||||
const circle2Pos = this.getCircleCenterPosition(clickedCircles[length - 2]);
|
||||
|
||||
if(this.linkAlreadyExists(circle1Pos, circle2Pos)) { return; }
|
||||
|
||||
const htmlLine = this.createLine(circle1Pos, circle2Pos);
|
||||
links.push(this.getLinkAsString(circle1Pos, circle2Pos));
|
||||
}
|
||||
|
||||
|
||||
getCircleCenterPosition(htmlCircle) {
|
||||
return {
|
||||
x: htmlCircle.cx.baseVal.value,
|
||||
y: htmlCircle.cy.baseVal.value,
|
||||
};
|
||||
}
|
||||
|
||||
getLinkAsString(circle1Pos, circle2Pos) {
|
||||
const pos1AsString = circle1Pos.x + "," + circle1Pos.y;
|
||||
const pos2AsString = circle2Pos.x + "," + circle2Pos.y;
|
||||
|
||||
const linkAsString = pos1AsString + "-" + pos2AsString;
|
||||
|
||||
return linkAsString;
|
||||
}
|
||||
|
||||
linkAlreadyExists(circle1Pos, circle2Pos) {
|
||||
return links.includes(this.getLinkAsString(circle1Pos, circle2Pos));
|
||||
}
|
||||
}
|
||||
|
||||
async function network() {
|
||||
for(let i = 0; i < messages.length; i++) {
|
||||
const message = messages[i];
|
||||
new Question(message);
|
||||
|
||||
//"await" works only inside async functions
|
||||
const delayBetweenQuestionCreations = 50;
|
||||
await sleep(delayBetweenQuestionCreations);
|
||||
}
|
||||
|
||||
console.log(JSON.stringify(positions));
|
||||
}
|
||||
network();
|
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Question Nodes</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
div {
|
||||
height: 20%;
|
||||
text-align: center;
|
||||
font-size: 36px;
|
||||
padding: 20px;
|
||||
}
|
||||
svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg id="canvas"></svg>
|
||||
</body>
|
||||
<script type="text/javascript" src="nodesscript.js">
|
||||
</script>
|
||||
|
||||
</html>
|
@ -0,0 +1,27 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Questions on Networks</title>
|
||||
<link rel="stylesheet" href="styleq.css">
|
||||
<script src="questions.js"></script>
|
||||
</head>
|
||||
<header><br>
|
||||
<h1>Questions on Networks</h1>
|
||||
<p><span class="blink">Centralized - Decentralized </br> Federated</blink></a></p>
|
||||
</header>
|
||||
<main>
|
||||
<br><br><br><br><br><br>
|
||||
<div class="box"><h2 id="oneliner-1">QUESTIONS</h2></div>
|
||||
|
||||
<br>
|
||||
<!--<p>Contributors: </p>-->
|
||||
|
||||
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
@ -0,0 +1,56 @@
|
||||
(function () {
|
||||
|
||||
Messages = [
|
||||
"HOW CAN DECENTRALIZED WEB HAVE AN IMPACT BEYOND GEEKS, SOCIAL WEB ENTHUSIASTS & HACKERS?",
|
||||
"WHY DO WE NEED A DECENTRALIZED NETWORK?",
|
||||
"HOW DO WE PERCEIVE FEDERATED PUBLISHING?",
|
||||
"WHAT IS THE CONTENT WE WANT TO PRODUCE?",
|
||||
"COLLECTIVITY VS INDIVIDUALITY: DOES DECENTRALIZATION HELPS?",
|
||||
"WHO MAKES A FEDERATED NETWORK? FOR WHO? WHY? HOW?",
|
||||
"WHAT CONTENT DOES A FEDERATED NETWORK HOST?",
|
||||
"IS THE MEDIUM THE MESSAGE?",
|
||||
"DOES THE MEDIUM TRANSFORM THE MESSAGE?",
|
||||
"DOES THE SAME STORY HAVE DIFFERENT VALUE, ACCORDING TO WHERE IS IT HEARD?",
|
||||
"HOW IMPORTANT IS TO CHOOSE, OR CREATE OUR MEDIA OF COMMUNICATION?",
|
||||
"IS DECENTRALIZATION A PANACEA, OR A “PHARMAKON”?",
|
||||
"IS DECENTRALIZATION ENOUGH?",
|
||||
"WHAT ARE THE DANGERS OF CENTRALIZED NETWORKS?",
|
||||
"WHOSE VOICE IS AMPLIFIED AND WHOSE VOICE IS CURBED IN A CENTRALIZED NETWORK?",
|
||||
"DO WE NEED DIGITAL SOCIAL NETWORKING PLATFORMS?",
|
||||
"DO WE NEED VIRTUAL PUBLIC SPHERES THAT ARE DIFFICULT TO SHUT DOWN?",
|
||||
"IS THE FEDERATED NETWORK ORIENTED TOWARDS ANSWERING A COMMON GOAL?",
|
||||
"HOW IS THE COMMON GOAL OF THE NETWORK SHAPED?",
|
||||
"IS BEING PART OF THE NETWORK AS IMPORTANT AS BEING A CUSTODIAN OF IT?",
|
||||
"WHO MAINTAINS A FEDERATED NETWORK?",
|
||||
"WHAT IS THE LIFESPAN OF A FEDERATED NETWORK?",
|
||||
"HOW CAN A FEDERATED NETWORK BE SUSTAINED WITH ECONOMIC, ECOLOGICAL AND TIME-EFFICIENT MEANS?"
|
||||
];
|
||||
|
||||
|
||||
function getRandomInt(min, max) {
|
||||
min = Math.ceil(min);
|
||||
max = Math.floor(max);
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
function sleep(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
async function newMessage(id) {
|
||||
while (true) {
|
||||
ms = getRandomInt(1000, 3000);
|
||||
Message = Messages[Math.floor(Math.random()*Messages.length)];
|
||||
document.getElementById(id).innerHTML = Message;
|
||||
await sleep(ms);
|
||||
}
|
||||
}
|
||||
|
||||
function questions(){
|
||||
newMessage('oneliner-1');
|
||||
|
||||
}
|
||||
|
||||
window.onload = questions;
|
||||
|
||||
})();
|
@ -0,0 +1,154 @@
|
||||
@font-face {
|
||||
font-family: georgia;
|
||||
src: url("fonts/Georgia Regular font.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: bree-serif;
|
||||
src: url("fonts/BreeSerif-Regular.otf");
|
||||
}
|
||||
|
||||
|
||||
* {
|
||||
margin: 0;/*
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
background-color: white;*/
|
||||
}
|
||||
html, body {
|
||||
font-family: bree-serif;
|
||||
font-size: 19px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
font-size: 57px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: 0px;
|
||||
text-transform: none;
|
||||
line-height: 1.3em;
|
||||
font-family: bree-serif;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: 0px;
|
||||
text-transform: none;
|
||||
line-height: 1.3em;
|
||||
font-family: georgia;
|
||||
margin-right: 50px;
|
||||
margin-left: 75%;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
|
||||
/*.underline {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: black;
|
||||
}*/
|
||||
|
||||
#container {/*
|
||||
background-color: white;*/
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.circle {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background-color: #ec380b;
|
||||
}
|
||||
|
||||
.circle1 {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background-color: #007872;
|
||||
}
|
||||
|
||||
.circle2 {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.circle.link {
|
||||
background-color: #ec380b;
|
||||
}
|
||||
.text {
|
||||
padding-left: 10px;
|
||||
|
||||
}
|
||||
|
||||
.green {
|
||||
font-size: 19px;
|
||||
color: #007872;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.orange {
|
||||
font-size: 19px;
|
||||
color: #ec380b;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.grey {
|
||||
font-size: 19px;
|
||||
color: grey;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
.collapsible {
|
||||
background-color: white;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding-bottom: 10px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.active, .collapsible:hover {
|
||||
background-color: white;
|
||||
colour:#ea2709;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-height: 0;
|
||||
max-width: 50%;
|
||||
margin-left: 28%;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.2s ease-out;
|
||||
background-color: white;
|
||||
text-align: left;
|
||||
font-family: georgia;
|
||||
font-size: 18px;
|
||||
color: rgb(40,40,40);
|
||||
}
|
@ -0,0 +1,97 @@
|
||||
@font-face {
|
||||
font-family: Share Tech Mono;
|
||||
src: url("fonts/share-tech-mono.regular.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fira Mono;
|
||||
src: url("fonts/FiraMono-Medium.otf");
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: white;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
background-attachment: fixed;
|
||||
font-size: 16px;
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
font-size: calc(12px + .4vw);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
font-size: 1.5rem;
|
||||
font-family: "Share Tech Mono";
|
||||
color: black;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 12rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 100px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: 0px;
|
||||
text-transform: none;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
font-family: "Share Tech Mono";
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: 0px;
|
||||
text-transform: none;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
line-height: 1.7em;
|
||||
letter-spacing: 0px;
|
||||
font-size: 15px;
|
||||
font-family: "Fira Mono";
|
||||
}
|
||||
|
||||
|
||||
header p, footer p {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
header p.italic, footer p.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
main p {
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.blink {
|
||||
animation: blinker 0s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes blinker {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a, a:active, a:visited {
|
||||
color: #ffffff;
|
||||
}
|
@ -0,0 +1,356 @@
|
||||
@font-face {
|
||||
font-family: fluxisch-else;
|
||||
src: url("osp/ospfont/fonts/FluxischElse-Light.otf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: polsku;
|
||||
src: url("polsku/polsku/fonts/Polsku.ttf");
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
font-size: 50px;
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: 0px;
|
||||
text-transform: none;
|
||||
line-height: 1.3em;
|
||||
font-family: polsku;
|
||||
src: url("polsku/polsku/fonts/Polsku.ttf");
|
||||
margin-left: 30px;
|
||||
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: 0px;
|
||||
text-transform: none;
|
||||
line-height: 1.3em;
|
||||
font-family: fluxisch-else;
|
||||
src: url("osp/ospfont/fonts/FluxischElse-Light.otf");
|
||||
margin-left: 30px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#paragraph1 .circle-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin-:200px;
|
||||
}
|
||||
|
||||
#paragraph1 .circle {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#paragraph1 .hidden {
|
||||
visibility: visible;
|
||||
margin-right:80px;
|
||||
font-family: fluxisch-else-bold;
|
||||
}
|
||||
|
||||
#paragraph1 .paragraph {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
font-size: 18px;
|
||||
font-family: "fluxisch-else";
|
||||
color: black;
|
||||
margin-left: 60px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#paragraph2 .circle-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;/*
|
||||
margin-right:10%;*/
|
||||
margin-top:95px;
|
||||
}
|
||||
|
||||
#paragraph2 .circle {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#paragraph2 .hidden {
|
||||
visibility: visible;
|
||||
margin-right:30%;;
|
||||
margin-top:80px;
|
||||
font-family: "fluxisch-else";
|
||||
}
|
||||
|
||||
#paragraph2 .paragraph {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
font-size: 18px;
|
||||
font-family: "fluxisch-else";
|
||||
color: black;
|
||||
margin-left: 60px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#paragraph3 .circle-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;/*
|
||||
margin-right:40px;*/
|
||||
margin-top:220px;
|
||||
}
|
||||
|
||||
#paragraph3 .circle {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#paragraph3 .hidden {
|
||||
visibility: visible;
|
||||
margin-right:100px;
|
||||
margin-top:210px;
|
||||
font-family: fluxisch-else;;
|
||||
}
|
||||
|
||||
#paragraph3 .frame {
|
||||
visibility: visible;
|
||||
margin-right:20%;
|
||||
margin-top:40px;
|
||||
}
|
||||
|
||||
#paragraph3 .print {
|
||||
display: none;
|
||||
margin-right:20%;
|
||||
margin-top:40px;
|
||||
}
|
||||
|
||||
#paragraph3 .paragraph {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
font-size: 18px;
|
||||
font-family: "fluxisch-else";
|
||||
color: black;
|
||||
margin-left: 60px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#paragraph4 .circle-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin-right:40px;
|
||||
margin-top:220px;
|
||||
}
|
||||
|
||||
#paragraph4 .circle {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#paragraph4 .hidden {
|
||||
visibility: visible;
|
||||
margin-right:100px;
|
||||
margin-top:200px;
|
||||
font-family: fluxisch-else;
|
||||
}
|
||||
|
||||
|
||||
#paragraph4 .paragraph {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
font-size: 18px;
|
||||
font-family: "fluxisch-else";
|
||||
color: black;
|
||||
margin-left: 60px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
#paragraph5 .circle-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;/*
|
||||
margin-right:40px;*/
|
||||
margin-top:220px;
|
||||
}
|
||||
|
||||
#paragraph5 .circle {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#paragraph5 .hidden {
|
||||
visibility: visible;
|
||||
margin-right:100px;
|
||||
margin-top:210px;
|
||||
font-family: fluxisch-else;
|
||||
}
|
||||
|
||||
#paragraph5 .frame {
|
||||
visibility: visible;
|
||||
margin-right:20%;
|
||||
margin-top:40px;
|
||||
}
|
||||
|
||||
|
||||
#paragraph5 .paragraph {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
font-size: 18px;
|
||||
font-family: "fluxisch-else";
|
||||
color: black;
|
||||
margin-left: 60px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
#paragraph6 .circle-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;/*
|
||||
margin-right:20px;*/
|
||||
margin-top:120px;
|
||||
}
|
||||
|
||||
#paragraph6 .circle {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#paragraph6 .hidden {
|
||||
visibility: visible;
|
||||
margin-right:110px;
|
||||
margin-top:110px;
|
||||
font-family: fluxisch-else;
|
||||
}
|
||||
|
||||
#paragraph6 .frame {
|
||||
visibility: visible;
|
||||
margin-right:20%;/*
|
||||
margin-top:20px;*/
|
||||
}
|
||||
|
||||
|
||||
#paragraph6 .paragraph {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
font-size: 18px;
|
||||
font-family: "fluxisch-else";
|
||||
color: black;
|
||||
margin-left: 60px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
#paragraph7 .circle-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;/*
|
||||
margin-right:20px;*/
|
||||
margin-top:150px;
|
||||
}
|
||||
|
||||
#paragraph7 .circle {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#paragraph7 .hidden {
|
||||
visibility: visible;
|
||||
margin-right:10%;
|
||||
margin-top:140px;
|
||||
font-family: fluxisch-else;
|
||||
}
|
||||
|
||||
#paragraph7 .frame {
|
||||
visibility: visible;
|
||||
margin-right:20%;/*
|
||||
margin-top:20px;*/
|
||||
}
|
||||
|
||||
|
||||
#paragraph7 .paragraph {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
font-size: 18px;
|
||||
font-family: "fluxisch-else";
|
||||
color: black;
|
||||
margin-left: 60px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#paragraph8 .paragraph {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
font-size: 18px;
|
||||
font-family: "fluxisch-else";
|
||||
color: black;
|
||||
margin-left: 60px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#paragraph9 .circle-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;/*
|
||||
margin-right:20px;*/
|
||||
margin-top:150px;
|
||||
}
|
||||
|
||||
#paragraph9 .circle {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#paragraph9 .hidden {
|
||||
visibility: visible;
|
||||
margin-right:10%;
|
||||
margin-top:140px;
|
||||
font-family: fluxisch-else;
|
||||
}
|
||||
|
||||
#paragraph9 .frame {
|
||||
visibility: visible;
|
||||
margin-right:20%;
|
||||
margin-top:20px;
|
||||
}
|
||||
|
||||
|
||||
#paragraph9 .paragraph {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
font-size: 18px;
|
||||
font-family: "fluxisch-else";
|
||||
color: black;
|
||||
margin-left: 60px;
|
||||
margin-top: 10px;
|
||||
}
|
@ -0,0 +1,77 @@
|
||||
@font-face {
|
||||
font-family: "Crickx";
|
||||
src: url("fonts2/fonts/Crickx.otf");
|
||||
}
|
||||
|
||||
html {
|
||||
padding-top: 100px;
|
||||
background-color: white;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
background-attachment: fixed;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
font-size: calc(12px + .4vw);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
font-size: 1.5rem;
|
||||
font-family: "Crickx";
|
||||
color: black;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 12rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
letter-spacing: -0.2rem;
|
||||
line-height: 4rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 4rem;
|
||||
font-family: "Crickx";
|
||||
letter-spacing: -0.1rem;
|
||||
}
|
||||
|
||||
|
||||
header p, footer p {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
header p.italic, footer p.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
main p {
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.blink {
|
||||
animation: blinker 0s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes blinker {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a, a:active, a:visited {
|
||||
color: #ffffff;
|
||||
}
|