worked with Iframe
parent
c2441b4c89
commit
aa12139983
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
@ -0,0 +1,48 @@
|
||||
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.
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
@ -0,0 +1,370 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Have you read your contract?</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
|
||||
@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: "SourceCodePro";
|
||||
src: url("http://bohyewoo.com/webfonts/Source_Code_Pro/SourceCodePro-Regular.ttf");
|
||||
}
|
||||
|
||||
|
||||
.wrapper {
|
||||
/* background-color: beige;
|
||||
*/ font-family: SourceCodePro;
|
||||
font-size: 15pt;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tos {
|
||||
background-color: white;
|
||||
width: 60%;
|
||||
border: 0.5px solid black;
|
||||
outline: 40px dotted black;
|
||||
padding: 40px;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
|
||||
#header {
|
||||
background-color: white;
|
||||
top: 0px;
|
||||
width: 60%;
|
||||
height: 130px;
|
||||
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: #000;
|
||||
|
||||
position: fixed;
|
||||
|
||||
z-index: 199;
|
||||
}
|
||||
|
||||
#header h1 {
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Belgika;
|
||||
font-size: 30pt;
|
||||
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
border-bottom: 4px dotted black;
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: red;
|
||||
border-bottom: 4px dotted red;
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
.text {
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-bottom: 4px dotted black;
|
||||
|
||||
}
|
||||
|
||||
.text .text-hover {
|
||||
visibility: hidden;
|
||||
width: 400px;
|
||||
font-size: 12pt;
|
||||
padding: 10px;
|
||||
background-color: black;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px 0;
|
||||
|
||||
/* Position the tooltip */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
top: -120px;
|
||||
right: 120%;
|
||||
}
|
||||
|
||||
|
||||
.text .text-hover-top {
|
||||
visibility: hidden;
|
||||
width: 600px;
|
||||
font-size: 12pt;
|
||||
padding: 10px;
|
||||
background-color: black;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px 0;
|
||||
|
||||
/* Position the tooltip */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
top: -120px;
|
||||
left: 110%;
|
||||
}
|
||||
|
||||
.text .text-hover-img {
|
||||
visibility: hidden;
|
||||
/* Position the tooltip */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
top: -400px;
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
|
||||
.text:hover {
|
||||
color: red;
|
||||
border-bottom: 4px dotted red;
|
||||
}
|
||||
|
||||
.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: 11pt;
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
.reference-text {
|
||||
font-size: 12pt;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.reference-link {
|
||||
font-size: 12pt;
|
||||
border-bottom: 2px dotted black;
|
||||
}
|
||||
|
||||
.reference-link:hover {
|
||||
color: black;
|
||||
font-size: 12pt;
|
||||
border-bottom: 2px dotted black;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="tos">
|
||||
<div id="header">
|
||||
<h1>Have you read your working contract?</h1>
|
||||
</div>
|
||||
|
||||
<br><br><br><br><br>
|
||||
|
||||
<h1>Terms of Service</h1>
|
||||
<p>Last updated: April 28, 2020</p>
|
||||
<p>Please read these terms of service carefully before using Our service.</p><br>
|
||||
|
||||
<h1>Interpretation and Definitions</h1>
|
||||
<h2>Interpretation</h2>
|
||||
<p>The words of which the initial letter is capitalized have meanings defined under the following conditions.</p>
|
||||
<p>The following definitions shall have the same meaning regardless of whether they appear in singular or in plural.</p>
|
||||
|
||||
|
||||
<h2>Definitions</h2>
|
||||
<p>For the purposes of these Terms of service:</p>
|
||||
<ul>
|
||||
<li><strong>HAVE YOU READ YOUR CONTRACT?</strong> is a modern-digital-colonial <a class="text" href="#textpublishingarchive">text publishing archive</a>, a series of word analysis that reveals the modern-colonial contexts/words in <a class="text" href="#tos">'Terms of Service (ToS)'</a>. ToS is a modern working/slavery contract in <a class="text" href="#digitalcolonialsociety">digital colonial society</a>, where big companies are dominating the power structures via ToS to deceive users. The project introduces 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 comparing with historical colonial treaties.</li><br>
|
||||
|
||||
<li><a name="textpublishingarchive"></a><strong>DIGITAL TEXT PUBLISHING ARCHIVE</strong> means a digital (repository) infrastructure of text material that I desire to keep for a long-term preservation. It is evident that not much of digital material will survive<a id="reference-number" href="#1" class="text">[1]<span class="text-hover">(Zelkowitz, 2003): Advances in Computers: Information Repositories edited by Marvin Zelkowitz</span></a>. Archiving is important in digital age as a preservation tool because of perpetual changes in digital platform. This platform archives collections of related informations about my project including news articles, videos, books, tweets ... to proffer knowledges I gleaned from the web. The archive will contain different analyzations on the modern-colonial words and contexts. </li><br>
|
||||
|
||||
<li><strong>WORD ANALYSIS</strong> is very important because of <a class="text" href="#obfuscation">obfuscation of language</a> in ToS. Usually ToS are made with polite and generic language to deceive users. By using these general terms, those big tech companies try to wash their hands of responsibility and disclaim their liability to back up themselves. Similarly to the language of ToS, the terminology in treaties are phrased in an equivocally circuitous manner that it's indirect. Therefore, vernaculars used in English ToS, which has similarities to <a class="text" href="#colonialtreaties">colonial treaties</a> will be discovered by analyzing the words that were used during this period.</li><br>
|
||||
|
||||
<li><a name="obfuscation"></a><strong>OBFUSCATION OF LANGUAGE</strong>: <a class="text" href="#tos">Terms of Service</a> tend to obfuscate its meaning of contexts by having a way too long texts, so that users don't read them and just click accept. Usually, ToS are written in impenetrable legalise, intentionally vague and generic language that designed to make it impossible to deceive users. During colonial times, obfuscation of language was happening in <a class="text" href="#colonialtreaties">colonial treaties</a> as well. </li><br>
|
||||
|
||||
|
||||
<li><a 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. By doing so, the Empire of Japan had a full control over rullig Korean Empire <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 name="digitalcolonialsociety"></a><strong>DIGITAL COLONIAL SOCIETY</strong>: It is a concept based on <a class="text" href="#digitalsociety">a digital society <span class="text-hover">that every aspect of lives is profoundly being affected by the domination of digital technology</span></a> where user's online behavior becomes monetisable commodity to be sold by <a class="text" href="#bigcorporations">big corporations<span class="text-hover-top">giving them direct power over political, economic and cultural domains of life</span></a>, and users don't properly get paid. This ingenious ways of extracting cheap labour from users show similar ways of exploitating natural/human resources in colonial times.
|
||||
|
||||
<br><br>
|
||||
|
||||
<a class="text">(+)<span class="text-hover-top">Although it is clear that the modes, intensities, scales, and contexts of today's digital colonialism are distinctive from the historical colonialism, the underlying power structures remain the same (Couldry, 2019)</span></a> Of course, this doesn't mean that the transformation of colonialism has done fully identical. Unlike a historical colony that was bounded mostly by geographical locations, a digital colony has no physical borders. There are no geographical locations, there are only IP addresses, domain names, and user's data. Therefore, digital colonialism expands by exploiting more layers of human life itself through the use of technology (Couldry, 2019).
|
||||
|
||||
</li>
|
||||
<br>
|
||||
|
||||
<li><strong>THE IDEA OF COLONIALISM</strong> seems to be an eternal loop that comes back throughout history. It is essential not to ignore that digital colonialism is applicable to countries regardless of the history.</li><br>
|
||||
|
||||
|
||||
<li><a name="tos"></a><strong>TERMS OF SERVICE (TOS)</strong> is also known as terms of use and 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 these Terms of service that form the entire agreement between You and the Company regarding the use of the service. This Terms of service agreement as been created with the help of <a href="https://app.termsfeed.com/download/free?agreement_type=TC&token=4687b8bf6d64d334e89197146ee96509">Terms of service Generator</a>.</li><br>
|
||||
|
||||
|
||||
<li><strong>COMPANY</strong> (referred to as either "the Company", "We", "Us" or "Our" in this Agreement) refers to Have You Read Your Contract?.</li><br>
|
||||
|
||||
<li><strong>COUNTRY</strong> refers to: Netherlands</li><br>
|
||||
|
||||
<li><strong>DEVICE</strong> means any device that can access the service such as a computer, a cellphone or a digital tablet.</li><br>
|
||||
|
||||
<li><strong>SERVICE</strong> refers to the Website.</li><br>
|
||||
|
||||
<li><strong>THIRD-PARTY SOCIAL MEDIA SERVICE</strong> means any services or content (including data, information, products or services) provided by a third-party that may be displayed, included or made available by the service.</li><br>
|
||||
|
||||
<li><strong>WEBSITE</strong> refers to Have You Read Your Contract?, accessible from www.haveyoureadyourcontract.com</li><br>
|
||||
|
||||
<li><strong>YOU</strong> means the individual accessing or using the service, or the company, or other legal entity on behalf of which such individual is accessing or using the service, as applicable.</li><br>
|
||||
|
||||
</ul>
|
||||
|
||||
<p class="reference-text"><a name="1"></a>[1] (Zelkowitz, 2003): <a class="reference-link" href="https://books.google.nl/books?hl=en&lr=&id=xqvv7yqtr2kC&oi=fnd&pg=PA1&dq=importance+of+knowledge+archiving&ots=9NU6J-zv88&sig=2pkfx30iXkDgFS4-wLsqT9iVs8Y#v=onepage&q=importance%20of%20knowledge%20archiving&f=false">Advances in Computers: Information Repositories edited by Marvin Zelkowitz</a></p>
|
||||
|
||||
<p class="reference-text"><a name="2"></a>[2] (Duus, 1998): The Abacus and the Sword: The Japanese Penetration of Korea. University of California Press.</p>
|
||||
|
||||
<br>
|
||||
|
||||
|
||||
<h1>Contents</h1>
|
||||
<p>This archive presents the following ToS such as FaceApp, TikTok, PokemonGo, Snaptchat, Netflix, Amazon, Aibo(Sony). We also provide some historical treaties made during one's colonial era, such as ........, for you to interpret how the former might have had some similar characteristics to the latter.</p>
|
||||
|
||||
<br>
|
||||
|
||||
|
||||
<h1>our service</h1>
|
||||
<ul>
|
||||
<li>to contribute a platform of reading ToS. In doing so, it questions what does it mean to provide ToS in the digital corporate society.</li><br>
|
||||
<li>to question the concept of digital colonialism by providing visualization of ToS language as a modern-colonial tool to deceive users.</li><br>
|
||||
<li>to analyze ToS from major tech companies to investigate how particular terms are being used in the specific context of ToS. Because ToS platforms have different tones of voice, different words are being used. How does the platforms have modern-colonial aspects in ToS?</li><br>
|
||||
<li>to examine what is modern-colonial language by taking a closer look on words within the realm of ToS. This provides categorization of modern-colonial language into digital colonial glossary.</li><br>
|
||||
<li></li><br>
|
||||
<li></li><br>
|
||||
<li></li><br>
|
||||
<li></li><br>
|
||||
<li></li><br>
|
||||
<li></li><br>
|
||||
<li></li><br>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<h1>Acknowledgement</h1>
|
||||
<p>These are the Terms of service governing the use of this service and the agreement that operates between You and the Company. These Terms of service set out the rights and obligations of all users regarding the use of the service.</p>
|
||||
<p>Your access to and use of the service is conditioned on Your acceptance of and compliance with these Terms of service. These Terms of service apply to all visitors, users and others who access or use the service.</p>
|
||||
<p>By accessing or using the service You agree to be bound by these Terms of service. If You disagree with any part of these Terms of service then You may not access the service.</p>
|
||||
<p>You represent that you are over the age of 18. The Company does not permit those under 18 to use the service.</p>
|
||||
<p>Your access to and use of the service is also conditioned on Your acceptance of and compliance with the Privacy Policy of the Company. Our Privacy Policy describes Our policies and procedures on the collection, use and disclosure of Your personal information when You use the Application or the Website and tells You about Your privacy rights and how the law protects You. Please read Our Privacy Policy carefully before using Our service.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<h1>Links to Other Websites</h1>
|
||||
<p>Our service may contain links to third-party web sites or services that are not owned or controlled by the Company.</p>
|
||||
<p>The Company has no control over, and assumes no responsibility for, the content, privacy policies, or practices of any third party web sites or services. You further acknowledge and agree that the Company shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with the use of or reliance on any such content, goods or services available on or through any such web sites or services.</p>
|
||||
<p>We strongly advise You to read the terms of service and privacy policies of any third-party web sites or services that You visit.</p>
|
||||
|
||||
<h1>Termination</h1>
|
||||
<p>We may terminate or suspend Your access immediately, without prior notice or liability, for any reason whatsoever, including without limitation if You breach these Terms of service.</p>
|
||||
<p>Upon termination, Your right to use the service will cease immediately.</p>
|
||||
|
||||
<h1>Limitation of Liability</h1>
|
||||
<p>Notwithstanding any damages that You might incur, the entire liability of the Company and any of its suppliers under any provision of this Terms and Your exclusive remedy for all of the foregoing shall be limited to the amount actually paid by You through the service or 100 USD if You haven't purchased anything through the service.</p>
|
||||
<p>To the maximum extent permitted by applicable law, in no event shall the Company or its suppliers be liable for any special, incidental, indirect, or consequential damages whatsoever (including, but not limited to, damages for loss of profits, loss of data or other information, for business interruption, for personal injury, loss of privacy arising out of or in any way related to the use of or inability to use the service, third-party software and/or third-party hardware used with the service, or otherwise in connection with any provision of this Terms), even if the Company or any supplier has been advised of the possibility of such damages and even if the remedy fails of its essential purpose.</p>
|
||||
<p>Some states do not allow the exclusion of implied warranties or limitation of liability for incidental or consequential damages, which means that some of the above limitations may not apply. In these states, each party's liability will be limited to the greatest extent permitted by law.</p>
|
||||
|
||||
<h1>"AS IS" and "AS AVAILABLE" Disclaimer</h1>
|
||||
<p>The service is provided to You "AS IS" and "AS AVAILABLE" and with all faults and defects without warranty of any kind. To the maximum extent permitted under applicable law, the Company, on its own behalf and on behalf of its Affiliates and its and their respective licensors and service providers, expressly disclaims all warranties, whether express, implied, statutory or otherwise, with respect to the service, including all implied warranties of merchantability, fitness for a particular purpose, title and non-infringement, and warranties that may arise out of course of dealing, course of performance, usage or trade practice. Without limitation to the foregoing, the Company provides no warranty or undertaking, and makes no representation of any kind that the service will meet Your requirements, achieve any intended results, be compatible or work with any other software, applications, systems or services, operate without interruption, meet any performance or reliability standards or be error free or that any errors or defects can or will be corrected.</p>
|
||||
<p>Without limiting the foregoing, neither the Company nor any of the company's provider makes any representation or warranty of any kind, express or implied: (i) as to the operation or availability of the service, or the information, content, and materials or products included thereon; (ii) that the service will be uninterrupted or error-free; (iii) as to the accuracy, reliability, or currency of any information or content provided through the service; or (iv) that the service, its servers, the content, or e-mails sent from or on behalf of the Company are free of viruses, scripts, trojan horses, worms, malware, timebombs or other harmful components.</p>
|
||||
<p>Some jurisdictions do not allow the exclusion of certain types of warranties or limitations on applicable statutory rights of a consumer, so some or all of the above exclusions and limitations may not apply to You. But in such a case the exclusions and limitations set forth in this section shall be applied to the greatest extent enforceable under applicable law.</p>
|
||||
|
||||
<h1>Governing Law</h1>
|
||||
<p>The laws of the Country, excluding its conflicts of law rules, shall govern this Terms and Your use of the service. Your use of the Application may also be subject to other local, state, national, or international laws.</p>
|
||||
|
||||
<h1>Disputes Resolution</h1>
|
||||
<p>If You have any concern or dispute about the service, You agree to first try to resolve the dispute informally by contacting the Company.</p>
|
||||
|
||||
<h1>For European Union (EU) Users</h1>
|
||||
<p>If You are a European Union consumer, you will benefit from any mandatory provisions of the law of the country in which you are resident in.</p>
|
||||
|
||||
|
||||
<h1>United States Legal Compliance</h1>
|
||||
<p>You represent and warrant that (i) You are not located in a country that is subject to the United States government embargo, or that has been designated by the United States government as a "terrorist supporting" country, and (ii) You are not listed on any United States government list of prohibited or restricted parties.</p>
|
||||
|
||||
<h1>Severability and Waiver</h1>
|
||||
<h2>Severability</h2>
|
||||
<p>If any provision of these Terms is held to be unenforceable or invalid, such provision will be changed and interpreted to accomplish the objectives of such provision to the greatest extent possible under applicable law and the remaining provisions will continue in full force and effect.</p>
|
||||
|
||||
<h2>Waiver</h2>
|
||||
<p>Except as provided herein, the failure to exercise a right or to require performance of an obligation under this Terms shall not effect a party's ability to exercise such right or require such performance at any time thereafter nor shall be the waiver of a breach constitute a waiver of any subsequent breach.</p>
|
||||
|
||||
<h1>Translation Interpretation</h1>
|
||||
<p>These Terms of service may have been translated if We have made them available to You on our service.</p>
|
||||
<p>You agree that the original English text shall prevail in the case of a dispute.</p>
|
||||
|
||||
<h1>Changes to These Terms of service</h1>
|
||||
<p>We reserve the right, at Our sole discretion, to modify or replace these Terms at any time. If a revision is material We will make reasonable efforts to provide at least 30 days' notice prior to any new terms taking effect. What constitutes a material change will be determined at Our sole discretion.</p>
|
||||
<p>By continuing to access or use Our service after those revisions become effective, You agree to be bound by the revised terms. If You do not agree to the new terms, in whole or in part, please stop using the website and the service.</p>
|
||||
|
||||
<h1>Contact Us</h1>
|
||||
<p>If you have any questions about these Terms of service, You can contact us:</p>
|
||||
|
||||
<ul>
|
||||
<li>By email: haveyoureadyourcontract@gmail.com</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,520 @@
|
||||
# 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')
|
||||
|
||||
|
||||
# faceapp_file = open('faceapp.txt','r')
|
||||
with open('tos_file/faceapp.txt', 'r') as faceapp_file:
|
||||
faceapp_text = faceapp_file.read()
|
||||
faceapp_text_list = faceapp_text.split("\n\n")
|
||||
|
||||
with open('treaty_file/russia-estonia.txt', 'r') as russia_file:
|
||||
russia_text = russia_file.read()
|
||||
russia_text_list = russia_text.split("\n\n")
|
||||
|
||||
|
||||
#tos stopwords
|
||||
tos_default_stopwords = set(stopwords.words('english'))
|
||||
tos_custom_stopwords = set(codecs.open('stopwords.txt', 'r').read().splitlines())
|
||||
tos_all_stopwords = tos_default_stopwords | tos_custom_stopwords
|
||||
|
||||
#treaty stopwords
|
||||
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
|
||||
|
||||
|
||||
# multi-line string HTML
|
||||
print('''<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<style>
|
||||
|
||||
@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: "SourceCodePro";
|
||||
src: url("http://bohyewoo.com/webfonts/Source_Code_Pro/SourceCodePro-Regular.ttf");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.tos_wrapper {
|
||||
# background-color: yellow;
|
||||
width: 49%;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
border-right: 2px solid black;
|
||||
|
||||
}
|
||||
|
||||
.t_wrapper {
|
||||
# background-color: green;
|
||||
width: 49%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.intro {
|
||||
width: 75%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.t_intro {
|
||||
width: 75%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.img {
|
||||
# background-color: Aquamarine;
|
||||
font-family: Belgika;
|
||||
font-size: 20pt;
|
||||
padding-top: 30px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.image {
|
||||
height: 30vh;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.t_img {
|
||||
# background-color: Aquamarine;
|
||||
font-family: Belgika;
|
||||
font-size: 20pt;
|
||||
padding-top: 30px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.t_image {
|
||||
height: 30vh;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.info {
|
||||
# background-color: LightSkyBlue;
|
||||
font-family: helvetica;
|
||||
font-weight: regular;
|
||||
font-size: 10pt;
|
||||
width: 45vh;
|
||||
float: left;
|
||||
margin-top: 30px;
|
||||
|
||||
# border: 2px solid black;
|
||||
# text-align: center;
|
||||
column-count: 2;
|
||||
|
||||
}
|
||||
|
||||
.t_info {
|
||||
# background-color: LightSkyBlue;
|
||||
font-family: helvetica;
|
||||
font-weight: regular;
|
||||
font-size: 10pt;
|
||||
width: 45vh;
|
||||
float: left;
|
||||
margin-top: 30px;
|
||||
|
||||
# border: 2px solid black;
|
||||
# text-align: center;
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
|
||||
.paragraph {
|
||||
# background-color: gold;
|
||||
font-family: helvetica;
|
||||
font-weight: regular;
|
||||
font-size: 20px;
|
||||
width: 75%;
|
||||
padding: 10px;
|
||||
margin-top: 70px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.t_paragraph {
|
||||
# background-color: gold;
|
||||
font-family: helvetica;
|
||||
font-weight: regular;
|
||||
font-size: 20px;
|
||||
width: 98%;
|
||||
margin-top: 70px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.top_words {
|
||||
background-color: black;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
|
||||
font-family: Belgika;
|
||||
font-weight: 16th;
|
||||
font-size: 7.5pt;
|
||||
color: white;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
position: fixed;
|
||||
float: left;
|
||||
|
||||
}
|
||||
|
||||
.top_words_title {
|
||||
# background-color: yellow;
|
||||
margin: 40px 10px 10px 10px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.chosen_words {
|
||||
# background-color: pink;
|
||||
padding: 10px 1px 1px 10px;
|
||||
}
|
||||
|
||||
.chosen_words:hover {
|
||||
background-color: white;
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.t_top_words {
|
||||
background-color: black;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
|
||||
font-family: Belgika;
|
||||
font-weight: 16th;
|
||||
font-size: 7.5pt;
|
||||
color: white;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
position: fixed;
|
||||
float: right;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
}
|
||||
|
||||
.t_top_words_title {
|
||||
margin: 40px 10px 10px 10px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.t_chosen_words {
|
||||
padding: 10px 1px 1px 10px;
|
||||
}
|
||||
|
||||
.t_chosen_words:hover {
|
||||
background-color: white;
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.hide {
|
||||
# color: white;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.TO:hover, .DT:hover, .IN:hover, .WDT:hover, .WP:hover, .MD:hover, .PRP:hover, .CC:hover, .marks:hover, .comma:hover, .dot:hover {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.adjective {
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.JJ:hover {
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.noun {
|
||||
background-color: springgreen;
|
||||
}
|
||||
|
||||
.NN:hover, .NNS:hover {
|
||||
background-color: springgreen;
|
||||
}
|
||||
|
||||
.verb {
|
||||
background-color: yellow;
|
||||
# color: yellow;
|
||||
}
|
||||
|
||||
.VB:hover, .VBZ:hover, .VBN:hover, .VVD:hover {
|
||||
background-color: yellow;
|
||||
|
||||
}
|
||||
|
||||
.propernoun {
|
||||
background-color: pink;
|
||||
# color: pink;
|
||||
}
|
||||
|
||||
.NNP:hover, .NNPS:hover {
|
||||
background-color: pink;
|
||||
|
||||
}
|
||||
|
||||
.adverb {
|
||||
background-color: lightgreen;
|
||||
# color: lightgreen;
|
||||
}
|
||||
|
||||
.RB:hover, .RBR:hover, .JJR:hover, .RBS:hover {
|
||||
background-color: lightgreen;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
$('.chosen_words').click( function(){
|
||||
var word = $(this).text();
|
||||
alert(word);
|
||||
});
|
||||
|
||||
|
||||
$('.TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC, .marks, .comma, .dot').click(
|
||||
function() {
|
||||
$('.TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC, .marks, .comma, .dot').toggleClass('hide');
|
||||
});
|
||||
|
||||
$('.JJ').click(
|
||||
function() {
|
||||
$('.JJ').toggleClass('adjective');
|
||||
});
|
||||
|
||||
$('.NN, .NNS').click(
|
||||
function() {
|
||||
$('.NN, .NNS').toggleClass('noun');
|
||||
});
|
||||
|
||||
$('.VB, .VBZ, .VBN, .VVD').click(
|
||||
function() {
|
||||
$('.VB, .VBZ, .VBN, .VVD').toggleClass('verb');
|
||||
});
|
||||
|
||||
$('.NNP, .NNPS').click(
|
||||
function() {
|
||||
$('.NNP, .NNPS').toggleClass('propernoun');
|
||||
});
|
||||
|
||||
$('.RB').click(
|
||||
function() {
|
||||
$('.RB').toggleClass('adverb');
|
||||
});
|
||||
|
||||
$('.RBR, .JJR').click(
|
||||
function() {
|
||||
$('.RBR, .JJR').toggleClass('adverb-comparative');
|
||||
});
|
||||
|
||||
$('.RBS').click(
|
||||
function() {
|
||||
$('.RBS').toggleClass('adverb-superlative');
|
||||
});
|
||||
})
|
||||
|
||||
</script>''')
|
||||
|
||||
|
||||
# $('div.t_chosen_words_{0}').mouseover(function(){
|
||||
# $(this).find('.t_chosen_words_{0}').text('i + 'is here').css('color', 'red');
|
||||
# })
|
||||
# .mouseout(function() {
|
||||
# $( this ).find( ".t_chosen_words" ).text( " " ).css('color', 'black');
|
||||
# });
|
||||
|
||||
|
||||
|
||||
|
||||
#wrapper
|
||||
print('<div class ="tos_wrapper"><div class="intro">')
|
||||
|
||||
#insert an image
|
||||
# https://upload.wikimedia.org/wikipedia/commons/1/15/Joffe_signing_the_Treaty_of_Tartu.jpg
|
||||
FaceApp_img_url = base64.b64encode(open('img/faceapp_logo.png', 'rb').read()).decode('utf-8')
|
||||
FaceApp_image = '<div class="img">FaceApp<br><img class="image" src="data:img/faceapp_logo.png;base64,{}"></div>'.format(FaceApp_img_url)
|
||||
print(FaceApp_image)
|
||||
|
||||
|
||||
#info box
|
||||
print('<div class ="info">')
|
||||
infotext = [('Name of Service', 'FaceApp'), ('Country of Origin', 'Russia'), ('Initial release', 'December 31, 2016'), ('Type', 'Image editing'), ('Word Counts', '5,392'), ('Original Source', '<a href="https://www.faceapp.com/terms-en.html">link</a>'), ('Description', 'FaceApp is a mobile application for iOS and Android developed by Russian company Wireless Lab. The app generates highly realistic transformations of human faces in photographs by using neural networks based on artificial intelligence. The app can transform a face to make it smile, look younger, look older, or change gender.')]
|
||||
|
||||
for title, info in infotext:
|
||||
print('<div class="info_{0}" ><div class="info_title" style="-webkit-text-decoration-line: underline; text-decoration-line: underline;" >{0}</div><div class="info_content">{1}</div></div><br>'.format(title, info))
|
||||
|
||||
print('</div></div>')
|
||||
|
||||
|
||||
|
||||
#ToS text
|
||||
print('<div class ="paragraph">')
|
||||
for paragraph in faceapp_text_list:
|
||||
tokenized = word_tokenize(paragraph)
|
||||
tagged = pos_tag(tokenized)
|
||||
print('<p>')
|
||||
for word, pos in tagged:
|
||||
print('<span class="{0} {1}">{2}</span>'.format(pos.replace('.', 'dot').replace(',', 'comma').replace('(', 'marks').replace(')', 'marks').replace(':', 'marks').replace(';', 'marks'), word.replace('.', 'dot').replace(',', 'comma').replace('(', 'marks').replace(')', 'marks').replace(':', 'marks').replace(';', 'marks').lower(), word))
|
||||
print('</p>')
|
||||
|
||||
print('</div>')
|
||||
|
||||
|
||||
#tos top words list
|
||||
print('<div class="top_words"><div class="top_words_title" style="-webkit-text-decoration-line: underline; text-decoration-line: underline;" >colonial words:</div>')
|
||||
|
||||
tokens_without_stopwords = nltk.FreqDist(words.lower() for words in tokenized if words.lower() not in tos_all_stopwords)
|
||||
frequency_word = FreqDist(tokens_without_stopwords)
|
||||
top_words = tokens_without_stopwords.most_common(30)
|
||||
|
||||
|
||||
for chosen_words, frequency in top_words:
|
||||
print('<div class="chosen_words" > {} ({}) </div>'.format(chosen_words, frequency))
|
||||
|
||||
print('</div></div></div>')
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#t_wrapper (second wrapper)
|
||||
print('</div><div class="t_wrapper"><div class="t_intro">')
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#insert an image
|
||||
# https://upload.wikimedia.org/wikipedia/commons/1/15/Joffe_signing_the_Treaty_of_Tartu.jpg
|
||||
img_url = base64.b64encode(open('img/tartu.jpeg', 'rb').read()).decode('utf-8')
|
||||
t_image = '<div class="t_img">Peace Treaty of Tartu, Estonia<br><img class="t_image" src="data:img/tartu.jpeg;base64,{}"></div>'.format(img_url)
|
||||
print(t_image)
|
||||
|
||||
|
||||
#t_info box
|
||||
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)">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.')]
|
||||
|
||||
for t_title, t_info in t_infotext:
|
||||
print('<div class="t_info-{0}"><div class="info_t_title" style="-webkit-text-decoration-line: underline; text-decoration-line: underline;" >{0}</div><div class="t_info_content">{1}</div></div><br>'.format(t_title, t_info))
|
||||
|
||||
print('</div>')
|
||||
|
||||
|
||||
#Treaty text
|
||||
print('<div class="t_paragraph">')
|
||||
for t_paragraph in russia_text_list:
|
||||
t_tokenized = word_tokenize(t_paragraph)
|
||||
t_tagged = pos_tag(t_tokenized)
|
||||
print('<p>')
|
||||
for t_word, t_pos in t_tagged:
|
||||
print('<span class="{0} {1}">{2}</span>'.format(t_pos.replace('.', 'dot').replace(',', 'comma').replace('(', 'marks').replace(')', 'marks').replace(':', 'marks').replace(';', 'marks'), t_word.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" style="-webkit-text-decoration-line: underline; text-decoration-line: underline;" >colonial words:</div>')
|
||||
|
||||
t_tokens_without_stopwords = nltk.FreqDist(words.lower() for words in t_tokenized if words.lower() not in t_all_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" > {} ({}) </div>'.format(t_chosen_words, t_frequency))
|
||||
|
||||
print('</div></div></div>')
|
||||
|
||||
|
||||
|
||||
##### not working
|
||||
# #treaty colonial top words list
|
||||
# print('<div class="t_top_words"><div class="t_top_words_title" style="-webkit-text-decoration-line: underline; text-decoration-line: underline;" >colonial words:</div>')
|
||||
|
||||
# for words in faceapp_text_list:
|
||||
# t_tokens_without_stopwords = nltk.FreqDist(words.lower() for words in t_tokenized if words.lower() not in t_all_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" > {} ({}) </div>'.format(t_chosen_words, t_frequency))
|
||||
|
||||
# print('</div></div></div>')
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
print('</div>')
|
||||
print('''</body></html>''')
|
||||
|
||||
Binary file not shown.
@ -0,0 +1,222 @@
|
||||
|
||||
|
||||
|
||||
/* FaceApp*/
|
||||
p {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.img {
|
||||
font-family: Belgika;
|
||||
font-size: 20pt;
|
||||
margin-left: calc(10vw + 5px);
|
||||
}
|
||||
|
||||
.image {
|
||||
height: 10vh;
|
||||
margin-top: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.img_clicked {
|
||||
height: calc(20vw);
|
||||
margin-top: 30px;
|
||||
|
||||
}
|
||||
|
||||
.t_img {
|
||||
font-family: Belgika;
|
||||
font-size: 20pt;
|
||||
margin-right: calc(10vw + 5px);
|
||||
}
|
||||
|
||||
.t_image {
|
||||
height: 10vh;
|
||||
margin-top: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.t_img_clicked {
|
||||
height: calc(20vw);
|
||||
margin-top: 30px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.info {
|
||||
font-family: belgika-16th;
|
||||
font-size: 8pt;
|
||||
width: calc(30vw);
|
||||
float: left;
|
||||
margin-top: 30px;
|
||||
margin-left: calc(10vw + 5px);
|
||||
|
||||
column-count: 2;
|
||||
|
||||
}
|
||||
|
||||
.t_info {
|
||||
font-family: belgika-16th;
|
||||
font-size: 8pt;
|
||||
width: calc(30vw);
|
||||
float: left;
|
||||
margin-top: 30px;
|
||||
margin-right: calc(10vw + 5px);
|
||||
|
||||
column-count: 2;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.paragraph {
|
||||
width: 75%;
|
||||
padding: 10px;
|
||||
margin-top: 70px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.t_paragraph {
|
||||
width: 75%;
|
||||
padding: 10px;
|
||||
margin-top: 70px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.top_words {
|
||||
background-color: black;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
|
||||
font-family: Belgika;
|
||||
font-weight: 16th;
|
||||
font-size: 7.5pt;
|
||||
color: white;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 1;
|
||||
|
||||
position: fixed;
|
||||
|
||||
}
|
||||
|
||||
.top_words_title {
|
||||
# background-color: yellow;
|
||||
margin: 40px 10px 10px 10px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.chosen_words {
|
||||
# background-color: pink;
|
||||
padding: 10px 1px 1px 10px;
|
||||
}
|
||||
|
||||
.chosen_words:hover {
|
||||
background-color: white;
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.t_top_words {
|
||||
background-color: black;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
|
||||
font-family: Belgika-16th;
|
||||
font-size: 7.5pt;
|
||||
color: white;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 1;
|
||||
|
||||
position: fixed;
|
||||
float: right;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
}
|
||||
|
||||
.t_top_words_title {
|
||||
margin: 40px 10px 10px 10px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.t_chosen_words {
|
||||
padding: 10px 1px 1px 10px;
|
||||
}
|
||||
|
||||
.t_chosen_words:hover {
|
||||
background-color: white;
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.hide {
|
||||
# color: white;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.TO:hover, .DT:hover, .IN:hover, .WDT:hover, .WP:hover, .MD:hover, .PRP:hover, .CC:hover, .marks:hover, .comma:hover, .dot:hover {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.adjective {
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.JJ:hover {
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.noun {
|
||||
background-color: springgreen;
|
||||
}
|
||||
|
||||
.NN:hover, .NNS:hover {
|
||||
background-color: springgreen;
|
||||
}
|
||||
|
||||
.verb {
|
||||
background-color: yellow;
|
||||
# color: yellow;
|
||||
}
|
||||
|
||||
.VB:hover, .VBZ:hover, .VBN:hover, .VVD:hover {
|
||||
background-color: yellow;
|
||||
|
||||
}
|
||||
|
||||
.propernoun {
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
.NNP:hover, .NNPS:hover {
|
||||
background-color: pink;
|
||||
|
||||
}
|
||||
|
||||
.adverb {
|
||||
background-color: lightgreen;
|
||||
# color: lightgreen;
|
||||
}
|
||||
|
||||
.RB:hover, .RBR:hover, .JJR:hover, .RBS:hover {
|
||||
background-color: lightgreen;
|
||||
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
@ -0,0 +1,196 @@
|
||||
|
||||
|
||||
@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: "SourceCodePro";
|
||||
src: url("http://bohyewoo.com/webfonts/Source_Code_Pro/SourceCodePro-Regular.ttf");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.t_wrapper {
|
||||
font-family: 'Anonymous Pro', monospace;
|
||||
width: 49%;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.t_intro {
|
||||
width: 75%;
|
||||
margin-top: 20px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.t_img {
|
||||
font-family: Belgika;
|
||||
font-size: 20pt;
|
||||
|
||||
}
|
||||
|
||||
.t_image {
|
||||
height: 10vh;
|
||||
margin-top: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.t_img_clicked {
|
||||
height: calc(20vw);
|
||||
margin-top: 30px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.t_info {
|
||||
font-family: Belgika;
|
||||
font-weight: 16th;
|
||||
font-size: 8pt;
|
||||
width: calc(30vw);
|
||||
float: left;
|
||||
margin-top: 30px;
|
||||
|
||||
column-count: 2;
|
||||
|
||||
}
|
||||
|
||||
.t_paragraph {
|
||||
font-size: 16px;
|
||||
width: 75%;
|
||||
padding: 10px;
|
||||
margin-top: 70px;
|
||||
line-height: 1.5;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.t_top_words {
|
||||
background-color: black;
|
||||
width: 10vw;
|
||||
height: 100%;
|
||||
|
||||
font-family: Belgika;
|
||||
font-size: 7.5pt;
|
||||
color: white;
|
||||
letter-spacing: 0.5px;
|
||||
margin-left: 2px;
|
||||
|
||||
position: fixed;
|
||||
float: right;
|
||||
|
||||
}
|
||||
|
||||
.t_top_words_title {
|
||||
margin: 40px 10px 10px 10px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.t_chosen_words {
|
||||
padding: 10px 1px 1px 10px;
|
||||
}
|
||||
|
||||
.t_chosen_words:hover {
|
||||
background-color: white;
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hide {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.TO:hover, .DT:hover, .IN:hover, .WDT:hover, .WP:hover, .MD:hover, .PRP:hover, .CC:hover, .marks:hover, .comma:hover, .dot:hover {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.adjective {
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.JJ:hover {
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.noun {
|
||||
background-color: springgreen;
|
||||
}
|
||||
|
||||
.NN:hover, .NNS:hover {
|
||||
background-color: springgreen;
|
||||
}
|
||||
|
||||
.verb {
|
||||
background-color: yellow;
|
||||
# color: yellow;
|
||||
}
|
||||
|
||||
.VB:hover, .VBZ:hover, .VBN:hover, .VVD:hover {
|
||||
background-color: yellow;
|
||||
|
||||
}
|
||||
|
||||
.propernoun {
|
||||
background-color: pink;
|
||||
# color: pink;
|
||||
}
|
||||
|
||||
.NNP:hover, .NNPS:hover {
|
||||
background-color: pink;
|
||||
|
||||
}
|
||||
|
||||
.adverb {
|
||||
background-color: lightgreen;
|
||||
# color: lightgreen;
|
||||
}
|
||||
|
||||
.RB:hover, .RBR:hover, .JJR:hover, .RBS:hover {
|
||||
background-color: lightgreen;
|
||||
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,82 @@
|
||||
# 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/russia-estonia.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>
|
||||
<link rel="stylesheet" href="estonia.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/tartu.jpeg', 'rb').read()).decode('utf-8')
|
||||
t_image = '<div class="t_img">Peace Treaty of Tartu, Estonia<br><img class="t_image" src="data:img/tartu.jpeg;base64,{}"></div>'.format(img_url)
|
||||
print(t_image)
|
||||
|
||||
|
||||
#t_info box
|
||||
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)">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.')]
|
||||
|
||||
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>')
|
||||
|
||||
|
||||
#Treaty text
|
||||
print('<div class="t_paragraph">')
|
||||
for t_paragraph in russia_text_list:
|
||||
t_tokenized = word_tokenize(t_paragraph)
|
||||
t_tagged = pos_tag(t_tokenized)
|
||||
print('<p>')
|
||||
for t_word, t_pos in t_tagged:
|
||||
print('<span class="{0} {1}">{2}</span>'.format(t_pos.replace('.', 'dot').replace(',', 'comma').replace('(', 'marks').replace(')', 'marks').replace(':', 'marks').replace(';', 'marks'), t_word.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 if words.lower() not in t_all_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" > {} ({}) </div>'.format(t_chosen_words, t_frequency))
|
||||
|
||||
print('</div></div></div>')
|
||||
|
||||
|
||||
print('</div></div>')
|
||||
print('''</body></html>''')
|
||||
|
||||
@ -0,0 +1,190 @@
|
||||
|
||||
|
||||
@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: "SourceCodePro";
|
||||
src: url("http://bohyewoo.com/webfonts/Source_Code_Pro/SourceCodePro-Regular.ttf");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.tos_wrapper {
|
||||
font-family: 'Anonymous Pro', monospace;
|
||||
width: 49%;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
|
||||
.intro {
|
||||
width: 75%;
|
||||
margin-top: 20px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.img {
|
||||
font-family: Belgika;
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
.image {
|
||||
height: 10vh;
|
||||
margin-top: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.img_clicked {
|
||||
height: calc(20vw);
|
||||
margin-top: 30px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.info {
|
||||
font-family: Belgika;
|
||||
font-weight: 16th;
|
||||
font-size: 8pt;
|
||||
width: calc(35vw);
|
||||
float: left;
|
||||
margin-top: 30px;
|
||||
|
||||
column-count: 2;
|
||||
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
font-size: 16px;
|
||||
width: 75%;
|
||||
padding: 10px;
|
||||
margin-top: 70px;
|
||||
line-height: 1.5;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.top_words {
|
||||
background-color: black;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
|
||||
font-family: Belgika;
|
||||
font-size: 7.5pt;
|
||||
color: white;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
position: fixed;
|
||||
float: left;
|
||||
|
||||
}
|
||||
|
||||
.top_words_title {
|
||||
margin: 40px 10px 10px 10px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.chosen_words {
|
||||
padding: 10px 1px 1px 10px;
|
||||
}
|
||||
|
||||
.chosen_words:hover {
|
||||
background-color: white;
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
.hide {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.TO:hover, .DT:hover, .IN:hover, .WDT:hover, .WP:hover, .MD:hover, .PRP:hover, .CC:hover, .marks:hover, .comma:hover, .dot:hover {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.adjective {
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.JJ:hover {
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.noun {
|
||||
background-color: springgreen;
|
||||
}
|
||||
|
||||
.NN:hover, .NNS:hover {
|
||||
background-color: springgreen;
|
||||
}
|
||||
|
||||
.verb {
|
||||
background-color: yellow;
|
||||
# color: yellow;
|
||||
}
|
||||
|
||||
.VB:hover, .VBZ:hover, .VBN:hover, .VVD:hover {
|
||||
background-color: yellow;
|
||||
|
||||
}
|
||||
|
||||
.propernoun {
|
||||
background-color: pink;
|
||||
# color: pink;
|
||||
}
|
||||
|
||||
.NNP:hover, .NNPS:hover {
|
||||
background-color: pink;
|
||||
|
||||
}
|
||||
|
||||
.adverb {
|
||||
background-color: lightgreen;
|
||||
# color: lightgreen;
|
||||
}
|
||||
|
||||
.RB:hover, .RBR:hover, .JJR:hover, .RBS:hover {
|
||||
background-color: lightgreen;
|
||||
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,113 @@
|
||||
# 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')
|
||||
|
||||
|
||||
# faceapp_file = open('faceapp.txt','r')
|
||||
with open('tos_file/faceapp.txt', 'r') as faceapp_file:
|
||||
faceapp_text = faceapp_file.read()
|
||||
faceapp_text_list = faceapp_text.split("\n\n")
|
||||
|
||||
with open('treaty_file/russia-estonia.txt', 'r') as russia_file:
|
||||
russia_text = russia_file.read()
|
||||
russia_text_list = russia_text.split("\n\n")
|
||||
|
||||
|
||||
#tos stopwords
|
||||
tos_default_stopwords = set(stopwords.words('english'))
|
||||
tos_custom_stopwords = set(codecs.open('stopwords.txt', 'r').read().splitlines())
|
||||
tos_all_stopwords = tos_default_stopwords | tos_custom_stopwords
|
||||
|
||||
#treaty stopwords
|
||||
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
|
||||
|
||||
|
||||
# multi-line string HTML
|
||||
print('''<!DOCTYPE>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
|
||||
<link rel="stylesheet" href="css/faceapp.css">
|
||||
<script src="js/highlight.js"></script>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title></title>
|
||||
|
||||
</head>
|
||||
<body>''')
|
||||
|
||||
|
||||
# $('div.t_chosen_words_{0}').mouseover(function(){
|
||||
# $(this).find('.t_chosen_words_{0}').text('i + 'is here').css('color', 'red');
|
||||
# })
|
||||
# .mouseout(function() {
|
||||
# $( this ).find( ".t_chosen_words" ).text( " " ).css('color', 'black');
|
||||
# });
|
||||
|
||||
|
||||
|
||||
|
||||
#wrapper
|
||||
print('<div class ="tos_wrapper"><div class="intro">')
|
||||
|
||||
#insert an image
|
||||
# https://upload.wikimedia.org/wikipedia/commons/1/15/Joffe_signing_the_Treaty_of_Tartu.jpg
|
||||
FaceApp_img_url = base64.b64encode(open('img/faceapp_logo.png', 'rb').read()).decode('utf-8')
|
||||
FaceApp_image = '<div class="img">FaceApp<br><img class="image" src="data:img/faceapp_logo.png;base64,{}"></div>'.format(FaceApp_img_url)
|
||||
print(FaceApp_image)
|
||||
|
||||
|
||||
#info box
|
||||
print('<div class ="info">')
|
||||
infotext = [('Name of Service', 'FaceApp'), ('Country of Origin', 'Russia'), ('Initial release', 'December 31, 2016'), ('Type', 'Image editing'), ('Word Counts', '5,392'), ('Original Source', '<a href="https://www.faceapp.com/terms-en.html">link</a>'), ('Description', 'FaceApp is a mobile application for iOS and Android developed by Russian company Wireless Lab. The app generates highly realistic transformations of human faces in photographs by using neural networks based on artificial intelligence. The app can transform a face to make it smile, look younger, look older, or change gender.')]
|
||||
|
||||
for title, info in infotext:
|
||||
print('<div class="info_{0}" ><div class="info_title" ><b>{0}</b></div><div class="info_content">{1}</div></div><br>'.format(title, info))
|
||||
|
||||
print('</div></div>')
|
||||
|
||||
|
||||
|
||||
#ToS text
|
||||
print('<div class ="paragraph">')
|
||||
for paragraph in faceapp_text_list:
|
||||
tokenized = word_tokenize(paragraph)
|
||||
tagged = pos_tag(tokenized)
|
||||
print('<p>')
|
||||
for word, pos in tagged:
|
||||
print('<span class="{0} {1}">{2}</span>'.format(pos.replace('.', 'dot').replace(',', 'comma').replace('(', 'marks').replace(')', 'marks').replace(':', 'marks').replace(';', 'marks'), word.replace('.', 'dot').replace(',', 'comma').replace('(', 'marks').replace(')', 'marks').replace(':', 'marks').replace(';', 'marks').lower(), word))
|
||||
print('</p>')
|
||||
|
||||
print('</div>')
|
||||
|
||||
|
||||
#tos top words list
|
||||
print('<div class="top_words"><div class="top_words_title" ><b>Frequent words</b></div>')
|
||||
|
||||
tokens_without_stopwords = nltk.FreqDist(words.lower() for words in tokenized if words.lower() not in tos_all_stopwords)
|
||||
frequency_word = FreqDist(tokens_without_stopwords)
|
||||
top_words = tokens_without_stopwords.most_common(30)
|
||||
|
||||
|
||||
for chosen_words, frequency in top_words:
|
||||
print('<div class="chosen_words" > {} ({}) </div>'.format(chosen_words, frequency))
|
||||
|
||||
print('</div></div></div>')
|
||||
|
||||
|
||||
# at the end of wrapper
|
||||
print('</div>')
|
||||
|
||||
|
||||
print('</div>')
|
||||
print('''</body></html>''')
|
||||
|
||||
@ -0,0 +1,70 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
$('.chosen_words').click( function(){
|
||||
var word = $(this).text();
|
||||
alert(word);
|
||||
});
|
||||
|
||||
$('.t_chosen_words').click( function(){
|
||||
var word = $(this).text();
|
||||
alert(word);
|
||||
});
|
||||
|
||||
|
||||
$('.TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC, .marks, .comma, .dot').click(
|
||||
function() {
|
||||
$('.TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC, .marks, .comma, .dot').toggleClass('hide');
|
||||
});
|
||||
|
||||
$('.JJ').click(
|
||||
function() {
|
||||
$('.JJ').toggleClass('adjective');
|
||||
});
|
||||
|
||||
$('.NN, .NNS').click(
|
||||
function() {
|
||||
$('.NN, .NNS').toggleClass('noun');
|
||||
});
|
||||
|
||||
$('.VB, .VBZ, .VBN, .VVD').click(
|
||||
function() {
|
||||
$('.VB, .VBZ, .VBN, .VVD').toggleClass('verb');
|
||||
});
|
||||
|
||||
$('.NNP, .NNPS').click(
|
||||
function() {
|
||||
$('.NNP, .NNPS').toggleClass('propernoun');
|
||||
});
|
||||
|
||||
$('.RB').click(
|
||||
function() {
|
||||
$('.RB').toggleClass('adverb');
|
||||
});
|
||||
|
||||
$('.RBR, .JJR').click(
|
||||
function() {
|
||||
$('.RBR, .JJR').toggleClass('adverb-comparative');
|
||||
});
|
||||
|
||||
$('.RBS').click(
|
||||
function() {
|
||||
$('.RBS').toggleClass('adverb-superlative');
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$('.image').click(
|
||||
function() {
|
||||
$(this).toggleClass('img_clicked');
|
||||
});
|
||||
|
||||
$('.t_image').click(
|
||||
function() {
|
||||
$(this).toggleClass('t_img_clicked');
|
||||
})
|
||||
|
||||
|
||||
|
||||
})
|
||||
@ -0,0 +1,48 @@
|
||||
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.
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,42 @@
|
||||
// index page
|
||||
var modal = document.getElementById("myModal");
|
||||
var btn = document.getElementById("button");
|
||||
|
||||
// Get the <span> element that closes the modal
|
||||
var span = document.getElementsByClassName("close")[0];
|
||||
// When the user clicks the button, open the modal
|
||||
btn.onclick = function() {
|
||||
modal.style.display = "block";
|
||||
}
|
||||
// When the user clicks on <span> (x), close the modal
|
||||
span.onclick = function() {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
// When the user clicks anywhere outside of the modal, close it
|
||||
window.onclick = function(event) {
|
||||
if (event.target == modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// index page
|
||||
var t_modal = document.getElementById("t_myModal");
|
||||
var t_btn = document.getElementById("t_button");
|
||||
|
||||
// Get the <span> element that closes the modal
|
||||
var t_span = document.getElementsByClassName("t_close")[0];
|
||||
// When the user clicks the button, open the modal
|
||||
t_btn.onclick = function() {
|
||||
t_modal.style.display = "block";
|
||||
}
|
||||
// When the user clicks on <span> (x), close the modal
|
||||
t_span.onclick = function() {
|
||||
t_modal.style.display = "none";
|
||||
}
|
||||
// When the user clicks anywhere outside of the modal, close it
|
||||
window.onclick = function(event) {
|
||||
if (event.target == t_modal) {
|
||||
t_modal.style.display = "none";
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
$(function(){
|
||||
var overlay = $('<div id="overlay"></div>');
|
||||
overlay.show();
|
||||
overlay.appendTo(document.body);
|
||||
$('.popup').show();
|
||||
$('.popupclose').click(function(){
|
||||
$('.popup').hide();
|
||||
overlay.appendTo(document.body).remove();
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('.x').click(function(){
|
||||
$('.popup').hide();
|
||||
overlay.appendTo(document.body).remove();
|
||||
return false;
|
||||
});
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,210 @@
|
||||
from __future__ import division
|
||||
import glob
|
||||
from nltk import *
|
||||
import re
|
||||
|
||||
|
||||
import nltk
|
||||
import codecs
|
||||
from nltk import sent_tokenize, word_tokenize, pos_tag
|
||||
from nltk.probability import FreqDist
|
||||
from nltk.corpus import stopwords
|
||||
nltk.download('stopwords')
|
||||
|
||||
|
||||
#open the txt file, read, and tokenize
|
||||
file = open('faceapp.txt','r')
|
||||
text = file.read()
|
||||
x = 1
|
||||
|
||||
#stopwords
|
||||
default_stopwords = set(stopwords.words('english'))
|
||||
custom_stopwords = set(codecs.open('stopwords.txt', 'r').read().splitlines())
|
||||
all_stopwords = default_stopwords | custom_stopwords
|
||||
|
||||
|
||||
|
||||
print(
|
||||
'''<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<style>
|
||||
|
||||
@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: "SourceCodePro";
|
||||
src: url("http://bohyewoo.com/webfonts/Source_Code_Pro/SourceCodePro-Regular.ttf");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
body {
|
||||
background-color: whitesmoke;
|
||||
# font-family: Belgika;
|
||||
# font-weight: 8th;
|
||||
# letter-spacing: -0.3px;
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
|
||||
}
|
||||
|
||||
.info {
|
||||
font-family: Belgika;
|
||||
font-weight: 8th;
|
||||
font-size: 10pt;
|
||||
width: 20%;
|
||||
float: left;
|
||||
border: 1px solid black;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.NNP {
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
.VBP {
|
||||
|
||||
}
|
||||
|
||||
.VBP:hover {
|
||||
background-color: gold;
|
||||
}
|
||||
|
||||
.NN {
|
||||
background-color: LightSkyBlue;
|
||||
}
|
||||
|
||||
.NNS {
|
||||
background-color: Aquamarine;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
font-family: SourceCodePro;
|
||||
font-weight: regular;
|
||||
letter-spacing: -0.5px;
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.top_words {
|
||||
font-family: Belgika;
|
||||
font-weight: 8th;
|
||||
font-size: 9pt;
|
||||
width: 25%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>'''
|
||||
)
|
||||
|
||||
|
||||
#info box
|
||||
print('<div class ="info">')
|
||||
infotext = [('service', 'FaceApp'), ('Type', 'Image editing'), ('Initial release', 'December 31 2016'), ('Type', 'Image editing'), ('source', '<a href="https://www.faceapp.com/terms-en.html">link</a>')]
|
||||
|
||||
for title, info in infotext:
|
||||
print('<span class="info-{0}">{0}:{1}</span><br>'.format(title, info))
|
||||
|
||||
print('</div>')
|
||||
|
||||
|
||||
|
||||
#ToS text
|
||||
print('<div class ="paragraph">')
|
||||
tokenized = word_tokenize(text)
|
||||
tagged = pos_tag(tokenized)
|
||||
|
||||
for word, pos in tagged:
|
||||
print('<span class="{}">{}</span>'.format(pos, word))
|
||||
print('</div>')
|
||||
|
||||
|
||||
|
||||
#colonial words list
|
||||
print('<div class="top_words"> colonial words:')
|
||||
|
||||
tokens_without_stopwords = nltk.FreqDist(words.lower() for words in tokenized if words.lower() not in all_stopwords)
|
||||
frequency_word = FreqDist(tokens_without_stopwords)
|
||||
top_words = tokens_without_stopwords.most_common(100)
|
||||
|
||||
for chosen_words, frequency in top_words:
|
||||
print('<br><span class="chosen_words">{}({}) </span>'.format(chosen_words, frequency))
|
||||
|
||||
|
||||
print('''</div></body></html>''')
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# # for new_file in tokens_without_stopwords:
|
||||
# appendFile = open('tokenized_words.txt', 'a')
|
||||
# appendFile.write(" " + new_file)
|
||||
# appendFile.close()
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# #shows only stopwords
|
||||
# processed_word_list = []
|
||||
|
||||
# for word in tokenized:
|
||||
# # print(word)
|
||||
# if word not in all_stopwords:
|
||||
# processed_word_list.append('*')
|
||||
# else:
|
||||
# processed_word_list.append(word)
|
||||
# print(processed_word_list)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# # # result putting in a graph
|
||||
# top_words_plot = frequency_word.plot(10)
|
||||
# print(top_words_plot)
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,520 @@
|
||||
# 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')
|
||||
|
||||
|
||||
# faceapp_file = open('faceapp.txt','r')
|
||||
with open('tos_file/faceapp.txt', 'r') as faceapp_file:
|
||||
faceapp_text = faceapp_file.read()
|
||||
faceapp_text_list = faceapp_text.split("\n\n")
|
||||
|
||||
with open('treaty_file/russia-estonia.txt', 'r') as russia_file:
|
||||
russia_text = russia_file.read()
|
||||
russia_text_list = russia_text.split("\n\n")
|
||||
|
||||
|
||||
#tos stopwords
|
||||
tos_default_stopwords = set(stopwords.words('english'))
|
||||
tos_custom_stopwords = set(codecs.open('stopwords.txt', 'r').read().splitlines())
|
||||
tos_all_stopwords = tos_default_stopwords | tos_custom_stopwords
|
||||
|
||||
#treaty stopwords
|
||||
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
|
||||
|
||||
|
||||
# multi-line string HTML
|
||||
print('''<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<style>
|
||||
|
||||
@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: "SourceCodePro";
|
||||
src: url("http://bohyewoo.com/webfonts/Source_Code_Pro/SourceCodePro-Regular.ttf");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.tos_wrapper {
|
||||
# background-color: yellow;
|
||||
width: 49%;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
border-right: 2px solid black;
|
||||
|
||||
}
|
||||
|
||||
.t_wrapper {
|
||||
# background-color: green;
|
||||
width: 49%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.intro {
|
||||
width: 75%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.t_intro {
|
||||
width: 75%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.img {
|
||||
# background-color: Aquamarine;
|
||||
font-family: Belgika;
|
||||
font-size: 20pt;
|
||||
padding-top: 30px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.image {
|
||||
height: 30vh;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.t_img {
|
||||
# background-color: Aquamarine;
|
||||
font-family: Belgika;
|
||||
font-size: 20pt;
|
||||
padding-top: 30px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.t_image {
|
||||
height: 30vh;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.info {
|
||||
# background-color: LightSkyBlue;
|
||||
font-family: helvetica;
|
||||
font-weight: regular;
|
||||
font-size: 10pt;
|
||||
width: 45vh;
|
||||
float: left;
|
||||
margin-top: 30px;
|
||||
|
||||
# border: 2px solid black;
|
||||
# text-align: center;
|
||||
column-count: 2;
|
||||
|
||||
}
|
||||
|
||||
.t_info {
|
||||
# background-color: LightSkyBlue;
|
||||
font-family: helvetica;
|
||||
font-weight: regular;
|
||||
font-size: 10pt;
|
||||
width: 45vh;
|
||||
float: left;
|
||||
margin-top: 30px;
|
||||
|
||||
# border: 2px solid black;
|
||||
# text-align: center;
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
|
||||
.paragraph {
|
||||
# background-color: gold;
|
||||
font-family: helvetica;
|
||||
font-weight: regular;
|
||||
font-size: 20px;
|
||||
width: 75%;
|
||||
padding: 10px;
|
||||
margin-top: 70px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.t_paragraph {
|
||||
# background-color: gold;
|
||||
font-family: helvetica;
|
||||
font-weight: regular;
|
||||
font-size: 20px;
|
||||
width: 98%;
|
||||
margin-top: 70px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.top_words {
|
||||
background-color: black;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
|
||||
font-family: Belgika;
|
||||
font-weight: 16th;
|
||||
font-size: 7.5pt;
|
||||
color: white;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
position: fixed;
|
||||
float: left;
|
||||
|
||||
}
|
||||
|
||||
.top_words_title {
|
||||
# background-color: yellow;
|
||||
margin: 40px 10px 10px 10px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.chosen_words {
|
||||
# background-color: pink;
|
||||
padding: 10px 1px 1px 10px;
|
||||
}
|
||||
|
||||
.chosen_words:hover {
|
||||
background-color: white;
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.t_top_words {
|
||||
background-color: black;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
|
||||
font-family: Belgika;
|
||||
font-weight: 16th;
|
||||
font-size: 7.5pt;
|
||||
color: white;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
position: fixed;
|
||||
float: right;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
}
|
||||
|
||||
.t_top_words_title {
|
||||
margin: 40px 10px 10px 10px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.t_chosen_words {
|
||||
padding: 10px 1px 1px 10px;
|
||||
}
|
||||
|
||||
.t_chosen_words:hover {
|
||||
background-color: white;
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.hide {
|
||||
# color: white;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.TO:hover, .DT:hover, .IN:hover, .WDT:hover, .WP:hover, .MD:hover, .PRP:hover, .CC:hover, .marks:hover, .comma:hover, .dot:hover {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.adjective {
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.JJ:hover {
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.noun {
|
||||
background-color: springgreen;
|
||||
}
|
||||
|
||||
.NN:hover, .NNS:hover {
|
||||
background-color: springgreen;
|
||||
}
|
||||
|
||||
.verb {
|
||||
background-color: yellow;
|
||||
# color: yellow;
|
||||
}
|
||||
|
||||
.VB:hover, .VBZ:hover, .VBN:hover, .VVD:hover {
|
||||
background-color: yellow;
|
||||
|
||||
}
|
||||
|
||||
.propernoun {
|
||||
background-color: pink;
|
||||
# color: pink;
|
||||
}
|
||||
|
||||
.NNP:hover, .NNPS:hover {
|
||||
background-color: pink;
|
||||
|
||||
}
|
||||
|
||||
.adverb {
|
||||
background-color: lightgreen;
|
||||
# color: lightgreen;
|
||||
}
|
||||
|
||||
.RB:hover, .RBR:hover, .JJR:hover, .RBS:hover {
|
||||
background-color: lightgreen;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
$('.chosen_words').click( function(){
|
||||
var word = $(this).text();
|
||||
alert(word);
|
||||
});
|
||||
|
||||
|
||||
$('.TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC, .marks, .comma, .dot').click(
|
||||
function() {
|
||||
$('.TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC, .marks, .comma, .dot').toggleClass('hide');
|
||||
});
|
||||
|
||||
$('.JJ').click(
|
||||
function() {
|
||||
$('.JJ').toggleClass('adjective');
|
||||
});
|
||||
|
||||
$('.NN, .NNS').click(
|
||||
function() {
|
||||
$('.NN, .NNS').toggleClass('noun');
|
||||
});
|
||||
|
||||
$('.VB, .VBZ, .VBN, .VVD').click(
|
||||
function() {
|
||||
$('.VB, .VBZ, .VBN, .VVD').toggleClass('verb');
|
||||
});
|
||||
|
||||
$('.NNP, .NNPS').click(
|
||||
function() {
|
||||
$('.NNP, .NNPS').toggleClass('propernoun');
|
||||
});
|
||||
|
||||
$('.RB').click(
|
||||
function() {
|
||||
$('.RB').toggleClass('adverb');
|
||||
});
|
||||
|
||||
$('.RBR, .JJR').click(
|
||||
function() {
|
||||
$('.RBR, .JJR').toggleClass('adverb-comparative');
|
||||
});
|
||||
|
||||
$('.RBS').click(
|
||||
function() {
|
||||
$('.RBS').toggleClass('adverb-superlative');
|
||||
});
|
||||
})
|
||||
|
||||
</script>''')
|
||||
|
||||
|
||||
# $('div.t_chosen_words_{0}').mouseover(function(){
|
||||
# $(this).find('.t_chosen_words_{0}').text('i + 'is here').css('color', 'red');
|
||||
# })
|
||||
# .mouseout(function() {
|
||||
# $( this ).find( ".t_chosen_words" ).text( " " ).css('color', 'black');
|
||||
# });
|
||||
|
||||
|
||||
|
||||
|
||||
#wrapper
|
||||
print('<div class ="tos_wrapper"><div class="intro">')
|
||||
|
||||
#insert an image
|
||||
# https://upload.wikimedia.org/wikipedia/commons/1/15/Joffe_signing_the_Treaty_of_Tartu.jpg
|
||||
FaceApp_img_url = base64.b64encode(open('img/faceapp_logo.png', 'rb').read()).decode('utf-8')
|
||||
FaceApp_image = '<div class="img">FaceApp<br><img class="image" src="data:img/faceapp_logo.png;base64,{}"></div>'.format(FaceApp_img_url)
|
||||
print(FaceApp_image)
|
||||
|
||||
|
||||
#info box
|
||||
print('<div class ="info">')
|
||||
infotext = [('Name of Service', 'FaceApp'), ('Country of Origin', 'Russia'), ('Initial release', 'December 31, 2016'), ('Type', 'Image editing'), ('Word Counts', '5,392'), ('Original Source', '<a href="https://www.faceapp.com/terms-en.html">link</a>'), ('Description', 'FaceApp is a mobile application for iOS and Android developed by Russian company Wireless Lab. The app generates highly realistic transformations of human faces in photographs by using neural networks based on artificial intelligence. The app can transform a face to make it smile, look younger, look older, or change gender.')]
|
||||
|
||||
for title, info in infotext:
|
||||
print('<div class="info_{0}" ><div class="info_title" style="-webkit-text-decoration-line: underline; text-decoration-line: underline;" >{0}</div><div class="info_content">{1}</div></div><br>'.format(title, info))
|
||||
|
||||
print('</div></div>')
|
||||
|
||||
|
||||
|
||||
#ToS text
|
||||
print('<div class ="paragraph">')
|
||||
for paragraph in faceapp_text_list:
|
||||
tokenized = word_tokenize(paragraph)
|
||||
tagged = pos_tag(tokenized)
|
||||
print('<p>')
|
||||
for word, pos in tagged:
|
||||
print('<span class="{0} {1}">{2}</span>'.format(pos.replace('.', 'dot').replace(',', 'comma').replace('(', 'marks').replace(')', 'marks').replace(':', 'marks').replace(';', 'marks'), word.replace('.', 'dot').replace(',', 'comma').replace('(', 'marks').replace(')', 'marks').replace(':', 'marks').replace(';', 'marks').lower(), word))
|
||||
print('</p>')
|
||||
|
||||
print('</div>')
|
||||
|
||||
|
||||
#tos top words list
|
||||
print('<div class="top_words"><div class="top_words_title" style="-webkit-text-decoration-line: underline; text-decoration-line: underline;" >Frequent words:</div>')
|
||||
|
||||
tokens_without_stopwords = nltk.FreqDist(words.lower() for words in tokenized if words.lower() not in tos_all_stopwords)
|
||||
frequency_word = FreqDist(tokens_without_stopwords)
|
||||
top_words = tokens_without_stopwords.most_common(30)
|
||||
|
||||
|
||||
for chosen_words, frequency in top_words:
|
||||
print('<div class="chosen_words" > {} ({}) </div>'.format(chosen_words, frequency))
|
||||
|
||||
print('</div></div></div>')
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#t_wrapper (second wrapper)
|
||||
print('</div><div class="t_wrapper"><div class="t_intro">')
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#insert an image
|
||||
# https://upload.wikimedia.org/wikipedia/commons/1/15/Joffe_signing_the_Treaty_of_Tartu.jpg
|
||||
img_url = base64.b64encode(open('img/tartu.jpeg', 'rb').read()).decode('utf-8')
|
||||
t_image = '<div class="t_img">Peace Treaty of Tartu, Estonia<br><img class="t_image" src="data:img/tartu.jpeg;base64,{}"></div>'.format(img_url)
|
||||
print(t_image)
|
||||
|
||||
|
||||
#t_info box
|
||||
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)">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.')]
|
||||
|
||||
for t_title, t_info in t_infotext:
|
||||
print('<div class="t_info-{0}"><div class="info_t_title" style="-webkit-text-decoration-line: underline; text-decoration-line: underline;" >{0}</div><div class="t_info_content">{1}</div></div><br>'.format(t_title, t_info))
|
||||
|
||||
print('</div>')
|
||||
|
||||
|
||||
#Treaty text
|
||||
print('<div class="t_paragraph">')
|
||||
for t_paragraph in russia_text_list:
|
||||
t_tokenized = word_tokenize(t_paragraph)
|
||||
t_tagged = pos_tag(t_tokenized)
|
||||
print('<p>')
|
||||
for t_word, t_pos in t_tagged:
|
||||
print('<span class="{0} {1}">{2}</span>'.format(t_pos.replace('.', 'dot').replace(',', 'comma').replace('(', 'marks').replace(')', 'marks').replace(':', 'marks').replace(';', 'marks'), t_word.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" style="-webkit-text-decoration-line: underline; text-decoration-line: underline;" >Frequent words:</div>')
|
||||
|
||||
t_tokens_without_stopwords = nltk.FreqDist(words.lower() for words in t_tokenized if words.lower() not in t_all_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" > {} ({}) </div>'.format(t_chosen_words, t_frequency))
|
||||
|
||||
print('</div></div></div>')
|
||||
|
||||
|
||||
|
||||
##### not working
|
||||
# #treaty colonial top words list
|
||||
# print('<div class="t_top_words"><div class="t_top_words_title" style="-webkit-text-decoration-line: underline; text-decoration-line: underline;" >colonial words:</div>')
|
||||
|
||||
# for words in faceapp_text_list:
|
||||
# t_tokens_without_stopwords = nltk.FreqDist(words.lower() for words in t_tokenized if words.lower() not in t_all_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" > {} ({}) </div>'.format(t_chosen_words, t_frequency))
|
||||
|
||||
# print('</div></div></div>')
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
print('</div>')
|
||||
print('''</body></html>''')
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,347 @@
|
||||
# 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')
|
||||
|
||||
|
||||
# faceapp_file = open('faceapp.txt','r')
|
||||
with open('tos_file/faceapp_sentence.txt', 'r') as faceapp_file:
|
||||
faceapp_text = faceapp_file.read()
|
||||
faceapp_text_list = faceapp_text.split("\n\n")
|
||||
|
||||
with open('treaty_file/russia_estonia_sentence.txt', 'r') as russia_file:
|
||||
russia_text = russia_file.read()
|
||||
russia_text_list = russia_text.split("\n\n")
|
||||
|
||||
|
||||
#tos stopwords
|
||||
tos_default_stopwords = set(stopwords.words('english'))
|
||||
tos_custom_stopwords = set(codecs.open('stopwords.txt', 'r').read().splitlines())
|
||||
tos_all_stopwords = tos_default_stopwords | tos_custom_stopwords
|
||||
|
||||
#treaty stopwords
|
||||
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
|
||||
|
||||
|
||||
# multi-line string HTML
|
||||
print('''<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<style>
|
||||
|
||||
@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: "SourceCodePro";
|
||||
src: url("http://bohyewoo.com/webfonts/Source_Code_Pro/SourceCodePro-Regular.ttf");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
body {
|
||||
}
|
||||
|
||||
.tos_wrapper {
|
||||
# background-color: yellow;
|
||||
width: 49.3%;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
border-right: 2px solid black;
|
||||
|
||||
}
|
||||
|
||||
.t_wrapper {
|
||||
# background-color: green;
|
||||
width: 49.3%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.t_img {
|
||||
# background-color: Aquamarine;
|
||||
font-family: helvetica;
|
||||
font-weight: regular;
|
||||
font-size: 20pt;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 30vh;
|
||||
}
|
||||
|
||||
.info {
|
||||
# background-color: LightSkyBlue;
|
||||
font-family: SourceCodePro;
|
||||
font-size: 10pt;
|
||||
width: 30vh;
|
||||
float: right;
|
||||
|
||||
# border: 2px solid black;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.t_info {
|
||||
# background-color: LightSkyBlue;
|
||||
font-family: SourceCodePro;
|
||||
font-size: 10pt;
|
||||
width: 30vh;
|
||||
float: right;
|
||||
|
||||
# border: 2px solid black;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.paragraph {
|
||||
# background-color: gold;
|
||||
font-family: helvetica;
|
||||
font-weight: regular;
|
||||
font-size: 40px;
|
||||
width: 98%;
|
||||
padding: 10px;
|
||||
margin-top: 70px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.t_paragraph {
|
||||
# background-color: gold;
|
||||
font-family: helvetica;
|
||||
font-weight: regular;
|
||||
font-size: 40px;
|
||||
width: 98%;
|
||||
margin-top: 70px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.top_words {
|
||||
# background-color: purple;
|
||||
font-family: helvetica;
|
||||
font-size: 15pt;
|
||||
width: 100%;
|
||||
column-count: 4;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.top_words_title {
|
||||
# background-color: yellow;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chosen_words {
|
||||
# background-color: pink;
|
||||
line-height: 0.1;
|
||||
float: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.t_top_words {
|
||||
# background-color: purple;
|
||||
font-family: helvetica;
|
||||
font-size: 15pt;
|
||||
width: 100%;
|
||||
column-count: 4;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.t_top_words_title {
|
||||
# background-color: yellow;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.t_chosen_words {
|
||||
# background-color: pink;
|
||||
line-height: 0.1;
|
||||
float: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.hide {
|
||||
# color: white;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
$(document).ready(function() {
|
||||
if ($('.TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC, .VB, .VBZ, .CD').click(function() {
|
||||
$('.TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC, .VB, .VBZ, .CD').toggleClass('hide'); // reset
|
||||
}));
|
||||
|
||||
else ($('span').click(
|
||||
function(){
|
||||
var selectedclass = $(this).attr('class');
|
||||
$('span').css('background-color', 'white').css('color','black'); // reset
|
||||
$('span.' + selectedclass).css('background-color', '#FF4500').css('color', 'white'); //highlighting the select
|
||||
}));
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
''')
|
||||
|
||||
|
||||
|
||||
|
||||
#wrapper
|
||||
print('<div class ="tos_wrapper">')
|
||||
|
||||
#insert an image
|
||||
# https://upload.wikimedia.org/wikipedia/commons/1/15/Joffe_signing_the_Treaty_of_Tartu.jpg
|
||||
FaceApp_img_url = base64.b64encode(open('img/faceapp_logo.png', 'rb').read()).decode('utf-8')
|
||||
FaceApp_image = '<div class="t_img">FaceApp<br><img class="img" src="data:img/faceapp_logo.png;base64,{}"></div>'.format(FaceApp_img_url)
|
||||
print(FaceApp_image)
|
||||
|
||||
|
||||
#info box
|
||||
print('<div class ="info">')
|
||||
infotext = [('Service', 'FaceApp'), ('Country', 'Russia'), ('Type', 'Image editing'), ('Initial release', 'December 31, 2016'), ('source', '<a href="https://www.faceapp.com/terms-en.html">link</a>'), ('Description', 'FaceApp is a mobile application for iOS and Android developed by Russian company Wireless Lab. The app generates highly realistic transformations of human faces in photographs by using neural networks based on artificial intelligence. The app can transform a face to make it smile, look younger, look older, or change gender.')]
|
||||
|
||||
for title, info in infotext:
|
||||
print('<div class="info_{0}" style="border-top: 2px solid black;"><div class="info_title" >{0}</div><div class="info_content">{1}</div></div><br>'.format(title, info))
|
||||
|
||||
print('</div>')
|
||||
|
||||
|
||||
|
||||
#ToS text
|
||||
print('<div class ="paragraph">')
|
||||
|
||||
|
||||
# for paragraph in faceapp_text_list:
|
||||
# tokenized = word_tokenize(paragraph)
|
||||
# tagged = pos_tag(tokenized)
|
||||
# print('<p>')
|
||||
# for word, pos in tagged:
|
||||
# print('<span class="{}">{}</span>'.format(pos, word))
|
||||
# print('</p>')
|
||||
# print('</div>')
|
||||
|
||||
|
||||
|
||||
# #faceapp_text
|
||||
tokenized = word_tokenize(faceapp_text)
|
||||
tagged = pos_tag(tokenized)
|
||||
print('<p>')
|
||||
for word, pos in tagged:
|
||||
print('<span class="{}">{}</span>'.format(pos, word))
|
||||
print('</p>')
|
||||
print('</div>')
|
||||
|
||||
|
||||
#colonial words list
|
||||
print('<div class="top_words"><div class="top_words_title" style="-webkit-text-decoration-line: underline; text-decoration-line: underline;" >colonial words:</div>')
|
||||
|
||||
tokens_without_stopwords = nltk.FreqDist(words.lower() for words in tokenized if words.lower() not in tos_all_stopwords)
|
||||
frequency_word = FreqDist(tokens_without_stopwords)
|
||||
top_words = tokens_without_stopwords.most_common(20)
|
||||
|
||||
|
||||
for chosen_words, frequency in top_words:
|
||||
print('<br><div class="chosen_words" >{}({}) </div>'.format(chosen_words, frequency))
|
||||
|
||||
print('</div></div>')
|
||||
|
||||
|
||||
|
||||
|
||||
#t_wrapper (second wrapper)
|
||||
print('</div><div class="t_wrapper">')
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#insert an image
|
||||
# https://upload.wikimedia.org/wikipedia/commons/1/15/Joffe_signing_the_Treaty_of_Tartu.jpg
|
||||
img_url = base64.b64encode(open('img/tartu.jpeg', 'rb').read()).decode('utf-8')
|
||||
t_image = '<div class="t_img">Peace Treaty of Tartu<br><img class="img" src="data:img/tartu.jpeg;base64,{}"></div>'.format(img_url)
|
||||
print(t_image)
|
||||
|
||||
|
||||
#t_info box
|
||||
print('<div class ="t_info">')
|
||||
t_infotext = [('Name of Treaty', 'Peace Treaty of Tartu'), ('Country', 'Russia'), ('Date', 'February 2, 1920'), ('Location', 'Tartu, Estonia'), ('Signed', 'February 2, 1920'), ('Type', 'bilateral peace treaty'), ('source', '<a href="https://en.wikipedia.org/wiki/Treaty_of_Tartu_(Russian-Estonian)">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.')]
|
||||
|
||||
for t_title, t_info in t_infotext:
|
||||
print('<div class="t_info-{0}" style="border-top: 2px solid black;"><div class="info_t_title" >{0}</div><div class="t_info_content">{1}</div></div><br>'.format(t_title, t_info))
|
||||
|
||||
print('</div>')
|
||||
|
||||
|
||||
#ToS text
|
||||
print('<div class="t_paragraph">')
|
||||
t_tokenized = word_tokenize(russia_text)
|
||||
t_tagged = pos_tag(t_tokenized)
|
||||
|
||||
for t_word, t_pos in t_tagged:
|
||||
print('<span class="{}">{}</span>'.format(t_pos, t_word))
|
||||
print('<p>')
|
||||
print('</div>')
|
||||
|
||||
|
||||
|
||||
#treaty colonial words list
|
||||
print('<div class="t_top_words"><div class="t_top_words_title" style="-webkit-text-decoration-line: underline; text-decoration-line: underline;" >colonial words:</div>')
|
||||
|
||||
t_tokens_without_stopwords = nltk.FreqDist(words.lower() for words in t_tokenized if words.lower() not in t_all_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('<br><div class="t_chosen_words" >{}({}) </div>'.format(t_chosen_words, t_frequency))
|
||||
|
||||
print('</div></div>')
|
||||
|
||||
|
||||
|
||||
print('</div>')
|
||||
print('''</body></html>''')
|
||||
|
||||
|
||||
@ -0,0 +1,95 @@
|
||||
|
||||
$('.agreement').click(function(){
|
||||
var word = $(this).text();
|
||||
alert(word);
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('.chosen_words').hover(function(){
|
||||
var word = $(this).text();
|
||||
toggleClass(word);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$('.agreement').hover(function(){
|
||||
$( this ).css('background-color', 'pink');
|
||||
}).;
|
||||
|
||||
|
||||
$('div').hover(function() {
|
||||
$(this).attr(class).css('border','2px solid red');
|
||||
}, function() {
|
||||
$(this).attr(class).css('border',' ');
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
$('div').hover(function() {
|
||||
$(this).attr(class).css('border','2px solid red');
|
||||
}, function() {
|
||||
$(this).attr(class).css('border',' ');
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var highlight = document.getElementsByClassName("agreement");
|
||||
|
||||
for (var i = 0; i < highlight.length; i++) {
|
||||
highlight[i].addEventListener("mouseover", highlightThem);
|
||||
highlight[i].addEventListener("mouseout", DontHighlightThem);
|
||||
}
|
||||
|
||||
function highlightThem() {
|
||||
for (var i = 0; i < highlight.length; i++) {
|
||||
highlight[i].classList.add("highlight");
|
||||
}
|
||||
}
|
||||
function DontHighlightThem() {
|
||||
for (var i = 0; i < highlight.length; i++) {
|
||||
highlight[i].classList.remove("highlight");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#image click
|
||||
|
||||
|
||||
|
||||
var images = document.querySelectorAll('.img');
|
||||
|
||||
for (var i=0; i < images.length; i++) {
|
||||
images[i].addEventListener('click', function () {
|
||||
if (this.parentElement && this.parentElement.tagName.toLowerCase() == 'div') {
|
||||
this.parentElement.classList.toggle('img_clicked');
|
||||
} else {
|
||||
this.classList.toggle('img_clicked');
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,773 @@
|
||||
@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');
|
||||
|
||||
|
||||
/* pop-up */
|
||||
|
||||
#overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
filter:alpha(opacity=70);
|
||||
-moz-opacity:0.7;
|
||||
-khtml-opacity: 0.7;
|
||||
opacity: 0.7;
|
||||
z-index: 998;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cnt223 a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.popup{
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.cnt223{
|
||||
min-width: 600px;
|
||||
width: 60vw;
|
||||
min-height: 150px;
|
||||
margin: 100px auto;
|
||||
background: #f3f3f3;
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
padding: 15px 35px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 5px #000;
|
||||
}
|
||||
|
||||
.cnt223 p{
|
||||
font-size: 20px;
|
||||
font-family: 'Anonymous Pro', monospace;
|
||||
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;
|
||||
}
|
||||
|
||||
.popupclose {
|
||||
background-color: black;
|
||||
color: white !important;
|
||||
font-size: 15pt;
|
||||
padding: 5px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.popupclose:hover {
|
||||
background-color: red;
|
||||
border: 1px solid black;
|
||||
color: white !important;
|
||||
font-size: 15pt;
|
||||
padding: 5px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* index.html */
|
||||
|
||||
* {
|
||||
top: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.wrapper {
|
||||
background-color: black;
|
||||
/* font-family: 'Source Code Pro', monospace;*/
|
||||
font-family: 'Anonymous Pro', monospace;
|
||||
/* font-family: 'Raleway', sans-serif;
|
||||
*/ font-weight: 400;
|
||||
line-height: 1.5;
|
||||
font-size: 12pt;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.tos {
|
||||
background-color: white;
|
||||
width: 60%;
|
||||
border: 0.5px solid black;
|
||||
/* outline: 40px dotted black;
|
||||
*/ padding: 40px;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
|
||||
.index-menu {
|
||||
width: 15%;
|
||||
top: 50px;
|
||||
left: 20px;
|
||||
|
||||
font-family: Belgika-8th;
|
||||
font-size: 7pt;
|
||||
color: white;
|
||||
letter-spacing: 0.6px;
|
||||
|
||||
position: fixed;
|
||||
float: left;
|
||||
z-index: 998;
|
||||
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
border-bottom: 1px solid white;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
.menu-title:hover {
|
||||
background-color: black;
|
||||
color: white;
|
||||
border-bottom: 1px solid white;
|
||||
|
||||
}
|
||||
|
||||
.menu-title-country {
|
||||
background-color: black;
|
||||
color: white;
|
||||
border: 0.1px solid white;
|
||||
padding: 5px;
|
||||
z-index: 995;
|
||||
}
|
||||
|
||||
|
||||
.index-menu-right {
|
||||
width: 15%;
|
||||
top: 50px;
|
||||
right: calc(0.8vw);
|
||||
|
||||
|
||||
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: 998;
|
||||
|
||||
}
|
||||
|
||||
#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 {
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
border-bottom: 2px dotted black;
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
.text {
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-bottom: 2px dotted black;
|
||||
|
||||
}
|
||||
|
||||
.text .text-hover {
|
||||
visibility: hidden;
|
||||
width: 400px;
|
||||
font-family: Belgika-8th;
|
||||
font-size: 8pt;
|
||||
|
||||
padding: 10px;
|
||||
background-color: red;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px 0;
|
||||
|
||||
/* Position the tooltip */
|
||||
position: absolute;
|
||||
/* z-index: 1;
|
||||
*/
|
||||
top: -90px;
|
||||
left: 110%;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
|
||||
.text .text-hover-top {
|
||||
visibility: hidden;
|
||||
width: 600px;
|
||||
font-family: Belgika-8th;
|
||||
font-size: 8pt;
|
||||
padding: 10px;
|
||||
background-color: red;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px 0;
|
||||
|
||||
/* Position the tooltip */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
top: -120px;
|
||||
left: 110%;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.text .text-hover-img {
|
||||
visibility: hidden;
|
||||
/* Position the tooltip */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
top: -400px;
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
|
||||
.text:hover {
|
||||
color: red;
|
||||
border-bottom: 2px dotted red;
|
||||
}
|
||||
|
||||
.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: 11pt;
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
.reference-text {
|
||||
font-size: 9pt;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.reference-link {
|
||||
font-size: 9pt;
|
||||
border-bottom: 2px dotted black;
|
||||
}
|
||||
|
||||
.reference-link:hover {
|
||||
color: red;
|
||||
font-size: 9pt;
|
||||
border-bottom: 2px dotted red;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* The Modal (background) */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
border: 1px solid #888;
|
||||
float: left;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
::-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: auto;
|
||||
float: right;
|
||||
border: 1px solid #888;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
top: 0;
|
||||
left: calc(46vw);
|
||||
color: #aaaaaa;
|
||||
float: right;
|
||||
font-size: 60px;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.t_close {
|
||||
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 {
|
||||
/* background-color: black;
|
||||
*/ border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#t_button {
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.button-faceapp, .button-russia {
|
||||
background-color: black;
|
||||
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: none;
|
||||
top:0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* FaceApp*/
|
||||
p {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.img {
|
||||
font-family: Belgika;
|
||||
font-size: 20pt;
|
||||
margin-left: calc(10vw + 5px);
|
||||
}
|
||||
|
||||
.image {
|
||||
height: 10vh;
|
||||
margin-top: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.img_clicked {
|
||||
height: calc(20vw);
|
||||
margin-top: 30px;
|
||||
|
||||
}
|
||||
|
||||
.t_img {
|
||||
font-family: Belgika;
|
||||
font-size: 20pt;
|
||||
margin-right: calc(10vw + 5px);
|
||||
}
|
||||
|
||||
.t_image {
|
||||
height: 10vh;
|
||||
margin-top: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.t_img_clicked {
|
||||
height: calc(20vw);
|
||||
margin-top: 30px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.info {
|
||||
font-family: belgika-16th;
|
||||
font-size: 8pt;
|
||||
width: calc(30vw);
|
||||
float: left;
|
||||
margin-top: 30px;
|
||||
margin-left: calc(10vw + 5px);
|
||||
|
||||
column-count: 2;
|
||||
|
||||
}
|
||||
|
||||
.t_info {
|
||||
font-family: belgika-16th;
|
||||
font-size: 8pt;
|
||||
width: calc(30vw);
|
||||
float: left;
|
||||
margin-top: 30px;
|
||||
margin-right: calc(10vw + 5px);
|
||||
|
||||
column-count: 2;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.paragraph {
|
||||
width: 75%;
|
||||
padding: 10px;
|
||||
margin-top: 70px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.t_paragraph {
|
||||
width: 75%;
|
||||
padding: 10px;
|
||||
margin-top: 70px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.top_words {
|
||||
background-color: black;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
|
||||
font-family: Belgika;
|
||||
font-weight: 16th;
|
||||
font-size: 7.5pt;
|
||||
color: white;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 1;
|
||||
|
||||
position: fixed;
|
||||
|
||||
}
|
||||
|
||||
.top_words_title {
|
||||
# background-color: yellow;
|
||||
margin: 40px 10px 10px 10px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.chosen_words {
|
||||
# background-color: pink;
|
||||
padding: 10px 1px 1px 10px;
|
||||
}
|
||||
|
||||
.chosen_words:hover {
|
||||
background-color: white;
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.t_top_words {
|
||||
background-color: black;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
|
||||
font-family: Belgika-16th;
|
||||
font-size: 7.5pt;
|
||||
color: white;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 1;
|
||||
|
||||
position: fixed;
|
||||
float: right;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
}
|
||||
|
||||
.t_top_words_title {
|
||||
margin: 40px 10px 10px 10px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.t_chosen_words {
|
||||
padding: 10px 1px 1px 10px;
|
||||
}
|
||||
|
||||
.t_chosen_words:hover {
|
||||
background-color: white;
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.hide {
|
||||
# color: white;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.TO:hover, .DT:hover, .IN:hover, .WDT:hover, .WP:hover, .MD:hover, .PRP:hover, .CC:hover, .marks:hover, .comma:hover, .dot:hover {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.adjective {
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.JJ:hover {
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.noun {
|
||||
background-color: springgreen;
|
||||
}
|
||||
|
||||
.NN:hover, .NNS:hover {
|
||||
background-color: springgreen;
|
||||
}
|
||||
|
||||
.verb {
|
||||
background-color: yellow;
|
||||
# color: yellow;
|
||||
}
|
||||
|
||||
.VB:hover, .VBZ:hover, .VBN:hover, .VVD:hover {
|
||||
background-color: yellow;
|
||||
|
||||
}
|
||||
|
||||
.propernoun {
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
.NNP:hover, .NNPS:hover {
|
||||
background-color: pink;
|
||||
|
||||
}
|
||||
|
||||
.adverb {
|
||||
background-color: lightgreen;
|
||||
# color: lightgreen;
|
||||
}
|
||||
|
||||
.RB:hover, .RBR:hover, .JJR:hover, .RBS:hover {
|
||||
background-color: lightgreen;
|
||||
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,773 @@
|
||||
@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');
|
||||
|
||||
|
||||
/* pop-up */
|
||||
|
||||
#overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
filter:alpha(opacity=70);
|
||||
-moz-opacity:0.7;
|
||||
-khtml-opacity: 0.7;
|
||||
opacity: 0.7;
|
||||
z-index: 998;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cnt223 a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.popup{
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.cnt223{
|
||||
min-width: 600px;
|
||||
width: 60vw;
|
||||
min-height: 150px;
|
||||
margin: 100px auto;
|
||||
background: #f3f3f3;
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
padding: 15px 35px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 5px #000;
|
||||
}
|
||||
|
||||
.cnt223 p{
|
||||
font-size: 20px;
|
||||
font-family: 'Anonymous Pro', monospace;
|
||||
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;
|
||||
}
|
||||
|
||||
.popupclose {
|
||||
background-color: black;
|
||||
color: white !important;
|
||||
font-size: 15pt;
|
||||
padding: 5px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.popupclose:hover {
|
||||
background-color: red;
|
||||
border: 1px solid black;
|
||||
color: white !important;
|
||||
font-size: 15pt;
|
||||
padding: 5px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* index.html */
|
||||
|
||||
* {
|
||||
top: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.wrapper {
|
||||
background-color: black;
|
||||
/* font-family: 'Source Code Pro', monospace;*/
|
||||
font-family: 'Anonymous Pro', monospace;
|
||||
/* font-family: 'Raleway', sans-serif;
|
||||
*/ font-weight: 400;
|
||||
line-height: 1.5;
|
||||
font-size: 12pt;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.tos {
|
||||
background-color: white;
|
||||
width: 60%;
|
||||
border: 0.5px solid black;
|
||||
/* outline: 40px dotted black;
|
||||
*/ padding: 40px;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
|
||||
.index-menu {
|
||||
width: 15%;
|
||||
top: 50px;
|
||||
left: 20px;
|
||||
|
||||
font-family: Belgika-8th;
|
||||
font-size: 7pt;
|
||||
color: white;
|
||||
letter-spacing: 0.6px;
|
||||
|
||||
position: fixed;
|
||||
float: left;
|
||||
z-index: 998;
|
||||
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
border-bottom: 1px solid white;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
.menu-title:hover {
|
||||
background-color: black;
|
||||
color: white;
|
||||
border-bottom: 1px solid white;
|
||||
|
||||
}
|
||||
|
||||
.menu-title-country {
|
||||
background-color: black;
|
||||
color: white;
|
||||
border: 0.1px solid white;
|
||||
padding: 5px;
|
||||
z-index: 995;
|
||||
}
|
||||
|
||||
|
||||
.index-menu-right {
|
||||
width: 15%;
|
||||
top: 50px;
|
||||
right: calc(0.8vw);
|
||||
|
||||
|
||||
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: 998;
|
||||
|
||||
}
|
||||
|
||||
#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 {
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
border-bottom: 2px dotted black;
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
.text {
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-bottom: 2px dotted black;
|
||||
|
||||
}
|
||||
|
||||
.text .text-hover {
|
||||
visibility: hidden;
|
||||
width: 400px;
|
||||
font-family: Belgika-8th;
|
||||
font-size: 8pt;
|
||||
|
||||
padding: 10px;
|
||||
background-color: red;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px 0;
|
||||
|
||||
/* Position the tooltip */
|
||||
position: absolute;
|
||||
/* z-index: 1;
|
||||
*/
|
||||
top: -90px;
|
||||
left: 110%;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
|
||||
.text .text-hover-top {
|
||||
visibility: hidden;
|
||||
width: 600px;
|
||||
font-family: Belgika-8th;
|
||||
font-size: 8pt;
|
||||
padding: 10px;
|
||||
background-color: red;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px 0;
|
||||
|
||||
/* Position the tooltip */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
top: -120px;
|
||||
left: 110%;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.text .text-hover-img {
|
||||
visibility: hidden;
|
||||
/* Position the tooltip */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
top: -400px;
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
|
||||
.text:hover {
|
||||
color: red;
|
||||
border-bottom: 2px dotted red;
|
||||
}
|
||||
|
||||
.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: 11pt;
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
.reference-text {
|
||||
font-size: 9pt;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.reference-link {
|
||||
font-size: 9pt;
|
||||
border-bottom: 2px dotted black;
|
||||
}
|
||||
|
||||
.reference-link:hover {
|
||||
color: red;
|
||||
font-size: 9pt;
|
||||
border-bottom: 2px dotted red;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* The Modal (background) */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
border: 1px solid #888;
|
||||
float: left;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
::-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: auto;
|
||||
float: right;
|
||||
border: 1px solid #888;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
top: 0;
|
||||
left: calc(46vw);
|
||||
color: #aaaaaa;
|
||||
float: right;
|
||||
font-size: 60px;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.t_close {
|
||||
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 {
|
||||
/* background-color: black;
|
||||
*/ border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#t_button {
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.button-faceapp, .button-russia {
|
||||
background-color: black;
|
||||
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: none;
|
||||
top:0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* FaceApp*/
|
||||
p {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.img {
|
||||
font-family: Belgika;
|
||||
font-size: 20pt;
|
||||
margin-left: calc(10vw + 5px);
|
||||
}
|
||||
|
||||
.image {
|
||||
height: 10vh;
|
||||
margin-top: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.img_clicked {
|
||||
height: calc(20vw);
|
||||
margin-top: 30px;
|
||||
|
||||
}
|
||||
|
||||
.t_img {
|
||||
font-family: Belgika;
|
||||
font-size: 20pt;
|
||||
margin-right: calc(10vw + 5px);
|
||||
}
|
||||
|
||||
.t_image {
|
||||
height: 10vh;
|
||||
margin-top: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.t_img_clicked {
|
||||
height: calc(20vw);
|
||||
margin-top: 30px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.info {
|
||||
font-family: belgika-16th;
|
||||
font-size: 8pt;
|
||||
width: calc(30vw);
|
||||
float: left;
|
||||
margin-top: 30px;
|
||||
margin-left: calc(10vw + 5px);
|
||||
|
||||
column-count: 2;
|
||||
|
||||
}
|
||||
|
||||
.t_info {
|
||||
font-family: belgika-16th;
|
||||
font-size: 8pt;
|
||||
width: calc(30vw);
|
||||
float: left;
|
||||
margin-top: 30px;
|
||||
margin-right: calc(10vw + 5px);
|
||||
|
||||
column-count: 2;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.paragraph {
|
||||
width: 75%;
|
||||
padding: 10px;
|
||||
margin-top: 70px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.t_paragraph {
|
||||
width: 75%;
|
||||
padding: 10px;
|
||||
margin-top: 70px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.top_words {
|
||||
background-color: black;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
|
||||
font-family: Belgika;
|
||||
font-weight: 16th;
|
||||
font-size: 7.5pt;
|
||||
color: white;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 1;
|
||||
|
||||
position: fixed;
|
||||
|
||||
}
|
||||
|
||||
.top_words_title {
|
||||
# background-color: yellow;
|
||||
margin: 40px 10px 10px 10px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.chosen_words {
|
||||
# background-color: pink;
|
||||
padding: 10px 1px 1px 10px;
|
||||
}
|
||||
|
||||
.chosen_words:hover {
|
||||
background-color: white;
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.t_top_words {
|
||||
background-color: black;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
|
||||
font-family: Belgika-16th;
|
||||
font-size: 7.5pt;
|
||||
color: white;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 1;
|
||||
|
||||
position: fixed;
|
||||
float: right;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
}
|
||||
|
||||
.t_top_words_title {
|
||||
margin: 40px 10px 10px 10px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.t_chosen_words {
|
||||
padding: 10px 1px 1px 10px;
|
||||
}
|
||||
|
||||
.t_chosen_words:hover {
|
||||
background-color: white;
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.hide {
|
||||
# color: white;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.TO:hover, .DT:hover, .IN:hover, .WDT:hover, .WP:hover, .MD:hover, .PRP:hover, .CC:hover, .marks:hover, .comma:hover, .dot:hover {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.adjective {
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.JJ:hover {
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.noun {
|
||||
background-color: springgreen;
|
||||
}
|
||||
|
||||
.NN:hover, .NNS:hover {
|
||||
background-color: springgreen;
|
||||
}
|
||||
|
||||
.verb {
|
||||
background-color: yellow;
|
||||
# color: yellow;
|
||||
}
|
||||
|
||||
.VB:hover, .VBZ:hover, .VBN:hover, .VVD:hover {
|
||||
background-color: yellow;
|
||||
|
||||
}
|
||||
|
||||
.propernoun {
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
.NNP:hover, .NNPS:hover {
|
||||
background-color: pink;
|
||||
|
||||
}
|
||||
|
||||
.adverb {
|
||||
background-color: lightgreen;
|
||||
# color: lightgreen;
|
||||
}
|
||||
|
||||
.RB:hover, .RBR:hover, .JJR:hover, .RBS:hover {
|
||||
background-color: lightgreen;
|
||||
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,554 @@
|
||||
@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');
|
||||
|
||||
|
||||
/* pop-up */
|
||||
|
||||
#overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
filter:alpha(opacity=70);
|
||||
-moz-opacity:0.7;
|
||||
-khtml-opacity: 0.7;
|
||||
opacity: 0.7;
|
||||
z-index: 998;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cnt223 a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.popup{
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.cnt223{
|
||||
min-width: 600px;
|
||||
width: 60vw;
|
||||
min-height: 150px;
|
||||
margin: 100px auto;
|
||||
background: #f3f3f3;
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
padding: 15px 35px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 5px #000;
|
||||
}
|
||||
|
||||
.cnt223 p{
|
||||
font-size: 16px;
|
||||
font-family: 'Anonymous Pro', monospace;
|
||||
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;
|
||||
}
|
||||
|
||||
.popupclose {
|
||||
background-color: black;
|
||||
color: white !important;
|
||||
font-size: 15pt;
|
||||
padding: 5px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.popupclose:hover {
|
||||
background-color: red;
|
||||
border: 1px solid black;
|
||||
color: white !important;
|
||||
font-size: 15pt;
|
||||
padding: 5px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* index.html */
|
||||
|
||||
* {
|
||||
top: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.wrapper {
|
||||
background-color: black;
|
||||
/* font-family: 'Source Code Pro', monospace;*/
|
||||
font-family: 'Anonymous Pro', monospace;
|
||||
/* font-family: 'Raleway', sans-serif;
|
||||
*/ font-weight: 400;
|
||||
line-height: 1.5;
|
||||
font-size: 12pt;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
|
||||
}
|
||||
|
||||
.tos {
|
||||
background-color: white;
|
||||
width: 60%;
|
||||
border: 0.5px solid black;
|
||||
/* outline: 40px dotted black;
|
||||
*/ padding: 40px;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
|
||||
.index-menu {
|
||||
width: 15%;
|
||||
top: 50px;
|
||||
left: 20px;
|
||||
|
||||
font-family: Belgika-8th;
|
||||
font-size: 7pt;
|
||||
color: white;
|
||||
letter-spacing: 0.6px;
|
||||
|
||||
position: fixed;
|
||||
float: left;
|
||||
z-index: 998;
|
||||
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
border-bottom: 1px solid white;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
.menu-title:hover {
|
||||
background-color: black;
|
||||
color: white;
|
||||
border-bottom: 1px solid white;
|
||||
|
||||
}
|
||||
|
||||
.menu-title-country {
|
||||
background-color: black;
|
||||
color: white;
|
||||
border: 0.1px solid white;
|
||||
padding: 5px;
|
||||
z-index: 995;
|
||||
}
|
||||
|
||||
|
||||
.index-menu-right {
|
||||
width: 15%;
|
||||
top: 50px;
|
||||
right: calc(0.8vw);
|
||||
|
||||
|
||||
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: 998;
|
||||
|
||||
}
|
||||
|
||||
#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 {
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
border-bottom: 2px dotted black;
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
.text {
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-bottom: 2px dotted black;
|
||||
|
||||
}
|
||||
|
||||
.text .text-hover {
|
||||
visibility: hidden;
|
||||
width: 400px;
|
||||
font-family: Belgika-8th;
|
||||
font-size: 8pt;
|
||||
|
||||
padding: 10px;
|
||||
background-color: red;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px 0;
|
||||
|
||||
/* Position the tooltip */
|
||||
position: absolute;
|
||||
/* z-index: 1;
|
||||
*/
|
||||
top: -90px;
|
||||
left: 110%;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
|
||||
.text .text-hover-top {
|
||||
visibility: hidden;
|
||||
width: 600px;
|
||||
font-family: Belgika-8th;
|
||||
font-size: 8pt;
|
||||
padding: 10px;
|
||||
background-color: red;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px 0;
|
||||
|
||||
/* Position the tooltip */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
top: -120px;
|
||||
left: 110%;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.text .text-hover-img {
|
||||
visibility: hidden;
|
||||
/* Position the tooltip */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
top: -400px;
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
|
||||
.text:hover {
|
||||
color: red;
|
||||
border-bottom: 2px dotted red;
|
||||
}
|
||||
|
||||
.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: 11pt;
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
.reference-text {
|
||||
font-size: 9pt;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.reference-link {
|
||||
font-size: 9pt;
|
||||
border-bottom: 2px dotted black;
|
||||
}
|
||||
|
||||
.reference-link:hover {
|
||||
color: red;
|
||||
font-size: 9pt;
|
||||
border-bottom: 2px dotted red;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* The Modal (background) */
|
||||
|
||||
.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: 998;
|
||||
}
|
||||
|
||||
::-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: 998;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
top: 0;
|
||||
left: calc(46vw);
|
||||
color: #aaaaaa;
|
||||
float: right;
|
||||
font-size: 60px;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.t_close {
|
||||
top: 0;
|
||||
right: calc(1vw);
|
||||
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 {
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#t_button {
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.button-faceapp, .button-russia {
|
||||
background-color: black;
|
||||
|
||||
}
|
||||
|
||||
#tosview {
|
||||
border: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: -20px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
#treatyview {
|
||||
border: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: -20px;
|
||||
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
from bs4 import BeautifulSoup
|
||||
from urllib.parse import quote as urlquote, unquote as urlunquote
|
||||
|
||||
file = open('tag_comparison.py', 'r')
|
||||
x = 1
|
||||
print(read)
|
||||
|
||||
with open(file, 'w') as new_html:
|
||||
read = new_html.read()
|
||||
html = BeautifulSoup(text, 'html.parser')
|
||||
line = html.find('NN', 'span')
|
||||
@ -0,0 +1,281 @@
|
||||
from __future__ import division
|
||||
import glob
|
||||
from nltk import *
|
||||
import re
|
||||
|
||||
|
||||
import nltk
|
||||
import codecs
|
||||
from nltk import sent_tokenize, word_tokenize, pos_tag
|
||||
from nltk.probability import FreqDist
|
||||
from nltk.corpus import stopwords
|
||||
nltk.download('stopwords')
|
||||
|
||||
|
||||
|
||||
|
||||
# infofile = open('faceapp_infos.txt','r')
|
||||
# infotext = infofile.read()
|
||||
|
||||
#open the txt file, read, and tokenize
|
||||
file = open('faceapp.txt','r')
|
||||
text = file.read()
|
||||
#not sure if this works..
|
||||
x = 1
|
||||
|
||||
#stopwords
|
||||
default_stopwords = set(stopwords.words('english'))
|
||||
custom_stopwords = set(codecs.open('stopwords.txt', 'r').read().splitlines())
|
||||
all_stopwords = default_stopwords | custom_stopwords
|
||||
|
||||
# with open(output_html, 'w') as new_html:
|
||||
# new_html.write(
|
||||
# '''<!DOCTYPE html>
|
||||
# <html>
|
||||
# <head>
|
||||
# <meta charset="utf-8">
|
||||
# <title></title>
|
||||
# <style>
|
||||
|
||||
# @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: "SourceCodePro";
|
||||
# src: url("http://bohyewoo.com/webfonts/Source_Code_Pro/SourceCodePro-Regular.ttf");
|
||||
# }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# body {
|
||||
# background-color: whitesmoke;
|
||||
# # font-family: Belgika;
|
||||
# # font-weight: 8th;
|
||||
# # letter-spacing: -0.3px;
|
||||
# font-size: 20px;
|
||||
# line-height: 1.2;
|
||||
|
||||
# }
|
||||
|
||||
|
||||
|
||||
# .NNP {
|
||||
# background-color: pink;
|
||||
# }
|
||||
|
||||
# .VBP {
|
||||
# }
|
||||
|
||||
# .VBP:hover {
|
||||
# background-color: gold;
|
||||
# }
|
||||
|
||||
# .NN {
|
||||
# background-color: LightSkyBlue;
|
||||
# }
|
||||
|
||||
# .NNS {
|
||||
# background-color: Aquamarine;
|
||||
# }
|
||||
|
||||
# .paragraph {
|
||||
# font-family: SourceCodePro;
|
||||
# font-weight: regular;
|
||||
# letter-spacing: -0.5px;
|
||||
# width: 50%;
|
||||
# float: right;
|
||||
# }
|
||||
|
||||
# .top_words {
|
||||
# font-family: Belgika;
|
||||
# font-weight: 8th;
|
||||
# font-size: 9pt;
|
||||
# width: 25%;
|
||||
# float: left;
|
||||
# }
|
||||
|
||||
# </style>
|
||||
# </head>
|
||||
# <body>'''
|
||||
# )
|
||||
|
||||
|
||||
|
||||
|
||||
print('''<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<style>
|
||||
|
||||
@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: "SourceCodePro";
|
||||
src: url("http://bohyewoo.com/webfonts/Source_Code_Pro/SourceCodePro-Regular.ttf");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
body {
|
||||
background-color: whitesmoke;
|
||||
# font-family: Belgika;
|
||||
# font-weight: 8th;
|
||||
# letter-spacing: -0.3px;
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
|
||||
}
|
||||
|
||||
.info {
|
||||
font-family: Belgika;
|
||||
font-weight: 8th;
|
||||
font-size: 10pt;
|
||||
width: 20%;
|
||||
float: right;
|
||||
border: 1px solid black;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.NNP {
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
.VBP {
|
||||
}
|
||||
|
||||
.VBP:hover {
|
||||
background-color: gold;
|
||||
}
|
||||
|
||||
.NN {
|
||||
background-color: LightSkyBlue;
|
||||
}
|
||||
|
||||
.NNS {
|
||||
background-color: Aquamarine;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
font-family: SourceCodePro;
|
||||
font-weight: regular;
|
||||
letter-spacing: -0.5px;
|
||||
width: 50%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.top_words {
|
||||
font-family: Belgika;
|
||||
font-weight: 8th;
|
||||
font-size: 9pt;
|
||||
width: 25%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>''')
|
||||
|
||||
|
||||
|
||||
|
||||
#info part
|
||||
print('<div class ="info">')
|
||||
infotext = [('platform', 'FaceApp'), ('Type', 'Image editing'), ('Initial release', 'December 31 2016'), ('Type', 'Image editing')]
|
||||
|
||||
for title, info in infotext:
|
||||
print('<span class="info-{0}">{0}:{1}</span><br>'.format(title, info))
|
||||
|
||||
print('</div>')
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#ToS text
|
||||
print('<div class ="paragraph">')
|
||||
# for sentence in sent_tokenize(text):
|
||||
print('<span>')
|
||||
|
||||
tokenized = word_tokenize(text)
|
||||
tagged = pos_tag(tokenized)
|
||||
|
||||
# for HTML
|
||||
for word, pos in tagged:
|
||||
print('<span class="{}">{}</span>'.format(pos, word))
|
||||
|
||||
print('</span>')
|
||||
|
||||
print('</div>')
|
||||
|
||||
# filtering stopwords
|
||||
tokens_without_stopwords = nltk.FreqDist(words.lower() for words in tokenized if words.lower() not in all_stopwords)
|
||||
print(tokens_without_stopwords)
|
||||
|
||||
|
||||
print('<div class="top_words"> colonial words:')
|
||||
|
||||
frequency_word = FreqDist(tokens_without_stopwords)
|
||||
top_words = tokens_without_stopwords.most_common(100)
|
||||
|
||||
for chosen_words, frequency in top_words:
|
||||
print('<br><span class="chosen_words">{}({}) </span>'.format(chosen_words, frequency))
|
||||
|
||||
|
||||
|
||||
|
||||
# new_html = open('output.html', 'wb') # open the output file
|
||||
# new_html.write('''</div></body></html>''')
|
||||
# new_html.close() # close the output file
|
||||
|
||||
|
||||
print('''</div></body></html>''')
|
||||
|
||||
|
||||
@ -0,0 +1,2 @@
|
||||
1. Eligibility
|
||||
Subject to this Agreement and the Privacy Policy, you retain all rights in and to your User Content, as between you and FaceApp.
|
||||
@ -0,0 +1,2 @@
|
||||
Article I
|
||||
The state of war between the Contracting Parties will end on the day on which the present Treaty of Peace comes into force.
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,196 @@
|
||||
|
||||
|
||||
@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: "SourceCodePro";
|
||||
src: url("http://bohyewoo.com/webfonts/Source_Code_Pro/SourceCodePro-Regular.ttf");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.t_wrapper {
|
||||
font-family: 'Anonymous Pro', monospace;
|
||||
width: 49%;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.t_intro {
|
||||
width: 75%;
|
||||
margin-top: 20px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.t_img {
|
||||
font-family: Belgika;
|
||||
font-size: 20pt;
|
||||
|
||||
}
|
||||
|
||||
.t_image {
|
||||
height: 10vh;
|
||||
margin-top: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.t_img_clicked {
|
||||
height: calc(20vw);
|
||||
margin-top: 30px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.t_info {
|
||||
font-family: Belgika;
|
||||
font-weight: 16th;
|
||||
font-size: 8pt;
|
||||
width: calc(30vw);
|
||||
float: left;
|
||||
margin-top: 30px;
|
||||
|
||||
column-count: 2;
|
||||
|
||||
}
|
||||
|
||||
.t_paragraph {
|
||||
font-size: 16px;
|
||||
width: 75%;
|
||||
padding: 10px;
|
||||
margin-top: 70px;
|
||||
line-height: 1.5;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.t_top_words {
|
||||
background-color: black;
|
||||
width: 10vw;
|
||||
height: 100%;
|
||||
|
||||
font-family: Belgika;
|
||||
font-size: 7.5pt;
|
||||
color: white;
|
||||
letter-spacing: 0.5px;
|
||||
margin-left: 2px;
|
||||
|
||||
position: fixed;
|
||||
float: right;
|
||||
|
||||
}
|
||||
|
||||
.t_top_words_title {
|
||||
margin: 40px 10px 10px 10px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.t_chosen_words {
|
||||
padding: 10px 1px 1px 10px;
|
||||
}
|
||||
|
||||
.t_chosen_words:hover {
|
||||
background-color: white;
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hide {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.TO:hover, .DT:hover, .IN:hover, .WDT:hover, .WP:hover, .MD:hover, .PRP:hover, .CC:hover, .marks:hover, .comma:hover, .dot:hover {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.adjective {
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.JJ:hover {
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.noun {
|
||||
background-color: springgreen;
|
||||
}
|
||||
|
||||
.NN:hover, .NNS:hover {
|
||||
background-color: springgreen;
|
||||
}
|
||||
|
||||
.verb {
|
||||
background-color: yellow;
|
||||
# color: yellow;
|
||||
}
|
||||
|
||||
.VB:hover, .VBZ:hover, .VBN:hover, .VVD:hover {
|
||||
background-color: yellow;
|
||||
|
||||
}
|
||||
|
||||
.propernoun {
|
||||
background-color: pink;
|
||||
# color: pink;
|
||||
}
|
||||
|
||||
.NNP:hover, .NNPS:hover {
|
||||
background-color: pink;
|
||||
|
||||
}
|
||||
|
||||
.adverb {
|
||||
background-color: lightgreen;
|
||||
# color: lightgreen;
|
||||
}
|
||||
|
||||
.RB:hover, .RBR:hover, .JJR:hover, .RBS:hover {
|
||||
background-color: lightgreen;
|
||||
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,82 @@
|
||||
# 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/russia-estonia.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>
|
||||
<link rel="stylesheet" href="estonia.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/tartu.jpeg', 'rb').read()).decode('utf-8')
|
||||
t_image = '<div class="t_img">Peace Treaty of Tartu, Estonia<br><img class="t_image" src="data:img/tartu.jpeg;base64,{}"></div>'.format(img_url)
|
||||
print(t_image)
|
||||
|
||||
|
||||
#t_info box
|
||||
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)">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.')]
|
||||
|
||||
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>')
|
||||
|
||||
|
||||
#Treaty text
|
||||
print('<div class="t_paragraph">')
|
||||
for t_paragraph in russia_text_list:
|
||||
t_tokenized = word_tokenize(t_paragraph)
|
||||
t_tagged = pos_tag(t_tokenized)
|
||||
print('<p>')
|
||||
for t_word, t_pos in t_tagged:
|
||||
print('<span class="{0} {1}">{2}</span>'.format(t_pos.replace('.', 'dot').replace(',', 'comma').replace('(', 'marks').replace(')', 'marks').replace(':', 'marks').replace(';', 'marks'), t_word.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 if words.lower() not in t_all_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" > {} ({}) </div>'.format(t_chosen_words, t_frequency))
|
||||
|
||||
print('</div></div></div>')
|
||||
|
||||
|
||||
print('</div></div>')
|
||||
print('''</body></html>''')
|
||||
|
||||
@ -0,0 +1,190 @@
|
||||
|
||||
|
||||
@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: "SourceCodePro";
|
||||
src: url("http://bohyewoo.com/webfonts/Source_Code_Pro/SourceCodePro-Regular.ttf");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.tos_wrapper {
|
||||
font-family: 'Anonymous Pro', monospace;
|
||||
width: 49%;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
|
||||
.intro {
|
||||
width: 75%;
|
||||
margin-top: 20px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.img {
|
||||
font-family: Belgika;
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
.image {
|
||||
height: 10vh;
|
||||
margin-top: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.img_clicked {
|
||||
height: calc(20vw);
|
||||
margin-top: 30px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.info {
|
||||
font-family: Belgika;
|
||||
font-weight: 16th;
|
||||
font-size: 8pt;
|
||||
width: calc(35vw);
|
||||
float: left;
|
||||
margin-top: 30px;
|
||||
|
||||
column-count: 2;
|
||||
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
font-size: 16px;
|
||||
width: 75%;
|
||||
padding: 10px;
|
||||
margin-top: 70px;
|
||||
line-height: 1.5;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.top_words {
|
||||
background-color: black;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
|
||||
font-family: Belgika;
|
||||
font-size: 7.5pt;
|
||||
color: white;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
position: fixed;
|
||||
float: left;
|
||||
|
||||
}
|
||||
|
||||
.top_words_title {
|
||||
margin: 40px 10px 10px 10px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.chosen_words {
|
||||
padding: 10px 1px 1px 10px;
|
||||
}
|
||||
|
||||
.chosen_words:hover {
|
||||
background-color: white;
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
.hide {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.TO:hover, .DT:hover, .IN:hover, .WDT:hover, .WP:hover, .MD:hover, .PRP:hover, .CC:hover, .marks:hover, .comma:hover, .dot:hover {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.adjective {
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.JJ:hover {
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.noun {
|
||||
background-color: springgreen;
|
||||
}
|
||||
|
||||
.NN:hover, .NNS:hover {
|
||||
background-color: springgreen;
|
||||
}
|
||||
|
||||
.verb {
|
||||
background-color: yellow;
|
||||
# color: yellow;
|
||||
}
|
||||
|
||||
.VB:hover, .VBZ:hover, .VBN:hover, .VVD:hover {
|
||||
background-color: yellow;
|
||||
|
||||
}
|
||||
|
||||
.propernoun {
|
||||
background-color: pink;
|
||||
# color: pink;
|
||||
}
|
||||
|
||||
.NNP:hover, .NNPS:hover {
|
||||
background-color: pink;
|
||||
|
||||
}
|
||||
|
||||
.adverb {
|
||||
background-color: lightgreen;
|
||||
# color: lightgreen;
|
||||
}
|
||||
|
||||
.RB:hover, .RBR:hover, .JJR:hover, .RBS:hover {
|
||||
background-color: lightgreen;
|
||||
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue