Skip to content

Commit 4430680

Browse files
Mavox-IDMavox-ID
authored
Update index.html
1 parent 03c3ca0 commit 4430680

1 file changed

Lines changed: 247 additions & 34 deletions

File tree

‎index.html‎

Lines changed: 247 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -670,42 +670,152 @@
670670
left: auto;
671671
transform: none;
672672
}
673-
.loader {
674-
width: 100px;
675-
height: 100px;
676-
padding: 10px;
677-
box-sizing: border-box;
678-
display: grid;
679-
background: linear-gradient(135deg, #8e2de2, #c471ed, #f64f59);
680-
background-size: 200% 200%;
681-
animation: gradientFlow 5s infinite alternate;
682-
filter: blur(5px) contrast(10);
683-
}
684-
685-
.loader:before,
686-
.loader:after {
673+
.about-cosmic {
674+
max-width: 750px;
675+
margin: 4rem auto;
676+
padding: 3rem 2.5rem 2rem;
677+
border-radius: 24px;
678+
background: rgba(20, 20, 40, 0.65);
679+
backdrop-filter: blur(18px) saturate(180%);
680+
-webkit-backdrop-filter: blur(18px) saturate(180%);
681+
border: 1px solid rgba(255, 255, 255, 0.15);
682+
box-shadow: 0 0 25px rgba(126, 34, 206, 0.4),
683+
0 0 60px rgba(14, 165, 233, 0.3),
684+
inset 0 0 20px rgba(255, 255, 255, 0.05);
685+
font-family: 'Poppins', sans-serif;
686+
color: #f0f9ff;
687+
text-align: center;
688+
position: relative;
689+
overflow: hidden;
690+
transition: transform 0.4s ease, box-shadow 0.4s ease;
691+
}
692+
693+
.about-cosmic:hover {
694+
transform: translateY(-6px) scale(1.02);
695+
box-shadow: 0 0 35px rgba(126, 34, 206, 0.6),
696+
0 0 70px rgba(14, 165, 233, 0.5);
697+
}
698+
699+
.about-cosmic::before {
687700
content: "";
688-
grid-area: 1/1;
701+
position: absolute;
702+
top: -60%;
703+
left: -60%;
704+
width: 220%;
705+
height: 220%;
706+
background: conic-gradient(
707+
from 0deg,
708+
rgba(126, 34, 206, 0.6),
709+
rgba(14, 165, 233, 0.6),
710+
rgba(56, 189, 248, 0.6),
711+
rgba(236, 72, 153, 0.6),
712+
rgba(126, 34, 206, 0.6)
713+
);
714+
animation: rotate 18s linear infinite;
715+
z-index: 0;
716+
filter: blur(100px);
717+
}
718+
719+
.about-cosmic h2 {
720+
font-size: 2.2rem;
721+
margin-bottom: 1.2rem;
722+
background: linear-gradient(90deg, #7e22ce, #38bdf8, #f472b6, #a78bfa);
723+
-webkit-background-clip: text;
724+
-webkit-text-fill-color: transparent;
725+
font-weight: 800;
726+
letter-spacing: 1px;
727+
position: relative;
728+
z-index: 1;
729+
}
730+
731+
.about-cosmic p {
732+
font-size: 1.15rem;
733+
margin: 0.8rem 0;
734+
line-height: 1.6;
735+
color: rgba(240, 249, 255, 0.9);
736+
position: relative;
737+
z-index: 1;
738+
}
739+
740+
.about-cosmic a {
741+
color: #38bdf8;
742+
font-weight: 600;
743+
text-decoration: none;
744+
transition: color 0.4s ease, text-shadow 0.4s ease;
745+
position: relative;
746+
z-index: 1;
689747
}
690748

691-
.loader:after {
692-
height: 20px;
693-
width: 20px;
694-
margin: auto;
749+
.about-cosmic a:hover {
750+
color: #f472b6;
751+
text-shadow: 0 0 12px #f472b6, 0 0 22px #38bdf8;
752+
}
753+
754+
.highlight {
755+
color: #a78bfa;
756+
font-weight: 700;
757+
text-shadow: 0 0 8px rgba(167, 139, 250, 0.7);
758+
}
759+
760+
@keyframes rotate {
761+
0% { transform: rotate(0deg);}
762+
100% { transform: rotate(360deg);}
763+
}
764+
765+
/* rainbow loader */
766+
.loader {
767+
position: absolute;
768+
top: 50%;
769+
left: 50%;
770+
transform: scale(0.22) translate(-50%, -50%);
771+
772+
--from: 200px;
773+
--to: 40px;
774+
--size: 32px;
775+
--time: 6s;
776+
--count: 100;
777+
--turns: 6;
778+
}
779+
780+
.circle {
781+
position: absolute;
782+
--delay: calc(var(--time) / var(--count) * -1 * var(--i));
783+
rotate: calc(var(--turns) * 1turn / var(--count) * var(--i));
784+
animation: circle var(--time) var(--delay) ease-in-out infinite;
785+
}
786+
787+
.circle::before {
788+
content: "";
789+
display: block;
790+
width: var(--size);
791+
aspect-ratio: 1/1;
695792
border-radius: 50%;
696-
background: linear-gradient(135deg, #8e2de2, #c471ed, #f64f59);
697-
background-size: 200% 200%;
698-
animation: l10 1s infinite linear, gradientFlow 3s infinite alternate;
793+
background-color: white;
794+
transform-origin: center center;
795+
animation: circleSize var(--time) var(--delay) ease-in-out infinite;
699796
}
700797

701-
@keyframes l10 {
702-
90%, 100% { transform: translateX(200%); }
798+
.rainbow .circle::before {
799+
background-color: hsl(
800+
calc(1turn / (var(--count) / var(--turns)) * var(--i)) 100% 70%
801+
);
703802
}
704803

705-
@keyframes gradientFlow {
706-
0% { background-position: 0% 50%; }
707-
50% { background-position: 100% 50%; }
708-
100% { background-position: 0% 50%; }
804+
@keyframes circle {
805+
from {
806+
transform: translate(0, var(--from));
807+
}
808+
to {
809+
transform: translate(0, var(--to));
810+
}
811+
}
812+
@keyframes circleSize {
813+
0%, 100% {
814+
transform: scale(0);
815+
}
816+
25%, 50% {
817+
transform: scale(1);
818+
}
709819
}
710820
</style>
711821
<title>UmbrioX (᪣UBX) - New cryptocurrency of the future</title>
@@ -790,13 +900,116 @@ <h2 class="galaxy-heading">UmbrioX Galaxy</h2>
790900
<div id="galaxy"></div>
791901
</div>
792902
</div>
793-
<div class="about-terminal">
794-
<h2>API UmbrioX</h2>
795-
<div class="loader"></div>
796-
<p><span class="prompt">➜</span> Want to use <span class="highlight">UmbrioX</span> cryptocurrency API prices etc.?</p>
797-
<p><span class="prompt">➜</span> Get price, percentage change, previous price, etc. No hassle at <a href="https://api.umbriox.pp.ua">API.UBX</a></p>
798-
<p><span class="prompt">➜</span> Use the API to your taste or even create some custom app to track prices.</p>
903+
<div class="about-cosmic">
904+
<div class="loader rainbow">
905+
<div class="circle" style="--i:1"></div>
906+
<div class="circle" style="--i:2"></div>
907+
<div class="circle" style="--i:3"></div>
908+
<div class="circle" style="--i:4"></div>
909+
<div class="circle" style="--i:5"></div>
910+
<div class="circle" style="--i:6"></div>
911+
<div class="circle" style="--i:7"></div>
912+
<div class="circle" style="--i:8"></div>
913+
<div class="circle" style="--i:9"></div>
914+
<div class="circle" style="--i:10"></div>
915+
<div class="circle" style="--i:11"></div>
916+
<div class="circle" style="--i:12"></div>
917+
<div class="circle" style="--i:13"></div>
918+
<div class="circle" style="--i:14"></div>
919+
<div class="circle" style="--i:15"></div>
920+
<div class="circle" style="--i:16"></div>
921+
<div class="circle" style="--i:17"></div>
922+
<div class="circle" style="--i:18"></div>
923+
<div class="circle" style="--i:19"></div>
924+
<div class="circle" style="--i:20"></div>
925+
<div class="circle" style="--i:21"></div>
926+
<div class="circle" style="--i:22"></div>
927+
<div class="circle" style="--i:23"></div>
928+
<div class="circle" style="--i:24"></div>
929+
<div class="circle" style="--i:25"></div>
930+
<div class="circle" style="--i:26"></div>
931+
<div class="circle" style="--i:27"></div>
932+
<div class="circle" style="--i:28"></div>
933+
<div class="circle" style="--i:29"></div>
934+
<div class="circle" style="--i:30"></div>
935+
<div class="circle" style="--i:31"></div>
936+
<div class="circle" style="--i:32"></div>
937+
<div class="circle" style="--i:33"></div>
938+
<div class="circle" style="--i:34"></div>
939+
<div class="circle" style="--i:35"></div>
940+
<div class="circle" style="--i:36"></div>
941+
<div class="circle" style="--i:37"></div>
942+
<div class="circle" style="--i:38"></div>
943+
<div class="circle" style="--i:39"></div>
944+
<div class="circle" style="--i:40"></div>
945+
<div class="circle" style="--i:41"></div>
946+
<div class="circle" style="--i:42"></div>
947+
<div class="circle" style="--i:43"></div>
948+
<div class="circle" style="--i:44"></div>
949+
<div class="circle" style="--i:45"></div>
950+
<div class="circle" style="--i:46"></div>
951+
<div class="circle" style="--i:47"></div>
952+
<div class="circle" style="--i:48"></div>
953+
<div class="circle" style="--i:49"></div>
954+
<div class="circle" style="--i:50"></div>
955+
<div class="circle" style="--i:51"></div>
956+
<div class="circle" style="--i:52"></div>
957+
<div class="circle" style="--i:53"></div>
958+
<div class="circle" style="--i:54"></div>
959+
<div class="circle" style="--i:55"></div>
960+
<div class="circle" style="--i:56"></div>
961+
<div class="circle" style="--i:57"></div>
962+
<div class="circle" style="--i:58"></div>
963+
<div class="circle" style="--i:59"></div>
964+
<div class="circle" style="--i:60"></div>
965+
<div class="circle" style="--i:61"></div>
966+
<div class="circle" style="--i:62"></div>
967+
<div class="circle" style="--i:63"></div>
968+
<div class="circle" style="--i:64"></div>
969+
<div class="circle" style="--i:65"></div>
970+
<div class="circle" style="--i:66"></div>
971+
<div class="circle" style="--i:67"></div>
972+
<div class="circle" style="--i:68"></div>
973+
<div class="circle" style="--i:69"></div>
974+
<div class="circle" style="--i:70"></div>
975+
<div class="circle" style="--i:71"></div>
976+
<div class="circle" style="--i:72"></div>
977+
<div class="circle" style="--i:73"></div>
978+
<div class="circle" style="--i:74"></div>
979+
<div class="circle" style="--i:75"></div>
980+
<div class="circle" style="--i:76"></div>
981+
<div class="circle" style="--i:77"></div>
982+
<div class="circle" style="--i:78"></div>
983+
<div class="circle" style="--i:79"></div>
984+
<div class="circle" style="--i:80"></div>
985+
<div class="circle" style="--i:81"></div>
986+
<div class="circle" style="--i:82"></div>
987+
<div class="circle" style="--i:83"></div>
988+
<div class="circle" style="--i:84"></div>
989+
<div class="circle" style="--i:85"></div>
990+
<div class="circle" style="--i:86"></div>
991+
<div class="circle" style="--i:87"></div>
992+
<div class="circle" style="--i:88"></div>
993+
<div class="circle" style="--i:89"></div>
994+
<div class="circle" style="--i:90"></div>
995+
<div class="circle" style="--i:91"></div>
996+
<div class="circle" style="--i:92"></div>
997+
<div class="circle" style="--i:93"></div>
998+
<div class="circle" style="--i:94"></div>
999+
<div class="circle" style="--i:95"></div>
1000+
<div class="circle" style="--i:96"></div>
1001+
<div class="circle" style="--i:97"></div>
1002+
<div class="circle" style="--i:98"></div>
1003+
<div class="circle" style="--i:99"></div>
1004+
<div class="circle" style="--i:100"></div>
7991005
</div>
1006+
<h2>🚀 API UmbrioX</h2>
1007+
<p>Want to use <span class="highlight">UmbrioX</span> cryptocurrency API prices etc.?</p>
1008+
<p>Get price, percentage change, previous price, etc. No hassle at
1009+
<a href="https://api.umbriox.pp.ua" target="_blank">API.UBX</a>
1010+
</p>
1011+
<p>Use the API to your taste or even create some custom app to track prices.</p>
1012+
</div>
8001013
<div class="about">
8011014
<h2 style="color: #d8b4fe; font-size: 1.75rem;">About UmbrioX</h2>
8021015
<p>UmbrioX is a cryptocurrency of a new era. It is created for those who are ready to go beyond the ordinary and explore the financial horizons of the future. The symbol ᪣ represents the mystery of this world.</p>

0 commit comments

Comments
 (0)