diff --git a/programmieren/spiele/Flappy-Witch/index.html b/programmieren/spiele/Flappy-Witch/index.html index 32c5b21..6004548 100644 --- a/programmieren/spiele/Flappy-Witch/index.html +++ b/programmieren/spiele/Flappy-Witch/index.html @@ -43,15 +43,15 @@ display: flex; } .button { - padding: 16px 32px; /* Doppelte Größe */ + padding: 16px 32px; border-radius: 8px; - background: linear-gradient(to bottom, #007bff, #0056b3); /* Blau */ + background: linear-gradient(to bottom, #007bff, #0056b3); box-shadow: 0 2px 4px rgba(0,0,0,0.7); transition: all 0.2s; display: flex; align-items: center; gap: 8px; - margin-top: 20px; /* Abstand zum oberen Inhalt */ + margin-top: 20px; } .button:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.6); @@ -63,57 +63,180 @@ .button-text { font-weight: 600; color: white; - font-size: 1.5em; /* Textgröße anpassen */ + font-size: 1.5em; } - - - - -
- -
- -


Creative Crafter

-

Flappy Witch

-
-
-
- - -

- -
-


-
- - - -```[_{{{CITATION{{{_1{](https://github.com/hd-code/pandoc-docker/tree/07f83c6deeafbff1710c5f7992a97955c298ad61/example%2Fexample.md)[_{{{CITATION{{{_2{](https://github.com/AndreasHeine/opcua-sub-to-websocket/tree/b272dca8c8abf371e5e35f05ce93949bdb775723/README.md) \ No newline at end of file + .tooltip-container { + position: relative; + display: inline-block; + font-family: "Arial", sans-serif; + overflow: visible; + } + .button-content { + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, #6e8efb, #a777e3); + color: white; + padding: 14px 28px; + border-radius: 50px; + cursor: pointer; + transition: + background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), + transform 0.3s ease, + box-shadow 0.4s ease; + box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); + position: relative; + z-index: 10; + overflow: hidden; + } + .button-content::before { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + background: linear-gradient( + 135deg, + rgba(110, 142, 251, 0.4), + rgba(167, 119, 227, 0.4) + ); + filter: blur(15px); + opacity: 0; + transition: opacity 0.5s ease; + z-index: -1; + } + .button-content::after { + content: ""; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient( + circle, + rgba(255, 255, 255, 0.3) 0%, + rgba(255, 255, 255, 0) 70% + ); + transform: scale(0); + transition: transform 0.6s ease-out; + z-index: -1; + } + .button-content:hover::before { + opacity: 1; + } + .button-content:hover::after { + transform: scale(1); + } + .button-content:hover { + background: linear-gradient(135deg, #a777e3, #6e8efb); + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); + transform: translateY(-4px) scale(1.03); + } + .button-content:active { + transform: translateY(-2px) scale(0.98); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); + } + .text { + font-size: 18px; + font-weight: 600; + margin-right: 12px; + white-space: nowrap; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + transition: letter-spacing 0.3s ease; + } + .button-content:hover .text { + letter-spacing: 1px; + } + .share-icon { + fill: white; + transition: + transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), + fill 0.3s ease; + filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); + } + .button-content:hover .share-icon { + transform: rotate(180deg) scale(1.1); + fill: #ffffff; + } + .tooltip-content { + position: absolute; + top: 102%; + left: 50%; + transform: translateX(-50%) scale(0.8); + background: white; + border-radius: 15px; + padding: 22px; + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); + opacity: 0; + visibility: hidden; + transition: + opacity 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), + transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), + visibility 0.5s ease; + z-index: 100; + pointer-events: none; + backdrop-filter: blur(10px); + background: rgba(255, 255, 255, 0.9); + } + .tooltip-container:hover .tooltip-content { + opacity: 1; + visibility: visible; + transform: translateX(-50%) scale(1); + pointer-events: auto; + } + .social-icons { + display: flex; + justify-content: space-between; + gap: 12px; + } + .social-icon { + display: flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + border-radius: 50%; + background: #f0f0f0; + transition: + transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), + background 0.3s ease, + box-shadow 0.4s ease; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + position: relative; + overflow: hidden; + } + .social-icon::before { + content: ""; + position: absolute; + inset: 0; + background: radial-gradient( + circle at center, + rgba(255, 255, 255, 0.8) 0%, + rgba(255, 255, 255, 0) 70% + ); + opacity: 0; + transition: opacity 0.3s ease; + } + .social-icon:hover::before { + opacity: 1; + } + .social-icon svg { + width: 24px; + height: 24px; + fill: #333; + transition: + transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), + fill 0.3s ease; + z-index: 1; + } + .social-icon:hover { + transform: translateY(-5px) scale(1.1); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); + } + .social-icon:active { + transform: translateY(-2px) scale(1.05); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); + } + .social-icon:hover svg { + transform: scale(1.2); + fill: white; + [_{{{CITATION{{{_1{](https://github.com/hd-code/pandoc-docker/tree/07f83c6deeafbff1710c5f7992a97955c298ad61/example%2Fexample.md)[_{{{CITATION{{{_2{](https://github.com/AndreasHeine/opcua-sub-to-websocket/tree/b272dca8c8abf371e5e35f05ce93949bdb775723/README.md) \ No newline at end of file