Skip to content

Commit

Permalink
primera versión funcional del generador de gradientes
Browse files Browse the repository at this point in the history
  • Loading branch information
@configuroweb
configuroweb committed Apr 10, 2020
0 parents commit 4e4eada
Show file tree
Hide file tree
Showing 6 changed files with 1,098 additions and 0 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"git.ignoreLimitWarning": true
}
221 changes: 221 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,221 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Generador de BackGround con Gradientes</title>
</head>
<body>
<h1>Generador de BackGround con Gradientes</h1>

<section class="color-picker__section">
<div class="info__container">
<span class="info__text">Escoge los Colores</span>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="415.262px" height="415.261px" class="arrow right-drawn-arrow" viewBox="0 0 415.262 415.261" style="enable-background:new 0 0 415.262 415.261; fill: aliceblue"
xml:space="preserve">
<g>
<path d="M414.937,374.984c-7.956-24.479-20.196-47.736-30.601-70.992c-1.224-3.06-6.12-3.06-7.956-1.224
c-10.403,11.016-22.031,22.032-28.764,35.496h-0.612c-74.664,5.508-146.88-58.141-198.288-104.652
c-59.364-53.244-113.22-118.116-134.64-195.84c-1.224-9.792-2.448-20.196-2.448-30.6c0-4.896-6.732-4.896-7.344,0
c0,1.836,0,3.672,0,5.508C1.836,12.68,0,14.516,0,17.576c0.612,6.732,2.448,13.464,3.672,20.196
C8.568,203.624,173.808,363.356,335.376,373.76c-5.508,9.792-10.403,20.195-16.523,29.988c-3.061,4.283,1.836,8.567,6.12,7.955
c30.6-4.283,58.14-18.972,86.292-29.987C413.712,381.104,416.16,378.656,414.937,374.984z M332.928,399.464
c3.673-7.956,6.12-15.912,10.404-23.868c1.225-3.061-0.612-5.508-2.448-6.12c0-1.836-1.224-3.061-3.06-3.672
c-146.268-24.48-264.996-124.236-309.06-259.489c28.764,53.244,72.828,99.756,116.28,138.924
c31.824,28.765,65.484,54.468,102.204,75.888c28.764,16.524,64.872,31.824,97.92,21.421l0,0c-1.836,4.896,5.508,7.344,7.956,3.672
c7.956-10.404,15.912-20.196,24.48-29.376c8.567,18.972,17.748,37.943,24.479,57.527
C379.44,382.94,356.796,393.956,332.928,399.464z"/>
</g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
</svg>
</div>

<div class="color-pickers__options">
<!-- We wrap the inputs in a container so
we can put opacity to 0 for hiding
default browser color input style -->
<label class="color-picker__container color-picker__container1">
<input type="color" class="color-picker" name="color1" value="#dd06a0">
</label>
<label class="color-picker__container color-picker__container2">
<input type="color" class="color-picker" name="color2" value="#19a6c3">
</label>
</div>
</section>

<section class="angle-picker__section">

<div class="angle-picker__options">
<div class="angle-picker__circle js-angle-picker">
<div class="angle-picker__rectangle">
<span class="angle-picker__dot"></span>
</div>
</div>
<div class="input-angle__container js-angle-picker">
<input type="text" class="angle-picker__input js-angle" value="90">
<span class="angle-degree">°</span>
</div>
</div>

<div class="info__container info__container--reverse">
<span class="info__text">Cambia el Ángulo</span>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="415.262px" height="415.261px" class="arrow left-drawn-arrow" viewBox="0 0 415.262 415.261" style="enable-background:new 0 0 415.262 415.261; fill: aliceblue"
xml:space="preserve">
<g>
<path d="M414.937,374.984c-7.956-24.479-20.196-47.736-30.601-70.992c-1.224-3.06-6.12-3.06-7.956-1.224
c-10.403,11.016-22.031,22.032-28.764,35.496h-0.612c-74.664,5.508-146.88-58.141-198.288-104.652
c-59.364-53.244-113.22-118.116-134.64-195.84c-1.224-9.792-2.448-20.196-2.448-30.6c0-4.896-6.732-4.896-7.344,0
c0,1.836,0,3.672,0,5.508C1.836,12.68,0,14.516,0,17.576c0.612,6.732,2.448,13.464,3.672,20.196
C8.568,203.624,173.808,363.356,335.376,373.76c-5.508,9.792-10.403,20.195-16.523,29.988c-3.061,4.283,1.836,8.567,6.12,7.955
c30.6-4.283,58.14-18.972,86.292-29.987C413.712,381.104,416.16,378.656,414.937,374.984z M332.928,399.464
c3.673-7.956,6.12-15.912,10.404-23.868c1.225-3.061-0.612-5.508-2.448-6.12c0-1.836-1.224-3.061-3.06-3.672
c-146.268-24.48-264.996-124.236-309.06-259.489c28.764,53.244,72.828,99.756,116.28,138.924
c31.824,28.765,65.484,54.468,102.204,75.888c28.764,16.524,64.872,31.824,97.92,21.421l0,0c-1.836,4.896,5.508,7.344,7.956,3.672
c7.956-10.404,15.912-20.196,24.48-29.376c8.567,18.972,17.748,37.943,24.479,57.527
C379.44,382.94,356.796,393.956,332.928,399.464z"/>
</g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
</svg>
</div>
</section>

<h2>Acá copias las CSS</h2>

<section class="code-editor">
<div class="code-editor__column">
<div class="code-editor__column-tabs"></div>
<div class="code-editor__column-numbers">
<span class="code-editor__column-number">1</span>
<span class="code-editor__column-number">2</span>
<span class="code-editor__column-number">3</span>
<span class="code-editor__column-number">4</span>
<span class="code-editor__column-number">5</span>
<span class="code-editor__column-number">6</span>
</div>
</div>
<div class="code-editor__block">
<div class="code-editor__tabs">
<div class="code-editor__tab css is-active">CSS</div>
<div class="code-editor__tab rgb">rgb</div>
<div class="code-editor__compat"></div>
</div>
<div class="code-editor__input">
<code class="code-editor__input-code" id="code">

