Добавлено (2025-05-30, 09:56)
---------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="85px" height="85px" version="1.0" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 85 85"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Слой_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<g id="_1423137208">
<rect fill="none" y="1" width="84.529" height="84.5285"/>
<g>
<path fill="black" fill-rule="nonzero" d="M21 10l42 0c4,0 7,1 9,4 2,2 4,5 4,8l0 42c0,4 -2,7 -4,9 -2,2 -5,4 -9,4l-42 0c-3,0 -6,-2 -8,-4 -3,-2 -4,-5 -4,-9l0 -42c0,-3 1,-6 4,-8 2,-3 5,-4 8,-4zm42 5l-42 0c-2,0 -4,1 -5,2 -1,1 -2,3 -2,5l0 42c0,2 1,4 2,5 1,2 3,2 5,2l42 0c2,0 4,0 5,-2 2,-1 2,-3 2,-5l0 -42c0,-2 0,-4 -2,-5 -1,-1 -3,-2 -5,-2z"/>
<path fill="#E31E24" fill-rule="nonzero" d="M58 19c2,0 4,1 5,3 2,1 3,3 3,5 0,2 -1,4 -3,6 -1,1 -3,2 -5,2 -2,0 -4,-1 -6,-2l0 0c-1,-2 -2,-4 -2,-6 0,-2 1,-4 2,-5 2,-2 4,-3 6,-3zm-12 31c2,0 4,1 5,3 2,1 2,3 2,5 0,2 0,4 -2,6 -1,1 -3,2 -5,2 -3,0 -5,-1 -6,-2l0 0c-1,-2 -2,-4 -2,-6 0,-2 1,-4 2,-5 1,-2 3,-3 6,-3zm2 6c-1,-1 -1,-1 -2,-1 -1,0 -2,0 -3,1 0,1 -1,1 -1,2 0,1 1,2 1,3l0 0c1,0 2,1 3,1 1,0 1,-1 2,-1 1,-1 1,-2 1,-3 0,-1 0,-1 -1,-2zm-20 -26c3,0 5,1 6,2 1,1 2,3 2,6 0,2 -1,4 -2,5 -1,2 -3,2 -6,2 -2,0 -4,0 -5,-2l0 0c-2,-1 -2,-3 -2,-5 0,-3 0,-5 2,-6 1,-1 3,-2 5,-2zm3 5c-1,-1 -2,-1 -3,-1 -1,0 -1,0 -2,1 -1,1 -1,2 -1,3 0,0 0,1 1,2l0 0c1,1 1,1 2,1 1,0 2,0 3,-1 0,-1 1,-2 1,-2 0,-1 -1,-2 -1,-3zm29 -10c0,-1 -1,-1 -2,-1 -1,0 -2,0 -2,1 -1,0 -2,1 -2,2 0,1 1,2 1,3l1 0c0,0 1,1 2,1 1,0 2,-1 2,-1 1,-1 1,-2 1,-3 0,-1 0,-2 -1,-2z"/>
</g>
</g>
</g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="85px" height="85px" version="1.0" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 85 85"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Слой_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<g id="_638252056">
<rect fill="none" width="85.0012" height="85.0012"/>
<g>
<path fill="#1F1B20" d="M58 50c0,5 -3,8 -8,8l-6 0 0 -10 -14 14 14 14 0 -11 6 0c8,0 15,-7 15,-15l0 -6 11 0 -14 -14 -14 14 10 0 0 6z"/>
<path fill="#5B5B5B" d="M27 34l-18 0 0 31c0,4 3,7 7,7l11 0 0 -38zm7 -7l38 0 0 -11c0,-4 -3,-7 -7,-7l-31 0 0 18zm-7 0l0 -18 -11 0c-4,0 -7,3 -7,7l0 11 18 0z"/>
</g>
</g>
</g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="85px" height="85px" version="1.0" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 85 85"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Слой_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<g id="_901820008">
<path fill="none" d="M182 91l85 0 0 84 -85 0 0 -84z"/>
<g>
<path fill="#009E43" d="M256 100l-1 0 -19 7 -23 -7 -20 7c-1,0 -2,0 -2,1l0 56c0,1 1,2 2,2l1 0 19 -8 23 8 20 -7c1,0 2,-1 2,-2l0 -56c0,-1 -1,-1 -2,-1l0 0zm-20 59l-23 -8 -20 8 0 -44 20 -8 23 8 20 -8 0 44 -20 8z"/>
<path fill="#E31E24" d="M205 115c-3,0 -6,2 -6,6 0,4 6,11 6,11 0,0 6,-7 6,-11 0,-4 -2,-6 -6,-6l0 0zm0 8c-1,0 -2,-1 -2,-2 0,-1 1,-2 2,-2 2,0 2,1 2,2 0,1 0,2 -2,2z"/>
<path fill="#E31E24" d="M223 132c-3,0 -6,2 -6,6 0,4 6,11 6,11 0,0 7,-7 7,-11 0,-4 -3,-6 -7,-6l0 0zm0 8c-1,0 -2,-1 -2,-2 0,-1 1,-2 2,-2 2,0 3,1 3,2 0,1 -1,2 -3,2z"/>
<path fill="#E31E24" d="M243 115c-3,0 -6,2 -6,6 0,4 6,11 6,11 0,0 7,-7 7,-11 0,-4 -3,-6 -7,-6l0 0zm0 8c-1,0 -2,-1 -2,-2 0,-1 1,-2 2,-2 2,0 3,1 3,2 0,1 -1,2 -3,2z"/>
</g>
</g>
<g id="_901819792">
<path fill="none" d="M182 175l85 0 0 85 -85 0 0 -85z"/>
<path fill="#E31E24" d="M224 184c-12,0 -23,11 -23,23 0,18 23,44 23,44 0,0 24,-26 24,-44 0,-12 -11,-23 -24,-23l0 0zm0 32c-4,0 -8,-4 -8,-9 0,-4 4,-8 8,-8 5,0 9,4 9,8 0,5 -4,9 -9,9z"/>
</g>
<g id="_901819312">
<path fill="none" d="M0 0l85 0 0 85 -85 0 0 -85z"/>
<path fill="#0074BC" d="M68 9l-52 0c-4,0 -7,4 -7,8l0 52c0,4 3,7 7,7l52 0c4,0 8,-3 8,-7l0 -52c0,-4 -4,-8 -8,-8l0 0zm-18 52l-26 0 0 -7 26 0 0 7zm11 -15l-37 0 0 -7 37 0 0 7zm0 -14l-37 0 0 -8 37 0 0 8 0 0z"/>
</g>
<g id="_901818832">
<rect fill="none" x="182" y="344" width="84.6268" height="84.6269"/>
<path fill="#0074BC" d="M249 358l-49 0 -9 20 33 38 34 -38 -9 -20zm-32 17l6 -11 3 0 6 11 -15 0zm4 7l0 21 -19 -21 19 0zm7 0l19 0 -19 21 0 -21zm22 -7l-11 0 -6 -11 12 0 5 11zm-46 -11l12 0 -6 11 -11 0 5 -11z"/>
</g>
<g id="_901817824">
<rect fill="none" x="182" y="260" width="84.6268" height="84.6268"/>
<g>
<path fill="#5B5B5B" d="M250 314l0 -30c0,-9 -6,-15 -14,-15 -9,0 -15,6 -15,15l0 37c0,4 -4,7 -8,7 -4,0 -7,-3 -7,-7l0 -31c4,-1 7,-5 7,-10 0,-6 -5,-11 -11,-11 -6,0 -11,5 -11,11 0,5 3,9 8,10l0 31c0,8 6,14 14,14 9,0 15,-6 15,-14l0 -37c0,-4 4,-8 8,-8 4,0 7,4 7,8l0 30c-4,1 -7,5 -7,10 0,6 5,11 11,11 6,0 11,-5 11,-11 0,-5 -3,-9 -8,-10z"/>
<path fill="black" d="M250 314c-7,0 0,0 -7,0 -4,1 -7,5 -7,10 0,6 5,11 11,11 6,0 11,-5 11,-11 0,-5 -3,-9 -8,-10zm-44 -24c4,-1 7,-5 7,-10 0,-6 -5,-11 -11,-11 -6,0 -11,5 -11,11 0,5 3,9 8,10 7,0 0,0 7,0z"/>
</g>
</g>
</g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="85px" height="85px" version="1.0" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 85 85"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Слой_x0020_2">
<metadata id="CorelCorpID_0Corel-Layer"/>
<rect fill="none" width="85" height="85"/>
<path fill="#418FDE" d="M32 58l20 0 -3 10 -13 0 -4 -10zm45 -41l-69 0 4 10 61 0 4 -10zm-9 14l-51 0 5 10 41 0 5 -10zm-8 14l-36 0 5 10 27 0 4 -10z"/>
</g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="85px" height="85px" version="1.0" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 85 85"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Слой_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<g id="_790289224">
<path fill="none" d="M0 85l85 0 0 -85 -85 0 0 85z"/>
<path fill="#0074BC" d="M30 68c0,-4 0,-7 3,-10l1 -2c-2,0 -4,0 -5,-1 -4,-3 -3,-8 1,-10 1,-1 4,-1 6,-1 2,0 3,-1 5,-2 2,-1 4,-2 5,-3 2,-3 2,-6 0,-8l0 -1c-2,-1 -3,-2 -5,-2 -3,0 -5,2 -7,3 -1,1 -1,1 -2,1 -1,1 -3,0 -6,2 -5,2 -8,5 -10,10 -2,4 -2,9 0,13 1,2 2,4 4,6 2,2 7,5 10,5zm-2 -53c0,1 1,2 2,3 0,0 7,-5 8,-5 1,-1 1,-1 2,-1 0,-1 -1,-3 -3,-3l0 0c-1,0 -3,2 -5,3l-2 1c-1,0 -2,1 -2,2zm29 46c0,0 0,2 1,4 0,0 10,-7 12,-8 1,-1 1,-3 -2,-3 0,0 -2,1 -3,1l-7 5c0,0 -1,1 -1,1zm-15 5c0,0 0,-1 1,-1 1,-2 4,1 2,2 -1,2 -3,0 -3,-1zm18 10l-32 0c-2,0 -2,-4 0,-4l6 0 0 -5c0,-10 10,-13 16,-9 1,1 2,2 3,4 1,3 1,6 1,10l6 0c2,0 2,4 0,4zm-31 -52c0,1 2,3 2,4 1,0 4,-3 7,-3 2,-1 5,-1 7,0 1,1 2,1 3,2 1,1 2,2 2,3 2,4 1,9 -2,12 -1,1 -4,3 -6,4 0,0 1,1 1,2 1,1 2,2 4,1 0,0 0,-1 1,-1 0,1 3,5 3,5 2,2 3,0 6,-1 1,-1 4,-2 4,-3 1,-1 0,-2 -1,-3 0,-1 -2,-4 -2,-4 4,-2 3,-3 1,-6l-13 -21c-1,-3 -3,0 -6,1l-6 3c0,1 -1,1 -2,2 0,0 -1,0 -2,1 0,0 -1,1 -1,2z"/>
</g>
</g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="85px" height="85px" version="1.0" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 85 85"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Слой_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<g id="_910885416">
<path fill="none" d="M0 85l85 0 0 -85 -85 0 0 85z"/>
<g>
<path fill="#E31E24" d="M39 68c0,0 1,2 1,2 1,2 3,2 5,0 0,0 1,-2 1,-2 5,0 10,0 15,1 1,0 1,1 2,1l0 0c-1,0 -1,0 -2,0 -2,1 -8,2 -10,2 -1,0 -1,0 -2,0 -4,0 -10,0 -15,0 -2,0 -8,-1 -10,-2 0,0 -2,0 -2,0 0,0 3,-1 3,-1 2,0 3,0 5,-1 0,0 1,0 2,0 2,0 5,0 7,0zm3 -59l1 0c0,0 1,1 1,1l19 28c2,3 2,2 0,5l-5 7c-1,2 -5,8 -7,10 0,1 -2,3 -2,4 4,0 20,1 20,6 0,3 -6,5 -9,5 -5,1 -10,1 -15,1l-8 0c0,0 0,0 -1,0 -5,0 -21,-1 -21,-6 0,-2 2,-3 4,-4 4,-1 12,-2 17,-2 0,-1 -4,-7 -5,-7l-9 -14c-2,-3 -2,-3 1,-7 5,-8 11,-16 16,-24 1,-1 1,-1 1,-2 1,0 2,-1 2,-1zm-13 36c0,0 0,0 0,0l0 0c1,0 1,0 1,0l10 4 0 13c0,0 -1,-2 -1,-2 -1,-1 -1,-2 -2,-2l-8 -13zm27 0c0,0 0,0 0,0 -2,3 -11,17 -11,17l0 -43c0,0 0,1 1,1l10 15c0,1 2,4 2,4l-8 3c-1,1 -3,1 -4,2 0,2 1,3 3,3 0,0 6,-2 7,-2l0 0zm-16 -26l0 25 -14 -5c1,0 1,0 1,-1l6 -9c0,0 7,-10 7,-10z"/>
<path fill="#5B5B5B" d="M36 64c-5,0 -13,1 -17,2 -2,1 -4,2 -4,4 0,5 16,6 21,6 1,0 1,0 1,0l8 0c5,0 10,0 15,-1 3,0 9,-2 9,-5 0,-5 -16,-6 -20,-6l-3 4c5,0 10,0 15,1 1,0 1,1 2,1l0 0c-1,0 -1,0 -2,0 -2,1 -8,2 -10,2 -1,0 -1,0 -2,0 -4,0 -10,0 -15,0 -2,0 -8,-1 -10,-2 0,0 -2,0 -2,0 0,0 3,-1 3,-1 2,0 3,0 5,-1 0,0 1,0 2,0 2,0 5,0 7,0l-3 -4z"/>
</g>
</g>
</g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="85px" height="85px" version="1.0" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 85 85"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Слой_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<g id="_881061104">
<rect fill="none" width="85.0012" height="85.0012"/>
<g>
<path fill="#2B2A29" d="M10 9l7 0 0 29 -7 0 0 -29zm10 0l3 0 0 29 -3 0 0 -29zm7 0l7 0 0 29 -7 0 0 -29zm10 0l3 0 0 29 -3 0 0 -29zm7 0l3 0 0 29 -3 0 0 -29z"/>
<rect fill="#E31E24" transform="matrix(1.65952E-014 -0.6266 1.04446 2.7662E-014 5.00002 25.9218)" width="7.50007" height="45.0004"/>
</g>
</g>
<g id="_881059520">
<rect fill="#F0F0F0" x="648" y="17" width="75.0007" height="75.0007"/>
<g>
<path fill="#1F1B20" d="M678 54c0,-4 3,-7 7,-7 4,0 7,3 7,7 0,4 -3,7 -7,7 -4,0 -7,-3 -7,-7zm7 -4c2,0 4,2 4,4 0,3 -2,5 -4,5 -2,0 -4,-2 -4,-5 0,-2 2,-4 4,-4zm2 2c0,0 1,0 1,1 0,1 -1,1 -1,1 -1,0 -2,0 -2,-1 0,-1 1,-1 2,-1zm16 2c0,0 -8,-9 -18,-9 -10,0 -18,9 -18,9 0,0 8,9 18,9 10,0 18,-9 18,-9z"/>
<path fill="black" d="M668 60l-5 -3 -5 -3 -6 10 5 3 1 -2c1,4 3,7 6,10l0 0c2,2 5,4 8,6l2 -5c-2,-1 -4,-3 -6,-5 -2,-2 -4,-5 -5,-8l2 2 3 -5 0 0zm-9 -19c1,-3 3,-6 5,-8l0 0c3,-3 6,-5 10,-6l-2 -1 3 -5 10 6 -3 5 -3 5 -5 -2 2 -3c-3,1 -6,3 -8,5 -2,2 -3,4 -5,6l-4 -2zm43 7l5 3 5 3 6 -10 -5 -3 -1 2c-1,-4 -3,-7 -6,-10l0 0c-2,-2 -5,-4 -8,-5l-2 5c2,1 4,2 6,4 2,2 4,5 5,8l-2 -2 -3 5 0 0zm9 19c-1,3 -3,6 -5,8l0 0c-3,3 -6,5 -10,7l2 1 -3 4 -10 -6 3 -5 3 -5 5 3 -2 3c3,-2 6,-4 8,-6 2,-2 3,-4 5,-6l4 2z"/>
</g>
</g>
<path fill="#2B2A29" d="M47 62c4,4 11,4 15,1l12 12c1,1 2,1 3,0l0 0c1,-1 1,-3 0,-4l-11 -11c3,-5 2,-11 -2,-15 -5,-5 -12,-5 -17,0 -5,4 -5,12 0,17zm3 -3c3,3 8,3 11,0 3,-3 3,-8 0,-12 -3,-3 -8,-3 -11,0 -3,4 -3,9 0,12z"/>
</g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="85px" height="85px" version="1.0" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 85 85"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Слой_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path fill="none" d="M0 85l85 0 0 -85 -85 0 0 85z"/>
<path fill="#104D28" d="M24 39c4,0 7,5 4,9 -4,3 -9,0 -9,-4 0,-3 2,-5 5,-5zm17 -19l-24 15c-1,1 -3,2 -3,4l0 14c0,1 1,3 2,4 1,1 2,2 3,4 1,2 4,7 6,7l35 0c2,0 6,-5 8,-7 2,-2 3,-2 3,-5l0 -22c0,-2 -1,-3 -2,-3 -1,-1 -1,-1 -2,-1l-15 -9c-6,-4 -6,-5 -11,-1zm-4 16c0,2 -1,1 -3,1 -2,0 -2,-3 0,-3 1,0 3,0 3,2zm9 -9c-3,0 -3,1 -3,-2 0,-1 2,-1 3,-1 2,0 2,3 0,3zm-12 30c0,-2 2,-4 5,-4l1 0c2,0 4,2 4,5 0,6 -10,7 -10,-1zm22 6c-2,0 -3,0 -3,-2 0,-2 2,-2 3,-2 2,0 2,4 0,4zm-13 -17c0,2 -6,2 -6,0 0,-3 6,-3 6,0zm25 -9c0,3 -5,3 -5,0 0,-2 5,-2 5,0zm-44 17c2,0 3,0 3,2 0,2 -3,2 -4,1 0,0 -1,-1 -1,-1 0,-1 1,-2 2,-2zm27 -13c-3,0 -5,-2 -5,-5l0 -1c0,-2 2,-4 4,-4l1 0c4,0 7,5 3,9 -1,0 -2,1 -3,1zm3 8c0,-1 1,-3 2,-3 4,-5 12,2 7,7 -4,3 -9,1 -9,-4z"/>
</g>
</svg>

Добавлено (2025-05-30, 09:57)
---------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="85px" height="85px" version="1.0" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 85 85"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Слой_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<g id="_883313128">
<path fill="none" d="M0 85l85 0 0 -85 -85 0 0 85z"/>
<g>
<path fill="#0074BC" d="M19 19l7 0 0 7 33 0 0 -7 7 0 0 50 -47 0 0 -50zm7 -6l-7 0c-3,0 -6,3 -6,6l0 51c0,3 3,6 7,6l45 0c4,0 8,-3 8,-6l0 -51c0,-3 -4,-6 -6,-6l-8 0c0,-2 -1,-4 -3,-4l-26 0c-2,0 -4,2 -4,4z"/>
<path fill="#009E43" d="M52 35l-13 13c-1,-1 -5,-6 -6,-6l-4 5 10 10 18 -17 -5 -5z"/>
<path fill="#5B5B5B" d="M26 13l0 13 33 0 0 -13c0,-2 -1,-4 -3,-4l-26 0c-2,0 -4,2 -4,4z"/>
</g>
</g>
</g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="85px" height="85px" version="1.0" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 85 85"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Слой_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path fill="none" d="M85 85l0 -85 -85 0 0 85 85 0z"/>
<rect fill="#418FDE" transform="matrix(0.406587 -0.406587 0.406587 0.406587 4.001 43.5764)" width="19.9998" height="19.9998"/>
<rect fill="#E31E24" transform="matrix(0.406587 -0.406587 0.406587 0.406587 12.1495 35.428)" width="19.9998" height="19.9998"/>
<rect fill="#E31E24" transform="matrix(0.406587 -0.406587 0.406587 0.406587 20.2811 43.5596)" width="19.9998" height="19.9998"/>
<rect fill="#418FDE" transform="matrix(0.406587 -0.406587 0.406587 0.406587 12.1327 51.7081)" width="19.9998" height="19.9998"/>
<rect fill="#418FDE" transform="matrix(0.406587 -0.406587 0.406587 0.406587 20.2643 59.8398)" width="19.9998" height="19.9998"/>
<rect fill="#69B3E7" transform="matrix(0.406587 -0.406587 0.406587 0.406587 28.4128 51.6913)" width="19.9998" height="19.9998"/>
<rect fill="#418FDE" transform="matrix(0.406587 -0.406587 0.406587 0.406587 4.01781 27.2963)" width="19.9998" height="19.9998"/>
<rect fill="#003DA5" transform="matrix(0.406587 -0.406587 0.406587 0.406587 12.1663 19.1478)" width="19.9998" height="19.9998"/>
<rect fill="#69B3E7" transform="matrix(0.406587 -0.406587 0.406587 0.406587 28.4128 35.428)" width="19.9998" height="19.9998"/>
<rect fill="#418FDE" transform="matrix(0.406587 -0.406587 0.406587 0.406587 20.2811 27.2963)" width="19.9998" height="19.9998"/>
<rect fill="#003DA5" transform="matrix(0.406587 -0.406587 0.406587 0.406587 28.4296 19.1478)" width="19.9998" height="19.9998"/>
<rect fill="#FEFEFE" transform="matrix(0.406587 -0.406587 0.406587 0.406587 36.5444 43.5597)" width="19.9998" height="19.9998"/>
<rect fill="#69B3E7" transform="matrix(0.406587 -0.406587 0.406587 0.406587 44.6928 35.4113)" width="19.9998" height="19.9998"/>
<rect fill="#E31E24" transform="matrix(0.406587 -0.406587 0.406587 0.406587 52.8245 43.5429)" width="19.9998" height="19.9998"/>
<rect fill="#69B3E7" transform="matrix(0.406587 -0.406587 0.406587 0.406587 44.676 51.6914)" width="19.9998" height="19.9998"/>
<rect fill="#418FDE" transform="matrix(0.406587 -0.406587 0.406587 0.406587 52.8077 59.8231)" width="19.9998" height="19.9998"/>
<rect fill="#418FDE" transform="matrix(0.406587 -0.406587 0.406587 0.406587 60.9562 51.6746)" width="19.9998" height="19.9998"/>
<rect fill="#418FDE" transform="matrix(0.406587 -0.406587 0.406587 0.406587 36.5612 27.2796)" width="19.9998" height="19.9998"/>
<rect fill="#418FDE" transform="matrix(0.406587 -0.406587 0.406587 0.406587 44.7096 19.1311)" width="19.9998" height="19.9998"/>
<rect fill="#418FDE" transform="matrix(0.406587 -0.406587 0.406587 0.406587 60.9562 35.4113)" width="19.9998" height="19.9998"/>
<rect fill="#418FDE" transform="matrix(0.406587 -0.406587 0.406587 0.406587 52.8245 27.2796)" width="19.9998" height="19.9998"/>
<rect fill="#418FDE" transform="matrix(0.406587 -0.406587 0.406587 0.406587 60.973 19.1311)" width="19.9998" height="19.9998"/>
<rect fill="#418FDE" transform="matrix(0.406587 -0.406587 0.406587 0.406587 44.6761 67.9546)" width="19.9998" height="19.9998"/>
<rect fill="#418FDE" transform="matrix(0.406587 -0.406587 0.406587 0.406587 36.5449 59.8234)" width="19.9998" height="19.9998"/>
<rect fill="#418FDE" transform="matrix(0.406587 -0.406587 0.406587 0.406587 12.1324 67.9717)" width="19.9998" height="19.9998"/>
<rect fill="#418FDE" transform="matrix(0.406587 -0.406587 0.406587 0.406587 28.3951 67.9717)" width="19.9998" height="19.9998"/>
<rect fill="#418FDE" transform="matrix(0.406587 -0.406587 0.406587 0.406587 60.9395 67.9552)" width="19.9998" height="19.9998"/>
</g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="85px" height="85px" version="1.0" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 85 85"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Слой_x0020_2">
<metadata id="CorelCorpID_0Corel-Layer"/>
<rect fill="none" width="85" height="85"/>
<path fill="#418FDE" d="M32 58l20 0 -3 10 -13 0 -4 -10zm36 -27l-51 0 5 10 41 0 5 -10zm-8 14l-36 0 5 10 27 0 4 -10z"/>
<path fill="#E31E24" d="M12 27l26 0 0 -10 -30 0 4 10z"/>
<path fill="#009846" d="M42 22l31 0 4 -11 -34 0 -1 11z"/>
</g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="85px" height="85px" version="1.0" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 85 85"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Слой_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<g id="_877553880">
<path fill="none" d="M0 85l85 0 0 -85 -85 0 0 85z"/>
<path fill="#0074BC" fill-rule="nonzero" d="M40 76c-2,0 -5,-1 -7,-2 -3,-1 -5,-3 -7,-5 -2,-2 -4,-5 -5,-8 -2,-2 -2,-6 -2,-9 0,-17 22,-41 22,-41l2 -2 1 2c0,0 22,24 22,41 0,3 0,7 -2,9 -1,3 -3,6 -5,8 -2,2 -5,4 -7,5 -3,1 -6,2 -9,2l-3 0zm3 -53c0,0 6,7 10,16l-1 0c-2,-2 -3,-4 -4,-6 -1,0 -1,0 -2,0 0,0 0,1 0,1 2,4 4,7 5,9 1,3 2,6 2,8 0,2 -1,4 -2,5 -1,2 -3,3 -5,4 0,0 0,1 0,1 0,1 0,1 1,1 2,-1 4,-2 5,-4 2,-2 3,-5 3,-7 0,-3 -1,-5 -2,-8 0,-1 -1,-2 -1,-3l0 -1 1 0c3,4 4,8 4,12 0,8 -6,14 -14,14l0 0 0 -42zm-14 43c2,2 4,3 6,4 2,1 5,1 8,1l0 0c2,0 5,0 7,-1 2,-1 4,-3 6,-4 2,-2 3,-4 4,-6 1,-3 2,-5 2,-8 0,-6 -4,-15 -9,-22 -4,-6 -8,-11 -10,-14 -3,3 -7,8 -11,14 -5,7 -9,16 -9,22 0,3 1,5 2,8 1,2 2,4 4,6z"/>
</g>
</g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="85px" height="85px" version="1.0" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 85 85"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Слой_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<g id="_910890096">
<path fill="none" d="M0 85l85 0 0 -85 -85 0 0 85z"/>
<g>
<path fill="#009E43" d="M35 66c0,-2 4,-3 4,1 0,2 -4,2 -4,-1zm11 -22l0 -8 1 0c1,0 1,0 1,0 0,0 0,0 0,0 0,0 0,0 0,0 0,-1 0,-1 0,-1 0,0 0,0 0,0l-11 0c0,0 0,0 0,0 0,0 0,0 0,1 0,0 0,0 0,0 0,0 0,0 1,0l1 0 0 8 7 0zm2 -5c0,3 0,7 0,11 0,0 1,1 2,1l7 12c2,2 4,5 4,7 0,3 -3,6 -5,6l-27 0c-2,0 -5,-3 -5,-6 0,-1 1,-2 1,-3l6 -9c1,-1 1,-2 2,-3 1,-1 1,-2 2,-3 0,0 2,-2 2,-2 0,-4 0,-8 0,-11 -1,-1 -1,-1 -1,-1 -1,-1 -1,-1 -1,-2 0,-1 0,-2 1,-3 0,0 1,-1 1,-1l11 0c0,0 0,1 1,1 0,0 0,0 1,1 0,0 0,1 0,2 0,0 0,0 0,1 0,1 -1,1 -1,1 0,0 0,1 -1,1zm0 -4c0,0 0,0 0,0l0 0zm0 29c1,0 2,1 2,2 0,2 -2,3 -3,2 -1,-1 -1,-4 1,-4zm-6 -2c-2,0 -3,-4 1,-4 2,0 2,4 -1,4z"/>
<path fill="#5B5B5B" d="M22 32c-3,-2 -2,-1 -6,0 -3,1 -2,0 -5,2 0,1 -2,2 -2,2 0,1 1,6 1,8 1,2 2,2 5,3l5 2c0,0 1,-1 2,-1 6,-2 5,-1 4,-8 0,-1 -1,-6 -1,-6 -1,-1 -3,-2 -3,-2z"/>
<path fill="#5B5B5B" d="M25 27c1,1 4,1 6,2 0,0 2,0 2,0 1,0 4,-2 5,-3 3,-2 3,-1 1,-5l-2 -7c-2,-3 -2,-3 -7,-4 -1,0 -2,0 -2,-1 -1,0 -2,0 -2,0l-1 0c0,0 -1,0 -1,1l-5 6c-1,1 0,2 0,4l1 4c1,2 2,2 4,3 0,0 0,0 1,0z"/>
<path fill="#5B5B5B" d="M48 19c0,1 0,2 1,2 1,1 7,2 7,2 1,0 5,-1 6,-1 2,-1 0,-4 0,-7 -1,-2 -1,-2 -3,-3 -3,-2 -3,-1 -7,0 -1,0 -2,1 -4,1 0,1 -1,1 -1,2 0,1 0,3 1,4z"/>
<path fill="#5B5B5B" d="M70 30c-4,-1 -3,-1 -8,1 -2,1 -4,1 -5,2 -1,0 -2,0 -2,1 0,1 0,3 -1,3 0,1 0,2 0,3 0,1 -1,2 -1,3l7 -2c1,-1 6,-3 6,-3 2,0 2,1 3,1 0,1 1,2 1,2 1,1 4,4 4,5l2 -12c0,-1 -1,-2 -1,-2l-5 -2z"/>
<path fill="#5B5B5B" d="M66 42l-8 4c-1,0 -1,0 -2,0 0,1 -1,1 -1,1l0 0c1,0 3,3 5,3 1,1 6,2 7,2 1,0 4,-2 5,-3l-4 -4c0,0 0,-1 -1,-1 0,0 -1,-2 -1,-2z"/>
</g>
</g>
</g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="85px" height="85px" version="1.0" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 85 85"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Слой_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<g id="_853375680">
<path fill="none" d="M85 85l0 -85 -85 0 0 85 85 0z"/>
<g>
<path fill="#0074BC" fill-rule="nonzero" d="M9 43c0,-9 4,-18 10,-24l0 0c6,-6 14,-10 23,-10 9,0 18,4 24,10l0 0c6,6 10,15 10,24 0,9 -4,17 -10,23l0 0c-6,6 -15,10 -24,10 -9,0 -17,-4 -23,-10l0 0c-6,-6 -10,-14 -10,-23zm14 -19c-5,4 -8,11 -8,19 0,7 3,14 8,19l0 0c5,5 12,8 19,8 8,0 15,-3 19,-8l0 0c5,-5 8,-12 8,-19 0,-8 -3,-15 -8,-19l0 0c-4,-5 -11,-8 -19,-8 -7,0 -14,3 -19,8l0 0z"/>
<path fill="#E60D2E" d="M31 49l14 3 -1 1c0,0 -1,0 -1,0 0,1 0,2 1,2l2 3 0 8c0,1 1,2 2,2 1,0 2,-1 2,-2l0 -9c0,-1 -1,-1 -1,-1l-2 -2 3 -1c1,-1 1,-1 1,-2 0,0 -1,-1 -1,-1l-10 -2 22 -2c0,0 1,-1 1,-1 0,-1 -1,-1 -1,-2l-14 -2 2 -1c1,-1 1,-2 1,-2 -1,0 -1,0 -1,-1l-3 -2 2 -2c0,-1 1,-1 1,-1l0 -8c0,0 -1,-1 -2,-1 -1,0 -2,1 -2,1l0 7 -2 3c-1,1 -1,2 0,2l3 2 -4 2c-1,1 -1,1 -1,1 0,1 0,2 1,2l8 1 -20 2c-1,1 -1,1 -1,2 0,0 0,1 1,1z"/>
</g>
</g>
<path fill="#2B2A29" d="M52 35l-15 -2 2 -1c0,0 0,0 0,0 1,-1 1,-2 0,-2l-3 -2 0 -8c0,-1 -1,-1 -1,-1 -1,0 -2,0 -2,1l0 8c0,1 0,1 1,1l1 2 -3 1c0,1 -1,1 0,2 0,0 0,0 1,0l9 2 -21 2c-1,0 -1,1 -1,2 0,0 0,1 1,1l14 2 -2 1c-1,0 -1,1 -1,2 0,0 0,0 0,0l3 2 -2 3c0,0 0,0 0,0l0 7c0,1 1,1 2,1 0,0 1,0 1,-1l0 -6 3 -3c0,0 0,-1 0,-2l-3 -2 4 -2c0,0 1,0 1,0 0,-1 -1,-2 -1,-2l-9 -1 21 -2c0,0 1,-1 1,-1 0,-1 0,-1 -1,-2z"/>
</g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="85px" height="85px" version="1.0" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 85 85"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Слой_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<g id="_1423133608">
<rect fill="none" width="85.0012" height="85.001"/>
<path fill="#0074BC" d="M17 15l0 55c0,3 2,5 3,5 1,1 2,1 3,1l39 0c3,0 6,-3 6,-6l0 -41 -13 0c-4,0 -7,-3 -7,-7l0 -13 -25 0c-3,0 -6,3 -6,6zm50 10l-15 -15 0 11c0,4 0,4 4,4l11 0zm-10 13c1,0 2,0 2,2 0,1 -1,2 -2,2l-29 0c-1,0 -2,-1 -2,-2 0,-2 1,-2 2,-2l29 0zm0 23c1,0 2,0 2,2 0,1 -1,2 -2,2l-29 0c-1,0 -2,-1 -2,-2 0,-2 1,-2 2,-2l29 0zm0 -12c1,0 2,1 2,2 0,1 -1,2 -2,2l-29 0c-1,0 -2,-1 -2,-2 0,-1 1,-2 2,-2l29 0z"/>
</g>
</g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="85px" height="85px" version="1.0" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 85 85"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Слой_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<g id="_877561704">
<path fill="none" d="M182 91l85 0 0 84 -85 0 0 -84z"/>
<g>
<path fill="#009E43" d="M256 100l-1 0 -19 7 -23 -7 -20 7c-1,0 -2,0 -2,1l0 56c0,1 1,2 2,2l1 0 19 -8 23 8 20 -7c1,0 2,-1 2,-2l0 -56c0,-1 -1,-1 -2,-1l0

Добавлено (2025-06-11, 15:02)
---------------------------------------------
document.addEventListener('DOMContentLoaded', function() {
const colorBlocks = document.querySelectorAll('.custom-rectangle');

colorBlocks.forEach(block => {
// Сохраняем оригинальный размер шрифта при загрузке
block.dataset.originalFontSize = window.getComputedStyle(block).fontSize;

block.addEventListener('click', function(e) {
e.stopPropagation(); // Предотвращаем всплытие события

const currentText = this.textContent.trim();

// Проверяем, содержит ли блок подсказку о копировании
if (this.querySelector('.copy-tooltip')) {
return; // Если уже показывает подсказку, не обрабатываем клик
}

// Преобразование между HEX и RGB
if (currentText.startsWith('#')) {
const rgb = hexToRgb(currentText);
if (rgb) {
this.textContent = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
adjustFontSize(this);
}
} else if (currentText.startsWith('rgb(')) {
const hex = rgbToHex(currentText);
if (hex) {
this.textContent = hex;
resetFontSize(this);
}
}

// Добавляем функционал копирования
copyToClipboard(this, currentText);
});
});

function hexToRgb(hex) {
hex = hex.replace('#', '');
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
if (hex.length !== 6) return null;

const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);

return { r, g, b };
}

function rgbToHex(rgb) {
const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
if (!match) return null;

const r = parseInt(match[1]).toString(16).padStart(2, '0');
const g = parseInt(match[2]).toString(16).padStart(2, '0');
const b = parseInt(match[3]).toString(16).padStart(2, '0');

return `#${r}${g}${b}`.toUpperCase();
}

function adjustFontSize(element) {
const originalSize = parseFloat(element.dataset.originalFontSize);
let currentSize = originalSize;
element.style.fontSize = `${currentSize}px`;

// Уменьшаем шрифт, пока текст не поместится
while (element.scrollWidth > element.offsetWidth && currentSize > 8) {
currentSize -= 0.5;
element.style.fontSize = `${currentSize}px`;
}
}

function resetFontSize(element) {
element.style.fontSize = element.dataset.originalFontSize;
}

function copyToClipboard(element, text) {
// Создаем временный элемент для копирования
const tempInput = document.createElement('input');
tempInput.value = text;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);

// Показываем подсказку о копировании
const tooltip = document.createElement('span');
tooltip.className = 'copy-tooltip';
tooltip.textContent = 'Скопировано!';
element.appendChild(tooltip);

// Удаляем подсказку через 2 секунды
setTimeout(() => {
tooltip.remove();
}, 2000);
}
});

