Anupya
diff --git a/‎.DS_Store
0 Bytes b/‎.DS_Store
0 Bytes
diff --git a/‎icon.png
12.9 KB b/‎icon.png
12.9 KB
diff --git a/‎logotitle.png
44.6 KB b/‎logotitle.png
44.6 KB
diff --git a/‎popup.css
Lines changed: 95 additions & 0 deletions b/‎popup.css
Lines changed: 95 additions & 0 deletions
diff --git a/‎popup.html
Lines changed: 40 additions & 3 deletions b/‎popup.html
Lines changed: 40 additions & 3 deletions
diff --git a/‎screenshot1.png
288 KB b/‎screenshot1.png
288 KB
diff --git a/‎screenshot2.png
304 KB b/‎screenshot2.png
304 KB
diff --git a/‎screenshot3.png
299 KB b/‎screenshot3.png
299 KB
diff --git a/‎screenshot4.png
284 KB b/‎screenshot4.png
284 KB
diff --git a/‎screenshot5.png
390 KB b/‎screenshot5.png
390 KB
@@ -2,6 +2,101 @@ body {
 	width: 400px;
 }
 
+p {
+	margin: 0 auto;
+	text-align: center;
+	max-width: 350px;
+}
+/* JAPANESE --------------------------------- */
+
+.circle {
+	position: fixed;
+	border-radius: 50%;
+	width: 320px;
+	height: 320px;
+	margin-top: 4vh;
+	align-items: center;
+	margin-left: 8vh;
+	background-color: #F3D3EA; 
+	z-index: -1;
+}
+
+.format {
+	font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace; 
+	z-index: 1;
+}
+.romaji {
+	margin-top: 4vh;
+	font-weight: 100;
+	font-size: 60px;
+	z-index: 1;
+}
+
+.kanjiclass {
+	position: relative;
+	margin-top: -10vh;
+}
+
+.kanji {
+	text-align: center;
+	font-size: 50px;
+	font-weight: 700;
+}
+
+.kanaclass {
+	position: relative;
+	padding-top: 1vh;
+	font-family: 
+}
+
+.hiragana {
+	font-weight: 100;
+	font-size: 20px;	
+	margin-right: 10px;
+}
+
+.dot {
+	align-items: center;
+}
+
+.katakana {
+	padding-top: 2vh;
+	font-weight: 100;
+	font-size: 20px;
+	position:relative;
+	text-align: center;	
+	margin-left: 10px;
+}
+
+.pos {
+	font-weight: 100;
+	font-size: 15px;
+	position:relative;
+	text-align: center;	
+	font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace; 
+	
+}
+
+.pronounciation_pos {
+	color:#8c8c8c;
+	position:relative;
+	margin: 0 auto;
+	padding-top: 1vh;
+}
+
+.definition {
+	font-size: 30px;
+	margin: 0;
+	padding: 0;
+	margin-top: 1vh;
+	width: 90vw;
+	margin-left: auto;
+	margin-right: auto;
+	z-index: 1;
+	font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace; 
+}
+
+
 .link {
     outline:none;
 }
 
@@ -2,13 +2,50 @@
 <html>
   <head>
     <link rel="stylesheet" href="popup.css">
-    <title>Japanese Refresher</title>
+    <title>JapTab</title>
     <script src="popup.js"></script>
 
   </head>
   <body>
-    <p>Learn Japanese by receiving randomized words with their kanji, hiragana, romaji and english definition with every click of a new tab!</p>
-    <p>Thank you so much for using JapTab! Learn more about the developer by going <a class="link" href="http://anupya.com" target="_blank">here</a> :)</p>
+
+  	<p>
+    	Learn Japanese by receiving a random word with its romaji, kanji, hiragana, katakana and english definition with every click of a new tab!
+	</p>
+
+	<div class="circle"></div><br><br><br>
+  	<div class="format" style="text-align:center;">
+		<h1 class="romaji" id="romaji">romaji</h1>
+		<div>
+
+			<div class = "kanjiclass">
+				<a class="kanji" id="kanji">kanji</a>
+			</div>
+
+			<div class = "kanaclass">
+				<a class="hiragana" id="hiragana">hiragana</a>
+				<a class="dot"> . </a>
+				<a class="katakana" id="katakana">katakana</a>
+			</div>
+
+			<div class = "katakanaclass">
+				
+			</div>
+
+			<p class="definition" id="definition">definition</p>
+
+			<div class = "pronounciation_pos">
+				<a class="pos" id="part of speech">(part of speech)</a>
+			</div>
+		</div>
+		
+	</div>
+
+    <br><br><br>
+    <p>
+    	Thank you so much for using JapTab! <br>
+    	Learn more about the developer by going <a class="link" href="http://anupya.com" target="_blank">here</a> :) <br><br>
+    	<a class="link" href="http://github.com/Anupya/JapTab/issues/new" target="_blank">Any issues?</a>
+    </p>
 
 
   </body>