style, adding ref list

2 years ago · 0905d5d853
parent 60662e5ed7
commit 0905d5d853
3 changed files with 125 additions and 15 deletions
--- a/AdaBobbiCara/enconv.css
+++ b/AdaBobbiCara/enconv.css
@ -3,25 +3,107 @@ body{
 	margin: 0;
 	padding: 0;
 	background-image: url('bg.jpg');
-	background-size: cover;
+	/* background-size: auto; */
 	background-repeat: no-repeat;
 	background-position: center;
-}
+	max-width: 100%;
+	max-height: auto;
+  }

 h1{
 	text-align: center;
+	font-size: 5vmax;
+	margin-top: 5%;
+}
+
+h2{
+	text-align: center;
+	font-weight:bold;
 }

 p{
 	text-align: center;
+	font-weight:bold;
+	margin-left: 10%;
+	margin-right: 10%;
+	font-size: small;
+	margin-bottom: 5%;
+}
+
+.glitch-wrapper {
+   width: 100%;
+   height: 100%;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   text-align: center;
+   /* background-color: #222; */
+}
+
+.glitch {
+   position: relative;
+   font-size: 7vmax;
+   font-weight: 700;
+   line-height: 1.2;
+   color: #fff;
+   letter-spacing: 5px;
+   z-index: 1;
+}
+
+.glitch:before,
+.glitch:after {
+   display: block;
+   content: attr(data-glitch);
+   position: absolute;
+   top: 0;
+   left: 0;
+   opacity: 0.8;
+}
+
+.glitch:before {
+   animation: glitch-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
+   color: #0ff;
+   z-index: -1;
+}
+
+.glitch:after {
+   animation: glitch-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
+   color:orangered;
+   z-index: -2;
 }

+@keyframes glitch-color {
+   0% {
+	  transform: translate(0);
+   }
+
+   20% {
+	  transform: translate(-3px, 3px);
+   }
+
+   40% {
+	  transform: translate(-3px, -3px);
+   }
+
+   60% {
+	  transform: translate(3px, 3px);
+   }
+
+   80% {
+	  transform: translate(3px, -3px);
+   }
+
+   to {
+	  transform: translate(0);
+   }
+}

+/* 
 div{
  animation: glitch 1s linear infinite;
-}
+} */

-@keyframes glitch{
+/* @keyframes glitch{
  2%,64%{
    transform: translate(2px,0) skew(0deg);
  }
@ -31,7 +113,7 @@ div{
  62%{
    transform: translate(0,0) skew(5deg); 
  }
-}
+} */


 form {
@ -56,19 +138,31 @@ input[type="text"] {
 button{
 	padding: 5px 20px;
 	border-radius: 5px;
-	background-color: #ff5900;
-	color: #fff;
+	background-color: #0ff;
+	color:#fff;
 	border: none;
 	cursor: pointer;
 }

+#result{
+	margin-left: auto; 
+	margin-right: auto;
+	border-color:orangered;
+}
+
 table {
 	margin-top: 20px;
 	border-collapse: collapse;
+	text-align: center;
+	word-wrap: normal;
 }

 th, td {
 	padding: 10px;
-	border: 1px solid #ccc;
+	border: 1px solid #fff;
+	background-color: black;
+	color: white;
 	text-align: center;
+	word-wrap: normal;
+
 }
--- a/AdaBobbiCara/enconv.html
+++ b/AdaBobbiCara/enconv.html
@ -10,11 +10,22 @@

 <body>
 	<!-- adding glitch effect to text -->
+	<div class="glitch-wrapper">
+		<div class="glitch" data-glitch="En-coding Converter">En-coding Converter</div>
+	 </div>
+
 	<div>		
-	<h1>Encoding Converter</h1>
-	<p>Type a word, click 'convert' and let the magic begin!</p>
+	<!-- <h1>Encoding Converter</h1> -->
+	<h2>Let's get a little nerdy! <br>
+		Type a word, click 'convert' and let the en-coding magic begin!</h2>
 	</div>

+	<p>This table below is like a behind-the-scenes look at what really happens when you type. You know, when you press a key and the computer somehow magically knows what you meant to say? Well, our buddy Javascript is here to break it down for you in all its nerdy glory.<br>
+		
+	Get ready for some wild en-codings, including binary, hexadecimal, decimal, phonetic cyrillic (*Charlie-Yankee-Romeo-India-Lima-Lima-India-Charlie - say that five times fast!), and even the xpub1 emoji alphabet. Yep, you read that right - emoji en-coding!
+
+	So kick back, relax, and let's dive into the wacky world of character en-coding. En-joy!</p>
+	
 	<!-- adding table with all encodings -->
 	<form>
 		<label for="input">Input:</label>
@ -28,7 +39,7 @@
 			<th>Binary</th>
 			<th>Hexadecimal</th>
 			<th>Decimal</th>
-            <th>Cyrillic</th>
+            <th>Cyrillic*</th>
 			<th>Emoji</th>
 		</tr>
 		<tr>
@ -39,6 +50,13 @@
 			<td id="E"></td>
 		</tr>
 	</table>
+
+		<object data="/AdaBobbiCara/referencesforwebsite.txt" type="text/plain"
+		width="500" style="height: 300px">
+		<a href="/AdaBobbiCara/referencesforwebsite.txt">REFERENCES</a>
+		</object>
+
+		
 </body>

 <!-- adding the js converter function -->
--- a/AdaBobbiCara/referencesforwebsite.txt
+++ b/AdaBobbiCara/referencesforwebsite.txt
@ -1,8 +1,6 @@
 *LIST OF REFERENCES
-    
-*Literature

-*From Martino
+*Literature:
    
 Andrew L. Russell. Open Standards And The Digital Age – History, Ideology, and Networks. Cambridge University Press, 2014. 
   hyperlink -> https://hub.xpub.nl/breadcube/~martino/c%20%20%20%20%20.%20%7C%7C%7C%7C%7C%20%20%20%20%20_%20%20%20%20%7C%20%7C%20%20%20%7C%20%7C%20%7C%7C%20%20%20%20%20%20%20%20%2C%20%202/Andrew%20L.%20Russell%20-%20Open%20Standards%20And%20The%20Digital%20Age_%20History%2C%20Ideology%2C%20And%20Networks%20%282014%2C%20Cambridge%20University%20Press%29%20-%20libgen.li.pdf
@ -25,7 +23,7 @@ Abbing, Roel Roscam, et al. “Modifying the Universal.” DATA Browser, EXECUTI
 hyperlink ->
 https://hub.xpub.nl/breadcube/~martino/c%20%20%20%20%20.%20%7C%7C%7C%7C%7C%20%20%20%20%20_%20%20%20%20%7C%20%7C%20%20%20%7C%20%7C%20%7C%7C%20%20%20%20%20%20%20%20%2C%20%202/DB06_Executing_Practices_Modifiying_the_Universal_Pierrot_Roscam_Abbing_Snelting.pdf

-*From Bootleg Library
+*From Bootleg Library:

 Beeby, Allison, et al. Corpus Use and Translating: Corpus Use for Learning Translate and Learning Corpus Use to Translate. John Benjamins Pub. Co., 2009.