Добавлено (2025-06-11, 15:03)
---------------------------------------------
document.addEventListener('DOMContentLoaded', function() {
const colorBlocks = document.querySelectorAll('.custom-rectangle');

colorBlocks.forEach(block => {
// Сохраняем оригинальный размер шрифта при загрузке
block.dataset.originalFontSize = window.getComputedStyle(block).fontSize;

block.addEventListener('click', function(e) {
e.stopPropagation(); // Предотвращаем всплытие события

const currentText = this.textContent.trim();

// Проверяем, содержит ли блок подсказку о копировании
if (this.querySelector('.copy-tooltip')) {
return; // Если уже показывает подсказку, не обрабатываем клик
}

// Преобразование между HEX и RGB
if (currentText.startsWith('#')) {
const rgb = hexToRgb(currentText);
if (rgb) {
this.textContent = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
adjustFontSize(this);
}
} else if (currentText.startsWith('rgb(')) {
const hex = rgbToHex(currentText);
if (hex) {
this.textContent = hex;
resetFontSize(this);
}
}

// Добавляем функционал копирования
copyToClipboard(this, currentText);
});
});

function hexToRgb(hex) {
hex = hex.replace('#', '');
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
if (hex.length !== 6) return null;

const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);

return { r, g, b };
}

function rgbToHex(rgb) {
const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
if (!match) return null;

const r = parseInt(match[1]).toString(16).padStart(2, '0');
const g = parseInt(match[2]).toString(16).padStart(2, '0');
const b = parseInt(match[3]).toString(16).padStart(2, '0');

return `#${r}${g}${b}`.toUpperCase();
}

function adjustFontSize(element) {
const originalSize = parseFloat(element.dataset.originalFontSize);
let currentSize = originalSize;
element.style.fontSize = `${currentSize}px`;

// Уменьшаем шрифт, пока текст не поместится
while (element.scrollWidth > element.offsetWidth && currentSize > 8) {
currentSize -= 0.5;
element.style.fontSize = `${currentSize}px`;
}
}

function resetFontSize(element) {
element.style.fontSize = element.dataset.originalFontSize;
}

function copyToClipboard(element, text) {
// Создаем временный элемент для копирования
const tempInput = document.createElement('input');
tempInput.value = text;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);

// Показываем подсказку о копировании
const tooltip = document.createElement('span');
tooltip.className = 'copy-tooltip';
tooltip.textContent = 'Скопировано!';
element.appendChild(tooltip);

// Удаляем подсказку через 2 секунды
setTimeout(() => {
tooltip.remove();
}, 2000);
}
});

Добавлено (2025-06-11, 15:04)
---------------------------------------------
.custom-rectangle {
cursor: pointer;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 2px 5px;
/* остальные ваши стили */
}

.copy-tooltip {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
z-index: 100;
animation: fadeInOut 2s ease-in-out;
}

@keyframes fadeInOut {
0% { opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; }
}

Добавлено (2025-06-11, 15:19)
---------------------------------------------
.copy-tooltip {
position: absolute;
top: -30px; /* Поднимаем подсказку выше блока */
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
z-index: 1000; /* Увеличиваем z-index */
pointer-events: none; /* Чтобы подсказка не мешала кликам */
white-space: nowrap;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Добавим маленький треугольник снизу подсказки */
.copy-tooltip::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
border-width: 5px 5px 0;
border-style: solid;
border-color: rgba(0, 0, 0, 0.8) transparent transparent;
}

function copyToClipboard(element, text) {
// Удаляем старую подсказку, если есть
const oldTooltip = element.querySelector('.copy-tooltip');
if (oldTooltip) oldTooltip.remove();

// Копируем текст
navigator.clipboard.writeText(text).then(() => {
// Создаем и показываем подсказку
const tooltip = document.createElement('div');
tooltip.className = 'copy-tooltip';
tooltip.textContent = 'Скопировано!';

// Добавляем подсказку в body, а не в элемент
document.body.appendChild(tooltip);

// Позиционируем подсказку над элементом
const rect = element.getBoundingClientRect();
tooltip.style.position = 'fixed';
tooltip.style.left = `${rect.left + rect.width/2}px`;
tooltip.style.top = `${rect.top - 30}px`;
tooltip.style.transform = 'translateX(-50%)';

// Удаляем подсказку через 2 секунды
setTimeout(() => {
tooltip.remove();
}, 2000);
}).catch(err => {
console.error('Ошибка копирования: ', err);
});
}

Добавлено (2025-06-11, 15:25)
---------------------------------------------
.custom-rectangle {
cursor: pointer;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 2px 5px;
transition: font-size 0.1s ease;
/* Ваши оригинальные стили */
}

.copy-tooltip {
position: fixed;
background-color: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
z-index: 1000;
pointer-events: none;
transform: translateX(-50%);
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
animation: fadeInOut 2s ease;
}

.copy-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}

@keyframes fadeInOut {
0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
20% { opacity: 1; transform: translateX(-50%) translateY(0); }
80% { opacity: 1; transform: translateX(-50%) translateY(0); }
100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

document.addEventListener('DOMContentLoaded', function() {
const colorBlocks = document.querySelectorAll('.custom-rectangle');

colorBlocks.forEach(block => {
// Сохраняем оригинальный размер шрифта
block.dataset.originalFontSize = window.getComputedStyle(block).fontSize;

block.addEventListener('click', function(e) {
e.stopPropagation();

const currentText = this.textContent.trim();

// Если уже есть подсказка - не обрабатываем повторный клик
if (document.querySelector('.copy-tooltip')) return;

// Переключение между HEX и RGB
let newText;
if (currentText.startsWith('#')) {
const rgb = hexToRgb(currentText);
if (rgb) {
newText = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
adjustFontSize(this, newText);
}
} else if (currentText.startsWith('rgb(')) {
const hex = rgbToHex(currentText);
if (hex) {
newText = hex;
resetFontSize(this);
}
} else {
return;
}

if (newText) {
this.textContent = newText;
copyToClipboard(this, newText);
}
});
});

// Преобразование HEX в RGB
function hexToRgb(hex) {
hex = hex.replace('#', '');

// Упрощаем 3-символьный HEX
if (hex.length === 3) {
hex = hex.split('').map(c => c + c).join('');
}

if (hex.length !== 6) return null;

const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);

return { r, g, b };
}

// Преобразование RGB в HEX
function rgbToHex(rgb) {
const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
if (!match) return null;

const toHex = (n) => parseInt(n).toString(16).padStart(2, '0');
return `#${toHex(match[1])}${toHex(match[2])}${toHex(match[3])}`.toUpperCase();
}

// Подгонка размера шрифта
function adjustFontSize(element, text) {
const originalSize = parseFloat(element.dataset.originalFontSize);
let currentSize = originalSize;

// Сохраняем оригинальный текст
const originalText = element.textContent;
element.textContent = text;

// Уменьшаем шрифт, пока текст не поместится
while (element.scrollWidth > element.offsetWidth && currentSize > 8) {
currentSize -= 0.5;
element.style.fontSize = `${currentSize}px`;
}

// Если слишком маленький - возвращаем оригинал
if (currentSize <= 8) {
element.textContent = originalText;
element.style.fontSize = originalSize + 'px';
return false;
}

return true;
}

// Сброс размера шрифта
function resetFontSize(element) {
element.style.fontSize = element.dataset.originalFontSize;
}

// Копирование в буфер обмена
function copyToClipboard(element, text) {
navigator.clipboard.writeText(text).then(() => {
showTooltip(element);
}).catch(err => {
console.error('Ошибка копирования: ', err);
// Fallback для старых браузеров
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
showTooltip(element);
});
}

// Показ подсказки
function showTooltip(element) {
// Удаляем старые подсказки
const oldTooltips = document.querySelectorAll('.copy-tooltip');
oldTooltips.forEach(t => t.remove());

// Создаем новую подсказку
const tooltip = document.createElement('div');
tooltip.className = 'copy-tooltip';
tooltip.textContent = 'Скопировано!';
document.body.appendChild(tooltip);

// Позиционируем подсказку
const rect = element.getBoundingClientRect();
tooltip.style.left = `${rect.left + rect.width / 2}px`;
tooltip.style.top = `${rect.top - 35}px`;

// Удаляем через 2 секунды
setTimeout(() => {
tooltip.remove();
}, 2000);
}
});

Добавлено (2025-06-11, 15:37)
---------------------------------------------
_--------------------

document.addEventListener('DOMContentLoaded', function() {
const colorBlocks = document.querySelectorAll('.custom-rectangle');

colorBlocks.forEach(block => {
// Сохраняем оригинальный размер шрифта и текст
block.dataset.originalFontSize = window.getComputedStyle(block).fontSize;
block.dataset.originalText = block.textContent.trim();

block.addEventListener('click', function(e) {
e.stopPropagation();

// Удаляем старые подсказки
document.querySelectorAll('.copy-tooltip').forEach(t => t.remove());

const currentText = this.textContent.trim();
let newText, format;

// Определяем текущий формат и преобразуем
if (currentText.startsWith('#')) {
const rgb = hexToRgb(currentText);
if (rgb) {
newText = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
format = 'RGB';
adjustFontSize(this, newText);
}
} else if (currentText.startsWith('rgb(')) {
newText = block.dataset.originalText;
format = 'HEX';
resetFontSize(this);
}

if (newText) {
this.textContent = newText;
copyToClipboard(this, newText, format);
}
});
});

function hexToRgb(hex) {
hex = hex.replace('#', '');
if (hex.length === 3) {
hex = hex.split('').map(c => c + c).join('');
}
if (hex.length !== 6) return null;

const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);

return { r, g, b };
}

function adjustFontSize(element, text) {
const originalSize = parseFloat(element.dataset.originalFontSize);
let currentSize = originalSize;

// Временно устанавливаем текст для измерения
element.textContent = text;
element.style.fontSize = originalSize + 'px';

// Уменьшаем шрифт, пока текст не поместится
while (element.scrollWidth > element.offsetWidth && currentSize > 8) {
currentSize -= 1;
element.style.fontSize = currentSize + 'px';
}

// Если слишком маленький - возвращаем оригинальный размер
if (currentSize <= 8) {
element.style.fontSize = originalSize + 'px';
}
}

function resetFontSize(element) {
element.style.fontSize = element.dataset.originalFontSize;
}

function copyToClipboard(element, text, format) {
navigator.clipboard.writeText(text).then(() => {
showTooltip(element, format);
}).catch(err => {
console.error('Ошибка копирования:', err);
// Fallback для старых браузеров
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
showTooltip(element, format);
});
}

function showTooltip(element, format) {
const tooltip = document.createElement('div');
tooltip.className = 'copy-tooltip';
tooltip.textContent = `${format} скопирован!`;

document.body.appendChild(tooltip);

const rect = element.getBoundingClientRect();
const tooltipWidth = tooltip.offsetWidth;

tooltip.style.left = `${rect.left + rect.width/2 - tooltipWidth/2}px`;
tooltip.style.top = `${rect.top - 35}px`;

setTimeout(() => {
tooltip.remove();
}, 2000);
}
});

.custom-rectangle {
cursor: pointer;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 2px 5px;
min-width: 80px; /* Минимальная ширина для сохранения размера */
text-align: center;
display: inline-block;
vertical-align: middle;
transition: font-size 0.2s ease;
}

.copy-tooltip {
position: fixed;
background-color: #333;
color: white;
padding: 6px 12px;
border-radius: 4px;
font-size: 13px;
z-index: 10000;
pointer-events: none;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
animation: fadeInOut 2s ease;
font-family: Arial, sans-serif;
}

.copy-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}

@keyframes fadeInOut {
0% { opacity: 0; transform: translateY(10px); }
20% { opacity: 1; transform: translateY(0); }
80% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-10px); }
}

Добавлено (2025-06-11, 15:45)
---------------------------------------------
document.addEventListener('DOMContentLoaded', function() {
const colorBlocks = document.querySelectorAll('.custom-rectangle');

colorBlocks.forEach(block => {
// Сохраняем оригинальный размер шрифта
const originalSize = window.getComputedStyle(block).fontSize;
block.dataset.originalFontSize = originalSize;
block.style.fontSize = originalSize; // Принудительно устанавливаем

block.addEventListener('click', function(e) {
e.stopPropagation();

// Удаляем старые подсказки
document.querySelectorAll('.copy-tooltip').forEach(t => t.remove());

const currentText = block.textContent.trim();
let format, textToCopy = currentText;

// Определяем текущий формат
if (currentText.startsWith('#')) {
format = 'HEX';
// Показываем RGB, но копируем HEX
const rgb = hexToRgb(currentText);
if (rgb) {
block.textContent = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
adjustFontSize(block);
}
} else if (currentText.startsWith('rgb(')) {
format = 'RGB';
// Показываем HEX, но копируем RGB
const hex = rgbToHex(currentText);
if (hex) {
block.textContent = hex;
resetFontSize(block);
}
}

// Копируем тот формат, который был виден ДО изменения
copyToClipboard(block, textToCopy, format);
});
});

function hexToRgb(hex) {
hex = hex.replace('#', '');
if (hex.length === 3) {
hex = hex.split('').map(c => c + c).join('');
}
if (hex.length !== 6) return null;

const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);

return { r, g, b };
}

function rgbToHex(rgb) {
const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
if (!match) return null;

const toHex = (n) => parseInt(n).toString(16).padStart(2, '0');
return `#${toHex(match[1])}${toHex(match[2])}${toHex(match[3])}`.toUpperCase();
}

function adjustFontSize(element) {
const originalSize = element.dataset.originalFontSize;
let currentSize = parseFloat(originalSize);

// Сбрасываем размер для точного измерения
element.style.fontSize = originalSize;

// Уменьшаем шрифт, пока текст не поместится
while (element.scrollWidth > element.offsetWidth && currentSize > 8) {
currentSize -= 1;
element.style.fontSize = `${currentSize}px`;
}
}

function resetFontSize(element) {
element.style.fontSize = element.dataset.originalFontSize;
}

function copyToClipboard(element, text, format) {
navigator.clipboard.writeText(text).then(() => {
showTooltip(element, format);
}).catch(err => {
console.error('Ошибка копирования:', err);
// Fallback для старых браузеров
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
showTooltip(element, format);
});
}

function showTooltip(element, format) {
const tooltip = document.createElement('div');
tooltip.className = 'copy-tooltip';
tooltip.textContent = `${format} скопирован!`;

document.body.appendChild(tooltip);

const rect = element.getBoundingClientRect();
const tooltipWidth = tooltip.offsetWidth;

// Позиционируем подсказку над элементом по центру
tooltip.style.left = `${rect.left + rect.width/2 - tooltipWidth/2}px`;
tooltip.style.top = `${rect.top - 35}px`;

setTimeout(() => {
tooltip.remove();
}, 2000);
}
});

