From 7ea755a8ac2381e08af4446fb55e6f897b9dd818 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elias=20M=C3=BCller?= Date: Mon, 9 Dec 2024 22:49:07 +0100 Subject: [PATCH] added email protection and more interests --- index.html | 50 ++++++++++++++++++++++++++++++++++---------------- script.js | 23 +++++++++++++++++++++++ style.css | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 107 insertions(+), 20 deletions(-) create mode 100644 script.js diff --git a/index.html b/index.html index c158dfa..784f073 100644 --- a/index.html +++ b/index.html @@ -7,12 +7,22 @@ + + +
tux penguin profile image +

Elias Müller

- +

Erfahrungen

+
- - - - + + +
- - - + + + + + +
- - - + + + + +
+ +
diff --git a/script.js b/script.js new file mode 100644 index 0000000..8842a8e --- /dev/null +++ b/script.js @@ -0,0 +1,23 @@ +var jsBlocks = document.getElementsByClassName("requires-js"); +Array.from(jsBlocks).forEach(block => block.style.display = "block"); +var isCopyTimout = false; + +function contact(element) { + var adress = atob("ZWxpYXM=") + atob("QGVsaWFzLW11ZWxsZXIuY29t"); + var uri = atob("bWFpbHRv") + ":" + adress; + window.location.href = uri; + + if(!navigator.clipboard) return; + navigator.clipboard.writeText(adress); + + if(isCopyTimout) return; + var indicatorContent = "E-Mail wurde kopiert!"; + var previousContent = element.innerHTML; + element.innerHTML = indicatorContent; + isCopyTimout = true; + + setTimeout(() => { + element.innerHTML = previousContent; + isCopyTimout = false; + }, 3000) +} \ No newline at end of file diff --git a/style.css b/style.css index 20c86ad..ee2c0ef 100644 --- a/style.css +++ b/style.css @@ -65,6 +65,20 @@ body { max-height: 200px; } +.card .front hr { + height: calc(var(--height) / 2); + width: 0px; + + border-radius: 10px; + border: 2px dashed lightgray; + + margin: 0 10px; +} + +.card .front .name { + margin-left: 30px; +} + .card .front .name h1 { text-align: left; margin: 0 0 10px 0; @@ -99,17 +113,31 @@ body { .card .back ul li i { width: 20px; - margin-right: 10px; + margin-right: 7px; text-align: center; + color: #404040; + font-size: 0.9em; + line-height: 1em; } .card .back .interests { - font-size: 1.5em; + font-size: 1.4em; letter-spacing: 0.3em; line-height: 1.6em; text-align: center; } +.card .back .interests h2 { + font-size: 0.7em; + letter-spacing: 0; + line-height: 1em; + text-align: center; + padding: 0; + margin: 0; + margin-bottom: 5px; + color: #404040; +} + .card .flip-button { position: absolute; right: 0; @@ -117,7 +145,7 @@ body { padding: 0 20px 10px 0; font-size: 1.5em; - color: gray; + color: #404040; } .mobile-visible { @@ -128,6 +156,11 @@ a { font-style: normal; text-decoration: none; color: black; + cursor: pointer; +} + +.requires-js { + display: none; } @media (hover: hover) { @@ -149,5 +182,18 @@ a { } .card .back { transform: rotateY(180deg); - } + } + .card .front hr { + width: calc(var(--width) / 2); + height: 0px; + + border-radius: 10px; + border: 2px dashed lightgray; + + margin: 0 10px; + } + .card .front .name { + margin-top: 30px; + margin-left: 0; + } }