perso/WEBSITE_hugulumu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

start animating one mouse

Browse Source
This commit is contained in:
asus
2023-10-24 16:22:11 +02:00
parent 0c7a6f176e
commit d4c6607ce3
1 changed files with 300 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

324
index.html
View File

@@ -47,7 +47,7 @@
div.banner br {
display: block;
}
pre.banner.anime {
pre.banner {
position: relative;
margin-left: -100px;
animation-name: slide;
@@ -56,16 +56,126 @@
animation-timing-function: linear;
animation-direction: normal;
}
pre.banner.pause {
animation-play-state: paused;
}
pre.banner.reverse {
animation-direction: reverse;
}
pre[class~="un"] {
pre.banner.t0_5 {
animation-duration: 0.5s;
}
pre.banner.t1_0 {
animation-duration: 1s;
}
pre.banner.t1_5 {
animation-duration: 1.5s;
}
@keyframes slide {
from {left:0;}
to {left:2.4em;}
}
.mouse_frame {
position: relative;
margin-left: 0px;
/*
border: 1px solid red;
margin-right: auto;
height: 8.5em;
width: 11.9em;
*/
width: fit-content;
}
pre.mouse {
--tmouse: 2s;
position: absolute;
left: 0px;
bottom: 0px;
margin: 0px;
opacity: 0;
animation-name: mouse;
animation-iteration-count: infinite;
animation-duration: var(--tmouse);
animation-timing-function: linear;
animation-direction: normal;
}
pre.mouse:first-child {
position: relative;
}
/* *27
pre.mouse.f2 {animation-delay: calc(var(--tmouse) * 3.7/100);}
pre.mouse.f3 {animation-delay: calc(var(--tmouse) * 7.4/100);}
pre.mouse.f4 {animation-delay: calc(var(--tmouse) * 11.1/100);}
pre.mouse.f5 {animation-delay: calc(var(--tmouse) * 14.8/100);}
pre.mouse.f6 {animation-delay: calc(var(--tmouse) * 18.5/100);}
pre.mouse.f7 {animation-delay: calc(var(--tmouse) * 22.2/100);}
pre.mouse.f8 {animation-delay: calc(var(--tmouse) * 25.9/100);}
pre.mouse.f9 {animation-delay: calc(var(--tmouse) * 29.6/100);}
pre.mouse.f10 {animation-delay: calc(var(--tmouse) * 33.3/100);}
pre.mouse.f11 {animation-delay: calc(var(--tmouse) * 37/100);}
pre.mouse.f12 {animation-delay: calc(var(--tmouse) * 40.7/100);}
pre.mouse.f13 {animation-delay: calc(var(--tmouse) * 44.4/100);}
pre.mouse.f14 {animation-delay: calc(var(--tmouse) * 48.1/100);}
pre.mouse.f15 {animation-delay: calc(var(--tmouse) * 51.8/100);}
pre.mouse.f16 {animation-delay: calc(var(--tmouse) * 55.5/100);}
pre.mouse.f17 {animation-delay: calc(var(--tmouse) * 59.2/100);}
pre.mouse.f18 {animation-delay: calc(var(--tmouse) * 62.9/100);}
pre.mouse.f19 {animation-delay: calc(var(--tmouse) * 66.6/100);}
pre.mouse.f20 {animation-delay: calc(var(--tmouse) * 70.3/100);}
pre.mouse.f21 {animation-delay: calc(var(--tmouse) * 74/100);}
pre.mouse.f22 {animation-delay: calc(var(--tmouse) * 77.7/100);}
pre.mouse.f23 {animation-delay: calc(var(--tmouse) * 81.4/100);}
pre.mouse.f24 {animation-delay: calc(var(--tmouse) * 85.1/100);}
pre.mouse.f25 {animation-delay: calc(var(--tmouse) * 88.8/100);}
pre.mouse.f26 {animation-delay: calc(var(--tmouse) * 92.5/100);}
pre.mouse.f27 {animation-delay: calc(var(--tmouse) * 96.2/100);}
*/
/* *25
pre.mouse.f2 {animation-delay: calc(var(--tmouse) * 4/100);}
pre.mouse.f3 {animation-delay: calc(var(--tmouse) * 8/100);}
pre.mouse.f4 {animation-delay: calc(var(--tmouse) * 12/100);}
pre.mouse.f5 {animation-delay: calc(var(--tmouse) * 16/100);}
pre.mouse.f6 {animation-delay: calc(var(--tmouse) * 20/100);}
pre.mouse.f7 {animation-delay: calc(var(--tmouse) * 24/100);}
pre.mouse.f8 {animation-delay: calc(var(--tmouse) * 28/100);}
pre.mouse.f9 {animation-delay: calc(var(--tmouse) * 32/100);}
pre.mouse.f10 {animation-delay: calc(var(--tmouse) * 36/100);}
pre.mouse.f11 {animation-delay: calc(var(--tmouse) * 40/100);}
pre.mouse.f12 {animation-delay: calc(var(--tmouse) * 44/100);}
pre.mouse.f13 {animation-delay: calc(var(--tmouse) * 48/100);}
pre.mouse.f14 {animation-delay: calc(var(--tmouse) * 52/100);}
pre.mouse.f15 {animation-delay: calc(var(--tmouse) * 56/100);}
pre.mouse.f16 {animation-delay: calc(var(--tmouse) * 60/100);}
pre.mouse.f17 {animation-delay: calc(var(--tmouse) * 64/100);}
pre.mouse.f18 {animation-delay: calc(var(--tmouse) * 68/100);}
pre.mouse.f19 {animation-delay: calc(var(--tmouse) * 72/100);}
pre.mouse.f20 {animation-delay: calc(var(--tmouse) * 76/100);}
pre.mouse.f21 {animation-delay: calc(var(--tmouse) * 80/100);}
pre.mouse.f22 {animation-delay: calc(var(--tmouse) * 84/100);}
pre.mouse.f23 {animation-delay: calc(var(--tmouse) * 88/100);}
pre.mouse.f24 {animation-delay: calc(var(--tmouse) * 92/100);}
pre.mouse.f25 {animation-delay: calc(var(--tmouse) * 96/100);}
*/
/* *10
*/
pre.mouse.f2 {animation-delay: calc(var(--tmouse) * 10/100);}
pre.mouse.f3 {animation-delay: calc(var(--tmouse) * 20/100);}
pre.mouse.f4 {animation-delay: calc(var(--tmouse) * 30/100);}
pre.mouse.f5 {animation-delay: calc(var(--tmouse) * 40/100);}
pre.mouse.f6 {animation-delay: calc(var(--tmouse) * 50/100);}
pre.mouse.f7 {animation-delay: calc(var(--tmouse) * 60/100);}
pre.mouse.f8 {animation-delay: calc(var(--tmouse) * 70/100);}
pre.mouse.f9 {animation-delay: calc(var(--tmouse) * 80/100);}
pre.mouse.f10 {animation-delay: calc(var(--tmouse) * 90/100);}
@keyframes mouse {
0% {opacity: 1;}
10% {opacity: 1;}
10.1% {opacity: 0;}
100% {opacity: 0;}
}
</style>
</head>
<body>
@@ -128,30 +238,190 @@
•• •
•
</pre>
<pre>
•
•• •
• • •
•••••••••
• • ••
• • •
••••• • • •
• • •• •
• •
• • ••
• • • •
• •• •
••• ••••
</pre>
<pre class="banner">
<div class="mouse_frame">
<pre class="mouse f1">
•
•
•• •
• • •
•••••••••
• • ••
• • •
••••• • • •
• • •• •
• •
• • ••
• • • •
• •• •
••• ••••
</pre>
<pre class="mouse f2">
•
•
•• •
• • •
•••••••••
• • ••
• • •
••••• • • •
• • •• •
• •
• • ••
• • • •
• •• •
••• ••••
</pre>
<pre class="mouse f3">
•
•
•• •
• • •
•••••••••
• • ••
• • •
••••• • • •
• • •• •
• •
• • ••
• • • •
• •• •
••• ••••
</pre>
<pre class="mouse f4">
•
•
•• •
• • •
•••••••••
• • ••
• • •
••••• • • •
• • •• •
• •
• • ••
• • • •
• •• •
••• ••••
</pre>
<pre class="mouse f5">
•
•
•• •
• • •
•••••••••
• • ••
• • •
••••• • • •
• • •• •
• •
• • ••
• • • •
• •• •
••• ••••
</pre>
<pre class="mouse f6">
•
•
•• •
• • •
•••••••••
• • ••
• • •
••••• • • •
• • •• •
• •
• • ••
• • • •
• •• •
••• ••••
</pre>
<pre class="mouse f7">
•
•
•• •
• • •
•••••••••
• • ••
• • •
••••• • • •
• • •• •
• •
• • ••
• • • •
• •• •
••• ••••
</pre>
<pre class="mouse f8">
•
•
•• •
• • •
•••••••••
• • ••
• • •
••••• • • •
• • •• •
• •
• • ••
• • • •
• •• •
••• ••••
</pre>
<pre class="mouse f9">
••
• • •
•• •
• • •
• • • •
••••• • ••
• • •••••••••
• • •
•• • ••• •
• • • •
• •• • •
••• ••••
</pre>
<pre class="mouse f10">
••
• • •
•• •
• • •
• • • •
••••• • ••
• • •••••••••
• • •
•• • ••• •
• • • •
• •• • •
••• ••••
</pre>
</div>
<!--
• -
•• • -- - ••
• • • - - - • • •
••••••••• --------- •• •
• • •• - - -- • • •
• • • - - - • • • •
••••• • • • ----- - - - ••••• • ••
• • •• • - - -- - • • •••••••••
• • - - • • •
• • •• - - -- •• • ••• •
• • • • - - - - • • • •
• •• • - -- - • •• • •
••• •••• --- ---- ••• ••••
-->
<pre class="banner reverse">
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
</pre>
<pre class="banner">
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
<pre class="banner reverse t1_0">
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
@@ -165,12 +435,18 @@
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
</pre>
<pre class="banner anime">
<pre class="banner t1_5">
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
</pre>
<pre class="banner anime un">
<pre class="banner t0_5">
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •