Add files via upload

ra1nbow1 · Aug 27, 2020 · c6c0fb1 · c6c0fb1
1 parent 0b72461
commit c6c0fb1
Show file tree

Hide file tree

Showing 4 changed files with 199 additions and 0 deletions.
diff --git a/barcode.ico b/barcode.ico
diff --git a/index.html b/index.html
@@ -0,0 +1,67 @@
+<!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">
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+      integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
+      crossorigin="anonymous"
+    />
+    <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];
+
+}
+
+    </script>
+
+    <div class="container">
+      <h1>Romanoff | 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>
+      </h1>
+      <button class="btn sm ghost" onClick="randomColor()">Новый градиент</button>
+      <a onclick="copyColors()">
+        <i class="fas fa-copy ghost data-ctc"></i>
+      </a>
+    </div>
+  </body>
+  <script src="script.js"></script>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,56 @@
+let generatedColor = "#2d1dba";
+let generatedColor2 = "#f772ff";
+
+function randomColor() {
+  generatedColor = Math.floor(Math.random() * 16777215).toString(16);
+  generatedColor2 = Math.floor(Math.random() * 16777215).toString(16);
+
+  if (
+    getContras(generatedColor) === "black" &&
+    getContras(generatedColor2) === "black"
+  )
+    document.documentElement.style.setProperty(`--primary`, "black");
+  else document.documentElement.style.setProperty(`--primary`, "white");
+
+  generatedColor = "#" + generatedColor;
+  generatedColor2 = "#" + generatedColor2;
+  refactorText(generatedColor, generatedColor2);
+
+  document.documentElement.style.setProperty(`--random-color`, generatedColor);
+  document.documentElement.style.setProperty(
+    `--random-color-2`,
+    generatedColor2
+  );
+}
+
+function refactorText(text, text2) {
+  let element = document.querySelector("#random-color");
+  element.textContent = text;
+  let element2 = document.querySelector("#random-color-2");
+  element2.textContent = 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});`;
+
+  // Set non-editable to avoid focus and move outside of view
+  el.setAttribute("readonly", "");
+  el.style = { position: "absolute", left: "-9999px" };
+  document.body.appendChild(el);
+  el.select();
+  document.execCommand("copy");
+  document.body.removeChild(el);
+  alert("Color was successfully copied!");
+}
+
+// It takes the hex value and compares it to the value halfway between
+// pure black and pure white. If the hex value is less than half, meaning it is
+// on the darker side of the spectrum, it returns white as the text color. If
+// the result is greater than half, it’s on the lighter side of the spectrum and returns black as the text value.
+
+function getContras(hexcolor) {
+  return parseInt(hexcolor, 16) > 0xffffff / 2 ? "black" : "white";
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,76 @@
+@import "https://fonts.googleapis.com/css?family=Quicksand";
+:root {
+  --primary: white;
+  --random-color: #2d1dba;
+  --random-color-2: #f772ff;
+}
+
+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)
+  );
+  color: var(--primary);
+  background-repeat: no-repeat;
+}
+
+h1:first-child {
+  margin: 5em 0 1em 0;
+}
+
+.sub-text {
+  font-size: 1.2em;
+  margin: 0.5em 0 1em 0;
+}
+
+.btn {
+  display: inline-block;
+  border-radius: 2px;
+  border: none;
+  height: 45px;
+  padding: 0;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.sm {
+  width: 20em;
+}
+
+.ghost {
+  background-color: transparent;
+  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 {
+  margin: 0 0.5em;
+  padding: 0.75em;
+  line-height: 20px;
+  border-radius: 0.55em;
+}
+
+#random-color {
+  text-decoration: underline;
+}
+
+#random-color-2 {
+  text-decoration: underline;
+}