| import streamlit as st |
|
|
|
|
| animation_html_a = """ |
| <div class="container"> |
| <div class="dot"></div> |
| <div class="dot"></div> |
| <div class="dot"></div> |
| <div class="dot"></div> |
| <div class="dot"></div> |
| </div> |
| <svg width="0" height="0" class="svg"> |
| <defs> |
| <filter id="uib-jelly-ooze"> |
| <feGaussianBlur |
| in="SourceGraphic" |
| stdDeviation="3" |
| result="blur" |
| /> |
| <feColorMatrix |
| in="blur" |
| mode="matrix" |
| values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" |
| result="ooze" |
| /> |
| <feBlend in="SourceGraphic" in2="ooze" /> |
| </filter> |
| </defs> |
| </svg> |
| |
| <style> |
| .container { |
| --uib-size: 120px; |
| --uib-color: black; |
| --uib-speed: 2.6s; |
| --uib-dot-size: calc(var(--uib-size) * 0.23); |
| position: relative; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| width: var(--uib-size); |
| height: var(--uib-dot-size); |
| filter: url('#uib-jelly-ooze'); |
| } |
| |
| .dot { |
| position: absolute; |
| top: calc(50% - var(--uib-dot-size) / 2); |
| left: calc(0px - var(--uib-dot-size) / 2); |
| display: block; |
| height: var(--uib-dot-size); |
| width: var(--uib-dot-size); |
| border-radius: 50%; |
| background-color: var(--uib-color); |
| animation: stream var(--uib-speed) linear infinite both; |
| transition: background-color 0.3s ease; |
| } |
| |
| .dot:nth-child(2) { |
| animation-delay: calc(var(--uib-speed) * -0.2); |
| } |
| |
| .dot:nth-child(3) { |
| animation-delay: calc(var(--uib-speed) * -0.4); |
| } |
| |
| .dot:nth-child(4) { |
| animation-delay: calc(var(--uib-speed) * -0.6); |
| } |
| |
| .dot:nth-child(5) { |
| animation-delay: calc(var(--uib-speed) * -0.8); |
| } |
| |
| @keyframes stream { |
| 0%, |
| 100% { |
| transform: translateX(0) scale(0); |
| } |
| |
| 50% { |
| transform: translateX(calc(var(--uib-size) * 0.5)) scale(1); |
| } |
| |
| 99.999% { |
| transform: translateX(calc(var(--uib-size))) scale(0); |
| } |
| } |
| </style> |
| """ |
|
|
|
|
| animation_html = """ |
| <div class="container"> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| </div> |
| |
| <style> |
| .container { |
| --uib-size: 110px; |
| --uib-color: black; |
| --uib-speed: 3s; |
| position: relative; |
| height: var(--uib-size); |
| width: var(--uib-size); |
| animation: rotate calc(var(--uib-speed) * 4) linear infinite; |
| } |
| |
| @keyframes rotate { |
| 0% { |
| transform: rotate(0deg); |
| } |
| 100% { |
| transform: rotate(360deg); |
| } |
| } |
| |
| .particle { |
| position: absolute; |
| top: 0%; |
| left: 0; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| height: 100%; |
| width: 100%; |
| |
| &:nth-child(1) { |
| --uib-delay: 0; |
| transform: rotate(8deg); |
| } |
| &:nth-child(2) { |
| --uib-delay: -0.4; |
| transform: rotate(36deg); |
| } |
| |
| &:nth-child(3) { |
| --uib-delay: -0.9; |
| transform: rotate(72deg); |
| } |
| &:nth-child(4) { |
| --uib-delay: -0.5; |
| transform: rotate(90deg); |
| } |
| &:nth-child(5) { |
| --uib-delay: -0.3; |
| transform: rotate(144deg); |
| } |
| &:nth-child(6) { |
| --uib-delay: -0.2; |
| transform: rotate(180deg); |
| } |
| &:nth-child(7) { |
| --uib-delay: -0.6; |
| transform: rotate(216deg); |
| } |
| &:nth-child(8) { |
| --uib-delay: -0.7; |
| transform: rotate(252deg); |
| } |
| &:nth-child(9) { |
| --uib-delay: -0.1; |
| transform: rotate(300deg); |
| } |
| &:nth-child(10) { |
| --uib-delay: -0.8; |
| transform: rotate(324deg); |
| } |
| &:nth-child(11) { |
| --uib-delay: -1.2; |
| transform: rotate(335deg); |
| } |
| &:nth-child(12) { |
| --uib-delay: -0.5; |
| transform: rotate(290deg); |
| } |
| &:nth-child(13) { |
| --uib-delay: -0.2; |
| transform: rotate(240deg); |
| } |
| } |
| |
| .particle::before { |
| content: ''; |
| position: absolute; |
| height: 17.5%; |
| width: 17.5%; |
| border-radius: 50%; |
| background-color: var(--uib-color); |
| flex-shrink: 0; |
| transition: background-color 0.3s ease; |
| --uib-d: calc(var(--uib-delay) * var(--uib-speed)); |
| animation: orbit var(--uib-speed) linear var(--uib-d) infinite; |
| } |
| |
| @keyframes orbit { |
| 0% { |
| transform: translate(calc(var(--uib-size) * 0.5)) scale(0.73684); |
| opacity: 0.65; |
| } |
| 5% { |
| transform: translate(calc(var(--uib-size) * 0.4)) scale(0.684208); |
| opacity: 0.58; |
| } |
| 10% { |
| transform: translate(calc(var(--uib-size) * 0.3)) scale(0.631576); |
| opacity: 0.51; |
| } |
| 15% { |
| transform: translate(calc(var(--uib-size) * 0.2)) scale(0.578944); |
| opacity: 0.44; |
| } |
| 20% { |
| transform: translate(calc(var(--uib-size) * 0.1)) scale(0.526312); |
| opacity: 0.37; |
| } |
| 25% { |
| transform: translate(0%) scale(0.47368); |
| opacity: 0.3; |
| } |
| 30% { |
| transform: translate(calc(var(--uib-size) * -0.1)) scale(0.526312); |
| opacity: 0.37; |
| } |
| 35% { |
| transform: translate(calc(var(--uib-size) * -0.2)) scale(0.578944); |
| opacity: 0.44; |
| } |
| 40% { |
| transform: translate(calc(var(--uib-size) * -0.3)) scale(0.631576); |
| opacity: 0.51; |
| } |
| 45% { |
| transform: translate(calc(var(--uib-size) * -0.4)) scale(0.684208); |
| opacity: 0.58; |
| } |
| 50% { |
| transform: translate(calc(var(--uib-size) * -0.5)) scale(0.73684); |
| opacity: 0.65; |
| } |
| 55% { |
| transform: translate(calc(var(--uib-size) * -0.4)) scale(0.789472); |
| opacity: 0.72; |
| } |
| 60% { |
| transform: translate(calc(var(--uib-size) * -0.3)) scale(0.842104); |
| opacity: 0.79; |
| } |
| 65% { |
| transform: translate(calc(var(--uib-size) * -0.2)) scale(0.894736); |
| opacity: 0.86; |
| } |
| 70% { |
| transform: translate(calc(var(--uib-size) * -0.1)) scale(0.947368); |
| opacity: 0.93; |
| } |
| 75% { |
| transform: translate(0%) scale(1); |
| opacity: 1; |
| } |
| 80% { |
| transform: translate(calc(var(--uib-size) * 0.1)) scale(0.947368); |
| opacity: 0.93; |
| } |
| 85% { |
| transform: translate(calc(var(--uib-size) * 0.2)) scale(0.894736); |
| opacity: 0.86; |
| } |
| 90% { |
| transform: translate(calc(var(--uib-size) * 0.3)) scale(0.842104); |
| opacity: 0.79; |
| } |
| 95% { |
| transform: translate(calc(var(--uib-size) * 0.4)) scale(0.789472); |
| opacity: 0.72; |
| } |
| 100% { |
| transform: translate(calc(var(--uib-size) * 0.5)) scale(0.73684); |
| opacity: 0.65; |
| } |
| } |
| </style> |
| |
| |
| """ |
|
|
| con_color = """ |
| <style> |
| body { |
| background-image: linear-gradient(-225deg, #69EACB 0%, #EACCF8 48%, #6654F1 100%); |
| } |
| .stApp { |
| background-image: linear-gradient(-225deg, #69EACB 0%, #EACCF8 48%, #6654F1 100%); |
| } |
| |
| </style> |
| """ |
|
|
|
|
| con_colors = """ |
| CSS |
| <style> |
| body { |
| background-color: #69EACB; /* Use any single color you prefer here */ |
| } |
| |
| .stApp { |
| background-color: #69EACB; /* Match the body's background color */ |
| } |
| </style> |
| """ |
