Everything REVAMPED

yazidears · May 22, 2024 · 94f99f8 · 94f99f8
1 parent 166a3fe
commit 94f99f8
Show file tree

Hide file tree

Showing 25 changed files with 181 additions and 38 deletions.
diff --git a/fonts.css b/fonts.css
@@ -0,0 +1,88 @@
+
+/*create font*/
+@font-face {
+    font-family: 'SFProDisplayBlack';
+    src: url('fonts/SF-Pro-Display-Black.otf');
+}
+@font-face {
+    font-family: 'SFProDisplayBlackItalic';
+    src: url('fonts/SF-Pro-Display-BlackItalic.otf');
+}
+@font-face {
+    font-family: 'SFProDisplayBold';
+    src: url('fonts/SF-Pro-Display-Bold.otf');
+}
+@font-face {
+    font-family: 'SFProDisplayBoldItalic';
+    src: url('fonts/SF-Pro-Display-BoldItalic.otf');
+}
+@font-face {
+    font-family: 'SFProDisplayHeavy';
+    src: url('fonts/SF-Pro-Display-Heavy.otf');
+}
+@font-face {
+    font-family: 'SFProDisplayHeavyItalic';
+    src: url('fonts/SF-Pro-Display-HeavyItalic.otf');
+}
+@font-face {
+    font-family: 'SFProDisplayLight';
+    src: url('fonts/SF-Pro-Display-Light.otf');
+}
+@font-face {
+    font-family: 'SFProDisplayLightItalic';
+    src: url('fonts/SF-Pro-Display-LightItalic.otf');
+}
+@font-face {
+    font-family: 'SFProDisplayMedium';
+    src: url('fonts/SF-Pro-Display-Medium.otf');
+}
+@font-face {
+    font-family: 'SFProDisplayMediumItalic';
+    src: url('fonts/SF-Pro-Display-MediumItalic.otf');
+}
+@font-face {
+    font-family: 'SFProDisplayRegular';
+    src: url('fonts/SF-Pro-Display-Regular.otf');
+
+}
+@font-face {
+    font-family: 'SFProDisplayRegularItalic';
+    src: url('fonts/SF-Pro-Display-RegularItalic.otf');
+}
+@font-face {
+    font-family: 'SFProDisplaySemibold';
+    src: url('fonts/SF-Pro-Display-Semibold.otf');
+}
+@font-face {
+    font-family: 'SFProDisplaySemiboldItalic';
+    src: url('fonts/SF-Pro-Display-SemiboldItalic.otf');
+}
+@font-face {
+    font-family: 'SFProDisplayThin';
+    src: url('fonts/SF-Pro-Display-Thin.otf');
+}
+@font-face {
+    font-family: 'SFProDisplayThinItalic';
+    src: url('fonts/SF-Pro-Display-ThinItalic.otf');
+}
+@font-face {
+    font-family: 'SFProDisplayUltralight';
+    src: url('fonts/SF-Pro-Display-Ultralight.otf');
+
+}
+@font-face {
+    font-family: 'SFProDisplayUltralightItalic';
+    src: url('fonts/SF-Pro-Display-UltralightItalic.otf');
+}
+@font-face {
+    font-family: 'Horizon';
+    src: url('fonts/Horizon.otf');
+}
+@font-face {
+    font-family: 'HorizonOut';
+    src: url('fonts/Horizon-Outline.otf');
+}
+@font-face {
+    font-family: 'Monument';
+    src: url('fonts/Monument.otf');
+}
diff --git a/fonts/Horizon-Outline.otf b/fonts/Horizon-Outline.otf
diff --git a/fonts/Horizon.otf b/fonts/Horizon.otf
diff --git a/fonts/Monument.otf b/fonts/Monument.otf
diff --git a/fonts/SF-Pro-Display-Black.otf b/fonts/SF-Pro-Display-Black.otf
diff --git a/fonts/SF-Pro-Display-BlackItalic.otf b/fonts/SF-Pro-Display-BlackItalic.otf
diff --git a/fonts/SF-Pro-Display-Bold.otf b/fonts/SF-Pro-Display-Bold.otf
diff --git a/fonts/SF-Pro-Display-BoldItalic.otf b/fonts/SF-Pro-Display-BoldItalic.otf
diff --git a/fonts/SF-Pro-Display-Heavy.otf b/fonts/SF-Pro-Display-Heavy.otf
diff --git a/fonts/SF-Pro-Display-HeavyItalic.otf b/fonts/SF-Pro-Display-HeavyItalic.otf
diff --git a/fonts/SF-Pro-Display-Light.otf b/fonts/SF-Pro-Display-Light.otf
diff --git a/fonts/SF-Pro-Display-LightItalic.otf b/fonts/SF-Pro-Display-LightItalic.otf
diff --git a/fonts/SF-Pro-Display-Medium.otf b/fonts/SF-Pro-Display-Medium.otf
diff --git a/fonts/SF-Pro-Display-MediumItalic.otf b/fonts/SF-Pro-Display-MediumItalic.otf
diff --git a/fonts/SF-Pro-Display-Regular.otf b/fonts/SF-Pro-Display-Regular.otf
diff --git a/fonts/SF-Pro-Display-RegularItalic.otf b/fonts/SF-Pro-Display-RegularItalic.otf
diff --git a/fonts/SF-Pro-Display-Semibold.otf b/fonts/SF-Pro-Display-Semibold.otf
diff --git a/fonts/SF-Pro-Display-SemiboldItalic.otf b/fonts/SF-Pro-Display-SemiboldItalic.otf
diff --git a/fonts/SF-Pro-Display-Thin.otf b/fonts/SF-Pro-Display-Thin.otf
diff --git a/fonts/SF-Pro-Display-ThinItalic.otf b/fonts/SF-Pro-Display-ThinItalic.otf
diff --git a/fonts/SF-Pro-Display-Ultralight.otf b/fonts/SF-Pro-Display-Ultralight.otf
diff --git a/fonts/SF-Pro-Display-UltralightItalic.otf b/fonts/SF-Pro-Display-UltralightItalic.otf
diff --git a/index.html b/index.html
@@ -4,17 +4,16 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Glowave - Animated Neon Gradient Generator</title>
+    <link rel="stylesheet" href="fonts.css">
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
     <div class="content">