.custom-rectangle {
cursor: pointer;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 2px 5px;
min-width: 80px;
text-align: center;
display: inline-block;
box-sizing: border-box;
transition: font-size 0.2s ease;
}

.copy-tooltip {
position: fixed;
background-color: #333;
color: white;
padding: 6px 12px;
border-radius: 4px;
font-size: 13px;
z-index: 10000;
pointer-events: none;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
animation: fadeInOut 2s ease;
font-family: Arial, sans-serif;
}

.copy-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}

@keyframes fadeInOut {
0% { opacity: 0; transform: translateY(10px); }
20% { opacity: 1; transform: translateY(0); }
80% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-10px); }
}

Добавлено (2025-06-11, 15:53)
---------------------------------------------
document.addEventListener('DOMContentLoaded', function() {
const colorBlocks = document.querySelectorAll('.custom-rectangle');

colorBlocks.forEach(block => {
// Сохраняем оригинальный HEX
block.dataset.hex = block.textContent.trim();
block.dataset.originalFontSize = window.getComputedStyle(block).fontSize;

block.addEventListener('click', function(e) {
e.stopPropagation();
document.querySelectorAll('.copy-tooltip').forEach(t => t.remove());

const currentText = block.textContent.trim();
let textToCopy, format;

if (currentText.startsWith('RGB')) {
// Переключаем обратно на HEX
textToCopy = block.dataset.hex;
format = 'HEX';
block.innerHTML = textToCopy;
resetFontSize(block);
} else {
// Переключаем на RGB
const rgb = hexToRgb(currentText);
if (rgb) {
format = 'RGB';
textToCopy = `${rgb.r}, ${rgb.g}, ${rgb.b}`;
block.innerHTML = `RGB<br><span class="rgb-values">(${textToCopy})</span>`;
adjustFontSize(block);
}
}

copyToClipboard(block, textToCopy, format);
});
});

function hexToRgb(hex) {
hex = hex.replace('#', '');
if (hex.length === 3) {
hex = hex.split('').map(c => c + c).join('');
}
if (hex.length !== 6) return null;

const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);

return { r, g, b };
}

function adjustFontSize(element) {
const originalSize = element.dataset.originalFontSize;
let currentSize = parseFloat(originalSize);
element.style.fontSize = originalSize;

while (element.scrollHeight > element.offsetHeight && currentSize > 8) {
currentSize -= 1;
element.style.fontSize = `${currentSize}px`;
}
}

function resetFontSize(element) {
element.style.fontSize = element.dataset.originalFontSize;
}

function copyToClipboard(element, text, format) {
const textToCopy = format === 'RGB' ? text : element.dataset.hex;
navigator.clipboard.writeText(textToCopy).then(() => {
showTooltip(element, format);
}).catch(err => {
console.error('Ошибка копирования:', err);
const textarea = document.createElement('textarea');
textarea.value = textToCopy;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
showTooltip(element, format);
});
}

function showTooltip(element, format) {
const tooltip = document.createElement('div');
tooltip.className = 'copy-tooltip';
tooltip.textContent = `${format} скопирован!`;
document.body.appendChild(tooltip);

const rect = element.getBoundingClientRect();
tooltip.style.left = `${rect.left + rect.width/2 - tooltip.offsetWidth/2}px`;
tooltip.style.top = `${rect.top - 35}px`;

setTimeout(() => tooltip.remove(), 2000);
}
});

.custom-rectangle {
cursor: pointer;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 2px 5px;
min-width: 80px;
text-align: center;
display: inline-block;
box-sizing: border-box;
transition: font-size 0.2s ease;
line-height: 1.2;
}

.custom-rectangle .rgb-values {
font-size: 0.8em;
opacity: 0.9;
display: block;
line-height: 1.3;
}

.copy-tooltip {
position: fixed;
background-color: #333;
color: white;
padding: 6px 12px;
border-radius: 4px;
font-size: 13px;
z-index: 10000;
pointer-events: none;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
animation: fadeInOut 2s ease;
font-family: Arial, sans-serif;
}

.copy-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}

@keyframes fadeInOut {
0% { opacity: 0; transform: translateY(10px); }
20% { opacity: 1; transform: translateY(0); }
80% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-10px); }
}

Добавлено (2025-06-16, 08:09)
---------------------------------------------
document.addEventListener('DOMContentLoaded', function() {
const colorBlocks = document.querySelectorAll('.custom-rectangle');

colorBlocks.forEach(block => {
// Инициализация блока
block.dataset.hex = block.textContent.trim();
block.dataset.originalFontSize = '15px'; // Фиксированный размер как в вашем CSS
block.style.fontSize = block.dataset.originalFontSize;
block.style.display = 'flex';
block.style.alignItems = 'center';
block.style.justifyContent = 'center';
block.style.flexDirection = 'column';
block.style.width = '80px'; // Фиксированная ширина
block.style.height = '40px'; // Фиксированная высота

block.addEventListener('click', function(e) {
e.stopPropagation();
document.querySelectorAll('.copy-tooltip').forEach(t => t.remove());

if (block.classList.contains('show-rgb')) {
// Переключаем обратно на HEX
block.innerHTML = block.dataset.hex;
block.classList.remove('show-rgb');
copyToClipboard(block, block.dataset.hex, 'HEX');
} else {
// Переключаем на RGB
const rgb = hexToRgb(block.dataset.hex);
if (rgb) {
block.innerHTML = `
<span class="rgb-title">RGB</span>
<span class="rgb-values">${rgb.r}, ${rgb.g}, ${rgb.b}</span>
`;
block.classList.add('show-rgb');
const rgbText = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
copyToClipboard(block, rgbText, 'RGB');

// Автоподбор размера шрифта для RGB
adjustFontSize(block);
}
}
});
});

function hexToRgb(hex) {
hex = hex.replace('#', '');
if (hex.length === 3) {
hex = hex.split('').map(c => c + c).join('');
}
if (hex.length !== 6) return null;

const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);

return { r, g, b };
}

function adjustFontSize(element) {
const rgbValues = element.querySelector('.rgb-values');
if (!rgbValues) return;

let fontSize = 15; // Начальный размер
rgbValues.style.fontSize = fontSize + 'px';

// Уменьшаем шрифт пока текст не поместится
while (rgbValues.scrollWidth > element.offsetWidth - 10 && fontSize > 10) {
fontSize -= 0.5;
rgbValues.style.fontSize = fontSize + 'px';
}
}

function copyToClipboard(element, text, format) {
navigator.clipboard.writeText(text).then(() => {
showTooltip(element, format);
}).catch(err => {
console.error('Ошибка копирования:', err);
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
showTooltip(element, format);
});
}

function showTooltip(element, format) {
const tooltip = document.createElement('div');
tooltip.className = 'copy-tooltip';
tooltip.textContent = `${format} скопирован!`;
document.body.appendChild(tooltip);

const rect = element.getBoundingClientRect();
tooltip.style.left = `${rect.left + rect.width/2 - tooltip.offsetWidth/2}px`;
tooltip.style.top = `${rect.top - 35}px`;

setTimeout(() => tooltip.remove(), 2000);
}
});

.custom-rectangle {
cursor: pointer;
position: relative;
white-space: nowrap;
overflow: hidden;
padding: 2px;
box-sizing: border-box;
border: 0.5px solid currentColor;
border-radius: 8px;
text-align: center;
color: inherit;
}

.custom-rectangle.show-rgb {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.rgb-title {
font-size: 12px;
font-weight: bold;
margin-bottom: 2px;
line-height: 1;
}

.rgb-values {
font-size: 11px; /* Начальный размер, будет адаптироваться */
line-height: 1;
white-space: nowrap;
}

.copy-tooltip {
position: fixed;
background-color: #333;
color: white;
padding: 6px 12px;
border-radius: 4px;
font-size: 13px;
z-index: 10000;
pointer-events: none;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
animation: fadeInOut 2s ease;
font-family: Arial, sans-serif;
}

.copy-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}

@keyframes fadeInOut {
0% { opacity: 0; transform: translateY(10px); }
20% { opacity: 1; transform: translateY(0); }
80% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-10px); }
}

Добавлено (2025-06-16, 08:16)
---------------------------------------------
document.addEventListener('DOMContentLoaded', function() {
const colorBlocks = document.querySelectorAll('.custom-rectangle');

colorBlocks.forEach(block => {
// Инициализация блока
const hexColor = block.textContent.trim();
block.dataset.hex = hexColor;
block.dataset.rgb = hexToRgbString(hexColor);
block.style.fontSize = '15px';
block.style.width = '80px';
block.style.height = '40px';
block.style.display = 'flex';
block.style.alignItems = 'center';
block.style.justifyContent = 'center';
block.style.flexDirection = 'column';

block.addEventListener('click', function(e) {
e.stopPropagation();
document.querySelectorAll('.copy-tooltip').forEach(t => t.remove());

if (block.classList.contains('show-rgb')) {
// Переключаем на HEX и копируем HEX
block.innerHTML = block.dataset.hex;
block.classList.remove('show-rgb');
copyToClipboard(block, block.dataset.hex, 'HEX');
} else {
// Переключаем на RGB и копируем HEX (при первом клике)
block.innerHTML = `
<span class="rgb-title">RGB</span>
<span class="rgb-values">${block.dataset.rgb.replace('rgb(', '').replace(')', '')}</span>
`;
block.classList.add('show-rgb');
copyToClipboard(block, block.dataset.hex, 'HEX'); // Копируем HEX при первом клике

// Автоподбор размера шрифта
adjustFontSize(block);
}
});

// Двойной клик для копирования RGB
block.addEventListener('dblclick', function(e) {
e.stopPropagation();
if (block.classList.contains('show-rgb')) {
copyToClipboard(block, block.dataset.rgb, 'RGB');
}
});
});

function hexToRgbString(hex) {
hex = hex.replace('#', '');
if (hex.length === 3) {
hex = hex.split('').map(c => c + c).join('');
}
if (hex.length !== 6) return null;

const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);

return `rgb(${r}, ${g}, ${b})`;
}

function adjustFontSize(element) {
const rgbValues = element.querySelector('.rgb-values');
if (!rgbValues) return;

let fontSize = 11;
rgbValues.style.fontSize = fontSize + 'px';

while (rgbValues.scrollWidth > element.offsetWidth - 10 && fontSize > 8) {
fontSize -= 0.5;
rgbValues.style.fontSize = fontSize + 'px';
}
}

function copyToClipboard(element, text, format) {
navigator.clipboard.writeText(text).then(() => {
showTooltip(element, format);
}).catch(err => {
console.error('Ошибка копирования:', err);
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
showTooltip(element, format);
});
}

function showTooltip(element, format) {
const tooltip = document.createElement('div');
tooltip.className = 'copy-tooltip';
tooltip.textContent = `${format} скопирован!`;
document.body.appendChild(tooltip);

const rect = element.getBoundingClientRect();
tooltip.style.left = `${rect.left + rect.width/2 - tooltip.offsetWidth/2}px`;
tooltip.style.top = `${rect.top - 35}px`;

setTimeout(() => tooltip.remove(), 2000);
}
});

Добавлено (2025-06-16, 08:25)
---------------------------------------------
document.addEventListener('DOMContentLoaded', function() {
const colorBlocks = document.querySelectorAll('.custom-rectangle');

colorBlocks.forEach(block => {
// Инициализация блока
const hexColor = block.textContent.trim();
block.dataset.hex = hexColor;
block.dataset.rgb = hexToRgbString(hexColor);
block.style.fontSize = '15px';
block.style.width = '80px';
block.style.height = '40px';
block.style.display = 'flex';
block.style.alignItems = 'center';
block.style.justifyContent = 'center';
block.style.flexDirection = 'column';

block.addEventListener('click', function(e) {
e.stopPropagation();
document.querySelectorAll('.copy-tooltip').forEach(t => t.remove());

if (block.classList.contains('show-rgb')) {
// Если сейчас показан RGB - переключаем на HEX и копируем RGB
block.innerHTML = block.dataset.hex;
block.classList.remove('show-rgb');
copyToClipboard(block, block.dataset.rgb, 'RGB');
} else {
// Если сейчас показан HEX - переключаем на RGB и копируем HEX
block.innerHTML = `
<span class="rgb-title">RGB</span>
<span class="rgb-values">${block.dataset.rgb.replace('rgb(', '').replace(')', '')}</span>
`;
block.classList.add('show-rgb');
copyToClipboard(block, block.dataset.hex, 'HEX');
adjustFontSize(block);
}
});
});

function hexToRgbString(hex) {
hex = hex.replace('#', '');
if (hex.length === 3) {
hex = hex.split('').map(c => c + c).join('');
}
if (hex.length !== 6) return 'rgb(0, 0, 0)';

const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);

return `rgb(${r}, ${g}, ${b})`;
}

function adjustFontSize(element) {
const rgbValues = element.querySelector('.rgb-values');
if (!rgbValues) return;

let fontSize = 11;
rgbValues.style.fontSize = fontSize + 'px';

while (rgbValues.scrollWidth > element.offsetWidth - 10 && fontSize > 8) {
fontSize -= 0.5;
rgbValues.style.fontSize = fontSize + 'px';
}
}

function copyToClipboard(element, text, format) {
navigator.clipboard.writeText(text).then(() => {
showTooltip(element, format);
}).catch(err => {
console.error('Ошибка копирования:', err);
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
showTooltip(element, format);
});
}

function showTooltip(element, format) {
const tooltip = document.createElement('div');
tooltip.className = 'copy-tooltip';
tooltip.textContent = `${format} скопирован!`;
document.body.appendChild(tooltip);

const rect = element.getBoundingClientRect();
tooltip.style.left = `${rect.left + rect.width/2 - tooltip.offsetWidth/2}px`;
tooltip.style.top = `${rect.top - 35}px`;

setTimeout(() => tooltip.remove(), 2000);
}
});

.custom-rectangle {
cursor: pointer;
position: relative;
white-space: nowrap;
overflow: hidden;
padding: 2px;
box-sizing: border-box;
border: 0.5px solid currentColor;
border-radius: 8px;
text-align: center;
color: inherit;
}

.custom-rectangle.show-rgb {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.rgb-title {
font-size: 12px;
font-weight: bold;
margin-bottom: 2px;
line-height: 1;
}

.rgb-values {
font-size: 11px;
line-height: 1;
white-space: nowrap;
}

.copy-tooltip {
position: fixed;
background-color: #333;
color: white;
padding: 6px 12px;
border-radius: 4px;
font-size: 13px;
z-index: 10000;
pointer-events: none;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
animation: fadeInOut 2s ease;
font-family: Arial, sans-serif;
}

.copy-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}

@keyframes fadeInOut {
0% { opacity: 0; transform: translateY(10px); }
20% { opacity: 1; transform: translateY(0); }
80% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-10px); }
}

Добавлено (2025-06-16, 08:40)
---------------------------------------------
import java.awt.*;
import java.awt.datatransfer.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.border.*;

public class ColorBlock extends JPanel {
private String hexColor;
private String rgbColor;
private boolean showRgb = false;
private JLabel titleLabel;
private JLabel valueLabel;

public ColorBlock(String hexColor) {
this.hexColor = hexColor;
this.rgbColor = hexToRgbString(hexColor);

setPreferredSize(new Dimension(80, 40));
setLayout(new BoxLayout(this, BoxLayout.Y_AXIS));
setOpaque(true);
setBorder(new LineBorder(new Color(0, 0, 0, 50), 1, true));

// Инициализация компонентов
titleLabel = new JLabel("", SwingConstants.CENTER);
valueLabel = new JLabel("", SwingConstants.CENTER);

titleLabel.setFont(new Font("Arial", Font.BOLD, 12));
valueLabel.setFont(new Font("Arial", Font.PLAIN, 11));

add(titleLabel);
add(valueLabel);

updateDisplay();
setTextColorBasedOnBackground();

// Обработчик клика
addMouseListener(new MouseAdapter() {
@Override
public void mouseClicked(MouseEvent e) {
toggleDisplay();
copyToClipboard();
}
});
}

private void toggleDisplay() {
showRgb = !showRgb;
updateDisplay();
setTextColorBasedOnBackground();
}

private void updateDisplay() {
if (showRgb) {
titleLabel.setText("RGB");
valueLabel.setText(rgbColor.replace("rgb(", "").replace(")", ""));
} else {
titleLabel.setText("");
valueLabel.setText(hexColor);
}
}

private void setTextColorBasedOnBackground() {
Color bgColor = hexToColor(hexColor);
setBackground(bgColor);

// Вычисление яркости фона (формула W3C)
double brightness = (bgColor.getRed() * 299 +
bgColor.getGreen() * 587 +
bgColor.getBlue() * 114) / 1000.0;

// Установка цвета текста
Color textColor = brightness > 128 ? Color.BLACK : Color.WHITE;
titleLabel.setForeground(textColor);
valueLabel.setForeground(textColor);

// Установка цвета границы
Color borderColor = new Color(textColor.getRed(),
textColor.getGreen(),
textColor.getBlue(), 80);
setBorder(new LineBorder(borderColor, 1, true));
}

private void copyToClipboard() {
String textToCopy = showRgb ? rgbColor : hexColor;
String format = showRgb ? "RGB" : "HEX";

StringSelection stringSelection = new StringSelection(textToCopy);
Clipboard clipboard = Toolkit.getDefaultToolkit().getSystemClipboard();
clipboard.setContents(stringSelection, null);

showTooltip(format);
}

private void showTooltip(String format) {
JWindow tooltip = new JWindow();
tooltip.setLayout(new BorderLayout());

JLabel label = new JLabel(format + " скопирован!", SwingConstants.CENTER);
label.setForeground(Color.WHITE);
label.setBackground(new Color(51, 51, 51));
label.setOpaque(true);
label.setBorder(new EmptyBorder(6, 12, 6, 12));

tooltip.add(label);
tooltip.pack();

Point location = getLocationOnScreen();
tooltip.setLocation(location.x + getWidth()/2 - tooltip.getWidth()/2,
location.y - tooltip.getHeight());

tooltip.setVisible(true);

new Timer(2000, e -> {
tooltip.dispose();
((Timer)e.getSource()).stop();
}).start();
}

private static String hexToRgbString(String hex) {
Color color = hexToColor(hex);
return String.format("rgb(%d, %d, %d)", color.getRed(), color.getGreen(), color.getBlue());
}

private static Color hexToColor(String hex) {
hex = hex.replace("#", "");
if (hex.length() == 3) {
hex = "" + hex.charAt(0) + hex.charAt(0) +
hex.charAt(1) + hex.charAt(1) +
hex.charAt(2) + hex.charAt(2);
}
if (hex.length() != 6) return Color.BLACK;

return new Color(
Integer.parseInt(hex.substring(0, 2), 16),
Integer.parseInt(hex.substring(2, 4), 16),
Integer.parseInt(hex.substring(4, 6), 16)
);
}

public static void main(String[] args) {
SwingUtilities.invokeLater(() -> {
JFrame frame = new JFrame("Color Blocks");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLayout(new FlowLayout());

// Пример цветов
String[] colors = {"#654648", "#040640", "#873826", "#ED8981",
"#576104", "#0000FF", "#5AD264", "#7082FF"};

for (String color : colors) {
frame.add(new ColorBlock(color));
}

frame.pack();
frame.setVisible(true);
});
}
}
.custom-rectangle {
cursor: pointer;
position: relative;
white-space: nowrap;
overflow: hidden;
padding: 2px;
box-sizing: border-box;
text-align: center;
transition: color 0.3s ease, border-color 0.3s ease;
}

.custom-rectangle.show-rgb {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.rgb-title {
font-size: 12px;
font-weight: bold;
margin-bottom: 2px;
line-height: 1;
}

.rgb-values {
font-size: 11px;
line-height: 1;
white-space: nowrap;
}

.copy-tooltip {
position: fixed;
background-color: #333;
color: white;
padding: 6px 12px;
border-radius: 4px;
font-size: 13px;
z-index: 10000;
pointer-events: none;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
animation: fadeInOut 2s ease;
font-family: Arial, sans-serif;
}

.copy-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}

@keyframes fadeInOut {
0% { opacity: 0; transform: translateY(10px); }
20% { opacity: 1; transform: translateY(0); }
80% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-10px); }
}

Добавлено (2025-06-16, 08:43)
---------------------------------------------
document.addEventListener('DOMContentLoaded', function() {
const colorBlocks = document.querySelectorAll('.custom-rectangle');

colorBlocks.forEach(block => {
// Инициализация блока
const hexColor = block.textContent.trim();
block.dataset.hex = hexColor;
block.dataset.rgb = hexToRgbString(hexColor);

// Установка базовых стилей
block.style.fontSize = '15px';
block.style.width = '80px';
block.style.height = '40px';
block.style.display = 'flex';
block.style.alignItems = 'center';
block.style.justifyContent = 'center';
block.style.flexDirection = 'column';
block.style.border = '0.5px solid';
block.style.borderRadius = '8px';
block.style.textAlign = 'center';
block.style.boxSizing = 'border-box';

// Установка контрастного цвета текста и границы
updateTextColor(block, hexColor);

block.addEventListener('click', function(e) {
e.stopPropagation();
document.querySelectorAll('.copy-tooltip').forEach(t => t.remove());

if (block.classList.contains('show-rgb')) {
// Переключаем на HEX и копируем RGB
block.innerHTML = block.dataset.hex;
block.classList.remove('show-rgb');
copyToClipboard(block, block.dataset.rgb, 'RGB');
} else {
// Переключаем на RGB и копируем HEX
block.innerHTML = `
<span class="rgb-title">RGB</span>
<span class="rgb-values">${block.dataset.rgb.replace('rgb(', '').replace(')', '')}</span>
`;
block.classList.add('show-rgb');
copyToClipboard(block, block.dataset.hex, 'HEX');
adjustFontSize(block);
}

// Обновляем цвет текста после изменения содержимого
updateTextColor(block, block.dataset.hex);
});
});

// Функция обновления цвета текста и границы
function updateTextColor(element, hexColor) {
const rgb = hexToRgb(hexColor);
if (!rgb) return;

// Вычисляем яркость фона по формуле W3C
const brightness = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;

// Устанавливаем цвет текста и границы
element.style.color = brightness > 128 ? '#000000' : '#FFFFFF';
element.style.borderColor = brightness > 128 ? 'rgba(0,0,0,0.3)' : 'rgba(255,255,255,0.3)';
}

// Преобразование HEX в RGB объект
function hexToRgb(hex) {
hex = hex.replace('#', '');

// Расширяем сокращенную запись HEX (#abc → #aabbcc)
if (hex.length === 3) {
hex = hex.split('').map(c => c + c).join('');
}

if (hex.length !== 6) return null;

return {
r: parseInt(hex.substring(0, 2), 16),
g: parseInt(hex.substring(2, 4), 16),
b: parseInt(hex.substring(4, 6), 16)
};
}

// Преобразование HEX в RGB строку
function hexToRgbString(hex) {
const rgb = hexToRgb(hex);
return rgb ? `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` : 'rgb(0, 0, 0)';
}

// Подгонка размера шрифта для RGB значений
function adjustFontSize(element) {
const rgbValues = element.querySelector('.rgb-values');
if (!rgbValues) return;

let fontSize = 11; // Начальный размер
rgbValues.style.fontSize = fontSize + 'px';

// Уменьшаем шрифт, пока текст не поместится
while (rgbValues.scrollWidth > element.offsetWidth - 10 && fontSize > 8) {
fontSize -= 0.5;
rgbValues.style.fontSize = fontSize + 'px';
}
}

// Копирование в буфер обмена
function copyToClipboard(element, text, format) {
navigator.clipboard.writeText(text).then(() => {
showTooltip(element, format);
}).catch(err => {
console.error('Ошибка копирования:', err);
// Fallback для старых браузеров
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
showTooltip(element, format);
});
}

// Показ подсказки о копировании
function showTooltip(element, format) {
const tooltip = document.createElement('div');
tooltip.className = 'copy-tooltip';
tooltip.textContent = `${format} скопирован!`;
document.body.appendChild(tooltip);

const rect = element.getBoundingClientRect();
tooltip.style.left = `${rect.left + rect.width/2 - tooltip.offsetWidth/2}px`;
tooltip.style.top = `${rect.top - 35}px`;

setTimeout(() => {
tooltip.remove();
}, 2000);
}
});

Добавлено (2025-06-16, 10:29)
---------------------------------------------
document.addEventListener('DOMContentLoaded', function() {
const colorBlocks = document.querySelectorAll('.custom-rectangle');

colorBlocks.forEach(block => {
// Инициализация блока
const hexColor = block.textContent.trim();
block.dataset.hex = hexColor;
block.dataset.rgb = hexToRgbString(hexColor);

// Базовые стили
block.style.fontSize = '15px';
block.style.width = '80px';
block.style.height = '40px';
block.style.display = 'flex';
block.style.alignItems = 'center';
block.style.justifyContent = 'center';
block.style.flexDirection = 'column';
block.style.border = '0.5px solid currentColor';
block.style.borderRadius = '8px';
block.style.textAlign = 'center';
block.style.boxSizing = 'border-box';
block.style.color = 'inherit'; // Сохраняем цвет темы

// Применяем тонкий контур
applySubtleTextOutline(block, hexColor);

block.addEventListener('click', function(e) {
e.stopPropagation();
document.querySelectorAll('.copy-tooltip').forEach(t => t.remove());

if (block.classList.contains('show-rgb')) {
// Переключаем на HEX и копируем RGB
block.innerHTML = block.dataset.hex;
block.classList.remove('show-rgb');
copyToClipboard(block, block.dataset.rgb, 'RGB');
} else {
// Переключаем на RGB и копируем HEX
block.innerHTML = `
<span class="rgb-title">RGB</span>
<span class="rgb-values">${block.dataset.rgb.replace('rgb(', '').replace(')', '')}</span>
`;
block.classList.add('show-rgb');
copyToClipboard(block, block.dataset.hex, 'HEX');
adjustFontSize(block);
}

// Обновляем контур
applySubtleTextOutline(block, block.dataset.hex);
});
});

// Функция для тонкого контура
function applySubtleTextOutline(element, hexColor) {
const rgb = hexToRgb(hexColor);
if (!rgb) return;

const brightness = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;

// Тонкие настройки контура
if (brightness > 160) {
// Для светлых фонов - очень тонкий темный контур
element.style.textShadow = `
0.5px 0.5px 0.7px rgba(0,0,0,0.3),
-0.5px -0.5px 0.7px rgba(0,0,0,0.3),
0.5px -0.5px 0.7px rgba(0,0,0,0.3),
-0.5px 0.5px 0.7px rgba(0,0,0,0.3)
`;
} else if (brightness > 60) {
// Для средних фонов - нейтральный контур
element.style.textShadow = `
0.3px 0.3px 0.5px rgba(0,0,0,0.2),
-0.3px -0.3px 0.5px rgba(0,0,0,0.2),
0 0 2px rgba(255,255,255,0.4)
`;
} else {
// Для темных фонов - тонкий светлый контур
element.style.textShadow = `
0.4px 0.4px 0.6px rgba(255,255,255,0.4),
-0.4px -0.4px 0.6px rgba(255,255,255,0.4),
0 0 3px rgba(255,255,255,0.3)
`;
}
}

// Остальные функции остаются без изменений
function hexToRgb(hex) {
hex = hex.replace('#', '');
if (hex.length === 3) hex = hex.split('').map(c => c + c).join('');
if (hex.length !== 6) return null;
return {
r: parseInt(hex.substring(0, 2), 16),
g: parseInt(hex.substring(2, 4), 16),
b: parseInt(hex.substring(4, 6), 16)
};
}

function hexToRgbString(hex) {
const rgb = hexToRgb(hex);
return rgb ? `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` : 'rgb(0, 0, 0)';
}

function adjustFontSize(element) {
const rgbValues = element.querySelector('.rgb-values');
if (!rgbValues) return;
let fontSize = 11;
rgbValues.style.fontSize = fontSize + 'px';
while (rgbValues.scrollWidth > element.offsetWidth - 10 && fontSize > 8) {
fontSize -= 0.5;
rgbValues.style.fontSize = fontSize + 'px';
}
}

function copyToClipboard(element, text, format) {
navigator.clipboard.writeText(text).then(() => {
showTooltip(element, format);
}).catch(err => {
console.error('Ошибка копирования:', err);
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
showTooltip(element, format);
});
}

function showTooltip(element, format) {
const tooltip = document.createElement('div');
tooltip.className = 'copy-tooltip';
tooltip.textContent = `${format} скопирован!`;
document.body.appendChild(tooltip);
const rect = element.getBoundingClientRect();
tooltip.style.left = `${rect.left + rect.width/2 - tooltip.offsetWidth/2}px`;
tooltip.style.top = `${rect.top - 35}px`;
setTimeout(() => tooltip.remove(), 2000);
}
});
/* Пример тонкого контура для светлого фона */
text-shadow:
0.5px 0.5px 0.7px rgba(0,0,0,0.3),
-0.5px -0.5px 0.7px rgba(0,0,0,0.3);

/* Пример для темного фона */
text-shadow:
0.4px 0.4px 0.6px rgba(255,255,255,0.4),
0 0 3px rgba(255,255,255,0.3);