[FTR] Support-Cloud

Wolkenhof · Nov 4, 2024 · 5bf0055 · 5bf0055
1 parent d2a9b3f
commit 5bf0055
Show file tree

Hide file tree

Showing 7 changed files with 1,764 additions and 200 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/css/style.css b/css/style.css
@@ -67,6 +67,8 @@
 	monospace;
 }
 
+
+
 a:focus,
 button:focus {
 	outline: none !important;
@@ -9465,7 +9467,7 @@ ul.drop-down {
 	left: -.4em;
 	text-shadow: none;
 	z-index: -10;
-} 
+}
 
 .quote-container .quote cite {
 	display: block;
@@ -9484,82 +9486,322 @@ ul.drop-down {
 }
 
 #badge-logo-slider {
-    display: flex;
-    transition: transform 0.5s ease-out;
+	display: flex;
+	transition: transform 0.5s ease-out;
 }
 
 /* Logo Slider */
 
 .logo-slider {
-    background: #FAFAFA;
-    -webkit-box-shadow: 0 0px 0px 0px rgba(0, 0, 0, 0.125);
-    box-shadow: 0 0px 0px 0px rgba(0, 0, 0, 0.125);
-    margin: auto;
-    overflow: hidden;
-    position: relative;
-    width: 100%;
+	background: #FAFAFA;
+	-webkit-box-shadow: 0 0px 0px 0px rgba(0, 0, 0, 0.125);
+	box-shadow: 0 0px 0px 0px rgba(0, 0, 0, 0.125);
+	margin: auto;
+	overflow: hidden;
+	position: relative;
+	width: 100%;
 }
 
 .logo-slider::before,
 .logo-slider::after {
-    background: -webkit-gradient(linear, left top, right top, from(#FAFAFA), to(rgba(255, 255, 255, 0)));
-    background: linear-gradient(to right, #FAFAFA 0%, rgba(255, 255, 255, 0) 100%);
-    content: "";
-    height: 250px;
-    position: absolute;
-    width: 200px;
-    z-index: 2;
+	background: -webkit-gradient(linear, left top, right top, from(#FAFAFA), to(rgba(255, 255, 255, 0)));
+	background: linear-gradient(to right, #FAFAFA 0%, rgba(255, 255, 255, 0) 100%);
+	content: "";
+	height: 250px;
+	position: absolute;
+	width: 200px;
+	z-index: 2;
 }
 
 .logo-slider::after {
-    right: 0;
-    top: 0;
-    -webkit-transform: rotateZ(180deg);
-    transform: rotateZ(180deg);
+	right: 0;
+	top: 0;
+	-webkit-transform: rotateZ(180deg);
+	transform: rotateZ(180deg);
 }
 
 .logo-slider::before {
-    left: 0;
-    top: 0;
+	left: 0;
+	top: 0;
 }
 
 .logo-slider .logo-slide-track {
-    -webkit-animation: logo-scroll 60s linear infinite;
-    animation: logo-scroll 60s linear infinite;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    width: calc(250px * 14);
-    animation-duration: 30s;
-    animation-iteration-count: infinite;
+	-webkit-animation: logo-scroll 60s linear infinite;
+	animation: logo-scroll 60s linear infinite;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	width: calc(250px * 14);
+	animation-duration: 30s;
+	animation-iteration-count: infinite;
 }
 
 .logo-slider .slide {
-    height: 250px;
-    width: 260px;
-    padding: 20px;
+	height: 250px;
+	width: 260px;
+	padding: 20px;
 }
 
 @-webkit-keyframes logo-scroll {
-    0% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0);
-    }
+	0% {
+		-webkit-transform: translateX(0);
+		transform: translateX(0);
+	}
 
-    100% {
-        -webkit-transform: translateX(calc(-250px * 7));
-        transform: translateX(calc(-250px * 7));
-    }
+	100% {
+		-webkit-transform: translateX(calc(-250px * 7));
+		transform: translateX(calc(-250px * 7));
+	}
 }
 
 @keyframes logo-scroll {
-    0% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0);
-    }
+	0% {
+		-webkit-transform: translateX(0);
+		transform: translateX(0);
+	}
 
-    100% {
-        -webkit-transform: translateX(calc(-250px * 7));
-        transform: translateX(calc(-250px * 7));
-    }
+	100% {
+		-webkit-transform: translateX(calc(-250px * 7));
+		transform: translateX(calc(-250px * 7));
+	}
 }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.support {
+	cursor: pointer;
+}
+
+.support-wolke {
+	width: 5%;
+	position: fixed;
+	right: 2%;
+	top: 14%;
+	z-index: 99;
+	-webkit-filter: drop-shadow(1px 1px 1px #00000071);
+	filter: drop-shadow(1px 1px 1px #00000071);
+
+	animation-delay: 1s;
+	animation-name: fadeInLeft;
+
+	transition-duration: 0.75s;
+	transition-property: transform;
+
+	&:hover {
+		transform: scale(1.1);
+	}
+}
+
+.support-text {
+	display: none;
+	/* Verborgener Zustand */
+	opacity: 0;
+	/* Startet mit einer Transparenz von 0 */
+	position: fixed;
+	right: 2%;
+	top: 22%;
+	z-index: 99;
+	transform: translateX(100%);
+	background-color: #056598;
+	border: solid #000000 1px;
+	padding: 5px;
+	color: #fff;
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+	z-index: 10;
+}
+
+.support-text.show {
+	display: block;
+	/* Zeigt das Element */
+	opacity: 1;
+	transform: translateX(0);
+}
+
+.support-wolke.show {
+	width: 5%;
+	position: fixed;
+	right: 9%;
+	top: 14%;
+
+}
+
+
+
+
+
+
+
+
+.floating-chat {
+	align-items: center;
+	justify-content: center;
+	width: 5%;
+	position: fixed;
+	right: 2%;
+	top: 14%;
+	transform: translateY(70px);
+	transition: all 250ms ease-out;
+	opacity: 0;
+	cursor: pointer;
+	z-index: 99;
+
+	&.enter:hover {
+		opacity: 1;
+	}
+
+	&.enter {
+		transform: translateY(0);
+		opacity: 0.6;
+	}
+
+	&.expand {
+		cursor: auto;
+		opacity: 1;
+		margin-right: 220px;
+	}
+
+	:focus {
+		outline: 0;
+		box-shadow: 0 0 3pt 2pt rgba(#0EC879, 0.3);
+	}
+
+	button {
+		background: transparent;
+		border: 0;
+		color: white;
+		text-transform: uppercase;
+		border-radius: 3px;
+		cursor: pointer;
+	}
+
+	.chat {
+		display: flex;
+		flex-direction: column;
+		position: absolute;
+		opacity: 0;
+		width: 1px;
+		height: 1px;
+		transition: all 250ms ease-out;
+		margin: auto;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: #05659891;
+		border-radius: 40px;
+
+		&.enter {
+			opacity: 1;
+			margin: 10px;
+			top: 20px;
+			width: 300px;
+			height: 200px;
+			padding-left: 30px;
+			left: 20px;
+		}
+
+		.header {
+			flex-shrink: 0;
+			padding-bottom: 10px;
+			display: flex;
+			background: transparent;
+
+			.title {
+				flex-grow: 1;
+				flex-shrink: 1;
+				padding: 0 5px;
+				text-align: center;
+				font-size: 20px;
+			}
+
+			button {
+				flex-shrink: 0;
+			}
+		}
+	}
+}
+
+// Animation
+// --------------------------------------
+@keyframes show-chat-even {
+	0% {
+		margin-left: -480px;
+	}
+
+	100% {
+		margin-left: 0;
+	}
+}
+
+@-moz-keyframes show-chat-even {
+	0% {
+		margin-left: -480px;
+	}
+
+	100% {
+		margin-left: 0;
+	}
+}
+
+@-webkit-keyframes show-chat-even {
+	0% {
+		margin-left: -480px;
+	}
+
+	100% {
+		margin-left: 0;
+	}
+}
+
+@keyframes show-chat-odd {
+	0% {
+		margin-right: -480px;
+	}
+
+	100% {
+		margin-right: 0;
+	}
+}
+
+@-moz-keyframes show-chat-odd {
+	0% {
+		margin-right: -480px;
+	}
+
+	100% {
+		margin-right: 0;
+	}
+}
+
+@-webkit-keyframes show-chat-odd {
+	0% {
+		margin-right: -480px;
+	}
+
+	100% {
+		margin-right: 0;
+	}
+}
diff --git a/images/Support-Wolke.png b/images/Support-Wolke.png