Test

Vitkarus · Aug 4, 2022 · baf6af3 · baf6af3
1 parent 7c6bb46
commit baf6af3
Show file tree

Hide file tree

Showing 11 changed files with 314 additions and 32 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/other/.DS_Store → assets/.DS_Store b/other/.DS_Store → assets/.DS_Store
diff --git a/assets/fonts/square721.woff2 b/assets/fonts/square721.woff2
diff --git a/index.html b/index.html
@@ -1,7 +1,27 @@
 <!DOCTYPE html>
 <html>
-<body>
-<h1>Hello there</h1>
-<p>Vitkarus Repo</p>
-</body>
+    <!-- <meta name="viewport" content="width=200px, initial-scale=2"> -->
+    <head>
+        <link rel="stylesheet" href="style.css">
+        <script src="script.js"></script> 
+    </head>
+    <body onload="changeLogo(), setTimeout(addButtons, 650, 0), setTimeout(addButtons, 1150, 1)">
+        <div class="logo-container">
+            <!-- <div class="logo-text">Viktor<br>Nikitinskiy</div> -->
+            <div class="logo logo-hidden logo-cross" id="logo">
+                <div class="logo-V1">                        
+                    <div class="logo-V2"></div>
+                </div>
+                <div class="logo-N1">
+                    <div class="logo-N2">
+                        <div class="logo-N3"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="container">
+            <a class="button" id="button0" href="cydia://url/https://cydia.saurik.com/api/share#?source=https://viktor.graphics/repo"></a>
+            <a class="button" id="button1" href="https://viktor.graphics"></a>
+        </div>
+    </body>
 </html>
