Add files via upload

ra1nbow1 · Mar 2, 2021 · 7297ee4 · 7297ee4
1 parent e561f66
commit 7297ee4
Show file tree

Hide file tree

Showing 3 changed files with 188 additions and 81 deletions.
diff --git a/index.html b/index.html
@@ -1,9 +1,8 @@
 <!DOCTYPE html>
 <html lang="ru">
-<head><link rel="shortcut icon" type="image/x-icon" href="barcode.ico"><meta charset="UTF-8"></head>
-
-  <header id="header">
-    <link rel="stylesheet" type="text/css" href="styles.css">
+<head>
+  <link rel="shortcut icon" type="image/x-icon" href="/barcode.ico"><meta charset="UTF-8">
+  <link rel="stylesheet" type="text/css" href="styles.css">
     <link
       rel="stylesheet"
       href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
@@ -12,56 +11,42 @@
     />
     <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
 
-    <title>Romanoff | Gradients</title>
-  </header>
-
-  <body style="font-family: 'Montserrat', sans-serif;">
-
-<script type="text/javascript">
-
-
-if(document.addEventListener){
-  document.addEventListener("DOMContentLoaded", function(){
-    loaded();
-  });
-} else if(document.attachEvent){
-  document.attachEvent("onreadystatechange", function(){
-    loaded();
-  });
-}
-
-function loaded(){
-
-  setInterval(loop, 250);
-
-}
-
-var x = 0;
- var titleText = ["Romanoff | Gradients", "Romanoff | Gradient", "Romanoff | Gradien", "Romanoff | Gradie", "Romanoff | Gradi", "Romanoff | Grad", "Romanoff | Gra", "Romanoff | Gr", "Romanoff | G", "Romanoff |", "Romanoff", "Romanof", "Romano", "Roman", "Roma", "Rom", "Ro", "R", "Ro", "Rom", "Roma", "Roman", "Romano", "Romanof", "Romanoff", "Romanoff |", "Romanoff | G", "Romanoff | Gr", "Romanoff | Gra", "Romanoff | Grad", "Romanoff | Gradi", "Romanoff | Gradie", "Romanoff | Gradien", "Romanoff | Gradient", "Romanoff | Gradients"];
-//var titleText = ["Romanoff", "Romanof", "Romano", "Roman", "Roma", "Rom", "Ro", "R", "Ro", "Rom", "Roma", "Roman", "Romano", "Romanof","Romanoff",];
-
-// "Romanoff | Social media", "Romanoff | Social medi", "Romanoff | Social med", "Romanoff | Social me", "Romanoff | Social m", "Romanoff | Social", "Romanoff | Socia", "Romanoff | Soci", "Romanoff | Soc", "Romanoff | So", "Romanoff | S", "Romanoff |",  "Romanoff |", "Romanoff | S", "Romanoff | So", "Romanoff | Soc", "Romanoff | Soci", "Romanoff | Socia", "Romanoff | Social", "Romanoff | Social m", "Romanoff | Social me", "Romanoff | Social med", "Romanoff | Social medi", "Romanoff | Social media" 
-
-function loop(){
-
-  document.getElementsByTagName("title")[0].innerHTML = titleText[x++%titleText.length];
-
-}
+    <title>Romanov &mdash; Gradients</title>
+</head>
 
-    </script>
+  <body>
 
     <div class="container">
-      <h1>Romanoff | Gradients</h1>  
+      <h1>Romanov &mdash; Gradients</h1>  
       <h1 class="sub-text" style="font-family: 'Montserrat', sans-serif;">
         Текущий цвет:
-        <span id="random-color">#2d1dba</span> &
-        <span id="random-color-2">#f772ff</span>
+        <span id="random-color">#4281cb</span> &
+        <span id="random-color-2">#7a07e0</span>
       </h1>
-      <button class="btn sm ghost" onClick="randomColor()">Новый градиент</button>
-      <a onclick="copyColors()">
-        <i class="fas fa-copy ghost data-ctc"></i>
-      </a>
+      <div class="container_bottom"> 
+
+        <div class="row top">
+          <div class="text">Угол:</div>
+          <div class="quantity">
+            <input class="deg_value" type="number" width="10" value="90" max="359" min="1" autofocus>
+          </div>
+          <div class="deg">deg</div>
+        </div>
+
+        <div class="row">
+          <button class="btn sm ghost" onclick="randomColor()">Новый градиент</button>
+          <a onclick="copyColors()">
+            <i class="fas fa-copy ghost data-ctc"></i>
+          </a>
+        </div>
+
+        <ul class="history">
+
+        </ul>
+
+      </div> 
     </div>
   </body>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="script.js"></script>
 </html>
