FEAT: Add donation and hire buttons to Adobe Flash Games Directory page

AmmarSAA · Oct 18, 2024 · 1e72c6b · 1e72c6b
1 parent 5b45339
commit 1e72c6b
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -10,6 +10,21 @@
   <body>
     <div id="container">
       <h1>Adobe Flash Games Directory</h1>
+      <div class="center">
+        <button
+          class="btn-donate"
+          onclick="window.location.href='https://buymeacoffee.com/ammarsaa'"
+        >
+          Donate Now!
+        </button>
+        <button
+          class="btn-donate"
+          onclick="window.location.href='https://github.com/ammarsaa'"
+        >
+          Hire Me!
+        </button>
+      </div>
+      <br />
       <p>
         Here you can find a collection of Adobe Flash games that you can play
         online for free. Please note that modern browsers no longer support
@@ -281,6 +296,35 @@ <h2>About Flash Games</h2>
         preserve the history of Flash games. All game rights remain with their
         respective creators.
       </p>
+      <div class="center">
+        <p>
+          <strong>Copyright ©<span id="year"></span> @AmmarSAA.</strong>
+        </p>
+      </div>
+      <div class="center">
+        <button
+          type="button"
+          class="btn-github"
+          onclick="window.location.href='https://github.com/AmmarSAA/flash-games-directory'"
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7.99992 1.33331C7.12444 1.33331 6.25753 1.50575 5.4487 1.84078C4.63986 2.17581 3.90493 2.66688 3.28587 3.28593C2.03563 4.53618 1.33325 6.23187 1.33325 7.99998C1.33325 10.9466 3.24659 13.4466 5.89325 14.3333C6.22659 14.3866 6.33325 14.18 6.33325 14C6.33325 13.8466 6.33325 13.4266 6.33325 12.8733C4.48659 13.2733 4.09325 11.98 4.09325 11.98C3.78659 11.2066 3.35325 11 3.35325 11C2.74659 10.5866 3.39992 10.6 3.39992 10.6C4.06659 10.6466 4.41992 11.2866 4.41992 11.2866C4.99992 12.3 5.97992 12 6.35992 11.84C6.41992 11.4066 6.59325 11.1133 6.77992 10.9466C5.29992 10.78 3.74659 10.2066 3.74659 7.66665C3.74659 6.92665 3.99992 6.33331 4.43325 5.85998C4.36659 5.69331 4.13325 4.99998 4.49992 4.09998C4.49992 4.09998 5.05992 3.91998 6.33325 4.77998C6.85992 4.63331 7.43325 4.55998 7.99992 4.55998C8.56659 4.55998 9.13992 4.63331 9.66659 4.77998C10.9399 3.91998 11.4999 4.09998 11.4999 4.09998C11.8666 4.99998 11.6333 5.69331 11.5666 5.85998C11.9999 6.33331 12.2533 6.92665 12.2533 7.66665C12.2533 10.2133 10.6933 10.7733 9.20659 10.94C9.44659 11.1466 9.66659 11.5533 9.66659 12.1733C9.66659 13.0666 9.66659 13.7866 9.66659 14C9.66659 14.18 9.77325 14.3933 10.1133 14.3333C12.7599 13.44 14.6666 10.9466 14.6666 7.99998C14.6666 7.1245 14.4941 6.25759 14.1591 5.44876C13.8241 4.63992 13.333 3.90499 12.714 3.28593C12.0949 2.66688 11.36 2.17581 10.5511 1.84078C9.7423 1.50575 8.8754 1.33331 7.99992 1.33331V1.33331Z"
+              fill="currentcolor"
+            ></path>
+          </svg>
+          <span>View on Github</span>
+        </button>
+      </div>
     </div>
+    <script>
+      document.querySelector("#year").textContent = new Date().getFullYear();
+    </script>
   </body>
 </html>
diff --git a/style.css b/style.css
@@ -53,13 +53,13 @@ a {
     color: #bb86fc;
     /* Material primary color */
     text-decoration: none !important;
-    transition: color 0.3s ease, background-color 0.3s ease;
+    /* transition: color 0.3s ease, background-color 0.3s ease; */
 }
 
 a:hover {
     color: #ffffff;
     /* Hovering turns the text white */
-    background-color: rgba(187, 134, 252, 0.1);
+    /* background-color: rgba(187, 134, 252, 0.1); */
     /* Light highlight on hover */
     text-decoration: underline;
 }
@@ -179,4 +179,89 @@ a:hover {
     .card p:hover {
         flex: none;
     }
-}
+}
+
+.btn-github {
+    cursor: pointer;
+    display: flex;
+    gap: 0.5rem;
+    border: none;
+
+    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+    border-radius: 100px;
+    font-weight: 800;
+    place-content: center;
+
+    padding: 0.75rem 1rem;
+    font-size: 0.825rem;
+    line-height: 1rem;
+
+    background-color: rgba(0, 0, 0, 0.4);
+    box-shadow:
+        inset 0 1px 0 0 rgba(255, 255, 255, 0.04),
+        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+    color: #bb86fc;
+}
+
+.btn-github:hover {
+    box-shadow:
+        inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
+        inset 0 0 0 1px rgba(252, 232, 3, 0.08);
+    color: #fff;
+    transform: translate(0, -0.25rem);
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    gap: 1rem;
+}
+
+.btn-donate {
+    --clr-font-main: hsla(0 0% 20% / 100);
+    --btn-bg-1: hsla(194 100% 69% / 1);
+    --btn-bg-2: hsla(217 100% 56% / 1);
+    --btn-bg-color: hsla(360 100% 100% / 1);
+    --radii: 0.5em;
+    cursor: pointer;
+    padding: 0.9em 1.4em;
+    min-width: 120px;
+    min-height: 44px;
+    font-size: var(--size, 1rem);
+    font-weight: 500;
+    transition: 0.8s;
+    background-size: 280% auto;
+    background-image: linear-gradient(325deg,
+            var(--btn-bg-2) 0%,
+            var(--btn-bg-1) 55%,
+            var(--btn-bg-2) 90%);
+    border: none;
+    border-radius: var(--radii);
+    color: var(--btn-bg-color);
+    box-shadow:
+        0px 0px 20px rgba(71, 184, 255, 0.5),
+        0px 5px 5px -1px rgba(58, 125, 233, 0.25),
+        inset 4px 4px 8px rgba(175, 230, 255, 0.5),
+        inset -4px -4px 8px rgba(19, 95, 216, 0.35);
+}
+
+.btn-donate:hover {
+    background-position: right top;
+}
+
+.btn-donate:is(:focus, :focus-visible, :active) {
+    outline: none;
+    box-shadow:
+        0 0 0 3px var(--btn-bg-color),
+        0 0 0 6px var(--btn-bg-2);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .btn-donate {
+        transition: linear;
+    }
+}
+