init, working

2024-02-22 13:31:58 -07:00 · 2024-02-22 13:31:58 -07:00 · 148b464d27
commit 148b464d27
3 changed files with 108 additions and 0 deletions
--- a/README.md
+++ b/README.md
--- a/generate.py
+++ b/generate.py
@ -0,0 +1,59 @@
+import random
+import sys
+
+if len(sys.argv) != 2:
+    print("First and only argument is quantity of lines to cycle thru.")
+    sys.exit(1)
+qty = int(sys.argv[1])
+if qty == 3:
+    print("/* When qty=3 it doesn't output the correct amount of classes due to rounding errors. */")
+
+percent_step = int(round(100 / qty))
+# idk how to make a blank array
+percentages = [0] * 0
+for i in range(0, 100, percent_step):
+    percentages.append(i)
+# container class
+print(".roller-container {display: grid; text-align: center;}\n")
+# set style for all the classes
+for i in range(0, len(percentages)):
+    # the last one needs it's trailing comma removed TODO
+    if i == len(percentages) - 1:
+        print(f".roller{i}")
+    else:
+        print(f".roller{i},")
+print(
+    f"""{{
+    animation-iteration-count: infinite;
+    animation-timing-function: cubic-bezier(1, 0, 0, 1);
+    animation-duration: {qty}s;
+    animation-direction: normal;
+    transform-origin: center;
+    /* works with "display: grid" to have all the words in the same place on the screen. */
+    grid-row: 1;
+    grid-column: 1;
+}}"""
+)
+# assign each class it's animation
+for i in range(0, len(percentages)):
+    print(
+        f".roller{i} {{ animation-name: roll{i}; color: rgb({random.randrange(50, 255)}, {random.randrange(100, 255)}, {random.randrange(100, 255)})}}"
+    )
+# set keyframes
+for i in range(0, len(percentages)):
+    print(f"@keyframes roll{i} {{")
+    for j in percentages:
+        # Make sure everybody has an 100% rule
+        if j == percentages[0]:
+            if i == 0:
+                print("\t100% { opacity: 1; transform: translateY(0) rotateX(0); }")
+            else:
+                print("\t100% { opacity: 0; transform: translateY(2rem) rotateX(15deg); }")
+        # calculate the keyframes
+        if i * percent_step == j:
+            print(f"\t{j}% {{ opacity: 1; transform: translateY(0) rotateX(0); }}\n")
+        else:
+            print(
+                f"\t{j}% {{ opacity: 0; transform: translateY(2rem) rotateX(15deg); }}\n"
+            )
+    print("}")
--- a/index.html
+++ b/index.html
@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Testing</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' type='text/css' media='screen' href='roller.css'>
+</head>
+
+<body>
+    <main>
+        <div class="title">
+            <p>We can help with</p>
+            <div class="roller-container">
+                <p class="roller0">Software Development</p>
+                <p class="roller1">Construction</p>
+                <p class="roller2">Graphic Design</p>
+                <p class="roller3">Marketing</p>
+                <p class="roller4">Human Resources</p>
+            </div>
+            <p>here at Example Co.</p>
+        </div>
+    </main>
+</body>
+<style>
+    html {
+        font-family: Arial, Helvetica, sans-serif;
+        background-color: black;
+        color: white;
+        font-size: x-large;
+    }
+
+    main {
+        max-width: 80%;
+        margin: auto;
+    }
+
+    p {
+        margin: 0px;
+    }
+
+    .title {
+        text-align: center;
+    }
+</style>
+
+</html>