-        <h1>Glowave</h1>
-        <p class="subtitle">Engineering Neon Colors</p>
-        <button id="generateBtn">Generate New Gradient</button>
-        <button id="showCssBtn">Show CSS Code</button>
-        <textarea id="cssOutput" readonly></textarea>
-        <p id="version">Version: 1.0</p>
+        <h1 id="glowave" class="underline-animation">glowave</h1>
     </div>
+    <p id="version">1.0</p>
+    <button id="showCssBtn">css</button>
+
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,7 +1,7 @@
-document.getElementById('generateBtn').addEventListener('click', generateGradient);
+document.getElementById('glowave').addEventListener('click', generateGradient);
 document.getElementById('showCssBtn').addEventListener('click', toggleCssDisplay);
 
-let version = 1.0;
+let version = 1.2;
 
 function generateGradient() {
     const colors = generateCoolNeonColors();
@@ -16,8 +16,8 @@ function generateGradient() {
 
     document.getElementById('cssOutput').value = `background: ${gradient};\nbackground-size: 400% 400%;\nanimation: gradientAnimation 5s ease infinite;`;
 
-    version += 0.1;
-    document.getElementById('version').innerText = `Version: ${version.toFixed(1)}`;
+    version += 0.0;
+    document.getElementById('version').innerText = `v${version.toFixed(1)}`;
 }
 
 function generateCoolNeonColors() {

diff --git a/styles.css b/styles.css
@@ -1,78 +1,119 @@
 body, html {
     height: 100%;
     margin: 0;
-    font-family: 'Helvetica Neue', Arial, sans-serif;
-    background: #0d0d0d;
-    overflow: hidden;
+    font-family: 'Monument', Arial, sans-serif;
+    background: #0d0d0d00;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
 }
 
+
 .content {
+    background-color: #00000000;
     text-align: center;
     z-index: 10;
+    transition:all 0.3s ease-in-out;
+    width:100%;
     position: relative;
+    mix-blend-mode: difference !important;
+
 }
 
+
 h1 {
-    font-size: 3rem;
+    /*character spacing*/
+    letter-spacing: -5px;
+    max-width:100%;
+    font-size: 2em;
+    transition: all 0.3s ease-in-out; 
     color: #ffffff;
-    text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff;
-    margin-bottom: 10px;
-    /* To be contrary to the background */
-    mix-blend-mode: difference;
+    cursor: copy;
 }
 
-.subtitle {
-    font-size: 1.2rem;
-    color: #ff0055;
-    margin-bottom: 20px;
+.underline-animation::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 2px;
+    margin-bottom: 0em;
+    width: 100%;
+    background: #333;
+    transform: scaleX(0);
+    transform-origin: right;
+    transition: transform 0.3s ease-out;
 }
 
-#generateBtn, #showCssBtn {
+.underline-animation:hover::after {
+    transform: scaleX(1);
+    transform-origin: left;
+}
+h1:hover{
+    font-size:2.3em;
+    /* slightly rotate */
+    transition: all 2.0s ease-in-out;
+    transform: rotate(1deg);
+
+}
+h1:hover:active{
+    color: rgb(0, 0, 0) !important;
+    font-size:2.3em;
+    /* slightly rotate */
+    transform: rotate(359deg);
+
+}
+#showCssBtn {
     padding: 15px 30px;
     font-size: 18px;
     cursor: pointer;
-    background-color: #333;
-    border: 2px solid #ff0055;
-    color: #ff0055;
-    transition: background-color 0.3s, color 0.3s, border 0.3s;
-    text-shadow: 0 0 10px #ff0055;
+    background-color: #ffffff;
+    border: 2px solid #ffffff;
+    border-radius:80px;
+    color: #000000;
+    transition: all 0.3s;
     margin-bottom: 20px;
-    display: block;
-    margin: 10px auto;
-    width: 200px;
+    position: absolute;
+    bottom: 1em;
+    left: 1em;
+    margin-left:1em;
 }
+#showCssBtn:after{
+    content: "CSS";
 
-#generateBtn:hover, #showCssBtn:hover {
-    background-color: #ff0055;
+}
+#showCssBtn:hover {
+    background-color: #ffffff;
     color: #0d0d0d;
     border: 2px solid #0d0d0d;
