From 0905d5d853dbb56596802028d524f69d61d192b9 Mon Sep 17 00:00:00 2001 From: Boyana Date: Sat, 13 May 2023 23:51:13 +0200 Subject: [PATCH] style, adding ref list --- AdaBobbiCara/enconv.css | 110 ++++++++++++++++++++++++-- AdaBobbiCara/enconv.html | 24 +++++- AdaBobbiCara/referencesforwebsite.txt | 6 +- 3 files changed, 125 insertions(+), 15 deletions(-) diff --git a/AdaBobbiCara/enconv.css b/AdaBobbiCara/enconv.css index 79f8e73..419d685 100644 --- 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; + } diff --git a/AdaBobbiCara/enconv.html b/AdaBobbiCara/enconv.html index f2e40d6..344f8fd 100644 --- a/AdaBobbiCara/enconv.html +++ b/AdaBobbiCara/enconv.html @@ -10,11 +10,22 @@ +
+
En-coding Converter
+
+
-

Encoding Converter

-

Type a word, click 'convert' and let the magic begin!

+ +

Let's get a little nerdy!
+ Type a word, click 'convert' and let the en-coding magic begin!

+

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.
+ + 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!

+
@@ -28,7 +39,7 @@ Binary Hexadecimal Decimal - Cyrillic + Cyrillic* Emoji @@ -39,6 +50,13 @@ + + + REFERENCES + + + diff --git a/AdaBobbiCara/referencesforwebsite.txt b/AdaBobbiCara/referencesforwebsite.txt index 33abc42..2dce226 100644 --- 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.