add legend

4 years ago · 6ee205254e
parent aa12139983
commit 6ee205254e
5 changed files with 5720 additions and 5621 deletions
--- a/website/faceapp.css
+++ b/website/faceapp.css
@ -98,7 +98,11 @@
 	margin-top: 70px;
 	line-height: 1.5;
 	float: right;
-	cursor: pointer;
+	}
+
+	.eachwords {
+		cursor: pointer;
+		
 	}

 	.top_words {
@ -113,6 +117,7 @@

 	position: fixed;
 	float: left;
+	

 	}

@ -186,5 +191,3 @@
 	background-color: lightgreen;

 	}
-
-
--- a/website/faceapp.html
+++ b/website/faceapp.html
--- a/website/faceapp.py
+++ b/website/faceapp.py
@ -36,12 +36,14 @@ 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>
+	<link rel="stylesheet" href="faceapp.css">
+	<link rel="stylesheet" href="legend.css">
+	<script src="highlight.js"></script>
 	<meta charset="utf-8">

 	<title></title>
 	
+	
 </head>
 <body>''')

@ -84,7 +86,7 @@ for paragraph in faceapp_text_list:
 	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('<span class="{0} {1} eachwords">{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>')
--- a/website/highlight.js
+++ b/website/highlight.js
@ -11,6 +11,19 @@ $(document).ready(function() {
 		});


+
+	/* legend */
+
+	$('.legendverb').click(
+		function() {
+			$('.VB, .VBZ, .VBN, .VVD').toggleClass('verb');
+			$('.legendverb').css('background-color','white');
+			$(this).css('background-color','yellow');
+	});
+
+
+	/* pos highlight*/
+
 	$('.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');
--- a/website/legend.css
+++ b/website/legend.css
@ -0,0 +1,28 @@
+
+
+.legend {
+	
+	font-family: Belgika;
+	font-size: 10pt;
+	margin-top: 50px;
+	list-style: none;
+	margin-left: 12vw;
+
+	float: left;
+
+}
+
+.legend li { float: left; margin-right: 10px; }
+.legend span { border: 1px solid #ccc; float: left; width: 12px; height: 12px; margin: 2px; }
+
+/*.legend .legendverb { background-color: #ff00ff; }
+*/.legend .legendnoun { background-color: #00ffff; }
+.legend .legendadjective { background-color: #0000ff; }
+.legend .legendadverb { background-color: green; }
+.legend .legendhide { background-color: #000000; }
+
+
+.legendverb:hover {
+	background-color: yellow;
+
+}