+    content: "copy to clipboard";
 }
 
 textarea {
     width: 80%;
     height: 100px;
     background: rgba(34, 34, 34, 0.8);
-    color: #ff0055;
-    border: 2px solid #ff0055;
+    color: #ffffff;
+    border: 2px solid #3c3c3c;
     padding: 10px;
     font-size: 16px;
     resize: none;
-    box-shadow: 0 0 10px #ff0055;
     margin-bottom: 20px;
     display: none; /* Initially hidden */
     backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
     border-radius: 10px;
 }
 
 #version {
     font-size: 14px;
+    font-family:"SFProDisplayThin";
     color: #aaa;
     margin-top: 20px;
+    position:absolute;
+    bottom:10px;
+    right: 10px;
+    margin-right:10px;
 }
 
 .background {
@@ -83,7 +124,7 @@ textarea {
     height: 100%;
     display: flex;
     overflow: hidden;
-    z-index: 1;
+    z-index:-1;
 }
 
 .strip {
@@ -105,3 +146,18 @@ textarea {
     50% { background-position: 50% 100%; }
     100% { background-position: 50% 0%; }
 }
+/* HTML: <div class="loader"></div> */
+#loader {
+    z-index:999;
+    width: 50px;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: 
+      radial-gradient(farthest-side,#ffa516 94%,#0000) top/8px 8px no-repeat,
+      conic-gradient(#0000 30%,#ffa516);
+    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
+    animation: l13 1s infinite linear;
+  }
+  @keyframes l13{ 
+    100%{transform: rotate(1turn)}
+  }