diff --git a/script.js b/script.js
@@ -1,28 +1,83 @@
-let generatedColor = "#2d1dba";
-let generatedColor2 = "#f772ff";
+let generatedColor = "#4281cb";
+let generatedColor2 = "#7a07e0";
 
 function randomColor() {
-  generatedColor = Math.floor(Math.random() * 16777215).toString(16);
-  generatedColor2 = Math.floor(Math.random() * 16777215).toString(16);
+
+  $("body").removeClass().removeAttr('style'); // fix bg changing after pressed item from history
 
-  if (
+  generatedColor = Math.floor(Math.random()*16777215).toString(16); // generating colors
+  generatedColor2 = Math.floor(Math.random()*16777215).toString(16);
+
+  // console.log(generatedColor.length, generatedColor2.length);
+
+  if (generatedColor.length <= 5 ) { // if hex1 < 5
+    // console.log('Заменяю', generatedColor);
+      generatedColor = generatedColor + ('1'.repeat(6-generatedColor.length)) // repeat function for completing a string of up to 6 characters
+    // console.log(' на', generatedColor);
+  }
+  if (generatedColor2.length <= 5 ) { // if hex2 < 5
+    // console.log('Заменяю', generatedColor2);
+      generatedColor2 = generatedColor2 + ('1'.repeat(6-generatedColor2.length))
+    // console.log(' на', generatedColor2);
+  }
+
+  if ( // contrast font color
     getContras(generatedColor) === "black" &&
     getContras(generatedColor2) === "black"
   )
     document.documentElement.style.setProperty(`--primary`, "black");
   else document.documentElement.style.setProperty(`--primary`, "white");
 
-  generatedColor = "#" + generatedColor;
+  generatedColor = "#" + generatedColor; // adding # symbol
   generatedColor2 = "#" + generatedColor2;
-  refactorText(generatedColor, generatedColor2);
+  refactorText(generatedColor, generatedColor2); // printing colors on the page
+
+  document.documentElement.style.setProperty(`--random-color`, generatedColor); // setting vars in css
+  document.documentElement.style.setProperty(`--random-color-2`, generatedColor2);
+  document.documentElement.style.setProperty(`--degree`, $('.deg_value').val() + 'deg');
+
+  var el = document.createElement("textarea");
+  var deg = $('.deg_value').val()
+  el.value = `background-image: linear-gradient(${deg}deg, ${generatedColor}, ${generatedColor2});` // Set value (string to be copied)
+  // console.log(history)
 
-  document.documentElement.style.setProperty(`--random-color`, generatedColor);
-  document.documentElement.style.setProperty(
-    `--random-color-2`,
-    generatedColor2
-  );
+  count = $('li').length // max history length
+  if (count <= 9) {
+    $('.history').append(`<li><a>` + ` <i style="background-image: linear-gradient(${-deg}deg, ${generatedColor}, ${generatedColor2});"></i> ` + el.value + '</a></li>')
+  } else {
+    $('li:first-child').remove();
+    $('.history').append(`<li>` + ` <i style="background-image: linear-gradient(${-deg}deg, ${generatedColor}, ${generatedColor2});"></i> ` + el.value + '</li>')
+  }
+
+  $('li').click(function(){ // interacting with history
+    bg = $(this).find('i').css('background-image')
+
+    $('body').css('background-image', bg) // setting background
+
+    li_el = $(this)
+    val = li_el.text()
+    // console.log(val);
+    if (val.length == 61) { // if degree value.length == 2 digits
+      el_deg = val.slice(36, 38) // degree value
+      el_clr1 = val.slice(43,50) // color1 value
+      el_clr2 = val.slice(52, 59) // color2 value
+      // console.log('DEG:' + el_deg, ' CLR1:', el_clr1 + ' CLR2:', el_clr2);
+    } else if (val.length == 62) { // if degree value.length == 3 digits
+      el_deg = val.slice(36, 39)
+      el_clr1 = val.slice(44,51)
+      el_clr2 = val.slice(53, 60)
+      // console.log('DEG:' + el_deg, ' CLR1:', el_clr1 + ' CLR2:', el_clr2);
+    }
+
+    generatedColor = el_clr1
+    generatedColor2 = el_clr2
+    refactorText(generatedColor, generatedColor2) // printing color codes on the page
+    $('.deg_value').val(el_deg)
+
+  })
 }
 
+
 function refactorText(text, text2) {
   let element = document.querySelector("#random-color");
   element.textContent = text;
@@ -32,12 +87,10 @@ function refactorText(text, text2) {
 
 function copyColors() {
   var el = document.createElement("textarea");
-  // Set value (string to be copied)
-  el.value = `background-image: linear-gradient(to top right, ${generatedColor},
-    ${generatedColor2});`;
+  var deg = $('.deg_value').val()
+  el.value = `background-image: linear-gradient(${deg}deg, ${generatedColor}, ${generatedColor2});`; // Set value (string to be copied)
 
-  // Set non-editable to avoid focus and move outside of view
-  el.setAttribute("readonly", "");
+  el.setAttribute("readonly", ""); // Set non-editable to avoid focus and move outside of view
   el.style = { position: "absolute", left: "-9999px" };
   document.body.appendChild(el);
   el.select();
@@ -54,3 +107,4 @@ function copyColors() {
 function getContras(hexcolor) {
   return parseInt(hexcolor, 16) > 0xffffff / 2 ? "black" : "white";
 }
+
diff --git a/styles.css b/styles.css
@@ -1,27 +1,23 @@
 @import "https://fonts.googleapis.com/css?family=Quicksand";
 :root {
   --primary: white;
-  --random-color: #2d1dba;
-  --random-color-2: #f772ff;
+  --random-color: #4281cb;
+  --random-color-2: #7a07e0;
+  --degree: 90deg;
 }
 
 html {
   height: 100%;
 }
 
 body {
-  top: 50%;
   text-align: center;
   align-items: center;
-  font-family: Quicksand;
-  background-color: #f772ff;
-  background-image: linear-gradient(
-    to top right,
-    var(--random-color-2),
-    var(--random-color)
-  );
+  font-family: 'Quicksand';
+  background-color: #0ddbc0;
+  background-image: linear-gradient(var(--degree),var(--random-color-2),var(--random-color));
   color: var(--primary);
-  background-repeat: no-repeat;
+  /* background-repeat: no-repeat; */
 }
 
 h1:first-child {
@@ -52,12 +48,6 @@ h1:first-child {
   color: var(--primary);
   border: 1px solid var(--primary);
   transition: 0.2s ease;
-
-  &:hover {
-    background-color: var(--primary);
-    color: var(--random-color);
-    transition: 0.2s ease;
-  }
 }
 
 .fa-copy {
@@ -74,3 +64,81 @@ h1:first-child {
 #random-color-2 {
   text-decoration: underline;
 }
+
+.container_bottom {
+  display: flex;
+  flex-direction: column;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.text {
+  font-weight: bold;
+}
+
+.top input {
+  margin-left: 20px;
+  margin-right: 5px;
+  width: 40px;
+  background: rgba(100%,100%,100%,0.1);
+  border: none;
+  padding: 5px;
+  color: #fff;
+  border-radius: 7px;
+  font-weight: bold;
+}
+
+input:focus {
+  border: none
+}
+
+li {
+  list-style-type: none;
+  font-weight: bold;
+  letter-spacing: 1.5px;
+}
+
+li:hover {
+  background: rgba(0,0,0,0.2);
+  transition: .2s;
+  padding: auto 7px;
+  /* transform: scale(1.045); */
+  border-radius: 10px;
+}
+
+li:not(:hover) {
+  transition: .2s;
+}
+
+ul {
+  line-height: 3rem;
+  text-align: center;
+  display: flex;
+  flex-direction: column-reverse;
+  margin: 0 auto;
+  text-align: left;
+}
+
+.history i {
+  border: 1px solid #fff;
+  border-radius: 5px;
+  padding: 10px 35px;
+  margin-right: 10px;
+}
+
+.history i:not(:hover) {
+  transition: .2s;
+}
+
+.history i:hover {
+  transition: .2s;
+}
+
+.container {
+  font-family: 'Montserrat', sans-serif;
+}