diff --git a/dist/jquery.lcnCircleRangeSelect.css b/dist/jquery.lcnCircleRangeSelect.css new file mode 100644 index 0000000..51de481 --- /dev/null +++ b/dist/jquery.lcnCircleRangeSelect.css @@ -0,0 +1,56 @@ +input.circle-range-select { + display: none; +} + +.circle-range-select-wrapper { + position: relative; + max-width: 100%; + width: 10em; + height: 10em; + margin:1.4rem 0.65em 0.65em 0.65em; + padding: 0.65em !important; + border-radius: 50%; + border: 0.4em solid rgba(204, 204, 204, 0.326); + cursor: default; +} + +.circle-range-select-wrapper .handle { + position: absolute; + z-index: 2; + width: 0; + height: 0; + border: 0; + padding: 0; + cursor: pointer; +} + +.circle-range-select-wrapper .handle:before { + content: ''; + position: absolute; + z-index: 3; + top: -0.65em; + left: -0.65em; + height: 1.3em; + width: 1.3em; + border-radius: 50%; + background: rgba(218, 217, 217, 0.751) +} + +.circle-range-select-wrapper .selected-range { + position: absolute; + z-index: 1; + color: #dbdbdb94; +} + +.circle-range-select-wrapper .values { + color: rgba(255, 255, 255, 0.733); + pointer-events: none; + position: absolute; + z-index: 2; + top: 50%; + left: 0; + right: 0; + margin-top: -0.5em; + font-size: 1.1rem; + text-align: center; +} \ No newline at end of file diff --git a/dist/jquery.lcnCircleRangeSelect.js b/dist/jquery.lcnCircleRangeSelect.js new file mode 100644 index 0000000..4291452 --- /dev/null +++ b/dist/jquery.lcnCircleRangeSelect.js @@ -0,0 +1,273 @@ +(function (root, factory) { + 'use strict'; + + var $ = root.jQuery; + + if (typeof define === 'function' && define.amd) { + // AMD + if ($) { + define([], factory.bind(null, $)); + } else { + define(['jquery'], factory); + } + } else if (typeof exports === 'object') { + // Node, CommonJS-like + if ($) { + module.exports = factory($); + } else { + module.exports = factory(require('jquery')); + } + } else { + // Browser globals (root is window) + if ($) { + factory($); // no global needed as we store it as a jQuery plugin on jQuery.fn + } else { + throw 'Missing required jQuery dependency'; + } + } +}(this, function ($) { + var isDragging = false; + var $currentHandle = null; + + function drawCircle($container, degreeStart, degreeEnd) { + var + $canvas = $container.find('canvas'), + canvas = $canvas[0]; + + var outerWidth = $container.outerWidth(); + var innerWidth = $container.innerWidth(); + var borderWidth = outerWidth - innerWidth; + $canvas.css('left', borderWidth * -1); + $canvas.css('top', borderWidth * -1); + + + var radius = (outerWidth - borderWidth / 2) / 2; + canvas.width = outerWidth + borderWidth; + canvas.height = canvas.width; + var context = canvas.getContext('2d'); + context.clearRect(0, 0, canvas.width, canvas.height); + context.beginPath(); + + + + context.arc(canvas.width / 2, canvas.width / 2, radius, degreesToRadians(degreeStart) - Math.PI / 2, degreesToRadians(degreeEnd) - Math.PI / 2, false); + context.lineWidth = borderWidth / 2; + context.strokeStyle = $canvas.css('color'); + context.stroke(); + } + + function degreesToRadians(degrees) { + return degrees * (Math.PI / 180); + } + + function updateWidget($container) { + var $input = $container.find('input'); + var isSingleValue = _isSingleValue($input); + var $handles = $container.find('.handle'); + var $handle1 = $container.find('.handle1'); + if (!isSingleValue) { + var $handle2 = $container.find('.handle2'); + } + + var outerWidth = $container.outerWidth(); + var innerWidth = $container.innerWidth(); + var borderWidth = (outerWidth - innerWidth) / 2; + + var radius = (outerWidth - borderWidth) / 2; + + + var minValue = parseFloat($input.attr('data-min')) || 0; + var maxValue = parseFloat($input.attr('data-max')) || 360; + var unit = $input.attr('data-unit') === undefined ? '°' : $input.attr('data-unit'); + var steps = maxValue - minValue; + var stepSizeInDegrees = 360 / steps; + + $handles.each(function (idx, handle) { + var $handle = $(handle); + var value = parseFloat($handle.attr('data-value')); + var deg = (value - minValue) * stepSizeInDegrees; + + var X = Math.round(radius + radius * Math.sin(deg * Math.PI / 180)); + var Y = Math.round(radius + radius * -Math.cos(deg * Math.PI / 180)); + $handle.css({ + left: X, + top: Y + }); + $container.find($handle.attr('data-value-target')).html($handle.attr('data-value') + unit); + }); + + var extraChangeEventParameters = [{ + source: 'lcnCircleRangeSelect' + }]; + + var value1 = $handle1.attr('data-value'); + if (isSingleValue) { + $input.val(value1).trigger('change', extraChangeEventParameters); + } else { + var value2 = $handle2.attr('data-value'); + drawCircle($container, (value1 - minValue) * stepSizeInDegrees, (value2 - minValue) * stepSizeInDegrees); + $input.val(value1 + ';' + value2).trigger('change', extraChangeEventParameters); + } + } + + function init($input) { + var isSingleValue = _isSingleValue($input); + if (isSingleValue) { + var value1 = parseFloat($input.val() || 0); + } else { + var values = $input.val() || '0;0'; + values = values.split(';'); + var value1 = parseFloat(values[0]); + var value2 = parseFloat(values[1]); + } + + + var $container = $('
'); + + var backgroundImage = $input.attr('data-bg-image'); + if (backgroundImage) { + $container.css({ + 'background-image': 'url("' + backgroundImage + '")', + 'background-size': 'contain' + }); + } + + $input.wrap($container); + $container = $input.parent(); + + $container.append('
'); + if (isSingleValue) { + $container.append('
'); + } else { + $container.append('
'); + $container.append('
-
'); + $container.append(''); + } + + + updateWidget($container); + + $container.on('mousedown touchstart', '.handle', function (e) { + isDragging = true; + e.preventDefault(); + $currentHandle = $(e.target); + $(document).one('mouseup touchend', function () { + isDragging = false; + $currentHandle = null; + }); + }); + + $input.on('change', function (e, options) { + if (options && typeof options === 'object' && options.source === 'lcnCircleRangeSelect') { + return; + } + + var $input = $container.find('input'); + var isSingleValue = _isSingleValue($input); + var $handle1 = $container.find('.handle1'); + + if (isSingleValue) { + $handle1.attr('data-value', parseFloat($input.val() || 0)); + } else { + var $handle2 = $container.find('.handle2'); + var values = $input.val() || '0;0'; + values = values.split(';'); + $handle1.attr('data-value', parseFloat(values[0])); + $handle2.attr('data-value', parseFloat(values[1])); + } + + updateWidget($container); + }); + + $(window).on('resize', updateWidget.bind(null, $container)); + } + + + function _isSingleValue($input) { + return $input.attr('data-single-value') !== undefined && $input.attr('data-single-value') !== 'false'; + } + + $(document).on('mousemove touchmove', function (e) { + if (isDragging) { + + var $draggingTarget = $(e.target); + + $draggingWrapper = $draggingTarget.closest('.circle-range-select-wrapper'); + if ($draggingWrapper.length === 0) { + return; + } + + if ($currentHandle.hasClass('handle1')) { + $draggingHandle = $draggingWrapper.find('.handle1'); + } else if ($currentHandle.hasClass('handle2')) { + $draggingHandle = $draggingWrapper.find('.handle2'); + } + + if ($draggingHandle[0] !== $currentHandle[0]) { + return; + } + + + var $container = $currentHandle.closest('.circle-range-select-wrapper'); + var radius = $container.width() / 2; + + if (!e.offsetX && e.originalEvent.touches) { + // touch events + var targetOffset = $draggingTarget.offset(); + e.offsetX = e.originalEvent.touches[0].pageX - targetOffset.left; + e.offsetY = e.originalEvent.touches[0].pageY - targetOffset.top; + } else if (typeof e.offsetX === "undefined" || typeof e.offsetY === "undefined") { + // firefox compatibility + var targetOffset = $draggingTarget.offset(); + e.offsetX = e.pageX - targetOffset.left; + e.offsetY = e.pageY - targetOffset.top; + } + + if ($draggingTarget.hasClass('handle')) { + var mPos = { + x: e.target.offsetLeft + e.offsetX, + y: e.target.offsetTop + e.offsetY + }; + } else { + var mPos = { + x: e.offsetX, + y: e.offsetY + }; + } + + var atan = Math.atan2(mPos.x - radius, mPos.y - radius); + var deg = -atan / (Math.PI / 180) + 180; // final (0-360 positive) degrees from mouse position + + var $input = $container.find('input'); + var minValue = parseFloat($input.attr('data-min')) || 0; + var maxValue = parseFloat($input.attr('data-max')) || 360; + var steps = maxValue - minValue; + var stepSize = 360 / steps; + + var value = minValue + Math.round(deg / stepSize); + //if (value == maxValue) { + // value = minValue; + //} + + + $currentHandle.attr('data-value', value); + + updateWidget($container); + } + }); + + + $.fn.lcnCircleRangeSelect = function () { + return this.each(function () { + init($(this)); + }); + + }; + + $(function () { + $('input.circle-range-select[data-auto-init]').lcnCircleRangeSelect(); + }); + + return $.fn.lcnCircleRangeSelect; + +})); \ No newline at end of file diff --git a/index.html b/index.html index 68dda27..e80ce8d 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,10 @@ 🌈Monogradients🎉 + + + + @@ -20,28 +24,52 @@ + +
+
+ + +
+
+ + + +
+ +
+ +
+
+
+
+ color copied!
-

Explore a constantly updated library of gradients,

+

Beautiful hand-crafted gradients,

curated by the community.

- - + + + Make Your Own + + + View on Github +
-

Join 46 others and be notified when Pomegradient goes live! - No spam - promise!

@@ -58,6 +86,9 @@ + + + diff --git a/main.js b/main.js index e776da6..987f737 100644 --- a/main.js +++ b/main.js @@ -19,4 +19,64 @@ clipboard.on('error', function (e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); -}); \ No newline at end of file +}); + + +// code for making own gradient color + +let generateGradient = () => { + let gradientCardEdit = document.getElementById('gradient_card_edit'); + let colorPosition = document.getElementById('rangeSlider').value; + // console.log(colorDeg); + let AllColorArray = []; + + let color = document.querySelectorAll('.colorinput'); + color.forEach(element => { + AllColorArray.push(element.value); + }) + + let gradientColor = `linear-gradient(${colorPosition}deg,${AllColorArray.toString()})`; + + + gradientCardEdit.style.background = gradientColor; + let copyToClipboard = document.getElementById('color_maker_copy_btn'); + copyToClipboard.setAttribute("data-clipboard-text", `background:${gradientColor};`) +} + +generateGradient(); + + +// code for add more input type="color" + +let addInputColor = document.getElementById('add_input_btn'); +let c = 3; +let addColorInputer = () => { + + if (c <= 5) { + let colorInputs = document.getElementById('color_inputs'); + let colorPicker = document.createElement('input'); + colorPicker.classList.add("color", "colorinput"); + colorPicker.setAttribute("type", "color"); + colorPicker.setAttribute("value", "#1f1f1f"); + colorPicker.setAttribute("oninput", "generateGradient()"); + colorInputs.append(colorPicker); + generateGradient(); + c++; + } else { + alert("only 5 colors allowed!") + } +} + +// code for open and close the gradient maker div + +let openBtn = document.getElementById('make_gradient_btn'); +let closeBtn = document.getElementById('close'); +let colorMakerDropDown = document.querySelector('.color_maker'); + +openBtn.onclick = () => { + colorMakerDropDown.classList.remove("color_maker_close"); +} + +closeBtn.onclick= () => { + colorMakerDropDown.classList.add("color_maker_close"); +} \ No newline at end of file diff --git a/style.css b/style.css index a0639c4..6f9de6a 100644 --- a/style.css +++ b/style.css @@ -6,31 +6,28 @@ text-decoration: none; } -::-webkit-scrollbar -{ +::-webkit-scrollbar { width: 10px; } -::-webkit-scrollbar-track -{ +::-webkit-scrollbar-track { background: #f1f1f1; } -::-webkit-scrollbar-thumb -{ +::-webkit-scrollbar-thumb { background: linear-gradient(to top, #6c28d9, #db2778); } -span#notify_toast -{ +/* code for toast msg */ +span#notify_toast { position: fixed; top: 90%; - right:5%; + right: 5%; background: rgba(0, 0, 0, .8); backdrop-filter: blur(110px); padding: 10px 20px; border-radius: 5px; - color:#fff; + color: #fff; font-family: sans-serif; font-weight: 700; font-size: 1.1rem; @@ -38,16 +35,94 @@ span#notify_toast transition: all .5s ease; } -.hide_toast -{ +.hide_toast { opacity: 0; } -.show_toast -{ +.show_toast { opacity: 1; } +/* code for create gradient dropdoan */ +.color_maker { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 1; + transition: all .5s; +} + +.color_maker_close { + top: -50%; +} + +#gradient_card_edit { + display: flex; + align-items: flex-start; + justify-content: center; +} + +#gradient_card_edit input[type="text"] { + color: whitesmoke; + margin-top: 3em; +} + +#gradient_card_edit #close { + position: absolute; + top: 5%; + right: 5%; + display: flex; + align-items: center; + justify-content: center; + background: transparent; + color: #fff; + font-size: 20px; + transition: all .5s; +} + +#gradient_card_edit #close:hover { + scale: 1.5; + background: rgba(255, 255, 255, .1); +} + + +#color_inputs button { + font-size: 1.4rem; + color: #000; + cursor: pointer; + background: #fff; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + padding: 5px; +} + +#color_inputs button ion-icon { + --ionicon-stroke-width: 26px; +} + +/* make color maker div responsive */ +@media screen and (max-width:380px) { + .color_maker { + width: 100%; + min-height:100vh; + } + + .color_maker .gradient_card + { + width: 100%; + min-height:100vh; + box-shadow: none; + } + + .color_maker .gradient_card::before + { + display: none; + } +} + .container { font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background: linear-gradient(to right, #6d28d9, #db2777); @@ -59,7 +134,7 @@ h1.logo_text { padding-block: 1.5rem; font-size: 20px; line-height: 32px; - color: #ffffffa4; + color: #ffffffd6; border-bottom: 1px solid #ffffff4e; } @@ -111,7 +186,7 @@ main.hero_section { outline: 3px solid rgba(255, 255, 255, .4); } -.form button.notify_btn { +.form a.btn { padding: 12px 24px; display: inline-flex; align-items: center; @@ -126,34 +201,19 @@ main.hero_section { border-radius: 5px; transition: all .3s ease-in-out; border: 1px solid rgba(255, 255, 255, .2); + cursor: pointer; } -.form button.notify_btn ion-icon { +.form a.btn ion-icon { scale: 1.4; --ionicon-stroke-width: 46px; } -.form button.notify_btn:hover { +.form a.btn:hover { background: rgba(255, 255, 255, .4); margin-top: -10px; } -.hero_section p.message { - margin-top: 1rem; - color: #d1d5db; - font-size: 16px; - line-height: 20px; - font-weight: 400; -} - -.hero_section p.message span { - display: block; - color: #d1d5db; - font-size: 16px; - line-height: 20px; - font-weight: 400; -} - /* make hero section fully responsive */ @media screen and (max-width:640px) { @@ -173,7 +233,7 @@ main.hero_section { width: 100%; } - .form button { + .form a { width: 100%; } @@ -223,8 +283,7 @@ main.hero_section { border-bottom-right-radius: 5px; } -.colors -{ +.colors { background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); @@ -232,19 +291,34 @@ main.hero_section { display: flex; align-items: center; justify-content: flex-start; - gap:1rem; + gap: 1rem; } + + input[type="color"] { - -webkit-appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; width: 20px; - height: 20px; + height: 20px; + background-color: transparent; + border: none; + cursor: pointer; } + input[type="color"]::-webkit-color-swatch-wrapper { - padding: 0; + padding: 0; } + input[type="color"]::-webkit-color-swatch { - border: none; + border-radius: 5px; + border: none; +} + +input[type="color"]::-moz-color-swatch { + border-radius: 5px; + border: none; } .title_with_copy_btn { @@ -278,18 +352,15 @@ input[type="color"]::-webkit-color-swatch { background: #fff; padding-inline: 15px; padding-bottom: 8px; + padding-top: 6px; color: #adb1b5; - font-size: 1.1rem; - line-height: 20px; + font-size: 1rem; + line-height: 24px; font-weight: 600; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } -span.copy_text -{ - visibility:hidden; -} @media screen and (max-width:640px) { .gradient_container { @@ -301,8 +372,7 @@ span.copy_text line-height: 20px; } - .gradient_info p - { + .gradient_info p { font-size: .9rem; } } \ No newline at end of file