fixed details

master
bootje 5 years ago
parent 01d040344a
commit 02ff03e909

@ -40,11 +40,7 @@
</div> </div>
<div class ="paragraph"> <div class ="paragraph">
<p>
<span class="NNS conditions eachwords">Conditions</span>
<span class="IN of eachwords">of</span>
<span class="NN use eachwords">Use</span>
</p>
<p> <p>
<span class="VB welcome eachwords">Welcome</span> <span class="VB welcome eachwords">Welcome</span>
<span class="TO to eachwords">to</span> <span class="TO to eachwords">to</span>

@ -9,7 +9,7 @@ import base64
nltk.download('stopwords') nltk.download('stopwords')
with open('treaty_file/russia-estonia.txt', 'r') as russia_file: with open('treaty_file/hongkong.txt', 'r') as russia_file:
russia_text = russia_file.read() russia_text = russia_file.read()
russia_text_list = russia_text.split("\n\n") russia_text_list = russia_text.split("\n\n")
@ -39,14 +39,14 @@ print('''<!DOCTYPE>
#t_wrapper (second wrapper) #t_wrapper (second wrapper)
print('<div class="t_wrapper"><div class="t_intro">') print('<div class="t_wrapper"><div class="t_intro">')
img_url = base64.b64encode(open('img/tartu.jpeg', 'rb').read()).decode('utf-8') img_url = base64.b64encode(open('img/hk.jpg', 'rb').read()).decode('utf-8')
t_image = '<div class="t_img" style="position: fixed; background-color: gainsboro;">Peace Treaty of Tartu</div><br><img class="t_image" src="data:img/tartu.jpeg;base64,{}">'.format(img_url) t_image = '<div class="t_img" style="position: fixed; background-color: gainsboro;">Hong Kong Letters Patent 1843</div><br><img class="t_image" src="data:img/hk.jpg;base64,{}">'.format(img_url)
print(t_image) print(t_image)
#t_info box #t_info box
print('<div class ="t_info">') print('<div class ="t_info">')
t_infotext = [('Name of Treaty', 'Peace Treaty of Tartu'), ('Country of Origin', 'Russia'), ('Signed', 'February 2, 1920'), ('Location', 'Tartu, Estonia'), ('Word Counts', '2,104'), ('Type', 'bilateral peace treaty'), ('Original Source', '<a href="https://en.wikipedia.org/wiki/Treaty_of_Tartu_(Russian-Estonian)" target="_blank">link</a>'), ('Description', 'The Tartu Peace Treaty or Treaty of Tartu is a peace treaty between Estonia and Russian Soviet Federative Socialist Republic signed on 2 February 1920, ending the Estonian War of Independence.')] t_infotext = [('Name of Treaty', 'Hong Kong Letters Patent 1843'), ('Country of Origin', 'United Kingdom'), ('Signed', ' April, 1843'), ('Location', 'Westminster, U.K.'), ('Word Counts', '1,543'), ('Type', 'unilateral treaty'), ('Original Source', '<a href="https://en.wikisource.org/wiki/Hong_Kong_Letters_Patent_1843" target="_blank">link</a>'), ('Description', 'It was issued by Queen Vcitoria of the United Kingdom of Great Britain and Ireland in 1843 to established the British Colony of Hong Kong in and over Hong Kong Island.')]
for t_title, t_info in t_infotext: for t_title, t_info in t_infotext:
print('<div class="t_info-{0}"><div class="info_t_title" ><b>{0}</b></div><div class="t_info_content">{1}</div></div><br>'.format(t_title, t_info)) print('<div class="t_info-{0}"><div class="info_t_title" ><b>{0}</b></div><div class="t_info_content">{1}</div></div><br>'.format(t_title, t_info))

@ -5831,9 +5831,9 @@
</p> </p>
</div> </div>
<div class="top_words"><div class="top_words_title" ><b>Frequent words</b></div> <div class="top_words"><div class="top_words_title" ><b>Frequent words</b></div>
<div class="chosen_words services" >&nbsp;services&nbsp;(69) </div> <div class="chosen_words word-services" >&nbsp;services&nbsp;(69) </div>
<div class="chosen_words" >&nbsp;agreement&nbsp;(60) </div> <div class="chosen_words word-agreement" >&nbsp;agreement&nbsp;(60) </div>
<div class="chosen_words" >&nbsp;your&nbsp;(43) </div> <div class="chosen_words word-you" >&nbsp;your&nbsp;(43) </div>
<div class="chosen_words" >&nbsp;arbitration&nbsp;(42) </div> <div class="chosen_words" >&nbsp;arbitration&nbsp;(42) </div>
<div class="chosen_words" >&nbsp;content&nbsp;(37) </div> <div class="chosen_words" >&nbsp;content&nbsp;(37) </div>
<div class="chosen_words" >&nbsp;use&nbsp;(35) </div> <div class="chosen_words" >&nbsp;use&nbsp;(35) </div>

@ -18,25 +18,23 @@ $(window).scroll(function(){
}); });
/* hover to highlight words */ /* hover to highlight words */
$(document).ready(function() { $(document).ready(function() {
/* frequent words */
$('.chosen_words').mouseover( function(){
var word = $(this).text().toLowerCase().slice(0,-5);
$(word).attr('class').css('background-color','blue');
// /* on mousehover: frequent words highlight on the paragraph*/
// $('.top_words > .chosen_words').mouseover( function(){
// var word = $(this).text().toLowerCase().slice(0,-5);
// console.log(word)
}); // $(word).attr('class').css('color','blue');
$('.t_chosen_words').click( function(){
var word = $(this).text();
alert(word);
});
// });
// $('.t_chosen_words').click( function(){
// var word = $(this).text();
// alert(word);
// });
/* legend & pos tag highlights */ /* legend & pos tag highlights */
@ -76,18 +74,33 @@ $(document).ready(function() {
//get other iframe
var other = $(window.parent.document).find('iframe.viewer').filter( function() {
return this.contentWindow!==window;
});
// click to highlight words + remove words + turn off hightlight // click to highlight words + remove words + turn off hightlight
//stopwords //stopwords
$('.legendhide, .TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC, .VBP, .WRB, .marks, .CD, .LS, .comma, .dot').click(function() { $('.legendhide, .TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC, .VBP, .WRB, .marks, .CD, .LS, .comma, .dot').click(function() {
if ($('.legendhide').hasClass('legendhide-clicked')) { if ($('.legendhide').hasClass('legendhide-clicked')) {
$('.legendhide').removeClass('legendhide-clicked'); $('.legendhide').removeClass('legendhide-clicked');
$('.TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC, .VBP, .WRB, .marks, .CD, .LS, .comma, .dot').removeClass('hide'); $('.TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC, .VBP, .WRB, .marks, .CD, .LS, .comma, .dot').removeClass('hide');
other.contents().find('.legendhide').removeClass('legendhide-clicked');
other.contents().find('.TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC, .VBP, .WRB, .marks, .CD, .LS, .comma, .dot').removeClass('hide');
} }
else { else {
$('.legendhide').addClass('legendhide-clicked'); $('.legendhide').addClass('legendhide-clicked');
$('.TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC, .VBP, .WRB, .marks, .CD, .LS, .comma, .dot').addClass('hide'); $('.TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC, .VBP, .WRB, .marks, .CD, .LS, .comma, .dot').addClass('hide');
other.contents().find('.legendhide').addClass('legendhide-clicked');
other.contents().find('.TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC, .VBP, .WRB, .marks, .CD, .LS, .comma, .dot').addClass('hide');
} }
}); });
@ -95,20 +108,29 @@ $(document).ready(function() {
//verb //verb
$('.legendverb, .VB, .VBZ, .VBN, .VBD').click(function() { $('.legendverb, .VB, .VBZ, .VBN, .VBD').click(function() {
if ($('.legendverb').hasClass('verb')) { if ($('.legendverb').hasClass('verb')) {
$('.legendverb').removeClass('verb').addClass('legendverb-clicked'); $('.legendverb').removeClass('verb').addClass('legendverb-clicked');
$('.VB, .VBZ, .VBN, .VBD').removeClass('verb').addClass('bg-verb'); $('.VB, .VBZ, .VBN, .VBD').removeClass('verb').addClass('bg-verb');
other.contents().find('.legendverb').removeClass('verb').addClass('legendverb-clicked');
other.contents().find('.VB, .VBZ, .VBN, .VBD').removeClass('verb').addClass('bg-verb');
} }
else if ($('.legendverb').hasClass('legendverb-clicked')) { else if ($('.legendverb').hasClass('legendverb-clicked')) {
$('.legendverb').removeClass('legendverb-clicked'); $('.legendverb').removeClass('legendverb-clicked');
$('.VB, .VBZ, .VBN, .VBD').removeClass('bg-verb'); $('.VB, .VBZ, .VBN, .VBD').removeClass('bg-verb');
other.contents().find('.legendverb').removeClass('legendverb-clicked');
other.contents().find('.VB, .VBZ, .VBN, .VBD').removeClass('bg-verb');
} }
else { else {
$('.legendverb, .VB, .VBZ, .VBN, .VBD').addClass('verb'); $('.legendverb, .VB, .VBZ, .VBN, .VBD').addClass('verb');
other.contents().find('.legendverb, .VB, .VBZ, .VBN, .VBD').addClass('verb');
} }
}); });
@ -119,16 +141,24 @@ $(document).ready(function() {
$('.legendadjective').removeClass('adjective').addClass('legendadjective-clicked'); $('.legendadjective').removeClass('adjective').addClass('legendadjective-clicked');
$('.JJ').removeClass('adjective').addClass('bg-adjective'); $('.JJ').removeClass('adjective').addClass('bg-adjective');
other.contents().find('.legendadjective').removeClass('adjective').addClass('legendadjective-clicked');
other.contents().find('.JJ').removeClass('adjective').addClass('bg-adjective');
} }
else if ($('.legendadjective').hasClass('legendadjective-clicked')) { else if ($('.legendadjective').hasClass('legendadjective-clicked')) {
$('.legendadjective').removeClass('legendadjective-clicked'); $('.legendadjective').removeClass('legendadjective-clicked');
$('.JJ').removeClass('bg-adjective'); $('.JJ').removeClass('bg-adjective');
other.contents().find('.legendadjective').removeClass('legendadjective-clicked');
other.contents().find('.JJ').removeClass('bg-adjective');
} }
else { else {
$('.legendadjective, .JJ').addClass('adjective'); $('.legendadjective, .JJ').addClass('adjective');
other.contents().find('.legendadjective, .JJ').addClass('adjective');
} }
}); });
@ -140,16 +170,24 @@ $(document).ready(function() {
$('.legendpossesivepronoun').removeClass('possesivepronoun').addClass('legendpossesivepronoun-clicked'); $('.legendpossesivepronoun').removeClass('possesivepronoun').addClass('legendpossesivepronoun-clicked');
$('.PRPS').removeClass('possesivepronoun').addClass('bg-possesivepronoun'); $('.PRPS').removeClass('possesivepronoun').addClass('bg-possesivepronoun');
other.contents().find('.legendpossesivepronoun').removeClass('possesivepronoun').addClass('legendpossesivepronoun-clicked');
other.contents().find('.PRPS').removeClass('possesivepronoun').addClass('bg-possesivepronoun');
} }
else if ($('.legendpossesivepronoun').hasClass('legendpossesivepronoun-clicked')) { else if ($('.legendpossesivepronoun').hasClass('legendpossesivepronoun-clicked')) {
$('.legendpossesivepronoun').removeClass('legendpossesivepronoun-clicked'); $('.legendpossesivepronoun').removeClass('legendpossesivepronoun-clicked');
$('.PRPS').removeClass('bg-possesivepronoun'); $('.PRPS').removeClass('bg-possesivepronoun');
other.contents().find('.legendpossesivepronoun').removeClass('legendpossesivepronoun-clicked');
other.contents().find('.PRPS').removeClass('bg-possesivepronoun');
} }
else { else {
$('.legendpossesivepronoun, .PRPS').addClass('possesivepronoun'); $('.legendpossesivepronoun, .PRPS').addClass('possesivepronoun');
other.contents().find('.legendpossesivepronoun, .PRPS').addClass('possesivepronoun');
} }
}); });
@ -161,16 +199,24 @@ $(document).ready(function() {
$('.legendnoun').removeClass('noun').addClass('legendnoun-clicked'); $('.legendnoun').removeClass('noun').addClass('legendnoun-clicked');
$('.NN, .NNS').removeClass('noun').addClass('bg-noun'); $('.NN, .NNS').removeClass('noun').addClass('bg-noun');
other.contents().find('.legendnoun').removeClass('noun').addClass('legendnoun-clicked');
other.contents().find('.NN, .NNS').removeClass('noun').addClass('bg-noun');
} }
else if ($('.legendnoun').hasClass('legendnoun-clicked')) { else if ($('.legendnoun').hasClass('legendnoun-clicked')) {
$('.legendnoun').removeClass('legendnoun-clicked'); $('.legendnoun').removeClass('legendnoun-clicked');
$('.NN, .NNS').removeClass('bg-noun'); $('.NN, .NNS').removeClass('bg-noun');
other.contents().find('.legendnoun').removeClass('legendnoun-clicked');
other.contents().find('.NN, .NNS').removeClass('bg-noun');
} }
else { else {
$('.legendnoun, .NN, .NNS').addClass('noun'); $('.legendnoun, .NN, .NNS').addClass('noun');
other.contents().find('.legendnoun, .NN, .NNS').addClass('noun');
} }
}); });
@ -182,16 +228,24 @@ $(document).ready(function() {
$('.legendpropernoun').removeClass('propernoun').addClass('legendpropernoun-clicked'); $('.legendpropernoun').removeClass('propernoun').addClass('legendpropernoun-clicked');
$('.NNP, .NNPS').removeClass('propernoun').addClass('bg-propernoun'); $('.NNP, .NNPS').removeClass('propernoun').addClass('bg-propernoun');
other.contents().find('.legendpropernoun').removeClass('propernoun').addClass('legendpropernoun-clicked');
other.contents().find('.NNP, .NNPS').removeClass('propernoun').addClass('bg-propernoun');
} }
else if ($('.legendpropernoun').hasClass('legendpropernoun-clicked')) { else if ($('.legendpropernoun').hasClass('legendpropernoun-clicked')) {
$('.legendpropernoun').removeClass('legendpropernoun-clicked'); $('.legendpropernoun').removeClass('legendpropernoun-clicked');
$('.NNP, .NNPS').removeClass('bg-propernoun'); $('.NNP, .NNPS').removeClass('bg-propernoun');
other.contents().find('.legendpropernoun').removeClass('legendpropernoun-clicked');
other.contents().find('.NNP, .NNPS').removeClass('bg-propernoun');
} }
else { else {
$('.legendpropernoun, .NNP, .NNPS').addClass('propernoun'); $('.legendpropernoun, .NNP, .NNPS').addClass('propernoun');
other.contents().find('.legendpropernoun, .NNP, .NNPS').addClass('propernoun');
} }
}); });
@ -202,16 +256,24 @@ $(document).ready(function() {
$('.legendadverb').removeClass('adverb').addClass('legendadverb-clicked'); $('.legendadverb').removeClass('adverb').addClass('legendadverb-clicked');
$('.RB').removeClass('adverb').addClass('bg-adverb'); $('.RB').removeClass('adverb').addClass('bg-adverb');
other.contents().find('.legendadverb').removeClass('adverb').addClass('legendadverb-clicked');
other.contents().find('.RB').removeClass('adverb').addClass('bg-adverb');
} }
else if ($('.legendadverb').hasClass('legendadverb-clicked')) { else if ($('.legendadverb').hasClass('legendadverb-clicked')) {
$('.legendadverb').removeClass('legendadverb-clicked'); $('.legendadverb').removeClass('legendadverb-clicked');
$('.RB').removeClass('bg-adverb'); $('.RB').removeClass('bg-adverb');
other.contents().find('.legendadverb').removeClass('legendadverb-clicked');
other.contents().find('.RB').removeClass('bg-adverb');
} }
else { else {
$('.legendadverb, .RB').addClass('adverb'); $('.legendadverb, .RB').addClass('adverb');
other.contents().find('.legendadverb, .RB').addClass('adverb');
} }
}); });
@ -224,16 +286,24 @@ $(document).ready(function() {
$('.legendpresentparticiple').removeClass('presentparticiple').addClass('legendpresentparticiple-clicked'); $('.legendpresentparticiple').removeClass('presentparticiple').addClass('legendpresentparticiple-clicked');
$('.VBG').removeClass('presentparticiple').addClass('bg-presentparticiple'); $('.VBG').removeClass('presentparticiple').addClass('bg-presentparticiple');
other.contents().find('.legendpresentparticiple').removeClass('presentparticiple').addClass('legendpresentparticiple-clicked');
other.contents().find('.VBG').removeClass('presentparticiple').addClass('bg-presentparticiple');
} }
else if ($('.legendpresentparticiple').hasClass('legendpresentparticiple-clicked')) { else if ($('.legendpresentparticiple').hasClass('legendpresentparticiple-clicked')) {
$('.legendpresentparticiple').removeClass('legendpresentparticiple-clicked'); $('.legendpresentparticiple').removeClass('legendpresentparticiple-clicked');
$('.VBG').removeClass('bg-presentparticiple'); $('.VBG').removeClass('bg-presentparticiple');
other.contents().find('.legendpresentparticiple').removeClass('legendpresentparticiple-clicked');
other.contents().find('.VBG').removeClass('bg-presentparticiple');
} }
else { else {
$('.legendpresentparticiple, .VBG').addClass('presentparticiple'); $('.legendpresentparticiple, .VBG').addClass('presentparticiple');
other.contents().find('.legendpresentparticiple, .VBG').addClass('presentparticiple');
} }
}); });
@ -246,16 +316,24 @@ $(document).ready(function() {
$('.legendadjectivesuperlative').removeClass('adjectivesuperlative').addClass('legendadjectivesuperlative-clicked'); $('.legendadjectivesuperlative').removeClass('adjectivesuperlative').addClass('legendadjectivesuperlative-clicked');
$('.JJS').removeClass('adjectivesuperlative').addClass('bg-adjectivesuperlative'); $('.JJS').removeClass('adjectivesuperlative').addClass('bg-adjectivesuperlative');
other.contents().find('.legendadjectivesuperlative').removeClass('adjectivesuperlative').addClass('legendadjectivesuperlative-clicked');
other.contents().find('.JJS').removeClass('adjectivesuperlative').addClass('bg-adjectivesuperlative');
} }
else if ($('.legendadjectivesuperlative').hasClass('legendadjectivesuperlative-clicked')) { else if ($('.legendadjectivesuperlative').hasClass('legendadjectivesuperlative-clicked')) {
$('.legendadjectivesuperlative').removeClass('legendadjectivesuperlative-clicked'); $('.legendadjectivesuperlative').removeClass('legendadjectivesuperlative-clicked');
$('.JJS').removeClass('bg-adjectivesuperlative'); $('.JJS').removeClass('bg-adjectivesuperlative');
other.contents().find('.legendadjectivesuperlative').removeClass('legendadjectivesuperlative-clicked');
other.contents().find('.JJS').removeClass('bg-adjectivesuperlative');
} }
else { else {
$('.legendadjectivesuperlative, .JJS').addClass('adjectivesuperlative'); $('.legendadjectivesuperlative, .JJS').addClass('adjectivesuperlative');
other.contents().find('.legendadjectivesuperlative, .JJS').addClass('adjectivesuperlative');
} }
}); });
@ -267,16 +345,24 @@ $(document).ready(function() {
$('.legendadverb-comparative-superative').removeClass('adverb-comparative-superative').addClass('legendadverb-comparative-superative-clicked'); $('.legendadverb-comparative-superative').removeClass('adverb-comparative-superative').addClass('legendadverb-comparative-superative-clicked');
$('.RBR, .JJR, .RBS').removeClass('adverb-comparative-superative').addClass('bg-adverb-comparative-superative'); $('.RBR, .JJR, .RBS').removeClass('adverb-comparative-superative').addClass('bg-adverb-comparative-superative');
other.contents().find('.legendadverb-comparative-superative').removeClass('adverb-comparative-superative').addClass('legendadverb-comparative-superative-clicked');
other.contents().find('.RBR, .JJR, .RBS').removeClass('adverb-comparative-superative').addClass('bg-adverb-comparative-superative');
} }
else if ($('.legendadverb-comparative-superative').hasClass('legendadverb-comparative-superative-clicked')) { else if ($('.legendadverb-comparative-superative').hasClass('legendadverb-comparative-superative-clicked')) {
$('.legendadverb-comparative-superative').removeClass('legendadverb-comparative-superative-clicked'); $('.legendadverb-comparative-superative').removeClass('legendadverb-comparative-superative-clicked');
$('.RBR, .JJR, .RBS').removeClass('bg-adverb-comparative-superative'); $('.RBR, .JJR, .RBS').removeClass('bg-adverb-comparative-superative');
other.contents().find('.legendadverb-comparative-superative').removeClass('legendadverb-comparative-superative-clicked');
other.contents().find('.RBR, .JJR, .RBS').removeClass('bg-adverb-comparative-superative');
} }
else { else {
$('.legendadverb-comparative-superative, .RBR, .JJR, .RBS').addClass('adverb-comparative-superative'); $('.legendadverb-comparative-superative, .RBR, .JJR, .RBS').addClass('adverb-comparative-superative');
other.contents().find('.legendadverb-comparative-superative, .RBR, .JJR, .RBS').addClass('adverb-comparative-superative');
} }
}); });
@ -288,16 +374,24 @@ $(document).ready(function() {
$('.legendcurrencysign').removeClass('currencysign').addClass('legendcurrencysign-clicked'); $('.legendcurrencysign').removeClass('currencysign').addClass('legendcurrencysign-clicked');
$('.currencysign2').removeClass('currencysign').addClass('bgcurrencysign'); $('.currencysign2').removeClass('currencysign').addClass('bgcurrencysign');
other.contents().find('.legendcurrencysign').removeClass('currencysign').addClass('legendcurrencysign-clicked');
other.contents().find('.currencysign2').removeClass('currencysign').addClass('bgcurrencysign');
} }
else if ($('.legendcurrencysign').hasClass('legendcurrencysign-clicked')) { else if ($('.legendcurrencysign').hasClass('legendcurrencysign-clicked')) {
$('.legendcurrencysign').removeClass('legendcurrencysign-clicked'); $('.legendcurrencysign').removeClass('legendcurrencysign-clicked');
$('.currencysign2').removeClass('bgcurrencysign'); $('.currencysign2').removeClass('bgcurrencysign');
other.contents().find('.legendcurrencysign').removeClass('legendcurrencysign-clicked');
other.contents().find('.currencysign2').removeClass('bgcurrencysign');
} }
else { else {
$('.legendcurrencysign, .currencysign2').addClass('currencysign'); $('.legendcurrencysign, .currencysign2').addClass('currencysign');
other.contents().find('.legendcurrencysign, .currencysign2').addClass('currencysign');
} }
}); });

@ -0,0 +1,106 @@
# from __future__ import division
from nltk import sent_tokenize, word_tokenize, pos_tag
from nltk.probability import FreqDist
from nltk.corpus import stopwords
import nltk
import codecs
import base64
nltk.download('stopwords')
with open('treaty_file/hongkong.txt', 'r') as russia_file:
russia_text = russia_file.read()
russia_text_list = russia_text.split("\n\n")
t_default_stopwords = set(stopwords.words('english'))
t_custom_stopwords = set(codecs.open('t_stopwords.txt', 'r').read().splitlines())
t_all_stopwords = t_default_stopwords | t_custom_stopwords
print('''<!DOCTYPE>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="estonia.css">
<link rel="stylesheet" href="legend.css">
<link rel="stylesheet" href="highlight.css">
<script src="highlight.js"></script>
<meta charset="utf-8">
<title></title>
</head>
<body>''')
#t_wrapper (second wrapper)
print('<div class="t_wrapper"><div class="t_intro">')
img_url = base64.b64encode(open('img/hk.jpg', 'rb').read()).decode('utf-8')
t_image = '<div class="t_img" style="position: fixed; background-color: gainsboro;">Hong Kong Letters Patent 1843</div><br><img class="t_image" src="data:img/hk.jpg;base64,{}">'.format(img_url)
print(t_image)
#t_info box
print('<div class ="t_info">')
t_infotext = [('Name of Treaty', 'Hong Kong Letters Patent 1843'), ('Country of Origin', 'United Kingdom'), ('Signed', ' April, 1843'), ('Location', 'Westminster, U.K.'), ('Word Counts', '1,543'), ('Type', 'unilateral treaty'), ('Original Source', '<a href="https://en.wikisource.org/wiki/Hong_Kong_Letters_Patent_1843" target="_blank">link</a>'), ('Description', 'It was issued by Queen Vcitoria of the United Kingdom of Great Britain and Ireland in 1843 to established the British Colony of Hong Kong in and over Hong Kong Island.')]
for t_title, t_info in t_infotext:
print('<div class="t_info-{0}"><div class="info_t_title" ><b>{0}</b></div><div class="t_info_content">{1}</div></div><br>'.format(t_title, t_info))
print('</div></div>')
print('''
<div class="legend">
<li class="legendhide eachlegend">stopwords</li>
<li class="legendadjective eachlegend">adjective</li>
<li class="legendverb eachlegend">verb</li>
<li class="legendnoun eachlegend">noun</li>
<li class="legendpropernoun eachlegend">proper noun</li>
<li class="legendadverb eachlegend">adverb</li>
<li class="legendpossesivepronoun eachlegend">possesive pronoun</li>
<li class="legendpresentparticiple eachlegend">present participle</li>
<li class="legendadjectivesuperlative eachlegend">adjective superlative</li>
<li class="legendadverb-comparative-superative eachlegend">adverb comparative + superative</li>
</div>
''')
#Treaty text
print('<div class="t_paragraph">')
t_tokenized_all = []
for t_paragraph in russia_text_list:
t_tokenized = word_tokenize(t_paragraph)
t_tokenized_all += t_tokenized # add to the tokenized_all
t_tagged = pos_tag(t_tokenized)
print('<p>')
for t_word, t_pos in t_tagged:
print('<span class="{0} {1} eachwords">{2}</span>'.format(t_pos.replace('PRP$', 'PRPS').replace('.', 'dot').replace(',', 'comma').replace('(', 'marks').replace(')', 'marks').replace(':', 'marks').replace(';', 'marks'), t_word.replace('', 'apostrophe').replace('.', 'dot').replace(',', 'comma').replace('(', 'marks').replace(')', 'marks').replace(':', 'marks').replace(';', 'marks').lower(), t_word))
print('</p>')
print('</div>')
#treaty colonial top words list
print('<div class="t_top_words"><div class="t_top_words_title"><b>Frequent words</b></div>')
t_tokens_without_stopwords = nltk.FreqDist(words.lower() for words in t_tokenized_all if words.lower() not in t_custom_stopwords)
t_frequency_word = FreqDist(t_tokens_without_stopwords)
t_top_words = t_tokens_without_stopwords.most_common(20)
for t_chosen_words, t_frequency in t_top_words:
print('<div class="t_chosen_words" >&nbsp;{}&nbsp;({}) </div>'.format(t_chosen_words, t_frequency))
print('</div></div></div>')
# at the end of wrapper
print('</div>')
print('</div>')
print('''</body></html>''')

File diff suppressed because one or more lines are too long

@ -1,48 +0,0 @@
hovering
#1
$(document).on('mouseover','.NN, .NNS', function() {
$('.NN, .NNS').css('background-color', 'grey');
}).on('mouseout','.NN, .NNS', function() {
$('.NN, .NNS').css('background-color', 'white');
});
$(document).on('click', '.NN, .NNS', function() {
$('.NN, .NNS').css('background-color', 'blue');
}).on('mouseout','.NN, .NNS', function() {
$('.NN, .NNS').css('background-color', 'blue');
});
#2
$('.NN, .NNS').mouseover(function() {
$('.NN, .NNS').css('background-color', "grey");
});
$('.NN, .NNS').mouseout(function() {
$('.NN, .NNS').css('background-color', "white");
});
$('.NN, .NNS').click(
function() {
$('.NN, .NNS').toggleClass('noun');
});
$(document).on('mouseenter','.NN, .NNS', function() {
$('.NN, .NNS').css('background-color', 'grey');
}).on('mouseout','.NN, .NNS', function() {
$('.NN, .NNS').css('background-color', 'white');
});
$(document).on('click', '.NN, .NNS', function() {
$('.NN, .NNS').css('background-color', 'blue');
}).on('mouseout','.NN, .NNS', function() {
$('.NN, .NNS').css('background-color', 'blue');
});

Binary file not shown.

After

Width:  |  Height:  |  Size: 147 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 737 KiB

@ -5,13 +5,13 @@
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style2.css">
<script src="popup.js"></script> <script src="popup.js"></script>
<script src="modal.js"></script> <script src="modal.js"></script>
<script src="menu.js"></script> <script src="menu.js"></script>
<title>Have you read your contract?</title> <title>Parallel Colonialism — Reading between the lines of colonial and contemporary terms</title>
<style type="text/css"> <style type="text/css">
@ -37,6 +37,7 @@
</div> </div>
</div> </div>
<div class="tof"> <div class="tof">
<div class="menu-title" ><b>Table of Contents</b><div class="icon">open &#9660;</div></div><br> <div class="menu-title" ><b>Table of Contents</b><div class="icon">open &#9660;</div></div><br>
<div class="submenu" style="display: none;"> <div class="submenu" style="display: none;">
@ -45,7 +46,7 @@
<a class="index-menu-single" href="#interpretation">2-1. Interpretation</a><br> <a class="index-menu-single" href="#interpretation">2-1. Interpretation</a><br>
<a class="index-menu-single" href="#definitions">2-2. Definitions</a><div class="icon2" >&#9660;</div><br> <a class="index-menu-single" href="#definitions">2-2. Definitions</a><div class="icon2" >&#9660;</div><br>
<div class="submenu2" style="display: none;"> <div class="submenu2" style="display: none;">
<a class="index-menu-single" href="#hyryc">&#10551; HAVE YOU READ YOUR CONTRACT?</a><br> <a class="index-menu-single" href="#hyryc">&#10551; PARALLEL COLONIALISM</a><br>
<a class="index-menu-single" href="#digitalcolonialsociety">&#10551; DIGITA COLONIAL SOCIETY</a><br> <a class="index-menu-single" href="#digitalcolonialsociety">&#10551; DIGITA COLONIAL SOCIETY</a><br>
<a class="index-menu-single" href="#digitallabour">&#10551; DIGTAL LABOUR</a><br> <a class="index-menu-single" href="#digitallabour">&#10551; DIGTAL LABOUR</a><br>
<a class="index-menu-single" href="#textpublishingarchive">&#10551; DIGITAL TEXT PUBLISHING ARCHIVE</a><br> <a class="index-menu-single" href="#textpublishingarchive">&#10551; DIGITAL TEXT PUBLISHING ARCHIVE</a><br>
@ -80,13 +81,14 @@
<a class="index-menu-single" href="#licence">13. LICENSE</a><br> <a class="index-menu-single" href="#licence">13. LICENSE</a><br>
<a class="index-menu-single" href="#changes">14. CHANGES</a><br> <a class="index-menu-single" href="#changes">14. CHANGES</a><br>
<a class="index-menu-single" href="#contactus">15. CONTACT US</a><br> <a class="index-menu-single" href="#contactus">15. CONTACT US</a><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div> </div>
</div> </div>
<div id="header">Have you read your working contract?</div> <div id="header"><b>Parallel Colonialism</b> — Reading between the lines of colonial and contemporary terms</div>
@ -95,6 +97,20 @@
<div class="wrapper"> <div class="wrapper">
<div id="columngrid">
<div id="columngrid1">
<div id="columngrid1-1"></div>
<div id="columngrid1-2"></div>
<div id="columngrid1-3"></div>
</div>
<div id="columngrid2">
<div id="columngrid2-1"></div>
<div id="columngrid2-2"></div>
<div id="columngrid2-3"></div>
</div>
</div>
<div class="index-menu"> <div class="index-menu">
@ -102,75 +118,28 @@
<div class="menu-title-right" ><b>List of Terms of Services</b></div><br> <div class="menu-title-right" ><b>List of Terms of Services</b></div><br>
<a class="menu-title-country" >Russia</a><br><br> <a class="menu-title-country" >Russia</a><br><br>
<a class="index-menu-single single-right" id="button-right">FaceApp</a> <a class="index-menu-single single-right" id="button-right" href="faceapp.html" target="tosview">FaceApp</a>
<div id="myModal" class="modal"> <div id="myModal" class="modal">
<div class="modal-content"> <div class="modal-content">
<span class="close">&times;</span> <span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="faceapp.html"></iframe> <iframe id="tosview" class="viewer" name="tosview"></iframe>
</div> </div>
</div> </div>
<br><br> <br><br>
<a class="menu-title-country" >China</a><br><br> <a class="menu-title-country" >China</a><br><br>
<a class="index-menu-single single-right" id="button-right">TikTok</a> <a class="index-menu-single single-right" id="button-right" href="tiktok.html" target="tosview">TikTok</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="tiktok.html"></iframe>
</div>
</div>
<br><br> <br><br>
<a class="menu-title-country" >U.S.A.</a><br><br> <a class="menu-title-country" >U.S.A.</a><br><br>
<a class="index-menu-single single-right" id="button-right">PokemonGo</a> <a class="index-menu-single single-right" id="button-right" href="pokemongo.html" target="tosview">PokemonGo</a><br>
<div id="myModal" class="modal"> <a class="index-menu-single single-right" id="button-right" href="snapchat.html" target="tosview">Snapchat</a><br>
<div class="modal-content"> <a class="index-menu-single single-right" id="button-right" href="netflix.html" target="tosview">Netflix</a><br>
<span class="close">&times;</span> <a class="index-menu-single single-right" id="button-right" href="facebook.html" target="tosview">facebook</a><br>
<iframe id="tosview" name="tosview" src="pokemongo.html"></iframe> <a class="index-menu-single single-right" id="button-right" href="instagram.html" target="tosview">instagram</a><br>
</div> <a class="index-menu-single single-right" id="button-right" href="amazon.html" target="tosview">Amazon</a>
</div>
<br>
<a class="index-menu-single single-right" id="button-right">Snapchat</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="snapchat.html"></iframe>
</div>
</div>
<br>
<a class="index-menu-single single-right" id="button-right">Netflix</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="netflix.html"></iframe>
</div>
</div>
<br>
<a class="index-menu-single single-right" id="button-right">facebook</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="facebook.html"></iframe>
</div>
</div>
<br>
<a class="index-menu-single single-right" id="button-right">instagram</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="instagram.html"></iframe>
</div>
</div>
<br>
<a class="index-menu-single single-right" id="button-right">Amazon</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="amazon.html"></iframe>
</div>
</div>
<br><br> <br><br>
@ -179,36 +148,11 @@
<br><br> <br><br>
<a class="menu-title-country" >Japan</a><br><br> <a class="menu-title-country" >Japan</a><br><br>
<a class="index-menu-single" id="button-right">Sony</a><br> <a class="index-menu-single" id="button-right" href="sony.html" target="tosview">Sony</a><br>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="sony.html"></iframe>
</div>
</div>
<br><br><br> <br><br><br>
</div> </div>
@ -217,21 +161,15 @@
<div class="index-menu-right"> <div class="index-menu-right">
<div class="listbox-treaty"> <div class="listbox-treaty">
<div class="menu-title-right" ><b>List of Colonial Treaties</b></div><br> <div class="menu-title-right" ><b>List of Colonial Treaties</b></div><br>
<a class="menu-title-country" >Russia</a><br><br> <a class="menu-title-country" >Russia</a><br><br>
<a class="index-menu-single single-right" id="t_button-right">Peace Treaty of Tartu</a> <a class="index-menu-single single-right" id="t_button-right" href="Peace-treaty-of-tartu.html" target="treatyview">Peace Treaty of Tartu</a>
<div id="t_myModal" class="t_modal"> <div id="t_myModal" class="t_modal">
<div class="t_modal-content"> <div class="t_modal-content">
<span class="t_close">&times;</span> <span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="estonia.html"></iframe> <iframe id="treatyview" class="viewer" name="treatyview"></iframe>
</div> </div>
</div> </div>
@ -242,45 +180,20 @@
<br><br> <br><br>
<a class="menu-title-country" >U.S.A.</a><br><br> <a class="menu-title-country" >U.S.A.</a><br><br>
<a class="index-menu-single single-right" id="t_button-right">Kiram-Bates Treaty</a> <a class="index-menu-single single-right" id="t_button-right" href="kiram-bates-treaty.html" target="treatyview">Kiram-Bates Treaty</a>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="paris.html"></iframe>
</div>
</div>
<br><br> <br><br>
<a class="menu-title-country" >U.K.</a><br><br> <a class="menu-title-country" >U.K.</a><br><br>
<a class="index-menu-single single-right" id="t_button-right">United KingdomKorea Treaty of 1883</a> <a class="index-menu-single single-right" id="t_button-right" href="united-kingdomkorea-treaty-of-1883.html" target="treatyview">United KingdomKorea Treaty of 1883</a><br>
<div id="t_myModal" class="t_modal"> <a class="index-menu-single single-right" id="t_button-right" href="hong-kong-letters-patent-1843.html" target="treatyview">Hong Kong Letters Patent 1843</a>
<div class="t_modal-content">
<span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="uk.html"></iframe>
</div>
</div>
<br>
<a class="index-menu-single single-right" id="t_button-right">Hong Kong Letters Patent 1843</a>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="hk.html"></iframe>
</div>
</div>
<br><br> <br><br>
<a class="menu-title-country" >Japan</a><br><br> <a class="menu-title-country" >Japan</a><br><br>
<a class="index-menu-single" id="t_button-right">JapanKorea Agreement of 1905</a> <a class="index-menu-single" id="t_button-right" href="japankorea-agreement-of-1905.html" target="treatyview">JapanKorea Agreement of 1905</a>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="korea.html"></iframe>
</div>
</div>
<br><br> <br><br>
</div> </div>
@ -294,8 +207,7 @@
<div class="tos"> <div class="tos">
<br><br> <br>
<h1><a class="namemargin" name="start"></a>Terms of Service</h1><br> <h1><a class="namemargin" name="start"></a>Terms of Service</h1><br>
<p>Last updated: April 28, 2020</p> <p>Last updated: April 28, 2020</p>
<p>Please read these terms of service carefully before using Our service.</p><br><br> <p>Please read these terms of service carefully before using Our service.</p><br><br>
@ -313,7 +225,7 @@
<h2><a class="namemargin" name="definitions"></a>Definitions</h2><br> <h2><a class="namemargin" name="definitions"></a>Definitions</h2><br>
<p>For the purposes of these Terms of service:</p><br> <p>For the purposes of these Terms of service:</p><br>
<ul> <ul>
<li><a class="namemargin" name="hyryc"></a><strong>HAVE YOU READ YOUR CONTRACT?</strong> is a <a class="text" href="#textpublishingarchive">digital text archiving tool</a> that offers a comparative reading application in the modern-colonial contexts of <a class="text" href="#tos">'Terms of Service (ToS)'</a>. It allows users making unreadable legal documents readable by offering two types of objective texts such as Terms of Services and historical colonial treaties to experience how regulatory terms in neutral documents play in colonialism. This project opens up a discussion to suggest making the resemblance of <a class="text" href="#colonialtreaties">colonial treaties</a> in historical colonialism to the digital society by mapping out the whole architecture of language used in ToS compared with historical colonial treaties.</li> <li><a class="namemargin" name="hyryc"></a><strong>PARALLEL COLONIALISM</strong> is a <a class="text" href="#textpublishingarchive">digital text archiving tool</a> that offers a comparative reading application between historical and contemporary documents. It allows users to experience how regulatory terms play in colonialism by offering two types of legal documents: <a class="text" href="#tos">Terms of Services</a> and <a class="text" href="#colonialtreaties">historical colonial treaties</a>. This project opens up discussions in finding a <a class="text" href="#resemblance">colonial resemblance</a> by mapping out the whole contractual landscape of terms used in each document.</li>
<br><br> <br><br>
@ -339,35 +251,35 @@
<br><br> <br><br>
<li><a class="namemargin" name="resemblance"></a><strong>Resemblance of Terms of Service and colonial treaties</strong>: I insist that we are subject to be oblivious to these details in ToS agreements, although we all know of their existence. Everywhere on website you consistently have to click 'agree' or 'yes' to use the service provided from companies. Seeing ToS as modern working contract is urgent because it is apparent that companies are deliberately "hiring" users to let them join the forcefully produced labour farm. <li><a class="namemargin" name="resemblance"></a><strong>RESEMBLANCE OF TERMS OF SERVICE AND COLONIAL TREATIES</strong>: I insist that we are subject to be oblivious to these details in ToS agreements, although we all know of their existence. Everywhere on website you consistently have to click 'agree' or 'yes' to use the service provided from companies. Seeing ToS as modern working contract is urgent because it is apparent that companies are deliberately "hiring" users to let them join the forcefully produced labour farm.
<br><br> <br><br>
<li><a class="namemargin" name="tos"></a><strong>TERMS OF SERVICE (TOS)</strong> is also known as 'Terms of Use' or 'Terms and Conditions', commonly abbreviated as 'ToS' are the legal agreements between a service provider and a person who wants to use that service. This means that Terms of service forms the entire agreement between You and the Company regarding the use of the service. Terms of Services are way too long that users don't read them and just click accept. This Terms of service agreement has been created with the help of <a class="text" href="https://app.termsfeed.com/download/4687b8bf6d64d334e89197146ee96509" target="_blank">Terms of service Generator</a>.</li><br> <li><a class="namemargin" name="tos"></a><strong>TERMS OF SERVICE (TOS)</strong> is also known as 'Terms of Use' or 'Terms and Conditions', commonly abbreviated as 'ToS' are the legal agreements between a service provider and a person who wants to use that service. This means that Terms of service forms the entire agreement between You and the Company regarding the use of the service. Terms of Services are way too long that users don't read them and just click accept. This Terms of service agreement has been created with the help of <a class="text" href="https://app.termsfeed.com/download/4687b8bf6d64d334e89197146ee96509" target="_blank">Terms of service Generator</a>.</li>
<ul class="indent"> <ul class="indent">
<li>are written in a way that renders them functionally useless to most users with impenetrable legalese terms.</li> <li>&#10551; are written in a way that renders them functionally useless to most users with impenetrable legalese terms.</li>
<li>equivocate on the question of who you are selling the data or what they are sharing with.</li> <li>&#10551; equivocate on the question of who you are selling the data or what they are sharing with.</li>
<li>obfuscate the meaning of the context.</li> <li>&#10551; obfuscate the meaning of the context.</li>
<li>are being as opaque as possible about their intentions.</li> <li>&#10551; are being as opaque as possible about their intentions.</li>
<li>are way too long that users don't read them and just click accept.</li> <li>&#10551; are way too long that users don't read them and just click accept.</li>
<li>Mislead users on their true intentions.</li> <li>&#10551; Mislead users on their true intentions.</li>
<li>The power of ToS is equvalent of the length of Terms of Service.</li> <li>&#10551; The power of ToS is equvalent of the length of Terms of Service.</li>
</ul> </ul>
<br><br> <br><br>
<li><a class="namemargin" name="colonialtreaties"></a><strong>COLONIAL TREATIES</strong> are known as agreements, pacts and major contracts made between countries during colonial times. It was a formally concluded agreement between a colonizer and a colony, these treaties are a binding formal agreement that establishes obligations between two or more subjects. Most of the time, colonial treaties were coercively made by a colonizer. It was very common that colonial treaties were slanted in favour of the colonizer, and pushed to sign it without knowing that sovreignty or jurisdiction will be infringed. One of the example would be, <a class="text">a treaty of Ganghwa Island<span class="text-hover-img"><img src="img/ganghwa.jpg" ></span></a> made between Japanese and Korean. They used a term called 'Unequal treaty' to refer that the treaty had generally regarded as an unequal treaty coerced by Japan. This gave extraterritorial rights to Japanese citizens in Korea, and forced the Korean government to open 3 ports to Japan.<a id="reference-number" href="#2" class="text">[2]<span class="text-hover">(Duus, 1998):The Abacus and the Sword: The Japanese Penetration of Korea. University of California Press</span></a>.</li><br> <li><a class="namemargin" name="colonialtreaties"></a><strong>COLONIAL TREATIES</strong> are known as agreements, pacts and major contracts made between countries during colonial times. It was a formally concluded agreement between a colonizer and a colony, these treaties are a binding formal agreement that establishes obligations between two or more subjects. Most of the time, colonial treaties were coercively made by a colonizer. It was very common that colonial treaties were slanted in favour of the colonizer, and pushed to sign it without knowing that sovreignty or jurisdiction will be infringed. One of the example would be, <a class="text">a treaty of Ganghwa Island<span class="text-hover-img"><img src="img/ganghwa.jpg" ></span></a> made between Japanese and Korean. They used a term called 'Unequal treaty' to refer that the treaty had generally regarded as an unequal treaty coerced by Japan. This gave extraterritorial rights to Japanese citizens in Korea, and forced the Korean government to open 3 ports to Japan.<a id="reference-number" href="#2" class="text">[2]<span class="text-hover">(Duus, 1998):The Abacus and the Sword: The Japanese Penetration of Korea. University of California Press</span></a>.</li>
<ul class="indent"> <ul class="indent">
<li>are sometimes written in a way that renders them functionally useless. <li>&#10551; are sometimes written in a way that renders them functionally useless.
<li>to most indigenous people with superior languages.</li> <li>&#10551; to most indigenous people with superior languages.</li>
<li>equivocate on how they will colonize the colony.</li> <li>&#10551; equivocate on how they will colonize the colony.</li>
<li>obfuscate the meaning of the context.</li> <li>&#10551; obfuscate the meaning of the context.</li>
<li>are being as opaque as possible about their intentions.</li> <li>&#10551; are being as opaque as possible about their intentions.</li>
<li>have unequal access to language in the side of the colonized.</li> <li>&#10551; have unequal access to language in the side of the colonized.</li>
</ul> </ul>
<br><br> <br><br>
@ -378,13 +290,13 @@
<li><a class="namemargin" name="colonialism"></a><strong>THE IDEA OF COLONIALISM</strong> seems to be an eternal loop that comes back throughout history. The colonial heritage is omnipresent in every part of our lives from education programs, languages, gender and sexuality, religion, fashion, food even in digital sphere too <a id="reference-number" href="#5" class="text" >[5]<span class="text-hover">DiVersions / DiVersions / DiVersies </span></a>. Therefore, it is essential not to ignore that digital colonialism is applicable to every countries regardless of the history.</li> <li><a class="namemargin" name="colonialism"></a><strong>THE IDEA OF COLONIALISM</strong> seems to be an eternal loop that comes back throughout history. The colonial heritage is omnipresent in every part of our lives from education programs, languages, gender and sexuality, religion, fashion, food even in digital sphere too <a id="reference-number" href="#5" class="text" >[5]<span class="text-hover">DiVersions / DiVersions / DiVersies </span></a>. Therefore, it is essential not to ignore that digital colonialism is applicable to every countries regardless of the history.</li>
<br><br> <br>
<li><a class="namemargin" name="affilate"></a><strong>AFFILATE</strong> means an entity that controls, is controlled by or is under common control with a party, where "control" means ownership of 50% or more of the shares, equity interest or other securities entitled to vote for election of directors or other managing authority.</li> <li><a class="namemargin" name="affilate"></a><strong>AFFILATE</strong> means an entity that controls, is controlled by or is under common control with a party, where "control" means ownership of 50% or more of the shares, equity interest or other securities entitled to vote for election of directors or other managing authority.</li>
<br> <br>
<li><a class="namemargin" name="company"></a><strong>COMPANY</strong> (referred to as either "the Company", "We", "Us" or "Our" in this Agreement) refers to Have You Read Your Contract?.</li> <li><a class="namemargin" name="company"></a><strong>COMPANY</strong> (referred to as either "the Company", "We", "Us" or "Our" in this Agreement) refers to Parallel Colonialism.</li>
<br> <br>
@ -404,7 +316,7 @@
<br> <br>
<li><a class="namemargin" name="website"></a><strong>WEBSITE</strong> refers to Have You Read Your Contract?, accessible from www.haveyoureadyourcontract.com </li> <li><a class="namemargin" name="website"></a><strong>WEBSITE</strong> refers to Parallel Colonialism, accessible from www.haveyoureadyourcontract.com </li>
<br> <br>
@ -424,182 +336,52 @@
<br><br><br><br> <br><br><br><br>
<a class="namemargin" name="importantaspects"></a><h1>Important Aspects</h1>
<br>
<a class="namemargin" name="aspects1"></a><h2>As a contract aspect</h2><br> <a class="namemargin" name="contents" id="contents-location"></a><h1>Contents</h1><br>
<ul class="indent"> This platform presents two different types of legal documents. The left side of the archive presents a series of contemporary legal documents: Terms of Services such as FaceApp, Tiktok, PokemonGo, Snapchat, Netflix, Facebook, Instagram, Amazon and Sony. On the right side, it shows a group of historical legal documents: Colonial treaties and agreements such as the Peace Treaty of Tartu, Kiram-Bates Treaty, United KingdomKorea Treaty of 1883, Hong Kong Letters Patent 1843 and JapanKorea Agreement of 1905. By selecting one of each document, a parallel reading platform is enabled, in which you can comparatively label, highlight, and analyze a range of specific terms. This will help you to analyze on how these documents operate similar ways in colonialism.
<li>Lots of treaties were sneakily made contract in colonial era to be lucrative, to get profit out of their colony. Same for ToS or privacy policies in digital corporate society where the big companies are dominating the power structures via making a contract to deceive users.</li>
</ul>
<br> <br><br><br>
<a class="namemargin" name="aspects2"></a><h2>As a linguistic aspect</h2><br>
<a class="namemargin" name="ourservice"></a><h1>our service</h1><br>
<ul class="indent"> <ul class="indent">
<li>&#10551; is to provide a suggestive way of comparing reading application from neutral documents.</li>
<li><strong>Language as a colonial tool</strong>: Treaties in colonial times and Terms of Service in modern time both are to show a way to indoctrinate/manipulate the colonize subject by language.</li> <li>&#10551; is to contribute a platform of reading ToS. In doing so, it questions what it means to provide ToS in the digital corporate society.</li>
<li>&#10551; is to question the concept of digital colonialism by providing a tool to read languages of Terms of Service as a modern-colonial means to deceive users.</li>
<li><strong>Polarity of calming language</strong>: Using their comfort language become a colonial language. Comforting language for the company that are using highly polarized terms sometimes obfuscates or conceal users' labour to deceive them.</li> <li>&#10551; is to analyze ToS from major tech companies to investigate how particular terms are being used in the specific context of ToS. How does these platforms have modern-colonial aspects in ToS?</li>
<li>&#10551; is to examine what is modern-colonial languages by taking a closer look on terms within the realm of ToS and historical treaties. </li>
<li><strong>Language as a colonial waterway</strong>: Shiproute in colonial times are used to sail to exchange goods, extract sources, and import labours. Through Language as a colonial waterway, it became a medium by which to interface with the colonizer.</li>
<li><strong>Language as a colonial language</strong>:Using a language that you're porting into the colony in order to be able to extract the resources. (ex, Japanese forced Korean to speak Japanese) </li><br>
</ul> </ul>
</li>
<br><br> <br><br>
<a class="namemargin" name="contents" id="contents-location"></a><h1>Contents</h1><br>
This archive presents the following Terms of Services such as
<div id="button" class="button-tos" target="tosview"><b>FaceApp</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="faceapp.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>Tiktok</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="tiktok.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>PokemonGo</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="pokemongo.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>Snapchat</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="snapchat.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>Netflix</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="netflix.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>Facebook</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="facebook.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>Instagram</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="instagram.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>Amazon</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="amazon.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>Sony</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="sony.html"></iframe>
--> </div>
</div>
. We also provide some historical treaties made during one's colonial era, such as
<a class="namemargin" name="importantaspects"></a><h1>Important Aspects</h1>
<br>
<div id="t_button" class="button-ht" target="treatyview"><b>Peace Treaty of Tartu</b></div> <a class="namemargin" name="aspects1"></a><h2>As a contract aspect</h2><br>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<!-- <iframe id="treatyview" name="treatyview" src="estonia.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-ht" target="treatyview"><b>Kiram-Bates Treaty</b></div>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<!-- <iframe id="treatyview" name="treatyview" src="paris.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-ht" target="treatyview"><b>United KingdomKorea Treaty of 1883</b></div> <ul class="indent">
<div id="t_myModal" class="t_modal"> <li>Lots of treaties were sneakily made contract in colonial era to be lucrative, to get profit out of their colony. Same for ToS or privacy policies in digital corporate society where the big companies are dominating the power structures via making a contract to deceive users.</li>
<div class="t_modal-content"> </ul>
<span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="uk.html"></iframe>
</div>
</div>
,
<div id="button" class="button-ht" target="treatyview"><b>Hong Kong Letters Patent 1843</b></div> <br>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="hk.html"></iframe>
</div>
</div>
,
<div id="button" class="button-ht" target="treatyview"><b>JapanKorea Agreement of 1905</b></div> <a class="namemargin" name="aspects2"></a><h2>As a linguistic aspect</h2><br>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="korea.html"></iframe>
</div>
</div>
. These are a comparative reading application to interpret making connections on how the complex documents are operating similar ways in colonialism. <ul class="indent">
<li><strong>&#10551;Language as a colonial tool</strong>: Treaties in colonial times and Terms of Service in modern time both are to show a way to indoctrinate/manipulate the colonize subject by language.</li>
<li><strong>&#10551; Polarity of calming language</strong>: Using their comfort language become a colonial language. Comforting language for the company that are using highly polarized terms sometimes obfuscates or conceal users' labour to deceive them.</li>
<br><br><br> <li><strong>&#10551; Language as a colonial waterway</strong>: Shiproute in colonial times are used to sail to exchange goods, extract sources, and import labours. Through Language as a colonial waterway, it became a medium by which to interface with the colonizer.</li>
<li><strong>&#10551; Language as a colonial language</strong>:Using a language that you're porting into the colony in order to be able to extract the resources. (ex, Japanese forced Korean to speak Japanese) </li><br>
<a class="namemargin" name="ourservice"></a><h1>our service</h1><br>
<ul class="indent">
<li>is to provide a suggestive way of comparing reading application from neutral documents.</li>
<li>is to contribute a platform of reading ToS. In doing so, it questions what it means to provide ToS in the digital corporate society.</li>
<li>is to question the concept of digital colonialism by providing a tool to read languages of Terms of Service as a modern-colonial means to deceive users.</li>
<li>is to analyze ToS from major tech companies to investigate how particular terms are being used in the specific context of ToS. How does these platforms have modern-colonial aspects in ToS?</li>
<li>is to examine what is modern-colonial languages by taking a closer look on words within the realm of ToS. </li>
</ul> </ul>
</li>
<br><br> <br><br>
@ -619,31 +401,34 @@
<br> <br>
<li>TO: to</li> <div class="poslist">
<li>DT: Determiner</li> <li>&#10551; TO: to</li>
<li>IN: Preposition or subordinating conjunction</li> <li>&#10551; DT: Determiner</li>
<li>WDT: Wh-determiner</li> <li>&#10551; IN: Preposition or subordinating conjunction</li>
<li>WP: Wh-pronoun</li> <li>&#10551; WDT: Wh-determiner</li>
<li>MD: Modal</li> <li>&#10551; WP: Wh-pronoun</li>
<li>PRP: Personal pronoun</li> <li>&#10551; MD: Modal</li>
<li>CC: Coordinating conjunction</li> <li>&#10551; PRP: Personal pronoun</li>
<li>NN: Noun, singular or mass</li> <li>&#10551; CC: Coordinating conjunction</li>
<li>NNS: Noun, plural</li> <li>&#10551; NN: Noun, singular or mass</li>
<li>NNPS: Proper noun, singular</li> <li>&#10551; NNS: Noun, plural</li>
<li>NNPS: Proper noun, plural</li> <li>&#10551; NNPS: Proper noun, singular</li>
<li>VB: Verb, base form</li> <li>&#10551; NNPS: Proper noun, plural</li>
<li>VBD: Verb, past tens</li> <li>&#10551; VB: Verb, base form</li>
<li>VBG: Verb, gerund or present participle</li> <li>&#10551; VBD: Verb, past tens</li>
<li>VBN: Verb, past participle</li> <li>&#10551; VBG: Verb, gerund or present participle</li>
<li>VBP: Verb, non-3rd person singular present</li> <li>&#10551; VBN: Verb, past participle</li>
<li>VBZ: Verb, 3rd person singular present</li> <li>&#10551; VBP: Verb, non-3rd person singular present</li>
<li>VVD: verb, past tense</li> <li>&#10551; VBZ: Verb, 3rd person singular present</li>
<li>JJ: Adjective</li> <li>&#10551; VVD: verb, past tense</li>
<li>JJR: Adjective, comparative</li> <li>&#10551; JJ: Adjective</li>
<li>JJS: Adjective, superlative</li> <li>&#10551; JJR: Adjective, comparative</li>
<li>RB: Adverb</li> <li>&#10551; JJS: Adjective, superlative</li>
<li>RBR: Adverb, comparative</li> <li>&#10551; RB: Adverb</li>
<li>RBS: Adverb, superlative</li> <li>&#10551; RBR: Adverb, comparative</li>
<li>&#10551; RBS: Adverb, superlative</li>
</div>
</ul> </ul>
<br><br> <br><br>
@ -779,7 +564,7 @@
<!-- <div href="https://xpub.nl" target="_blank">xpub.nl </div> <!-- <div href="https://xpub.nl" target="_blank">xpub.nl </div>
--> -->
<p>If you have any questions about these Terms of service, You can contact us:</p> <p>If you have any questions about these Terms of service, You can contact us:</p>
<ul class="indent">By email: haveyoureadyourcontract@gmail.com</ul> <ul class="indent">By email: info@parallelcolonialism.com</ul>
</div> </div>
</div> </div>

@ -11,7 +11,7 @@
<script src="menu.js"></script> <script src="menu.js"></script>
<title>Have you read your contract?</title> <title>Parallel Colonialism — Reading between the lines of colonial and contemporary terms</title>
<style type="text/css"> <style type="text/css">
@ -38,17 +38,14 @@
</div> </div>
<div id="header">Have you read your working contract?</div> <div class="tof">
<div class="menu-title" ><b>Table of Contents</b><div class="icon">open &#9660;</div></div><br>
<div class="wrapper"> <div class="submenu" style="display: none;">
<div class="index-menu">
<div class="menu-title" ><b>Table of Contents</b></div><br>
<a class="index-menu-single" href="#start">1. Terms of Service</a><br> <a class="index-menu-single" href="#start">1. Terms of Service</a><br>
<a class="index-menu-single" href="#interpretationdefinition">2. INTERPRETATION & DEFINITIONS</a><br> <a class="index-menu-single" href="#interpretationdefinition">2. INTERPRETATION & DEFINITIONS</a><br>
<a class="index-menu-single" href="#interpretation">2-1. Interpretation</a><br> <a class="index-menu-single" href="#interpretation">2-1. Interpretation</a><br>
<a class="index-menu-single" href="#definitions">2-2. Definitions</a><div class="icon" >&#9660;</div><br> <a class="index-menu-single" href="#definitions">2-2. Definitions</a><div class="icon2" >&#9660;</div><br>
<div class="submenu" style="display: none;"> <div class="submenu2" style="display: none;">
<a class="index-menu-single" href="#hyryc">&#10551; HAVE YOU READ YOUR CONTRACT?</a><br> <a class="index-menu-single" href="#hyryc">&#10551; HAVE YOU READ YOUR CONTRACT?</a><br>
<a class="index-menu-single" href="#digitalcolonialsociety">&#10551; DIGITA COLONIAL SOCIETY</a><br> <a class="index-menu-single" href="#digitalcolonialsociety">&#10551; DIGITA COLONIAL SOCIETY</a><br>
<a class="index-menu-single" href="#digitallabour">&#10551; DIGTAL LABOUR</a><br> <a class="index-menu-single" href="#digitallabour">&#10551; DIGTAL LABOUR</a><br>
@ -84,87 +81,51 @@
<a class="index-menu-single" href="#licence">13. LICENSE</a><br> <a class="index-menu-single" href="#licence">13. LICENSE</a><br>
<a class="index-menu-single" href="#changes">14. CHANGES</a><br> <a class="index-menu-single" href="#changes">14. CHANGES</a><br>
<a class="index-menu-single" href="#contactus">15. CONTACT US</a><br> <a class="index-menu-single" href="#contactus">15. CONTACT US</a><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div> <div id="header"><b>Parallel Colonialism</b> — Reading between the lines of colonial and contemporary terms</div>
<div class="index-menu-right">
<div class="wrapper">
<div class="index-menu">
<div class="listbox-tos"> <div class="listbox-tos">
<div class="menu-title-right" ><b>List of Terms of Services</b></div><br> <div class="menu-title-right" ><b>List of Terms of Services</b></div><br>
<a class="menu-title-country" >Russia</a><br><br> <a class="menu-title-country" >Russia</a><br><br>
<a class="index-menu-single single-right" id="button-right">FaceApp</a> <a class="index-menu-single single-right" id="button-right" href="faceapp.html" target="tosview">FaceApp</a>
<div id="myModal" class="modal"> <div id="myModal" class="modal">
<div class="modal-content"> <div class="modal-content">
<span class="close">&times;</span> <span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="faceapp.html"></iframe> <iframe id="tosview" class="viewer" name="tosview"></iframe>
</div> </div>
</div> </div>
<br><br> <br><br>
<a class="menu-title-country" >China</a><br><br> <a class="menu-title-country" >China</a><br><br>
<a class="index-menu-single single-right" id="button-right">TikTok</a> <a class="index-menu-single single-right" id="button-right" href="tiktok.html" target="tosview">TikTok</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="tiktok.html"></iframe>
</div>
</div>
<br><br> <br><br>
<a class="menu-title-country" >U.S.A.</a><br><br> <a class="menu-title-country" >U.S.A.</a><br><br>
<a class="index-menu-single single-right" id="button-right">PokemonGo</a> <a class="index-menu-single single-right" id="button-right" href="pokemongo.html" target="tosview">PokemonGo</a><br>
<div id="myModal" class="modal"> <a class="index-menu-single single-right" id="button-right" href="snapchat.html" target="tosview">Snapchat</a><br>
<div class="modal-content"> <a class="index-menu-single single-right" id="button-right" href="netflix.html" target="tosview">Netflix</a><br>
<span class="close">&times;</span> <a class="index-menu-single single-right" id="button-right" href="facebook.html" target="tosview">facebook</a><br>
<iframe id="tosview" name="tosview" src="pokemongo.html"></iframe> <a class="index-menu-single single-right" id="button-right" href="instagram.html" target="tosview">instagram</a><br>
</div> <a class="index-menu-single single-right" id="button-right" href="amazon.html" target="tosview">Amazon</a>
</div>
<br>
<a class="index-menu-single single-right" id="button-right">Snapchat</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="snapchat.html"></iframe>
</div>
</div>
<br>
<a class="index-menu-single single-right" id="button-right">Netflix</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="netflix.html"></iframe>
</div>
</div>
<br>
<a class="index-menu-single single-right" id="button-right">facebook</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="facebook.html"></iframe>
</div>
</div>
<br>
<a class="index-menu-single single-right" id="button-right">instagram</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="instagram.html"></iframe>
</div>
</div>
<br>
<a class="index-menu-single single-right" id="button-right">Amazon</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="amazon.html"></iframe>
</div>
</div>
<br><br> <br><br>
@ -173,28 +134,28 @@
<br><br> <br><br>
<a class="menu-title-country" >Japan</a><br><br> <a class="menu-title-country" >Japan</a><br><br>
<a class="index-menu-single" id="button-right">Sony</a><br> <a class="index-menu-single" id="button-right" href="sony.html" target="tosview">Sony</a><br>
<div id="myModal" class="modal">
<div class="modal-content"> <br><br><br>
<span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="sony.html"></iframe>
</div>
</div> </div>
<br><br><br>
</div> </div>
<div class="index-menu-right">
<div class="listbox-treaty"> <div class="listbox-treaty">
<div class="menu-title-right" ><b>List of Colonial Treaties</b></div><br> <div class="menu-title-right" ><b>List of Colonial Treaties</b></div><br>
<a class="menu-title-country" >Russia</a><br><br> <a class="menu-title-country" >Russia</a><br><br>
<a class="index-menu-single single-right" id="t_button-right">Peace Treaty of Tartu</a> <a class="index-menu-single single-right" id="t_button-right" href="Peace-treaty-of-tartu.html" target="treatyview">Peace Treaty of Tartu</a>
<div id="t_myModal" class="t_modal"> <div id="t_myModal" class="t_modal">
<div class="t_modal-content"> <div class="t_modal-content">
<span class="t_close">&times;</span> <span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="estonia.html"></iframe> <iframe id="treatyview" class="viewer" name="treatyview"></iframe>
</div> </div>
</div> </div>
@ -205,49 +166,28 @@
<br><br> <br><br>
<a class="menu-title-country" >U.S.A.</a><br><br> <a class="menu-title-country" >U.S.A.</a><br><br>
<a class="index-menu-single single-right" id="t_button-right">Kiram-Bates Treaty</a> <a class="index-menu-single single-right" id="t_button-right" href="kiram-bates-treaty.html" target="treatyview">Kiram-Bates Treaty</a>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="paris.html"></iframe>
</div>
</div>
<br><br> <br><br>
<a class="menu-title-country" >U.K.</a><br><br> <a class="menu-title-country" >U.K.</a><br><br>
<a class="index-menu-single single-right" id="t_button-right">United KingdomKorea Treaty of 1883</a> <a class="index-menu-single single-right" id="t_button-right" href="united-kingdomkorea-treaty-of-1883.html" target="treatyview">United KingdomKorea Treaty of 1883</a><br>
<div id="t_myModal" class="t_modal"> <a class="index-menu-single single-right" id="t_button-right" href="hong-kong-letters-patent-1843.html" target="treatyview">Hong Kong Letters Patent 1843</a>
<div class="t_modal-content">
<span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="uk.html"></iframe>
</div>
</div>
<br>
<a class="index-menu-single single-right" id="t_button-right">Hong Kong Letters Patent 1843</a>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="hk.html"></iframe>
</div>
</div>
<br><br> <br><br>
<a class="menu-title-country" >Japan</a><br><br> <a class="menu-title-country" >Japan</a><br><br>
<a class="index-menu-single" id="t_button-right">JapanKorea Agreement of 1905</a> <a class="index-menu-single" id="t_button-right" href="japankorea-agreement-of-1905.html" target="treatyview">JapanKorea Agreement of 1905</a>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="korea.html"></iframe>
</div>
</div>
<br><br> <br><br>
</div> </div>
</div> </div>
@ -414,139 +354,9 @@
<a class="namemargin" name="contents" id="contents-location"></a><h1>Contents</h1><br> <a class="namemargin" name="contents" id="contents-location"></a><h1>Contents</h1><br>
This archive presents the following Terms of Services such as This archive presents two different types of legal documents. A black bar on right side of the website, it presents a series of modern legal documents: Terms of Services such as FaceApp, Tiktok, PokemonGo, Snapchat, Netflix, Facebook, Instagram, Amazon and Sony. On the right side of the screen, it shows a group of historial legal documents: Colonial treaties and agreements such as Peace Treaty of Tartu, Kiram-Bates Treaty, United KingdomKorea Treaty of 1883, Hong Kong Letters Patent 1843 and JapanKorea Agreement of 1905.<br>
<div id="button" class="button-tos" target="tosview"><b>FaceApp</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="faceapp.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>Tiktok</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="tiktok.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>PokemonGo</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="pokemongo.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>Snapchat</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="snapchat.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>Netflix</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="netflix.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>Facebook</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="facebook.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>Instagram</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="instagram.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>Amazon</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="amazon.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>Sony</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="sony.html"></iframe>
--> </div>
</div>
. We also provide some historical treaties made during one's colonial era, such as
<div id="t_button" class="button-ht" target="treatyview"><b>Peace Treaty of Tartu</b></div>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<!-- <iframe id="treatyview" name="treatyview" src="estonia.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-ht" target="treatyview"><b>Kiram-Bates Treaty</b></div>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<!-- <iframe id="treatyview" name="treatyview" src="paris.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-ht" target="treatyview"><b>United KingdomKorea Treaty of 1883</b></div>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="uk.html"></iframe>
</div>
</div>
,
<div id="button" class="button-ht" target="treatyview"><b>Hong Kong Letters Patent 1843</b></div>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="hk.html"></iframe>
</div>
</div>
,
<div id="button" class="button-ht" target="treatyview"><b>JapanKorea Agreement of 1905</b></div>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="korea.html"></iframe>
</div>
</div>
. These are a comparative reading application to interpret making connections on how the complex documents are operating similar ways in colonialism.
By selecting one of each documents, it will provide a parallel reading platform. This will help you to analyze on how these documents operates similar ways in colonialism.
<br><br><br> <br><br><br>
@ -567,42 +377,52 @@
<br><br> <br><br>
<a class="namemargin" name="dependencies"></a><h1>Dependencies</h1><br> <a class="namemargin" name="dependencies"></a><h1>Dependencies</h1><br>
<ul class="indent"> <ul class="indent">
<li><strong>Python</strong> is a computer language that is developed under an open source license, making it freely usable and distributable, even for commercial use. I used the Python library NLTK to create Part of Speech taggers in order to categorize words in the Terms of Service and the colonial treaties.</li> <li><strong>Python</strong> is a computer language that is developed under an open source license, making it freely usable and distributable, even for commercial use. I used the Python library NLTK to create Part of Speech taggers in order to categorize words in the Terms of Service and the colonial treaties.</li><br>
<li><strong>NLTK</strong> is a leading platform to work with human language data. It provided this project for classification, tokenization and tagging words.</li> <li><strong>NLTK</strong> is a leading platform to work with human language data. It provided this project for classification, tokenization and tagging words.</li><br>
<li><strong>POS Tagger</strong> is the process of classifying words into their parts of speech and labeling them accordingly in NLTK. It reads text in some language and assigns parts of speech to each word (and other token), such as noun, verb, adjective and more. An alphabetical list of part-of-speech tags used in this project are as followed:</li> <li><strong>POS Tagger</strong> is the process of classifying words into their parts of speech and labeling them accordingly in NLTK. It reads text in some language and assigns parts of speech to each word (and other token), such as noun, verb, adjective and more. An alphabetical list of part-of-speech tags used in this project are as followed:</li>
<br> <br>
<li>TO: to</li> <div class="poslist">
<li>DT: Determiner</li> <li>&#10551; TO: to</li>
<li>IN: Preposition or subordinating conjunction</li> <li>&#10551; DT: Determiner</li>
<li>WDT: Wh-determiner</li> <li>&#10551; IN: Preposition or subordinating conjunction</li>
<li>WP: Wh-pronoun</li> <li>&#10551; WDT: Wh-determiner</li>
<li>MD: Modal</li> <li>&#10551; WP: Wh-pronoun</li>
<li>PRP: Personal pronoun</li> <li>&#10551; MD: Modal</li>
<li>CC: Coordinating conjunction</li> <li>&#10551; PRP: Personal pronoun</li>
<li>NN: Noun, singular or mass</li> <li>&#10551; CC: Coordinating conjunction</li>
<li>NNS: Noun, plural</li> <li>&#10551; NN: Noun, singular or mass</li>
<li>NNPS: Proper noun, singular</li> <li>&#10551; NNS: Noun, plural</li>
<li>NNPS: Proper noun, plural</li> <li>&#10551; NNPS: Proper noun, singular</li>
<li>VB: Verb, base form</li> <li>&#10551; NNPS: Proper noun, plural</li>
<li>VBD: Verb, past tens</li> <li>&#10551; VB: Verb, base form</li>
<li>VBG: Verb, gerund or present participle</li> <li>&#10551; VBD: Verb, past tens</li>
<li>VBN: Verb, past participle</li> <li>&#10551; VBG: Verb, gerund or present participle</li>
<li>VBP: Verb, non-3rd person singular present</li> <li>&#10551; VBN: Verb, past participle</li>
<li>VBZ: Verb, 3rd person singular present</li> <li>&#10551; VBP: Verb, non-3rd person singular present</li>
<li>VVD: verb, past tense</li> <li>&#10551; VBZ: Verb, 3rd person singular present</li>
<li>JJ: Adjective</li> <li>&#10551; VVD: verb, past tense</li>
<li>JJR: Adjective, comparative</li> <li>&#10551; JJ: Adjective</li>
<li>JJS: Adjective, superlative</li> <li>&#10551; JJR: Adjective, comparative</li>
<li>RB: Adverb</li> <li>&#10551; JJS: Adjective, superlative</li>
<li>RBR: Adverb, comparative</li> <li>&#10551; RB: Adverb</li>
<li>RBS: Adverb, superlative</li> <li>&#10551; RBR: Adverb, comparative</li>
<li>&#10551; RBS: Adverb, superlative</li>
</div>
</ul> </ul>
<br><br> <br><br>

@ -5,13 +5,13 @@
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style2.css">
<script src="popup.js"></script> <script src="popup.js"></script>
<script src="modal.js"></script> <script src="modal.js"></script>
<script src="menu.js"></script> <script src="menu.js"></script>
<title>Have you read your contract?</title> <title>Parallel Colonialism — Reading between the lines of colonial and contemporary terms</title>
<style type="text/css"> <style type="text/css">
@ -38,11 +38,7 @@
</div> </div>
<div id="header">Have you read your working contract?</div> <div class="tof">
<div class="wrapper">
<div class="index-menu">
<div class="menu-title" ><b>Table of Contents</b><div class="icon">open &#9660;</div></div><br> <div class="menu-title" ><b>Table of Contents</b><div class="icon">open &#9660;</div></div><br>
<div class="submenu" style="display: none;"> <div class="submenu" style="display: none;">
<a class="index-menu-single" href="#start">1. Terms of Service</a><br> <a class="index-menu-single" href="#start">1. Terms of Service</a><br>
@ -85,90 +81,65 @@
<a class="index-menu-single" href="#licence">13. LICENSE</a><br> <a class="index-menu-single" href="#licence">13. LICENSE</a><br>
<a class="index-menu-single" href="#changes">14. CHANGES</a><br> <a class="index-menu-single" href="#changes">14. CHANGES</a><br>
<a class="index-menu-single" href="#contactus">15. CONTACT US</a><br> <a class="index-menu-single" href="#contactus">15. CONTACT US</a><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div> </div>
<div id="header"><b>Parallel Colonialism</b> — Reading between the lines of colonial and contemporary terms</div>
<div class="wrapper">
<div id="columngrid">
<div id="columngrid1">
<div id="columngrid1-1"></div>
<div id="columngrid1-2"></div>
<div id="columngrid1-3"></div>
</div>
<div id="columngrid2">
<div id="columngrid2-1"></div>
<div id="columngrid2-2"></div>
<div id="columngrid2-3"></div>
</div>
</div> </div>
<div class="index-menu-right"> <div class="index-menu">
<div class="listbox-tos"> <div class="listbox-tos">
<div class="menu-title-right" ><b>List of Terms of Services</b></div><br> <div class="menu-title-right" ><b>List of Terms of Services</b></div><br>
<a class="menu-title-country" >Russia</a><br><br> <a class="menu-title-country" >Russia</a><br><br>
<a class="index-menu-single single-right" id="button-right">FaceApp</a> <a class="index-menu-single single-right" id="button-right" href="faceapp.html" target="tosview">FaceApp</a>
<div id="myModal" class="modal"> <div id="myModal" class="modal">
<div class="modal-content"> <div class="modal-content">
<span class="close">&times;</span> <span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="faceapp.html"></iframe> <iframe id="tosview" class="viewer" name="tosview"></iframe>
</div> </div>
</div> </div>
<br><br> <br><br>
<a class="menu-title-country" >China</a><br><br> <a class="menu-title-country" >China</a><br><br>
<a class="index-menu-single single-right" id="button-right">TikTok</a> <a class="index-menu-single single-right" id="button-right" href="tiktok.html" target="tosview">TikTok</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="tiktok.html"></iframe>
</div>
</div>
<br><br> <br><br>
<a class="menu-title-country" >U.S.A.</a><br><br> <a class="menu-title-country" >U.S.A.</a><br><br>
<a class="index-menu-single single-right" id="button-right">PokemonGo</a> <a class="index-menu-single single-right" id="button-right" href="pokemongo.html" target="tosview">PokemonGo</a><br>
<div id="myModal" class="modal"> <a class="index-menu-single single-right" id="button-right" href="snapchat.html" target="tosview">Snapchat</a><br>
<div class="modal-content"> <a class="index-menu-single single-right" id="button-right" href="netflix.html" target="tosview">Netflix</a><br>
<span class="close">&times;</span> <a class="index-menu-single single-right" id="button-right" href="facebook.html" target="tosview">facebook</a><br>
<iframe id="tosview" name="tosview" src="pokemongo.html"></iframe> <a class="index-menu-single single-right" id="button-right" href="instagram.html" target="tosview">instagram</a><br>
</div> <a class="index-menu-single single-right" id="button-right" href="amazon.html" target="tosview">Amazon</a>
</div>
<br>
<a class="index-menu-single single-right" id="button-right">Snapchat</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="snapchat.html"></iframe>
</div>
</div>
<br>
<a class="index-menu-single single-right" id="button-right">Netflix</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="netflix.html"></iframe>
</div>
</div>
<br>
<a class="index-menu-single single-right" id="button-right">facebook</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="facebook.html"></iframe>
</div>
</div>
<br>
<a class="index-menu-single single-right" id="button-right">instagram</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="instagram.html"></iframe>
</div>
</div>
<br>
<a class="index-menu-single single-right" id="button-right">Amazon</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="amazon.html"></iframe>
</div>
</div>
<br><br> <br><br>
@ -177,14 +148,7 @@
<br><br> <br><br>
<a class="menu-title-country" >Japan</a><br><br> <a class="menu-title-country" >Japan</a><br><br>
<a class="index-menu-single" id="button-right">Sony</a><br> <a class="index-menu-single" id="button-right" href="sony.html" target="tosview">Sony</a><br>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<iframe id="tosview" name="tosview" src="sony.html"></iframe>
</div>
</div>
<br><br><br> <br><br><br>
@ -192,18 +156,20 @@
</div>
<div class="index-menu-right">
<div class="listbox-treaty"> <div class="listbox-treaty">
<div class="menu-title-right" ><b>List of Colonial Treaties</b></div><br> <div class="menu-title-right" ><b>List of Colonial Treaties</b></div><br>
<a class="menu-title-country" >Russia</a><br><br> <a class="menu-title-country" >Russia</a><br><br>
<a class="index-menu-single single-right" id="t_button-right">Peace Treaty of Tartu</a> <a class="index-menu-single single-right" id="t_button-right" href="Peace-treaty-of-tartu.html" target="treatyview">Peace Treaty of Tartu</a>
<div id="t_myModal" class="t_modal"> <div id="t_myModal" class="t_modal">
<div class="t_modal-content"> <div class="t_modal-content">
<span class="t_close">&times;</span> <span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="estonia.html"></iframe> <iframe id="treatyview" class="viewer" name="treatyview"></iframe>
</div> </div>
</div> </div>
@ -214,45 +180,20 @@
<br><br> <br><br>
<a class="menu-title-country" >U.S.A.</a><br><br> <a class="menu-title-country" >U.S.A.</a><br><br>
<a class="index-menu-single single-right" id="t_button-right">Kiram-Bates Treaty</a> <a class="index-menu-single single-right" id="t_button-right" href="kiram-bates-treaty.html" target="treatyview">Kiram-Bates Treaty</a>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="paris.html"></iframe>
</div>
</div>
<br><br> <br><br>
<a class="menu-title-country" >U.K.</a><br><br> <a class="menu-title-country" >U.K.</a><br><br>
<a class="index-menu-single single-right" id="t_button-right">United KingdomKorea Treaty of 1883</a> <a class="index-menu-single single-right" id="t_button-right" href="united-kingdomkorea-treaty-of-1883.html" target="treatyview">United KingdomKorea Treaty of 1883</a><br>
<div id="t_myModal" class="t_modal"> <a class="index-menu-single single-right" id="t_button-right" href="hong-kong-letters-patent-1843.html" target="treatyview">Hong Kong Letters Patent 1843</a>
<div class="t_modal-content">
<span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="uk.html"></iframe>
</div>
</div>
<br>
<a class="index-menu-single single-right" id="t_button-right">Hong Kong Letters Patent 1843</a>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="hk.html"></iframe>
</div>
</div>
<br><br> <br><br>
<a class="menu-title-country" >Japan</a><br><br> <a class="menu-title-country" >Japan</a><br><br>
<a class="index-menu-single" id="t_button-right">JapanKorea Agreement of 1905</a> <a class="index-menu-single" id="t_button-right" href="japankorea-agreement-of-1905.html" target="treatyview">JapanKorea Agreement of 1905</a>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="korea.html"></iframe>
</div>
</div>
<br><br> <br><br>
</div> </div>
@ -266,8 +207,7 @@
<div class="tos"> <div class="tos">
<br><br> <br>
<h1><a class="namemargin" name="start"></a>Terms of Service</h1><br> <h1><a class="namemargin" name="start"></a>Terms of Service</h1><br>
<p>Last updated: April 28, 2020</p> <p>Last updated: April 28, 2020</p>
<p>Please read these terms of service carefully before using Our service.</p><br><br> <p>Please read these terms of service carefully before using Our service.</p><br><br>
@ -427,139 +367,9 @@
<a class="namemargin" name="contents" id="contents-location"></a><h1>Contents</h1><br> <a class="namemargin" name="contents" id="contents-location"></a><h1>Contents</h1><br>
This archive presents the following Terms of Services such as This archive presents two different types of legal documents. The left black bar on the website presents a series of modern legal documents: Terms of Services such as FaceApp, Tiktok, PokemonGo, Snapchat, Netflix, Facebook, Instagram, Amazon and Sony. On the right side, it shows a group of historial legal documents: Colonial treaties and agreements such as Peace Treaty of Tartu, Kiram-Bates Treaty, United KingdomKorea Treaty of 1883, Hong Kong Letters Patent 1843 and JapanKorea Agreement of 1905.<br>
<div id="button" class="button-tos" target="tosview"><b>FaceApp</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="faceapp.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>Tiktok</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="tiktok.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>PokemonGo</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="pokemongo.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>Snapchat</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="snapchat.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>Netflix</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="netflix.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>Facebook</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="facebook.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>Instagram</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="instagram.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>Amazon</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="amazon.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-tos" target="tosview"><b>Sony</b></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<!-- <iframe id="tosview" name="tosview" src="sony.html"></iframe>
--> </div>
</div>
. We also provide some historical treaties made during one's colonial era, such as
<div id="t_button" class="button-ht" target="treatyview"><b>Peace Treaty of Tartu</b></div>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<!-- <iframe id="treatyview" name="treatyview" src="estonia.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-ht" target="treatyview"><b>Kiram-Bates Treaty</b></div>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<!-- <iframe id="treatyview" name="treatyview" src="paris.html"></iframe>
--> </div>
</div>
,
<div id="button" class="button-ht" target="treatyview"><b>United KingdomKorea Treaty of 1883</b></div>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="uk.html"></iframe>
</div>
</div>
,
<div id="button" class="button-ht" target="treatyview"><b>Hong Kong Letters Patent 1843</b></div>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="hk.html"></iframe>
</div>
</div>
,
<div id="button" class="button-ht" target="treatyview"><b>JapanKorea Agreement of 1905</b></div>
<div id="t_myModal" class="t_modal">
<div class="t_modal-content">
<span class="t_close">&times;</span>
<iframe id="treatyview" name="treatyview" src="korea.html"></iframe>
</div>
</div>
. These are a comparative reading application to interpret making connections on how the complex documents are operating similar ways in colonialism.
By selecting one of each documents, it will provide a parallel reading platform. This will help you to analyze on how these documents operates similar ways in colonialism.
<br><br><br> <br><br><br>
@ -580,42 +390,52 @@
<br><br> <br><br>
<a class="namemargin" name="dependencies"></a><h1>Dependencies</h1><br> <a class="namemargin" name="dependencies"></a><h1>Dependencies</h1><br>
<ul class="indent"> <ul class="indent">
<li><strong>Python</strong> is a computer language that is developed under an open source license, making it freely usable and distributable, even for commercial use. I used the Python library NLTK to create Part of Speech taggers in order to categorize words in the Terms of Service and the colonial treaties.</li> <li><strong>Python</strong> is a computer language that is developed under an open source license, making it freely usable and distributable, even for commercial use. I used the Python library NLTK to create Part of Speech taggers in order to categorize words in the Terms of Service and the colonial treaties.</li><br>
<li><strong>NLTK</strong> is a leading platform to work with human language data. It provided this project for classification, tokenization and tagging words.</li> <li><strong>NLTK</strong> is a leading platform to work with human language data. It provided this project for classification, tokenization and tagging words.</li><br>
<li><strong>POS Tagger</strong> is the process of classifying words into their parts of speech and labeling them accordingly in NLTK. It reads text in some language and assigns parts of speech to each word (and other token), such as noun, verb, adjective and more. An alphabetical list of part-of-speech tags used in this project are as followed:</li> <li><strong>POS Tagger</strong> is the process of classifying words into their parts of speech and labeling them accordingly in NLTK. It reads text in some language and assigns parts of speech to each word (and other token), such as noun, verb, adjective and more. An alphabetical list of part-of-speech tags used in this project are as followed:</li>
<br> <br>
<li>TO: to</li> <div class="poslist">
<li>DT: Determiner</li> <li>&#10551; TO: to</li>
<li>IN: Preposition or subordinating conjunction</li> <li>&#10551; DT: Determiner</li>
<li>WDT: Wh-determiner</li> <li>&#10551; IN: Preposition or subordinating conjunction</li>
<li>WP: Wh-pronoun</li> <li>&#10551; WDT: Wh-determiner</li>
<li>MD: Modal</li> <li>&#10551; WP: Wh-pronoun</li>
<li>PRP: Personal pronoun</li> <li>&#10551; MD: Modal</li>
<li>CC: Coordinating conjunction</li> <li>&#10551; PRP: Personal pronoun</li>
<li>NN: Noun, singular or mass</li> <li>&#10551; CC: Coordinating conjunction</li>
<li>NNS: Noun, plural</li> <li>&#10551; NN: Noun, singular or mass</li>
<li>NNPS: Proper noun, singular</li> <li>&#10551; NNS: Noun, plural</li>
<li>NNPS: Proper noun, plural</li> <li>&#10551; NNPS: Proper noun, singular</li>
<li>VB: Verb, base form</li> <li>&#10551; NNPS: Proper noun, plural</li>
<li>VBD: Verb, past tens</li> <li>&#10551; VB: Verb, base form</li>
<li>VBG: Verb, gerund or present participle</li> <li>&#10551; VBD: Verb, past tens</li>
<li>VBN: Verb, past participle</li> <li>&#10551; VBG: Verb, gerund or present participle</li>
<li>VBP: Verb, non-3rd person singular present</li> <li>&#10551; VBN: Verb, past participle</li>
<li>VBZ: Verb, 3rd person singular present</li> <li>&#10551; VBP: Verb, non-3rd person singular present</li>
<li>VVD: verb, past tense</li> <li>&#10551; VBZ: Verb, 3rd person singular present</li>
<li>JJ: Adjective</li> <li>&#10551; VVD: verb, past tense</li>
<li>JJR: Adjective, comparative</li> <li>&#10551; JJ: Adjective</li>
<li>JJS: Adjective, superlative</li> <li>&#10551; JJR: Adjective, comparative</li>
<li>RB: Adverb</li> <li>&#10551; JJS: Adjective, superlative</li>
<li>RBR: Adverb, comparative</li> <li>&#10551; RB: Adverb</li>
<li>RBS: Adverb, superlative</li> <li>&#10551; RBR: Adverb, comparative</li>
<li>&#10551; RBS: Adverb, superlative</li>
</div>
</ul> </ul>
<br><br> <br><br>

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="style3.css">
<title></title>
</head>
<body>
<div id="columngrid">
<div id="columngrid1">
<div id="columngrid1-1"></div>
<div id="columngrid1-2"></div>
<div id="columngrid1-3"></div>
</div>
<div id="columngrid2">
<div id="columngrid2-1"></div>
<div id="columngrid2-2"></div>
<div id="columngrid2-3"></div>
</div>
</div>
</body>
</html>

@ -0,0 +1,106 @@
# from __future__ import division
from nltk import sent_tokenize, word_tokenize, pos_tag
from nltk.probability import FreqDist
from nltk.corpus import stopwords
import nltk
import codecs
import base64
nltk.download('stopwords')
with open('treaty_file/japan-korea.txt', 'r') as russia_file:
russia_text = russia_file.read()
russia_text_list = russia_text.split("\n\n")
t_default_stopwords = set(stopwords.words('english'))
t_custom_stopwords = set(codecs.open('t_stopwords.txt', 'r').read().splitlines())
t_all_stopwords = t_default_stopwords | t_custom_stopwords
print('''<!DOCTYPE>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="estonia.css">
<link rel="stylesheet" href="legend.css">
<link rel="stylesheet" href="highlight.css">
<script src="highlight.js"></script>
<meta charset="utf-8">
<title></title>
</head>
<body>''')
#t_wrapper (second wrapper)
print('<div class="t_wrapper"><div class="t_intro">')
img_url = base64.b64encode(open('img/japankorea.jpg', 'rb').read()).decode('utf-8')
t_image = '<div class="t_img" style="position: fixed; background-color: gainsboro;">Japan-Korea Agreement of 1905</div><br><img class="t_image" src="data:img/japankorea.jpg;base64,{}">'.format(img_url)
print(t_image)
#t_info box
print('<div class ="t_info">')
t_infotext = [('Name of Treaty', 'japankorea-agreement-of-1905'), ('Country of Origin', 'Japan'), ('Signed', ' August, 1905'), ('Location', 'Seoul, Korea'), ('Word Counts', '547'), ('Type', 'Unequal treaty'), ('Original Source', '<a href="https://en.wikipedia.org/wiki/JapanKorea_Agreement_of_April_1905" target="_blank">link</a>'), ('Description', 'The JapanKorea Treaty of 1905, also known as the Eulsa Unwilling Treaty, was made between the Empire of Japan and the Korean Empire. The treaty deprived Korea of its diplomatic sovereignty and made Korea a protectorate of Imperial Japan.')]
for t_title, t_info in t_infotext:
print('<div class="t_info-{0}"><div class="info_t_title" ><b>{0}</b></div><div class="t_info_content">{1}</div></div><br>'.format(t_title, t_info))
print('</div></div>')
print('''
<div class="legend">
<li class="legendhide eachlegend">stopwords</li>
<li class="legendadjective eachlegend">adjective</li>
<li class="legendverb eachlegend">verb</li>
<li class="legendnoun eachlegend">noun</li>
<li class="legendpropernoun eachlegend">proper noun</li>
<li class="legendadverb eachlegend">adverb</li>
<li class="legendpossesivepronoun eachlegend">possesive pronoun</li>
<li class="legendpresentparticiple eachlegend">present participle</li>
<li class="legendadjectivesuperlative eachlegend">adjective superlative</li>
<li class="legendadverb-comparative-superative eachlegend">adverb comparative + superative</li>
</div>
''')
#Treaty text
print('<div class="t_paragraph">')
t_tokenized_all = []
for t_paragraph in russia_text_list:
t_tokenized = word_tokenize(t_paragraph)
t_tokenized_all += t_tokenized # add to the tokenized_all
t_tagged = pos_tag(t_tokenized)
print('<p>')
for t_word, t_pos in t_tagged:
print('<span class="{0} {1} eachwords">{2}</span>'.format(t_pos.replace('PRP$', 'PRPS').replace('.', 'dot').replace(',', 'comma').replace('(', 'marks').replace(')', 'marks').replace(':', 'marks').replace(';', 'marks'), t_word.replace('', 'apostrophe').replace('.', 'dot').replace(',', 'comma').replace('(', 'marks').replace(')', 'marks').replace(':', 'marks').replace(';', 'marks').lower(), t_word))
print('</p>')
print('</div>')
#treaty colonial top words list
print('<div class="t_top_words"><div class="t_top_words_title"><b>Frequent words</b></div>')
t_tokens_without_stopwords = nltk.FreqDist(words.lower() for words in t_tokenized_all if words.lower() not in t_custom_stopwords)
t_frequency_word = FreqDist(t_tokens_without_stopwords)
t_top_words = t_tokens_without_stopwords.most_common(20)
for t_chosen_words, t_frequency in t_top_words:
print('<div class="t_chosen_words" >&nbsp;{}&nbsp;({}) </div>'.format(t_chosen_words, t_frequency))
print('</div></div></div>')
# at the end of wrapper
print('</div>')
print('</div>')
print('''</body></html>''')

File diff suppressed because one or more lines are too long

@ -37,13 +37,14 @@
<li class="legendpresentparticiple eachlegend">present participle</li> <li class="legendpresentparticiple eachlegend">present participle</li>
<li class="legendadjectivesuperlative eachlegend">adjective superlative</li> <li class="legendadjectivesuperlative eachlegend">adjective superlative</li>
<li class="legendadverb-comparative-superative eachlegend">adverb comparative + superative</li> <li class="legendadverb-comparative-superative eachlegend">adverb comparative + superative</li>
<li class="legendcurrencysign eachlegend">currencysign</li> <li class="legendcurrencysign eachlegend">currencyddddsign</li>
</div> </div>
<br><br><br><br>
<div class="t_paragraph"> <div class="t_paragraph">
<p> <p>
<span class="JJ between eachwords">Between</span> <span class="JJ between eachwords">Between</span>
<span class="NNP brigadier-general eachwords">Brigadier-General</span> <span class="NNP brigadier-general eachwords">Brigadier-General</span>

@ -3,13 +3,12 @@ $(function() {
e.preventDefault(); e.preventDefault();
$('.submenu').slideToggle(); $('.submenu').slideToggle();
}); });
});
$(function() {
$('.icon2').on('click',function(e) { $('.icon2').on('click',function(e) {
e.preventDefault(); e.preventDefault();
$('.submenu2').slideToggle(); $('.submenu2').slideToggle();
}); });
}); });

@ -8,19 +8,21 @@ $(document).ready(function(){
var text_tos = $(this).text().toLowerCase() + '.html'; var text_tos = $(this).text().toLowerCase() + '.html';
console.log(text_tos); console.log(text_tos);
$('iframe#tosview').attr('src', text_tos);
$('#myModal').css('display', 'block'); $('#myModal').css('display', 'block');
$('html, body').css('position', 'fixed'); $('html, body').css('position', 'fixed');
$('.tof').addClass('tofhide');
}); });
$('.close').click(function() { $('.close').click(function() {
$('#myModal').css('display', 'none'); $('#myModal').css('display', 'none');
$('html, body').css("position", "relative"); $('html, body').css("position", "relative");
$('.tof').removeClass('tofhide')
window.location.replace("index.html#contents"); window.location.replace("index.html#contents");
return false; return false;
}); });
@ -31,7 +33,6 @@ $(document).ready(function(){
var text_treaty = $(this).text().toLowerCase().replace(/\s/g, "-") + '.html'; var text_treaty = $(this).text().toLowerCase().replace(/\s/g, "-") + '.html';
console.log(text_treaty); console.log(text_treaty);
$('iframe#treatyview').attr('src', text_treaty);
$('#t_myModal').css('display', 'block'); $('#t_myModal').css('display', 'block');
$('html, body').css('position', 'fixed'); $('html, body').css('position', 'fixed');

@ -280,7 +280,7 @@
<span class="NN village eachwords">village</span> <span class="NN village eachwords">village</span>
<span class="NNP keikino eachwords">Keikino</span> <span class="NNP keikino eachwords">Keikino</span>
<span class="comma comma eachwords">,</span> <span class="comma comma eachwords">,</span>
<span class="PDT half eachwords">half</span> <span class="comma half eachwords">half</span>
<span class="DT a eachwords">a</span> <span class="DT a eachwords">a</span>
<span class="JJ verst eachwords">verst</span> <span class="JJ verst eachwords">verst</span>
<span class="NN west eachwords">west</span> <span class="NN west eachwords">west</span>
@ -602,8 +602,7 @@
<span class="NNS signs eachwords">signs</span> <span class="NNS signs eachwords">signs</span>
<span class="MD will eachwords">will</span> <span class="MD will eachwords">will</span>
<span class="VB be eachwords">be</span> <span class="VB be eachwords">be</span>
<span class="VBN carried eachwords">carried</span> <span class="VBN carried eachwords">carried out</span>
<span class="RP out eachwords">out</span>
<span class="IN under eachwords">under</span> <span class="IN under eachwords">under</span>
<span class="DT the eachwords">the</span> <span class="DT the eachwords">the</span>
<span class="NN direction eachwords">direction</span> <span class="NN direction eachwords">direction</span>
@ -1011,7 +1010,7 @@
<span class="NN father eachwords">father</span> <span class="NN father eachwords">father</span>
<span class="comma comma eachwords">,</span> <span class="comma comma eachwords">,</span>
<span class="IN unless eachwords">unless</span> <span class="IN unless eachwords">unless</span>
<span class="EX there eachwords">there</span> <span class="comma there eachwords">there</span>
<span class="VBZ exists eachwords">exists</span> <span class="VBZ exists eachwords">exists</span>
<span class="IN between eachwords">between</span> <span class="IN between eachwords">between</span>
<span class="NN man eachwords">man</span> <span class="NN man eachwords">man</span>
@ -1133,7 +1132,7 @@
<span class="RB personally eachwords">personally</span> <span class="RB personally eachwords">personally</span>
<span class="JJ registered eachwords">registered</span> <span class="JJ registered eachwords">registered</span>
<span class="CC or eachwords">or</span> <span class="CC or eachwords">or</span>
<span class="WP$ whose eachwords">whose</span> <span class="comma whose eachwords">whose</span>
<span class="NNS parents eachwords">parents</span> <span class="NNS parents eachwords">parents</span>
<span class="MD would eachwords">would</span> <span class="MD would eachwords">would</span>
<span class="VB have eachwords">have</span> <span class="VB have eachwords">have</span>
@ -1244,7 +1243,7 @@
<span class="JJ international eachwords">international</span> <span class="JJ international eachwords">international</span>
<span class="NNS acts eachwords">acts</span> <span class="NNS acts eachwords">acts</span>
<span class="VBG relating eachwords">relating</span> <span class="VBG relating eachwords">relating</span>
<span class="NN thereto eachwords">thereto</span> <span class="comma thereto eachwords">thereto</span>
<span class="marks marks eachwords">;</span> <span class="marks marks eachwords">;</span>
<span class="MD should eachwords">should</span> <span class="MD should eachwords">should</span>
<span class="DT the eachwords">the</span> <span class="DT the eachwords">the</span>
@ -1266,7 +1265,7 @@
<span class="comma comma eachwords">,</span> <span class="comma comma eachwords">,</span>
<span class="CC or eachwords">or</span> <span class="CC or eachwords">or</span>
<span class="NN part eachwords">part</span> <span class="NN part eachwords">part</span>
<span class="NN thereof eachwords">thereof</span> <span class="comma thereof eachwords">thereof</span>
<span class="comma comma eachwords">,</span> <span class="comma comma eachwords">,</span>
<span class="IN into eachwords">into</span> <span class="IN into eachwords">into</span>
<span class="JJ such eachwords">such</span> <span class="JJ such eachwords">such</span>
@ -1335,8 +1334,8 @@
<span class="WDT which eachwords">which</span> <span class="WDT which eachwords">which</span>
<span class="VBP are eachwords">are</span> <span class="VBP are eachwords">are</span>
<span class="RB not eachwords">not</span> <span class="RB not eachwords">not</span>
<span class="FW de eachwords">de</span> <span class="NN de eachwords">de</span>
<span class="FW facto eachwords">facto</span> <span class="NN facto eachwords">facto</span>
<span class="IN in eachwords">in</span> <span class="IN in eachwords">in</span>
<span class="DT a eachwords">a</span> <span class="DT a eachwords">a</span>
<span class="NN state eachwords">state</span> <span class="NN state eachwords">state</span>
@ -1483,7 +1482,7 @@
<span class="VBD armoured eachwords">armoured</span> <span class="VBD armoured eachwords">armoured</span>
<span class="NNS trains eachwords">trains</span> <span class="NNS trains eachwords">trains</span>
<span class="comma comma eachwords">,</span> <span class="comma comma eachwords">,</span>
<span class="FW etcdot eachwords">etc.</span> <span class="comma etcdot eachwords">etc.</span>
<span class="comma comma eachwords">,</span> <span class="comma comma eachwords">,</span>
<span class="VBG belonging eachwords">belonging</span> <span class="VBG belonging eachwords">belonging</span>
<span class="TO to eachwords">to</span> <span class="TO to eachwords">to</span>
@ -1505,8 +1504,7 @@
<span class="NN material eachwords">material</span> <span class="NN material eachwords">material</span>
<span class="IN as eachwords">as</span> <span class="IN as eachwords">as</span>
<span class="VBD was eachwords">was</span> <span class="VBD was eachwords">was</span>
<span class="VBN handed eachwords">handed</span> <span class="VBN handed eachwords">handed over</span>
<span class="RP over eachwords">over</span>
<span class="TO to eachwords">to</span> <span class="TO to eachwords">to</span>
<span class="DT these eachwords">these</span> <span class="DT these eachwords">these</span>
<span class="NNS forces eachwords">forces</span> <span class="NNS forces eachwords">forces</span>
@ -1991,7 +1989,7 @@
<span class="NNP contracting eachwords">Contracting</span> <span class="NNP contracting eachwords">Contracting</span>
<span class="NNP party eachwords">Party</span> <span class="NNP party eachwords">Party</span>
<span class="TO to eachwords">to</span> <span class="TO to eachwords">to</span>
<span class="WP$ whose eachwords">whose</span> <span class="comma whose eachwords">whose</span>
<span class="NN territory eachwords">territory</span> <span class="NN territory eachwords">territory</span>
<span class="DT the eachwords">the</span> <span class="DT the eachwords">the</span>
<span class="NNS ports eachwords">ports</span> <span class="NNS ports eachwords">ports</span>
@ -2052,7 +2050,7 @@
<span class="CC and eachwords">and</span> <span class="CC and eachwords">and</span>
<span class="NNS groups eachwords">groups</span> <span class="NNS groups eachwords">groups</span>
<span class="comma comma eachwords">,</span> <span class="comma comma eachwords">,</span>
<span class="WP$ whose eachwords">whose</span> <span class="comma whose eachwords">whose</span>
<span class="NN object eachwords">object</span> <span class="NN object eachwords">object</span>
<span class="PRP it eachwords">it</span> <span class="PRP it eachwords">it</span>
<span class="VBZ is eachwords">is</span> <span class="VBZ is eachwords">is</span>
@ -2190,7 +2188,7 @@
<span class="TO to eachwords">to</span> <span class="TO to eachwords">to</span>
<span class="VB be eachwords">be</span> <span class="VB be eachwords">be</span>
<span class="VBN established eachwords">established</span> <span class="VBN established eachwords">established</span>
<span class="WP$ whose eachwords">whose</span> <span class="comma whose eachwords">whose</span>
<span class="NN composition eachwords">composition</span> <span class="NN composition eachwords">composition</span>
<span class="comma comma eachwords">,</span> <span class="comma comma eachwords">,</span>
<span class="NNS rights eachwords">rights</span> <span class="NNS rights eachwords">rights</span>

@ -36,6 +36,11 @@
/* navigation locating right position*/ /* navigation locating right position*/
.namemargin:before { .namemargin:before {
display: block; display: block;
@ -45,6 +50,15 @@
} }
.indent > li {
list-style-type: none;
}
.poslist {
column-count: 2;
list-style-type: none;
}
.tof { .tof {
width: calc(17vw); width: calc(17vw);
padding: 5px; padding: 5px;
@ -57,6 +71,12 @@
} }
.tofhide {
visibility: hidden !important;
}
/* not scrolling while modal is opened */ /* not scrolling while modal is opened */
#overlay_modal { #overlay_modal {

@ -45,7 +45,25 @@
} }
.indent > li {
list-style-type: none;
}
.poslist {
column-count: 2;
list-style-type: none;
}
.tof {
width: calc(17vw);
padding: 5px;
top: 10px;
left: 15px;
z-index: 997;
background-color: black;
position: fixed;
font-size: 7pt;
}
/* not scrolling while modal is opened */ /* not scrolling while modal is opened */
@ -188,6 +206,7 @@
} }
.icon2 { .icon2 {
color: white;
float: right; float: right;
cursor: pointer; cursor: pointer;
} }
@ -210,12 +229,16 @@
background-color: white; background-color: white;
width: 55%; width: 55%;
border: 0.5px solid black; border: 0.5px solid black;
/* outline: 40px dotted black; padding: 40px;
*/ padding: 40px;
margin: 0 auto; margin: 0 auto;
} }
.index-menu { .index-menu {
width: 17%; width: 17%;
top: 50px; top: 50px;
@ -236,10 +259,25 @@
font-family: Belgika-40th; font-family: Belgika-40th;
color: white; color: white;
cursor: pointer; cursor: pointer;
padding: 3px;
} }
.menu-title:hover {
font-family: Belgika-40th;
background-color: white;
color: red;
cursor: pointer;
padding: 3px;
}
.menu-title-right { .menu-title-right {
font-family: Belgika-40th; font-family: Belgika-40th;
color: white; color: white;

@ -0,0 +1,696 @@
@font-face {
font-family: "Belgika";
src: url("http://bohyewoo.com/webfonts/belgika/belgika-40th-webfont.eot");
src: url("http://bohyewoo.com/webfonts/belgika/belgika-40th-webfont.woff") format("woff"),
url("http://bohyewoo.com/webfonts/belgika/belgika-40th-webfont.svg#filename") format("svg");
}
@font-face {
font-family: "Belgika";
src: url("http://bohyewoo.com/webfonts/belgika/belgika-16th-webfont.eot");
src: url("http://bohyewoo.com/webfonts/belgika/belgika-16th-webfont.woff") format("woff"),
url("http://bohyewoo.com/webfonts/belgika/belgika-16th-webfont.svg#filename") format("svg");
}
@font-face {
font-family: "Belgika";
src: url("http://bohyewoo.com/webfonts/belgika/belgika-8th-webfont.eot");
src: url("http://bohyewoo.com/webfonts/belgika/belgika-8th-webfont.woff") format("woff"),
url("http://bohyewoo.com/webfonts/belgika/belgika-8th-webfont.svg#filename") format("svg");
}
@font-face {
font-family: "Belgika";
src: url("http://bohyewoo.com/webfonts/belgika/belgika-5th-webfont.eot");
src: url("http://bohyewoo.com/webfonts/belgika/belgika-5th-webfont.woff") format("woff"),
url("http://bohyewoo.com/webfonts/belgika/belgika-5th-webfont.svg#filename") format("svg");
}
@font-face {
font-family: "DMMono";
src: url("http://bohyewoo.com/webfonts/DM_Mono/DMMono-Regular.ttf") format("ttf");
}
@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:wght@200;300;400;500&family=Source+Code+Pro:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');
/* navigation locating right position*/
.namemargin:before {
display: block;
content: "";
height: 50px;
margin: -50px 0 0;
}
.indent > li {
list-style-type: none;
}
.poslist {
column-count: 2;
list-style-type: none;
}
.tof {
width: calc(17vw);
padding: 5px;
top: 10px;
left: 15px;
z-index: 997;
background-color: black;
position: fixed;
font-size: 7pt;
}
.tofhide {
width: calc(17vw);
padding: 5px;
top: 10px;
left: 15px;
z-index: 997;
background-color: black;
position: fixed;
font-size: 7pt;
visibility: hidden;
}
/* not scrolling while modal is opened */
#overlay_modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
z-index: 997;
display: none;
}
/* pop-up */
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
z-index: 997;
display: none;
}
.cnt223 a {
text-decoration: none;
}
.cnt223{
min-width: 600px;
width: 55vw;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 999;
padding: 15px 35px;
border-radius: 50px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
/**/font-size: 16px;
font-family: 'Source Sans Pro', sans-serif;
clear: both;
color: #555555;
}
.cnt223 p a{
color: red;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
.cnt223 > h1 {
text-align: center;
}
.popup{
width: 100%;
height: 100vh;
overflow-y: hidden;
margin: 0 auto;
display: none;
position: fixed;
z-index: 999;
}
.popupclose {
font-family: Belgika-40th;
color: black !important;
font-size: 20pt;
padding: 10px;
position: relative;
left: 24vw;
}
.popupclose:hover {
text-decoration-line: none;
color: red !important;
font-size: 20pt;
padding: 10px;
position: relative;
left: 24vw;
}
/* index.html */
* {
top: 0;
padding: 0;
margin: 0;
}
body {
overflow-x: hidden;
}
.indent {
padding-left: 20px;
}
.icon {
float: right;
cursor: pointer;
}
.icon2 {
color: white;
float: right;
cursor: pointer;
}
.wrapper {
background-color: black;
font-family: 'Source Sans Pro', sans-serif;
line-height: 1.9;
font-size: 12pt;
width: 100%;
overflow-x: hidden;
}
.tos {
background-color: white;
width: 55%;
border: 0.5px solid black;
padding: 40px;
margin: 0 auto;
}
.index-menu {
width: 17%;
top: 50px;
left: 20px;
font-family: Belgika-8th;
font-size: 7pt;
color: white;
letter-spacing: 0.6px;
position: fixed;
float: left;
z-index: 994;
}
.menu-title {
font-family: Belgika-40th;
color: white;
cursor: pointer;
padding: 3px;
}
.menu-title:hover {
font-family: Belgika-40th;
background-color: white;
color: red;
cursor: pointer;
padding: 3px;
}
.menu-title-right {
font-family: Belgika-40th;
color: white;
margin-bottom: 10px;
}
.menu-title-country {
border: 0.1px solid white;
color: white;
padding: 5px;
z-index: 995;
}
.menu-title-country:hover {
border: 0.1px solid white;
color: white;
padding: 5px;
z-index: 995;
}
.index-menu-right {
width: 17.5%;
top: 50px;
right: calc(0.8vw);
overflow-y: auto;
font-family: Belgika-8th;
font-size: 7pt;
color: white;
letter-spacing: 0.5px;
position: fixed;
float: left;
z-index: 994;
}
.index-menu-single {
font-family: Belgika-8th;
font-size: 7pt;
color: white;
border-bottom: none;
text-decoration: none;
line-height: 2;
padding: 2px;
}
.index-menu-single:hover {
background-color: white;
color: red;
}
.single-right {
line-height: 2;
}
#header {
background-color: black;
top: 0px;
width: 100%;
font-family: belgika-8th;
font-size: 12pt;
color: white;
text-align: center;
position: fixed;
padding: 10px;
z-index: 994;
}
#header h1 {
text-align: center;
}
#title-text {
font-family: Belgika-8th;
font-size: 30pt;
}
h1, h2 {
font-family: Belgika;
font-size: 20pt;
}
.title {
font-family: Belgika;
font-size: 20pt;
}
.subtitle {
font-family: Belgika;
font-size: 15pt;
}
a {
color: black;
text-decoration: none;
}
a:hover {
color: #0033FF;
text-decoration: none;
}
.text {
font-weight: bold;
position: relative;
display: inline-block;
padding-bottom: -5px;
border-bottom: 2px solid black;
cursor: pointer;
}
.text .text-hover {
visibility: hidden;
width: 400px;
font-family: Belgika-8th;
font-size: 8pt;
padding: 10px;
background-color: #0033FF;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
top: calc(-9vh);
left: calc(-9vh);
z-index: 998;
}
.text .text-hover-top {
visibility: hidden;
width: 600px;
font-family: Belgika-8th;
font-size: 8pt;
padding: 10px;
background-color: #0033FF ;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: calc(-9vh);
left: calc(-9vh);
z-index: 998;
}
.text .text-hover-img {
visibility: hidden;
/* Position the tooltip */
position: absolute;
z-index: 998;
top: calc(-400px);
left: calc(-200px);
}
.text:hover {
color: #0033FF ;
border-bottom: 2px solid #0033FF;
cursor: pointer;
}
.text:hover .text-hover {
visibility: visible;
}
.text:hover .text-hover-top {
visibility: visible;
}
.text:hover .text-hover-img {
visibility: visible;
}
#reference-number {
color: blue;
font-weight: bold;
font-size: 8pt;
border: none;
}
.reference-text {
font-size: 9pt;
border: none;
}
.reference-link {
font-size: 9pt;
border-bottom: 2px solid black;
}
.reference-link:hover {
color: #0033FF ;
font-size: 9pt;
border-bottom: 2px solid #0033FF;
cursor: pointer;
}
/* The Modal (background) */
#overlay_modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
z-index: 997;
display: none;
}
.modal {
display: none;
position: fixed;
left: 0;
top: 0;
width: 50%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid #888;
float: left;
z-index: 999 !important;
}
::-webkit-scrollbar {
display: none;
}
/* Modal Content */
.modal-content {
background-color: gainsboro;
width: 95%;
margin: auto;
padding: 20px;
float: left;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.5s;
animation-name: animatetop;
animation-duration: 0.5s;
}
.t_modal {
display: none;
position: fixed;
right: 0;
top: 0;
width: 50%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
float: right;
border: 1px solid #888;
z-index: 999;
}
/* Modal Content */
.t_modal-content {
background-color: gainsboro;
margin: auto;
padding: 20px;
width: 95%;
float: right;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.5s;
animation-name: animatetop;
animation-duration: 0.5s;
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
.close {
font-family: 'Anonymous Pro', monospace !important;
top: 0;
left: calc(46vw);
color: #aaaaaa;
float: right;
font-size: 60px;
position: fixed;
}
.t_close {
font-family: 'Anonymous Pro', monospace !important;
top: 0;
right: calc(12vw);
color: #aaaaaa;
float: right;
font-size: 60px;
position: fixed;
}
.close:hover,
.close:focus, .t_close:hover,
.t_close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
#button, #t_button {
display: inline-block;
font-size: 14px;
border-bottom: 2px solid black;
cursor: pointer;
}
#button:hover, #t_button:hover {
display: inline-block;
font-size: 14px;
border-bottom: 2px solid #0033FF;
color: #0033FF;
cursor: pointer;
}
.reference-website {
color: #0033FF;
list-style: none;
}
#tosview {
border: none;
width: 100vw;
height: 100vh;
margin: -20px;
}
#treatyview {
border: none;
width: 100vw;
height: 100vh;
margin: -20px;
}

@ -0,0 +1,140 @@
#columngrid {
background-color: green;
border: 3px solid red;
padding-left: 0;
padding-right: 0;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
/* overflow-x: hidden;
overflow-y: hidden;
*/
}
#columngrid1 {
background:url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAKCAYAAACXDi8zAAAAFUlEQVQYV2P8////fwY0wAgCw10CABx0KAs6LxsOAAAAAElFTkSuQmCC ) repeat;
padding-left: 0;
padding-right: 0;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
/*#columngrid2 {
background-color: green;
border: 5px solid red;
width: calc(49.5vw);
height: 100%;
display: block;
float: right;
}*/
/*#columngrid1-1 {
background-color: green;
border: 3px solid red;
padding-left: 0;
padding-right: 0;
top: 0;
left: 0;
width: calc(100% / 3);
height: 100%;
}
#columngrid1-2 {
background-color: green;
border: 3px solid red;
padding-left: 0;
padding-right: 0;
top: 0;
left: 0;
width: calc(100% / 3);
height: 100%;
}
#columngrid1-3 {
background-color: green;
border: 3px solid red;
padding-left: 0;
padding-right: 0;
top: 0;
left: 0;
width: calc(100% / 3);
height: 100%;
}*/
/*
#columngrid2 {
background-color: green;
border: 10px solid red;
padding-left: 0;
padding-right: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#columngrid2-1 {
background-color: green;
border: 3px solid red;
padding-left: 0;
padding-right: 0;
top: 0;
left: 0;
width: calc(100% / 3);
height: 100%;
}
#columngrid2-2 {
background-color: green;
border: 3px solid red;
padding-left: 0;
padding-right: 0;
top: 0;
left: 0;
width: calc(100% / 3);
height: 100%;
}
#columngrid2-3 {
background-color: green;
border: 3px solid red;
padding-left: 0;
padding-right: 0;
top: 0;
left: 0;
width: calc(100% / 3);
height: 100%;
}
*/

@ -1,6 +1,3 @@
This treaty transferring responsibility for postal, telegraph, and telephone service to Japan.
The provisions of the treaty encompassed the right of eminent domain or condemnation against public property and against private property. In this context, the treaty provided for no compensation or payments except that Japan “shall deliver to the Korean Government a suitable percentage” of the profits.
The treaty preamble asserted that the Envoy Extraordinary and Minister Plenipotentiary of His Majesty the Emperor of Japan and the Minister of State for Foreign Affairs of His Majesty the Emperor of Korea were “respectively duly empowered” to negotiate and to agree upon the specific language of the proposed bilateral treaty.
Article 1 Article 1
The Imperial Government of Korea shall transfer and assign the control and administration of the post, telegraph and telephone services in Korea (except the telephone service exclusively pertaining to the Department of the Imperial Household) to the Imperial Japanese Government. The Imperial Government of Korea shall transfer and assign the control and administration of the post, telegraph and telephone services in Korea (except the telephone service exclusively pertaining to the Department of the Imperial Household) to the Imperial Japanese Government.
Article 2 Article 2

@ -39,8 +39,8 @@ print('''<!DOCTYPE>
#t_wrapper (second wrapper) #t_wrapper (second wrapper)
print('<div class="t_wrapper"><div class="t_intro">') print('<div class="t_wrapper"><div class="t_intro">')
img_url = base64.b64encode(open('img/america.jpg', 'rb').read()).decode('utf-8') img_url = base64.b64encode(open('img/uk-korea.png', 'rb').read()).decode('utf-8')
t_image = '<div class="t_img" style="position: fixed; background-color: gainsboro;">United KingdomKorea <br>Treaty of 1883</div><br><img class="t_image" src="data:img/america.jpg;base64,{}">'.format(img_url) t_image = '<div class="t_img" style="position: fixed; background-color: gainsboro;">United KingdomKorea <br>Treaty of 1883</div><br><img class="t_image" src="data:img/uk-korea.png;base64,{}">'.format(img_url)
print(t_image) print(t_image)

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save