diff --git a/other/Packages b/other/Packages
diff --git a/other/Packages.bz2 b/other/Packages.bz2
diff --git a/other/debs/.DS_Store b/other/debs/.DS_Store
diff --git a/other/debs/com.supermamon.newpackage_2.0.0-1_iphoneos-arm.deb b/other/debs/com.supermamon.newpackage_2.0.0-1_iphoneos-arm.deb
diff --git a/other/debs/com.supermamon.oldpackage_1.0.0-1_iphoneos-arm.deb b/other/debs/com.supermamon.oldpackage_1.0.0-1_iphoneos-arm.deb
diff --git a/script.js b/script.js
@@ -0,0 +1,28 @@
+function changeLogo()
+{
+    console.log('yes');
+    document.getElementById('logo').classList.remove('logo-hidden', 'logo-cross');
+}
+
+var buttonsTextsArray = [
+    "add repo to cydia", 
+    "back to site", 
+]
+
+function addButtons(line)
+{
+    var buttonsTexts = buttonsTextsArray[line];
+    var introLetters = buttonsTexts.split("");
+    var length = introLetters.length;
+    for (var i = 0; i < length; i++)
+    {
+        setTimeout(addLetter, 50*i, i);
+    }
+    function addLetter(i)
+    {
+        if (introLetters[i] == " "){document.getElementById('button'+line).insertAdjacentHTML('beforeend', '<div class="space"></div>');}
+        else {document.getElementById('button'+line).insertAdjacentHTML('beforeend', '<div>' + introLetters[i] + '</div>');}
+
+    }
+}
+
diff --git a/style.css b/style.css
@@ -0,0 +1,262 @@
+:root
+{
+    --logo-thikness: 50px;
+    --logo-longness-N: 300px;
+    --logo-longness-V: calc(var(--logo-longness-N)*1.15);
+    --logo-latters-space: calc(var(--logo-longness-N)*0.65);
+    --logo-border-radius: 15px;
+    --logo-color: black;
+
+    --cross-thikness: 0px;
+    --cross-longness: 300px;
+    --cross-longness-half-hypotenuse: calc(var(--cross-longness)/2 - var(--cross-thikness));
+    --cross-longness-half-leg: calc(var(--cross-longness-half-hypotenuse)*0.71);
+
+    --close-button-size: 600px;
+
+    --logo-pressing-speed: 0.3s;
+  --logo-V-speed: 1s;
+  --logo-N-speed: 0.66s;
+}
+@font-face 
+{
+    font-family: "Square721";
+    src: url("assets/fonts/square721.woff2") format("woff2");
+}
+
+
+* 
+{
+  margin: 0;
+  padding: 0;
+
+}
+a 
+{
+    text-decoration: none; 
+    color: black;
+}
+body 
+{
+    height: 100vh;
+    width: 100vw;
+
+    overflow: hidden;
+
+    display: flex;
+    align-items: center;
+    justify-content: center; 
+}
+.container
+{
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  max-width: var(--max-webpage-width);
+  overflow: hidden;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: end; 
+}
+.logo-container
+{
+    position: fixed;
+    height: var(--close-button-size);
+    width: var(--close-button-size);
+    left: var(--frame-margin);
+    top: var(--frame-margin);
+
+    flex-shrink: 0;
+
+    /* transform: translateY(100px); */
+
+    /* animation: slide; */
+    animation-duration: 2s;
+    animation-delay: 1s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes slide 
+{
+
+    to {
+        transform: scale(0.3) translateX(-1000px) translateY(-50vh);
+    }
+  }
+.logo
+{
+    --leg-N: calc((var(--logo-longness-N) - var(--logo-thikness)) * 0.707);
+    --leg-V: calc((var(--logo-longness-V) - var(--logo-thikness)) * 0.707);
+
+    position: absolute;
+    top: 45%;
+}
+{
+    from {
+      transform: translateY(50px);
+      opacity: 0;
+      filter: blur(10px);
+    }
+
+    to {
+        transform: translateY(0px);
+        opacity: 1;
+        filter: blur(0px);
+    }
+  }
+/* ===== L A T T E R S ===== */
+
+/* === V === */
+.logo-V1, .logo-V2
+{
+    height: var(--logo-thikness);
+    width: var(--logo-longness-V);
+    border-radius: var(--logo-border-radius);
+    background: black;
+
+    transition: all var(--logo-V-speed) ease;
+}
+.logo-V1
+{
+    position: absolute;
+    top: calc(0px - var(--logo-latters-space));
+    left: calc(var(--leg-N)*2 - var(--leg-V));
+    transform-origin: calc(var(--logo-thikness)/2) calc(var(--logo-thikness)/2);
+    transform: rotate(45deg);
+}
+.logo-V2
+{
+    position: relative;
+    left: calc(var(--logo-longness-V) - var(--logo-thikness));
+    transform-origin: calc(var(--logo-thikness)/2) calc(var(--logo-thikness)/2);
+    transform: rotate(-90deg);
+}
+.logo-N1, .logo-N2, .logo-N3
+{
+    height: var(--logo-thikness);
+    width: var(--logo-longness-N);
+    border-radius: var(--logo-border-radius);
+    background: black;  
+
+    transition: all var(--logo-N-speed) ease;
+}
+
+/* === N === */
+.logo-N1
+{
+    position: absolute;
+    top: var(--logo-latters-space);
+    left: 0px;
+    transform-origin: calc(var(--logo-thikness)/2) calc(var(--logo-thikness)/2);
+    transform: rotate(-45deg);
+}
+.logo-N2
+{
+    position: relative;
+    left: calc(var(--logo-longness-N) - var(--logo-thikness));
+    transform-origin: calc(var(--logo-thikness)/2) calc(var(--logo-thikness)/2);
+    transform: rotate(90deg);
+}
+.logo-N3
+{
+    position: relative;
+    left: calc(var(--logo-longness-N) - var(--logo-thikness));
+    transform-origin: calc(var(--logo-thikness)/2) calc(var(--logo-thikness)/2);
+    transform: rotate(270deg);
+}
+
+
+/* === врапперы === */
+.logo-hidden > div
+{
+    /* height: 0; */
+    opacity: 0;
+    filter: blur(10px);
+}
+.logo-cross > div
+{
+    left: 0;
+    top: 0;
+    height: var(--cross-thikness);
+    width: var(--cross-longness);
+    transform-origin: center;
+}
+.logo-cross > .logo-V1 
+{
+    transform: rotate(40deg);
+    transition: all var(--logo-V-speed) ease;
+}
+.logo-cross > .logo-N1 
+{
+    transform: rotate(-40deg);
+    transition: all var(--logo-N-speed) ease;
+}
+.logo-cross > div > div, .logo-cross > div > div > div
+{
+    transform-origin: left;
+    /* height: 0; */
+    opacity: 0;
+    filter: blur(10px);
+    transition: inherit;
+}
+
+/* ===== B U T T O N S ===== */
+
+.button
+{
+    margin-left: 100px;
+    /* margin-top: 100px; */
+
+    position: relative;
+    bottom: 0;
+    height: 150px;
+    width: 100%;
+
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+
+    /* transform: translateY(30vh); */
+}
+.button > div 
+{
+    font-family: "Square721";
+    font-size: 70px;
+    transform: translateX(-50px);
+    animation: slidein;
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+}
+.space
+{
+    width: 25px;
+}
+
+@keyframes slidein 
+{
+    from {
+      transform: translateY(50px);
+      opacity: 0;
+      filter: blur(10px);
+    }
+
+    to {
+        transform: translateY(0px);
+        opacity: 1;
+        filter: blur(0px);
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    body {
+      background: black;
+    }
+    body a {
+      color: white;
+    }
+    .logo-N1, .logo-N2, .logo-N3, .logo-V1, .logo-V2{
+        background: white;
+    }
+  }