<div class="gradient-code js-code-active">
<span class="blue">background</span><span>: -webkit-</span><span class="js-gradient-code">linear-gradient(90deg, #dd06a0, #19a6c3);</span><br>
<span class="blue">background</span><span>: -moz-</span><span class="js-gradient-code">linear-gradient(90deg, #dd06a0, #19a6c3);</span><br>
<span class="blue">background</span><span>: -ms-</span><span class="js-gradient-code">linear-gradient(90deg, #dd06a0, #19a6c3);</span><br>
<span class="blue">background</span><span>: -o-</span><span class="js-gradient-code">linear-gradient(90deg, #dd06a0, #19a6c3);</span><br>
<span class="blue">background</span><span>:&nbsp</span><span class="js-gradient-code">linear-gradient(90deg, #dd06a0, #19a6c3);</span><br>
</div>

<div class="rgb-code">
<span class="blue">background</span><span>: </span><span class="js-rgb-code">rgb(221, 6, 160);</span><br>
<span class="blue">background</span><span>: </span><span class="js-rgb-code">rgb(25, 166, 195);</span><br>
</div>

</code>
</div>
</div>
<section class="code-options">
<button data-clipboard-target="#code" class="code-option__button js-copy">
<div class="code-option__button-bg js-background-copy" style="background: linear-gradient(to right, #dd06a0, #19a6c3);"></div>
<div class="js-copy">
<svg class="code-option__button-svg" width="13" height="17" xmlns="http://www.w3.org/2000/svg">
<g stroke="#ffffff" stroke-width="2" fill="none" fill-rule="evenodd">
<path d="M5 5h7v11H5z"></path>
<path d="M1 15V1h10"></path>
</g>
</svg>
<span class="code-options__button-text">Copiar al Portapapeles</span>
</div>
</button>
</section>
</section>

<section class="random-gradient__section">
<div class="info__container">
<span class="info__text">Generar Gradiente Aleatorio</span>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="415.262px" height="415.261px" class="arrow up-arrow" viewBox="0 0 415.262 415.261" style="enable-background:new 0 0 415.262 415.261; fill: aliceblue"
xml:space="preserve">
<g>
<path d="M414.937,374.984c-7.956-24.479-20.196-47.736-30.601-70.992c-1.224-3.06-6.12-3.06-7.956-1.224
c-10.403,11.016-22.031,22.032-28.764,35.496h-0.612c-74.664,5.508-146.88-58.141-198.288-104.652
c-59.364-53.244-113.22-118.116-134.64-195.84c-1.224-9.792-2.448-20.196-2.448-30.6c0-4.896-6.732-4.896-7.344,0
c0,1.836,0,3.672,0,5.508C1.836,12.68,0,14.516,0,17.576c0.612,6.732,2.448,13.464,3.672,20.196
C8.568,203.624,173.808,363.356,335.376,373.76c-5.508,9.792-10.403,20.195-16.523,29.988c-3.061,4.283,1.836,8.567,6.12,7.955
c30.6-4.283,58.14-18.972,86.292-29.987C413.712,381.104,416.16,378.656,414.937,374.984z M332.928,399.464
c3.673-7.956,6.12-15.912,10.404-23.868c1.225-3.061-0.612-5.508-2.448-6.12c0-1.836-1.224-3.061-3.06-3.672
c-146.268-24.48-264.996-124.236-309.06-259.489c28.764,53.244,72.828,99.756,116.28,138.924
c31.824,28.765,65.484,54.468,102.204,75.888c28.764,16.524,64.872,31.824,97.92,21.421l0,0c-1.836,4.896,5.508,7.344,7.956,3.672
c7.956-10.404,15.912-20.196,24.48-29.376c8.567,18.972,17.748,37.943,24.479,57.527
C379.44,382.94,356.796,393.956,332.928,399.464z"/>
</g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
</svg>
</div>
<div class="svg-random">
<svg class="circle-arrow" viewBox="-16 -18 533.33331 533" xmlns="http://www.w3.org/2000/svg" fill="aliceblue"><path d="m248.429688 25.082031c39.289062 0 78.640624 11.152344 113.800781 32.253907 22.300781 13.417968 42.339843 30.28125 59.363281 49.972656l-58.738281-1.9375c-6.898438-.230469-12.675781 5.179687-12.902344 12.082031-.226563 6.898437 5.179687 12.679687 12.082031 12.902344l81.269532 2.683593c4.667968 1.921876 10.035156.847657 13.605468-2.726562 3.566406-3.574219 4.632813-8.941406 2.703125-13.609375l-2.675781-81.25c-.15625-6.902344-5.878906-12.371094-12.78125-12.21875-6.898438.15625-12.375 5.878906-12.21875 12.777344 0 .09375 0 .179687.007812.269531l1.546876 46.875c-17.195313-18.375-36.847657-34.285156-58.398438-47.265625-39.042969-23.425781-82.84375-35.8085938-126.664062-35.8085938-70 0-134.539063 28.8632808-181.703126 81.2695308-41.78125 46.425782-66.726562 108.914063-66.726562 167.160157 0 6.902343 5.59375 12.5 12.5 12.5s12.5-5.597657 12.5-12.5c0-52.238281 22.542969-108.476563 60.308594-150.433594 42.367187-47.066406 100.292968-72.996094 163.121094-72.996094zm0 0"/><path d="m487.5 236.011719c-6.90625 0-12.5 5.59375-12.5 12.5 0 52.234375-22.542969 108.476562-60.308594 150.4375-42.367187 47.066406-100.292968 72.988281-163.121094 72.988281-39.289062 0-78.640624-11.144531-113.800781-32.246094-22.300781-13.421875-42.339843-30.285156-59.363281-49.972656l58.738281 1.9375c6.898438.222656 12.675781-5.1875 12.902344-12.085938.226563-6.898437-5.179687-12.675781-12.082031-12.90625l-81.269532-2.679687c-4.667968-1.921875-10.035156-.84375-13.605468 2.726563-3.566406 3.574218-4.632813 8.9375-2.703125 13.605468l2.675781 81.25c.15625 6.90625 5.878906 12.378906 12.78125 12.222656 6.898438-.152343 12.375-5.875 12.21875-12.777343 0-.089844 0-.175781-.007812-.269531l-1.546876-46.875c17.195313 18.378906 36.847657 34.28125 58.398438 47.269531 39.042969 23.429687 82.84375 35.808593 126.664062 35.808593 70 0 134.539063-28.859374 181.703126-81.265624 41.78125-46.429688 66.726562-108.917969 66.726562-167.167969 0-6.90625-5.59375-12.5-12.5-12.5zm0 0"/></svg>
</div>
</section>

<script type="text/javascript" src="script.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions recycle.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
50 changes: 50 additions & 0 deletions right-drawn-arrow.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 4e4eada

Please sign in to comment.