შეტყობინებების დაფა https://saiti-arqivi.ucoz.com/board/ შეტყობინებების დაფა Sat, 23 Nov 2024 04:27:41 GMT uCoz Web-Service მაგარი რეიტინგი {საჩვენებელი} <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> <meta name="apple-mobile-web-app-title" content="CodePen"> <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111" /> <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script> <title>reduced rating</title> <link rel="canonical" href="https://codepen.io/nucular/pen/VeXqjg"> <style> html, body { font-family: "Roboto", sans-serif; font-size: 20px; color: #222; } h1 { font-weight: normal; } .container { margin-left: auto; margin-right: auto; max-width: 800px; } #rating { display: inline-block; width: 100%; height: 32px; background-color: #eee; border: 1px solid #999; border-radius: 5px; } #rating-inner { display: inline-block; width: 0px; height: 32px; background-color: #58f; pointer-events: none; } </style> <script> window.console = window.console || function(t) {}; </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> </head> <body translate="no"> <div class="container"> <h1>reduced rating</h1> <span id="rating"> <span id="rating-inner"></span> </span> <div><span id="result">0</span> stars</div> </div> <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script id="rendered-js" > function gcd(u, v) { // simple cases (termination) if (u == v) return u; if (u == 0) return v; if (v == 0) return u; // look for factors of 2 if (~u & 1) {// u is even if (v & 1) // v is odd return gcd(u >> 1, v);else // both u and v are even return gcd(u >> 1, v >> 1) << 1; } if (~v & 1) // u is odd, v is even return gcd(u, v >> 1); // reduce larger argument if (u > v) return gcd(u - v >> 1, v); return gcd(v - u >> 1, u); } function ratingText(x, w) { var d = gcd(x, w); var u = x / d; var v = w / d; if (u / v == 0) return "0";else if (u / v == 1) return "1/1"; return Math.round(u) + "/" + Math.round(v); } var steps = 1; var current = 0; $(function () { $("#rating").on("mousemove", function (e) { var w = $(e.target).width(); var n = Math.ceil(e.offsetX * steps / w) / steps; $("#result").text(ratingText(n * steps, steps)); $("#rating-inner").css("width", n * w); if (n != current) $("#rating-inner").css("background-color", "#ccc");else $("#rating-inner").css("background-color", "#58f"); }).on("mousedown", function (e) { var w = $(e.target).width(); current = Math.ceil(e.offsetX * steps / w) / steps; }).on("mouseleave", function (e) { var w = $(e.target).width(); $("#result").text(ratingText(current * steps, steps)); $("#rating-inner").css("width", current * w).css("background-color", "#58f"); }); $(window).on("resize", function (e) { var w = $("#rating").width(); steps = w; $("#result").text(ratingText(current * steps, steps)); $("#rating-inner").css("width", current * w).css("background-color", "#58f"); }); steps = $("#rating").width(); }); //# sourceURL=pen.js </script> </body> </html> https://saiti-arqivi.ucoz.com/board/23-1-0-1727 რეიტინგი საიტისათვის https://saiti-arqivi.ucoz.com/board/23-1-0-1727 Sat, 23 Nov 2024 04:27:41 GMT მაგარი კალენდარი ჩემი საიტისათვის {საჩვენებელი} <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> <meta name="apple-mobile-web-app-title" content="CodePen"> <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111" /> <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script> <title>React Simple Calendar</title> <link rel="canonical" href="https://codepen.io/asrdesignsol/pen/KKVEwVo"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <style> .vertical-center { display: flex; justify-content: center; align-items: center; } body { background: #EFEFEF; } .row { display: flex; width: 100%; } .calendar { display: block; background: #FFFFFF; width: 330px; border: solid 1px #CCCCCC; margin: 10px auto; box-shadow: 0 0 15px 0 #C0C0C0; font-size: 1.3rem; text-align: center; border-radius: 8px; padding: 38px; font-size: 16px; } .calendar header { display: flex; justify-content: center; align-items: center; cursor: default; font-size: 1.4rem; display: block; font-weight: bold; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #00ABEE; } .calendar header .month-display { align-items: center; height: 40px; } .calendar header .month-label { flex: 1; text-align: left; padding-left: 10px; font-size: 16px; } .calendar header .arrow { flex-basis: 6%; font-weight: bold; cursor: pointer; transition: background 0.2s; height: 100%; display: flex; justify-content: center; align-items: center; } .calendar .week:first-child { border-top: none; } .calendar .day-names { color: #00ABEE; font-weight: bold; cursor: default; font-size: 16px; } .calendar .day-names .day { cursor: default; } .calendar .day-names .day:hover { background: inherit; } .calendar .day { display: flex; justify-content: center; align-items: center; flex: 1; height: 35px; cursor: pointer; transition: all 0.2s; padding: 6px; } .calendar .day:hover { background: #EFEFEF; } .calendar .day:first-child { border-left: none; } .calendar .day.today { background: #d5f3ff; border-radius: 50%; width: 35px; max-width: 35px; height: 35px; } .calendar .day.different-month { color: #C0C0C0; } .calendar .day.selected { background: #00ABEE; color: #FFFFFF; border-radius: 50%; width: 35px; max-width: 35px; height: 35px; } </style> </head> <body translate="no"> <div id="cal"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script> <script src='https://momentjs.com/downloads/moment.min.js'></script> <script id="rendered-js" > class Calendar extends React.Component { constructor(props) { super(props); this.state = { month: moment(), selected: moment().startOf('day') }; this.previous = this.previous.bind(this); this.next = this.next.bind(this); } previous() { const { month } = this.state; this.setState({ month: month.subtract(1, 'month') }); } next() { const { month } = this.state; this.setState({ month: month.add(1, 'month') }); } select(day) { this.setState({ selected: day.date, month: day.date.clone() }); } renderWeeks() { let weeks = []; let done = false; let date = this.state.month.clone().startOf("month").add("w" - 1).day("Sunday"); let count = 0; let monthIndex = date.month(); const { selected, month } = this.state; while (!done) {if (window.CP.shouldStopExecution(0)) break; weeks.push( /*#__PURE__*/ React.createElement(Week, { key: date, date: date.clone(), month: month, select: day => this.select(day), selected: selected })); date.add(1, "w"); done = count++ > 2 && monthIndex !== date.month(); monthIndex = date.month(); }window.CP.exitedLoop(0); return weeks; } renderMonthLabel() { const { month } = this.state; return /*#__PURE__*/React.createElement("span", { className: "month-label" }, month.format("MMMM YYYY")); } render() { return /*#__PURE__*/( React.createElement("section", { className: "calendar" }, /*#__PURE__*/ React.createElement("header", { className: "header" }, /*#__PURE__*/ React.createElement("div", { className: "month-display row" }, this.renderMonthLabel(), /*#__PURE__*/ React.createElement("i", { className: "arrow fa fa-angle-left", onClick: this.previous }), /*#__PURE__*/ React.createElement("i", { className: "arrow fa fa-angle-right", onClick: this.next })), /*#__PURE__*/ React.createElement(DayNames, null)), this.renderWeeks())); }} class DayNames extends React.Component { render() { return /*#__PURE__*/( React.createElement("div", { className: "row day-names" }, /*#__PURE__*/ React.createElement("span", { className: "day" }, "S"), /*#__PURE__*/ React.createElement("span", { className: "day" }, "M"), /*#__PURE__*/ React.createElement("span", { className: "day" }, "T"), /*#__PURE__*/ React.createElement("span", { className: "day" }, "W"), /*#__PURE__*/ React.createElement("span", { className: "day" }, "T"), /*#__PURE__*/ React.createElement("span", { className: "day" }, "F"), /*#__PURE__*/ React.createElement("span", { className: "day" }, "S"))); }} class Week extends React.Component { render() { let days = []; let { date } = this.props; const { month, selected, select } = this.props; for (var i = 0; i < 7; i++) {if (window.CP.shouldStopExecution(1)) break; let day = { name: date.format("dd").substring(0, 1), number: date.date(), isCurrentMonth: date.month() === month.month(), isToday: date.isSame(new Date(), "day"), date: date }; days.push( /*#__PURE__*/ React.createElement(Day, { day: day, selected: selected, select: select })); date = date.clone(); date.add(1, "day"); }window.CP.exitedLoop(1); return /*#__PURE__*/( React.createElement("div", { className: "row week", key: days[0] }, days)); }} class Day extends React.Component { render() { const { day, day: { date, isCurrentMonth, isToday, number }, select, selected } = this.props; return /*#__PURE__*/( React.createElement("span", { key: date.toString(), className: "day" + (isToday ? " today" : "") + (isCurrentMonth ? "" : " different-month") + (date.isSame(selected) ? " selected" : ""), onClick: () => select(day) }, number)); }} ReactDOM.render( /*#__PURE__*/React.createElement(Calendar, null), document.getElementById('cal')); //# sourceURL=pen.js </script> <script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js"></script> </body> </html> https://saiti-arqivi.ucoz.com/board/3-1-0-1717 კალენდრები https://saiti-arqivi.ucoz.com/board/3-1-0-1717 Sat, 23 Nov 2024 03:37:07 GMT მაგარი საათი {საჩვენებელი} <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> <meta name="apple-mobile-web-app-title" content="CodePen"> <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111" /> <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script> <title>Majora's clock tower</title> <link rel="canonical" href="https://codepen.io/alex3o0/pen/abVKQxY"> <style> body { background-color: #f4f4dd; } #seconds, #minutes, #hours { position: fixed; border-radius: 50%; top: calc(50% - 127px); left: calc(50% - 127px); transform: rotateZ(0deg); transition: all 0.3s cubic-bezier(0.77, 1.76, 0.4, 0.77); width: 255px; height: 255px; background-image: url("https://i.pinimg.com/originals/59/28/66/5928669a17321feb5f00e808d6b61bc4.png"); background-size: 255px; background-repeat: no-repeat; background-position: center; z-index: 1; } #minutes { top: calc(50% - 100px); left: calc(50% - 100px); width: 200px; height: 200px; background-size: 200px; z-index: 2; } #hours { top: calc(50% - 75px); left: calc(50% - 75px); background-size: 200px; width: 150px; height: 150px; z-index: 3; } #hours #coin { position: relative; top: calc(100% - 48px); left: calc(50% - 22px); height: 45px; width: 45px; border-radius: 50%; z-index: 4; perspective: 2000px; } #hours #coin #shadow { position: absolute; top: 0; left: 0; background-color: #221E1C; box-shadow: inset -1px -1px 5px 5px rgba(0, 0, 0, 0.7); width: 45px; height: 45px; border-radius: 50%; z-index: 5; } #hours #coin #moon { position: absolute; top: 0; left: 0; background-image: url("https://devartiral.com/majoras-moon.png"); background-size: cover; background-position: center; border-radius: 50%; width: 45px; height: 45px; perspective: 2000px; backface-visibility: hidden; transform: rotateY(180deg); transition: all 0.5s cubic-bezier(0.77, 1.76, 0.4, 0.77) 0.5s; z-index: 6; } #hours #coin #moon.night { transform: rotateY(0deg); } #hours #coin #sun { position: absolute; top: 0; left: 0; background-image: url("https://devartiral.com/majoras-sun.png"); background-size: cover; background-position: center; border-radius: 50%; width: 45px; height: 45px; perspective: 2000px; backface-visibility: hidden; transform: rotateY(0deg); transition: all 0.5s cubic-bezier(0.77, 1.76, 0.4, 0.77) 0.5s; z-index: 7; } #hours #coin #sun.night { transform: rotateY(180deg); } #spike { width: 2px; height: 130px; background-color: firebrick; box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.5); position: fixed; top: calc(50% - 130px); left: 50%; transform: translateX(calc(1px - 50%)); z-index: 8; } </style> <script> window.console = window.console || function(t) {}; </script> </head> <body translate="no"> <!-- #CodePenChallenge: Timekeeping --> <div id="seconds"></div> <div id="minutes"></div> <div id="hours"> <div id="coin"> <div id="shadow"></div> <div id="moon"></div> <div id="sun"></div> </div> </div> <div id="spike"></div> <script id="rendered-js" > const secondsLeg = document.getElementById("seconds"); const minutesLeg = document.getElementById("minutes"); const hoursLeg = document.getElementById("hours"); const sun = document.getElementById("sun"); const moon = document.getElementById("moon"); const getTime = () => { const time = new Date(); return { hours: time.getHours(), minutes: time.getMinutes(), seconds: time.getSeconds() }; }; const tranform = (x) => `transform: rotateZ(${x}deg); ` + (x == 0 ? "transition: none" : ""); const getSecondsDeg = s => 360 / 60 * s; const getMinutesDeg = m => 360 / 60 * m; const getHoursDeg = h => 360 / 12 * h; const calc = () => { const time = getTime(); const secondsDeg = getSecondsDeg(time.seconds); const minutesDeg = getMinutesDeg(time.minutes); const hoursDeg = getHoursDeg(time.hours); secondsLeg.setAttribute("style", tranform(secondsDeg)); minutesLeg.setAttribute("style", tranform(minutesDeg)); hoursLeg.setAttribute("style", tranform(hoursDeg)); if (time.hours > 6 && time.hours < 18) { sun.classList.remove("night"); moon.classList.remove("night"); } else { sun.classList.add("night"); moon.classList.add("night"); } }; setInterval(calc, 1000); //# sourceURL=pen.js </script> </body> </html> https://saiti-arqivi.ucoz.com/board/12-1-0-1711 საათები საიტისათვის https://saiti-arqivi.ucoz.com/board/12-1-0-1711 Sat, 23 Nov 2024 03:05:30 GMT მაგარი საათი {საჩვენებელი} <meta charset="UTF-8"> <link href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" rel="apple-touch-icon" type="image/png" /><meta name="apple-mobile-web-app-title" content="CodePen"> <link href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" rel="shortcut icon" type="image/x-icon" /> <link color="#111" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" rel="mask-icon" type="image/x-icon" /><script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script> <title></title> <link href="https://codepen.io/a7rarpress/pen/YzJqyYV" rel="canonical" /> <style type="text/css">* { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),10%,90%); --fg: hsl(var(--hue),10%,10%); font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320)); } body, button { color: var(--fg); font: 1em/1.5 "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } body { background-color: var(--bg); height: 100vh; display: grid; place-items: center; } .progClock { display: grid; justify-content: center; align-content: center; position: relative; text-align: center; width: 16em; height: 16em; } .progClock__time-date, .progClock__time-digit, .progClock__time-colon, .progClock__time-ampm { transition: color 0.2s linear; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .progClock__time-date, .progClock__time-digit { background: transparent; } .progClock__time-date, .progClock__time-ampm { grid-column: 1 / 6; } .progClock__time-date { font-size: 0.75em; line-height: 1.33; } .progClock__time-digit, .progClock__time-colon { font-size: 2em; font-weight: 400; grid-row: 2; } .progClock__time-colon { line-height: 1.275; } .progClock__time-ampm { cursor: default; grid-row: 3; } .progClock__rings { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .progClock__ring { opacity: 0.1; } .progClock__ring-fill { transition: opacity 0s 0.3s linear, stroke-dashoffset 0.3s ease-in-out; } .progClock__ring-fill--360 { opacity: 0; stroke-dashoffset: 0; transition-duration: 0.3s; } [data-group]:focus { outline: transparent; } [data-units] { transition: opacity 0.2s linear; } [data-group="d"]:focus, [data-group="d"]:hover { color: rgb(253,41,20); } [data-group="h"]:focus, [data-group="h"]:hover { color: rgb(51,53,65); } [data-group="m"]:focus, [data-group="m"]:hover { color: rgb(92,184,92); } [data-group="s"]:focus, [data-group="s"]:hover { color: rgb(249,187,4); } [data-group]:focus ~ .progClock__rings [data-units], [data-group]:hover ~ .progClock__rings [data-units] { opacity: 0.2; } [data-group="d"]:focus ~ .progClock__rings [data-units="d"], [data-group="d"]:hover ~ .progClock__rings [data-units="d"], [data-group="h"]:focus ~ .progClock__rings [data-units="h"], [data-group="h"]:hover ~ .progClock__rings [data-units="h"], [data-group="m"]:focus ~ .progClock__rings [data-units="m"], [data-group="m"]:hover ~ .progClock__rings [data-units="m"], [data-group="s"]:focus ~ .progClock__rings [data-units="s"], [data-group="s"]:hover ~ .progClock__rings [data-units="s"] { opacity: 1; } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: hsl(var(--hue),10%,10%); --fg: hsl(var(--hue),10%,90%); } .progClock__ring { opacity: 0.2; } } </style> <script> window.console = window.console || function(t) {}; </script> <div class="progClock" id="clock"><button class="progClock__time-date" data-group="d" type="button"><small data-unit="w">Sunday</small><br /> <span data-unit="mo">January</span> <span data-unit="d">1</span></button><button class="progClock__time-digit" data-group="h" data-unit="h" type="button">12</button><span class="progClock__time-colon">:</span><button class="progClock__time-digit" data-group="m" data-unit="m" type="button">00</button><span class="progClock__time-colon">:</span><button class="progClock__time-digit" data-group="s" data-unit="s" type="button">00</button> <span class="progClock__time-ampm" data-unit="ap">AM</span> <svg class="progClock__rings" height="256" viewbox="0 0 256 256" width="256"> <defs> <lineargradient id="clock-red" x1="1" x2="0" y1="0.5" y2="0.5"> <stop offset="0%" stop-color="rgb(253,41,20)"></stop> <stop offset="100%" stop-color="rgb(253,41,20)"></stop> </lineargradient> <lineargradient id="clock-yellow" x1="1" x2="0" y1="0.5" y2="0.5"> <stop offset="0%" stop-color="rgb(51,53,65)"></stop> <stop offset="100%" stop-color="rgb(51,53,65)"></stop> </lineargradient> <lineargradient id="clock-blue" x1="1" x2="0" y1="0.5" y2="0.5"> <stop offset="0%" stop-color="rgb(92,184,92)"></stop> <stop offset="100%" stop-color="rgb(92,184,92)"></stop> </lineargradient> <lineargradient id="clock-purple" x1="1" x2="0" y1="0.5" y2="0.5"> <stop offset="0%" stop-color="rgb(249,187,4)"></stop> <stop offset="100%" stop-color="rgb(249,187,4)"></stop> </lineargradient> </defs> <!-- Days --> <g data-units="d"> <circle class="progClock__ring" cx="128" cy="128" fill="none" opacity="0.1" r="74" stroke="url(#clock-red)" stroke-width="12"></circle> <circle class="progClock__ring-fill" cx="128" cy="128" data-ring="mo" fill="none" r="74" stroke="url(#clock-red)" stroke-dasharray="465 465" stroke-dashoffset="465" stroke-linecap="round" stroke-width="12" transform="rotate(-90,128,128)"></circle> </g> <!-- Hours --> <g data-units="h"> <circle class="progClock__ring" cx="128" cy="128" fill="none" opacity="0.1" r="90" stroke="url(#clock-yellow)" stroke-width="12"></circle> <circle class="progClock__ring-fill" cx="128" cy="128" data-ring="d" fill="none" r="90" stroke="url(#clock-yellow)" stroke-dasharray="565.5 565.5" stroke-dashoffset="565.5" stroke-linecap="round" stroke-width="12" transform="rotate(-90,128,128)"></circle> </g> <!-- Minutes --> <g data-units="m"> <circle class="progClock__ring" cx="128" cy="128" fill="none" opacity="0.1" r="106" stroke="url(#clock-blue)" stroke-width="12"></circle> <circle class="progClock__ring-fill" cx="128" cy="128" data-ring="h" fill="none" r="106" stroke="url(#clock-blue)" stroke-dasharray="666 666" stroke-dashoffset="666" stroke-linecap="round" stroke-width="12" transform="rotate(-90,128,128)"></circle> </g> <!-- Seconds --> <g data-units="s"> <circle class="progClock__ring" cx="128" cy="128" fill="none" opacity="0.1" r="122" stroke="url(#clock-purple)" stroke-width="12"></circle> <circle class="progClock__ring-fill" cx="128" cy="128" data-ring="m" fill="none" r="122" stroke="url(#clock-purple)" stroke-dasharray="766.5 766.5" stroke-dashoffset="766.5" stroke-linecap="round" stroke-width="12" transform="rotate(-90,128,128)"></circle> </g> </svg></div> <script src="./function.js"></script><script id="rendered-js" > window.addEventListener("DOMContentLoaded", () => { const clock = new ProgClock("#clock"); }); class ProgClock { constructor(qs) { this.el = document.querySelector(qs); this.time = 0; this.updateTimeout = null; this.ringTimeouts = []; this.update(); } getDayOfWeek(day) { switch (day) { case 1: return "ორშაბათი"; case 2: return "სამშაბათი"; case 3: return "ოთხშაბათი"; case 4: return "ხუთშაბათი"; case 5: return "პარასკევი"; case 6: return "შაბათი"; default: return "კვირა";} } getMonthInfo(mo, yr) { switch (mo) { case 1: return { name: "თებერვალი", days: yr % 4 === 0 ? 29 : 28 }; case 2: return { name: "მარტი", days: 31 }; case 3: return { name: "აპრილი", days: 30 }; case 4: return { name: "მაისი", days: 31 }; case 5: return { name: "ივნისი", days: 30 }; case 6: return { name: "ივლისი", days: 31 }; case 7: return { name: "აგვისტო", days: 31 }; case 8: return { name: "სექტემბერი", days: 30 }; case 9: return { name: "ოქტომბერი", days: 31 }; case 10: return { name: "ნოემბერი", days: 30 }; case 11: return { name: "დეკემბერი", days: 31 }; default: return { name: "იანვარი", days: 31 };} } update() { this.time = new Date(); if (this.el) { // date and time const dayOfWeek = this.time.getDay(); const year = this.time.getFullYear(); const month = this.time.getMonth(); const day = this.time.getDate(); const hr = this.time.getHours(); const min = this.time.getMinutes(); const sec = this.time.getSeconds(); const dayOfWeekName = this.getDayOfWeek(dayOfWeek); const monthInfo = this.getMonthInfo(month, year); const m_progress = sec / 60; const h_progress = (min + m_progress) / 60; const d_progress = (hr + h_progress) / 24; const mo_progress = (day - 1 + d_progress) / monthInfo.days; const units = [ { label: "w", value: dayOfWeekName }, { label: "mo", value: monthInfo.name, progress: mo_progress }, { label: "d", value: day, progress: d_progress }, { label: "h", value: hr > 12 ? hr - 12 : hr, progress: h_progress }, { label: "m", value: min < 10 ? "0" + min : min, progress: m_progress }, { label: "s", value: sec < 10 ? "0" + sec : sec }, { label: "ap", value: hr > 12 ? "PM" : "AM" }]; // flush out the timeouts this.ringTimeouts.forEach(t => { clearTimeout(t); }); this.ringTimeouts = []; // update the display units.forEach(u => { // rings const ring = this.el.querySelector(`[data-ring="${u.label}"]`); if (ring) { const strokeDashArray = ring.getAttribute("stroke-dasharray"); const fill360 = "progClock__ring-fill--360"; if (strokeDashArray) { // calculate the stroke const circumference = +strokeDashArray.split(" ")[0]; const strokeDashOffsetclockt = 1 - u.progress; ring.setAttribute( "stroke-dashoffset", strokeDashOffsetclockt * circumference); // add the fade-out transition, then remove it if (strokeDashOffsetclockt === 1) { ring.classList.add(fill360); this.ringTimeouts.push( setTimeout(() => { ring.classList.remove(fill360); }, 600)); } } } // digits const unit = this.el.querySelector(`[data-unit="${u.label}"]`); if (unit) unit.innerText = u.value; }); } clearTimeout(this.updateTimeout); this.updateTimeout = setTimeout(this.update.bind(this), 1e3); }} //# sourceURL=pen.js </script> https://saiti-arqivi.ucoz.com/board/12-1-0-1708 საათები საიტისათვის https://saiti-arqivi.ucoz.com/board/12-1-0-1708 Sat, 23 Nov 2024 02:35:39 GMT მაგარი საათი {საჩვენებელი} <meta charset="UTF-8"> <link href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" rel="apple-touch-icon" type="image/png" /><meta name="apple-mobile-web-app-title" content="CodePen"> <link href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" rel="shortcut icon" type="image/x-icon" /> <link color="#111" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" rel="mask-icon" type="image/x-icon" /><script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script> <title></title> <link href="https://codepen.io/iammindless/pen/BavWdoX" rel="canonical" /> <style type="text/css">* { box-sizing: border-box; user-select: none; } body { margin: 0; font-family: system-ui; background: #4d4d4d; display: grid; height: 100svh; place-items: center; } :root { --back-color: #242424; --fore-color: #F85B5B; } @property --clock-per { syntax: "<percentage>"; inherits: true; initial-value: 40%; } @keyframes rotate-outer { 0% { --clock-per: 0%; --fore-color: #F85B5B; } 50% { --clock-per: 100%; } 50.001% { --clock-per: 0%; } 100% { --clock-per: 100%; --fore-color: #242424; --back-color: #F85B5B; } } @keyframes heart-beat { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } } @keyframes rotate-dots { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } .clock-face { position: relative; display: grid; place-items: center; width: 200px; aspect-ratio: 1; border-radius: 50%; margin: 2rem; background: conic-gradient(var(--fore-color) 0%, var(--fore-color) var(--clock-per), var(--back-color) 0); outline: 5px solid #242424; box-shadow: 0 0 0 12px #3b3b3b, 10px 10px 32px black, -10px -10px 32px white; animation: rotate-outer 4s infinite linear; } .clock-face::before { content: ""; position: absolute; left: 3px; top: 3px; right: 3px; bottom: 3px; background: #242424; border-radius: 50%; } .clock-face::after { content: ""; position: absolute; left: 11px; top: 11px; right: 11px; bottom: 11px; border: 2px dotted white; border-radius: 50%; animation: rotate-dots 16s infinite linear; } .clock-face .face-text { text-align: center; color: white; z-index: 1; width: 120px; } .clock-face .face-text .date { font-size: 0.8rem; } .clock-face .face-text .time { position: relative; font-size: 2.5rem; font-weight: 900; text-align: center; } .clock-face .face-text .info { text-align: center; font-size: 0.8rem; display: flex; justify-content: space-between; } .clock-face .face-text .info .heart { position: relative; display: inline-block; color: #F85B5B; font-size: 14px; animation: heart-beat 1.25s infinite ease-in-out; } .clock-face .face-text .info .heart::after { content: ""; display: block; position: absolute; left: 2px; top: 7px; width: 2px; height: 2px; background: rgba(255, 255, 255, 0.5); } </style> <script> window.console = window.console || function(t) {}; </script> <div class="clock-face"> <div class="face-text"> <div class="date">MON 15 JAN 2015</div> <div class="time">11:42</div> <div class="info"> <div><span class="heart">&hearts;</span> <span class="rate">81</span></div> <div>1248 KCAL</div> </div> </div> </div> <script id="rendered-js" > const DATEELEMENT = document.querySelector(".date"); const TIMEELEMENT = document.querySelector(".time"); const RATEELEMENT = document.querySelector(".rate"); const animated = document.querySelector(".clock-face"); const DAYS = ["კვი", "ორშ", "სამ", "ოთხ", "ხუთ", "პარ", "შაბ"]; const MONTHS = ["იან", "თებ", "მარ", "აპრ", "მაი", "ივნ", "ივლ", "აგვ", "სექ", "ოქტ", "ნოე", "დეკ"]; let loopPos = 0; animated.addEventListener("animationiteration", e => { loopPos++; if (loopPos == 2) loopPos = 0; if (loopPos == 0) changeClockFace(); }); changeClockFace(); function changeClockFace() { let DATE = new Date(Date.now()); let hours = DATE.getHours().toString().padStart(2, '0'); let minutes = DATE.getMinutes().toString().padStart(2, '0'); dateString = DATE.toLocaleDateString('en-UK', { year: 'numeric', month: 'short', day: 'numeric' }); TIMEELEMENT.innerText = `${hours}:${minutes}`; DATEELEMENT.innerText = `${DAYS[DATE.getDay()]} ${DATE.getDate()} ${MONTHS[DATE.getMonth()]} ${DATE.getFullYear()}`; RATEELEMENT.innerText = Math.floor(Math.random() * 15) + 65; } //# sourceURL=pen.js </script> https://saiti-arqivi.ucoz.com/board/12-1-0-1707 საათები საიტისათვის https://saiti-arqivi.ucoz.com/board/12-1-0-1707 Sat, 23 Nov 2024 02:29:33 GMT მაგარი საათი {საჩვენებელი} <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> <meta name="apple-mobile-web-app-title" content="CodePen"> <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111" /> <title>Neumorphism Analog Clock</title> <link rel="canonical" href="https://codepen.io/0pensource/pen/zYXvPQB"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { display: grid; place-items: center; background: #dde1e7; text-align: center; } .clock { position: relative; display: flex; align-items: center; justify-content: center; background: #dde1e7; height: 250px; width: 250px; border-radius: 50%; box-shadow: -3px -3px 7px #ffffff73, 3px 3px 5px rgba(94, 104, 121, 0.288); } .clock:before { position: absolute; content: ''; height: 220px; width: 220px; background: #dde1e7; border-radius: 50%; box-shadow: inset -3px -3px 7px #ffffff73, inset 3px 3px 5px rgba(94, 104, 121, 0.288); } .clock:after { position: absolute; content: ''; height: 120px; width: 120px; background: #dde1e7; border-radius: 50%; box-shadow: -1px -1px 5px #ffffff73, 1px 1px 3px rgba(94, 104, 121, 0.288); } .clock .center-nut { height: 15px; width: 15px; background: #404040; border-radius: 50%; z-index: 2; position: absolute; } .clock .center-nut2 { height: 9px; width: 9px; background: #3498db; border-radius: 50%; z-index: 15; position: absolute; } .indicators div { position: absolute; width: 2px; height: 5px; background: #404040; } .indicators div:nth-child(1) { transform: rotate(30deg) translateY(-100px); } .indicators div:nth-child(2) { transform: rotate(60deg) translateY(-100px); } .indicators div:nth-child(3) { background: #3498db; transform: rotate(90deg) translateY(-100px); } .indicators div:nth-child(4) { transform: rotate(120deg) translateY(-100px); } .indicators div:nth-child(5) { transform: rotate(150deg) translateY(-100px); } .indicators div:nth-child(6) { background: #3498db; transform: rotate(180deg) translateY(-100px); } .indicators div:nth-child(7) { transform: rotate(210deg) translateY(-100px); } .indicators div:nth-child(8) { transform: rotate(240deg) translateY(-100px); } .indicators div:nth-child(9) { background: #3498db; transform: rotate(270deg) translateY(-100px); } .indicators div:nth-child(10) { transform: rotate(300deg) translateY(-100px); } .indicators div:nth-child(11) { transform: rotate(330deg) translateY(-100px); } .indicators div:nth-child(12) { background: #3498db; transform: rotate(360deg) translateY(-100px); } .sec-hand, .min-hand, .hr-hand { position: absolute; } .sec-hand, .sec { height: 180px; width: 180px; z-index: 6; } .min-hand, .min { height: 140px; width: 140px; z-index: 5; } .hr-hand, .hr { height: 110px; width: 110px; z-index: 4; } .sec, .min, .hr { display: flex; justify-content: center; position: absolute; } .sec:before { position: absolute; content: ''; height: 110px; width: 3px; background: #3498db; } .sec:after { position: absolute; content: ''; height: 35px; width: 7px; background: #3498db; top: 105px; border-radius: 5px; } .min:before { position: absolute; content: ''; width: 1px; top: -15px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 60px solid #e95949; } .min:after { position: absolute; content: ''; width: 3px; top: 40px; border-left: 2px solid transparent; border-right: 2px solid transparent; border-top: 30px solid #e95949; } .hr:before { position: absolute; content: ''; width: 1px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 35px solid #303030; } .hr:after { position: absolute; content: ''; width: 3px; top: 34px; border-left: 2px solid transparent; border-right: 2px solid transparent; border-top: 25px solid #303030; } </style> <script> window.console = window.console || function(t) {}; </script> </head> <body translate="no"> <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Neumorphism Analog Clock</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="clock"> <div class="center-nut"></div> <div class="center-nut2"></div> <div class="indicators"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="sec-hand"> <div class="sec"></div> </div> <div class="min-hand"> <div class="min"></div> </div> <div class="hr-hand"> <div class="hr"></div> </div> </div> <script> const sec = document.querySelector(".sec"); const min = document.querySelector(".min"); const hr = document.querySelector(".hr"); setInterval(function() { let time = new Date(); let secs = time.getSeconds() * 6; let mins = time.getMinutes() * 6; let hrs = time.getHours() * 30; sec.style.transform = `rotateZ(${secs}deg)`; min.style.transform = `rotateZ(${mins}deg)`; hr.style.transform = `rotateZ(${hrs+(mins/12)}deg)`; }); </script> </body> </html> </body> </html> https://saiti-arqivi.ucoz.com/board/12-1-0-1699 საათები საიტისათვის https://saiti-arqivi.ucoz.com/board/12-1-0-1699 Fri, 22 Nov 2024 05:32:00 GMT ძალიან ლამაზი ვარსკვლავური რეიტინგის სკრიპტი <p><img alt="" src="https://saiti-arqivi.ucoz.com/_tbkp/chemi_saitis_reitingi_magariaaaaaa.jpg" style="width: 707px; height: 89px;" /></p> <p>დაყენების ინსტრუქცია:&nbsp; შეხვალთ კონტროლ პანელში, შემდეგ დიზაინის მართვა, ვირჩევთ იმ გვერდს სადაც კომენტარების გვერძე არის&nbsp; რეიტინგის ვარსკვლავები, და ამ გრაფაში &nbsp;{страница&nbsp; материала и комментариев к нему} მთლიან სკრიპტში ვშლით სკიპტის გრაფას ამგვარს-&nbsp;<span style="color:#ff0000;"><?if($RATING$)?&gt;<span class="ed-sep"&gt; | </span&gt;<span class="e-rating"&gt;<span class="ed-title"&gt;<!--<s3119&gt;--&gt;რეიტინგი<!--</s&gt;--&gt;:</span&gt; <span class="ed-value"&gt;<span id="entRating$ID$"&gt;$RATING$</span&gt;/<span id="entRated$ID$"&gt;$RATED$</span&gt;</span&gt;</span&gt;<?endif?&gt;</td&gt;</tr&gt; </span><span style="color:#000000;">და მის მაგივრად ვსვავთ ქვემოთ მოყვანილ კოდს...</span></p> <p>&nbsp;</p> <p>&nbsp;</p> <script> function copyToClipboard() { var copyText = document.getElementById("myInput"); copyText.select(); document.execCommand("Copy"); } </script> <p><textarea cols="50" id="myInput" rows="4"><!-- შექნილის ადმინი გელას მიერ, Best-Studio --> <style> div.gf { margin: 10px 0px 10px 0px; padding: 5px 10px 5px 10px; border: 1px solid #eee9e0; background: #eee9e0; text-align:#000000; } </style> <div class="gf"> <div style="background:url('https://saiti-arqivi.ucoz.com/');padding:4px;margin-bottom:3px;font-weight:bold;color:#eee9e0;"> რეიტინგი $ENTRY_TITLE$:</div> <table><tbody><tr><td> <?$RSTARS$('30','https://zornet.ru/CSS-ZORNET/Skript/17.png','1')?></td> <td style="padding-left:15px;">რეიტინგი <shadoow><font style="font-size:11px;"><? $RATING$*1 ?></font></shadoow><font style="color:#000000;">/5 დან </font><br><i>ხმა მისცა: <font style="color:#000000;">$RATED$-მა ადამიანმა</font></i></td></tr></tbody></table> </div> <link type="text/css" rel="StyleSheet" href="https://saiti-arqivi.ucoz.com/" /> </textarea></p> <p><button onclick="copyToClipboard()">დააკოპირეთ</button></p> https://saiti-arqivi.ucoz.com/board/23-1-0-1682 რეიტინგი საიტისათვის https://saiti-arqivi.ucoz.com/board/23-1-0-1682 Sun, 17 Nov 2024 00:33:55 GMT მაგარი საათი ჩემი საიტისათვის {საჩვენებელი} <meta charset="UTF-8"> <link href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" rel="apple-touch-icon" type="image/png" /><meta name="apple-mobile-web-app-title" content="CodePen"> <link href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" rel="shortcut icon" type="image/x-icon" /> <link color="#111" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" rel="mask-icon" type="image/x-icon" /> <title></title> <link href="https://codepen.io/kittywei/pen/qErBKm" rel="canonical" /> <style type="text/css">div,span{padding: 0;margin: 0;} #main-clock{ width: 200px; margin: 0 auto; position: relative } #dial-wrap{ width:200px; height: 190px; padding-top: 10px; border-radius: 50%; position: relative; z-index: 2; background: #996600; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #996600 0%, #996600 62%, #ffcc00 76%, #896d00 86%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#996600), color-stop(62%,#996600), color-stop(76%,#ffcc00), color-stop(86%,#896d00)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #996600 0%,#996600 62%,#ffcc00 76%,#896d00 86%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #996600 0%,#996600 62%,#ffcc00 76%,#896d00 86%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #996600 0%,#996600 62%,#ffcc00 76%,#896d00 86%); /* IE10+ */ background: radial-gradient(ellipse at center, #996600 0%,#996600 62%,#ffcc00 76%,#896d00 86%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#996600', endColorstr='#896d00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } #dial-wrap:after{ content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin: -4px 0 0 -4px; background: #ffffff; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #585858 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#585858)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#585858 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#585858 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#585858 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #ffffff 0%,#585858 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#585858',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } #dial{ font-size: 15px; font-family: arial; sans-serif; color: #000; border-radius: 50%; width: 180px; height: 180px; margin: 0 auto; position: relative; background: #a4a4a4; /* Old browsers */ background: -moz-linear-gradient(-45deg, #a4a4a4 0%, #ffffff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a4a4a4), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #a4a4a4 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #a4a4a4 0%,#ffffff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #a4a4a4 0%,#ffffff 100%); /* IE10+ */ background: linear-gradient(135deg, #a4a4a4 0%,#ffffff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4a4a4', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } #dial span{display: block;position: absolute;} .dial-num-12{left: 82px;top: 5px} .dial-num-1{left: 128px;top: 15px} .dial-num-2{left: 155px;top: 45px} .dial-num-3{left: 165px;top: 90px} .dial-num-4{left: 150px;top: 125px} .dial-num-5{left: 125px;top: 150px} .dial-num-6{left: 84px;top: 160px} .dial-num-7{left: 46px;top: 150px} .dial-num-8{left: 20px;top: 125px} .dial-num-9{left: 5px;top: 90px} .dial-num-10{left: 12px;top: 46px} .dial-num-11{left: 40px;top: 15px} #hour-hand{ width: 60px; height: 5px; border-radius: 8px; background-color: #000; position: absolute; left: 42px; top: 98px; transform: rotate(7deg); -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); transform-origin: 100% 100% 0; -webkit-transform-origin: 100% 100% 0; -moz-transform-origin: 100% 100% 0; } #minute-hand{ width: 70px; height: 4px; border-radius: 8px; background-color: #000; position: absolute; left: 102px; top: 100px; transform: rotate(65deg); -webkit-transform: rotate(65deg); -moz-transform: rotate(65deg); transform-origin: 0 0 0; -webkit-transform-origin: 0 0 0; -moz-transform-origin: 0 0 0; } #second-hand{ width: 80px; height: 2px; border-radius: 5px; background-color: #000; position: absolute; left: 20px; top: 100px; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform-origin: 100% 50% 0; -webkit-transform-origin: 100% 50% 0; -moz-transform-origin: 100% 50% 0; -webkit-animation: secondHand 60s linear infinite; -moz-animation: secondHand 60s linear infinite; animation: secondHand 60s linear infinite; } #pendulum{ width: 15px; height: 150px; margin: -10px auto 0; position: relative; z-index: 1; -webkit-animation: pendulum 2s cubic-bezier(.57,.07,.47,.84) infinite; -moz-animation: pendulum 2s cubic-bezier(.57,.07,.47,.84) infinite; animation: pendulum 2s cubic-bezier(.57,.07,.47,.84) infinite; transform-origin: 0 0 0; -webkit-transform-origin: 0 0 0; -moz-transform-origin: 0 0 0; background: #996600; /* Old browsers */ background: -moz-linear-gradient(left, #996600 0%, #996600 46%, #f2bf00 78%, #fcc900 81%, #b69100 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#996600), color-stop(46%,#996600), color-stop(78%,#f2bf00), color-stop(81%,#fcc900), color-stop(100%,#b69100)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #996600 0%,#996600 46%,#f2bf00 78%,#fcc900 81%,#b69100 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #996600 0%,#996600 46%,#f2bf00 78%,#fcc900 81%,#b69100 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #996600 0%,#996600 46%,#f2bf00 78%,#fcc900 81%,#b69100 100%); /* IE10+ */ background: linear-gradient(to right, #996600 0%,#996600 46%,#f2bf00 78%,#fcc900 81%,#b69100 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#996600', endColorstr='#b69100',GradientType=1 ); /* IE6-9 */ } #pendulum:after{ content: ""; display: block; width: 60px; height: 60px; border-radius: 50%; position: absolute; left: 50%; bottom: -30px; margin-left: -30px; background: #996600; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #996600 0%, #d3a000 56%, #fdca00 63%, #786621 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#996600), color-stop(56%,#d3a000), color-stop(63%,#fdca00), color-stop(100%,#786621)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #996600 0%,#d3a000 56%,#fdca00 63%,#786621 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #996600 0%,#d3a000 56%,#fdca00 63%,#786621 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #996600 0%,#d3a000 56%,#fdca00 63%,#786621 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #996600 0%,#d3a000 56%,#fdca00 63%,#786621 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#996600', endColorstr='#786621',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } /*secondHand animation*/ @-webkit-keyframes secondHand { 0%{ -webkit-transform: rotate(90deg); } 100%{ -webkit-transform: rotate(450deg); } } @-moz-keyframes secondHand { 0%{ -moz-transform: rotate(90deg); } 100%{ -moz-transform: rotate(450deg); } } @keyframes secondHand { 0%{ transform: rotate(90deg); } 100%{ transform: rotate(450deg); } } /*pendulum animation*/ @-webkit-keyframes pendulum { 0%{ -webkit-transform: rotate(-15deg); } 50%{ -webkit-transform: rotate(15deg); } 100%{ -webkit-transform: rotate(-15deg); } } @-moz-keyframes pendulum { 0%{ -moz-transform: rotate(-15deg); } 50%{ -moz-transform: rotate(15deg); } 100%{ -moz-transform: rotate(-15deg); } } @keyframes pendulum { 0%{ transform: rotate(-15deg); } 50%{ transform: rotate(15deg); } 100%{ transform: rotate(-15deg); } } </style> <script> window.console = window.console || function(t) {}; </script> <div id="main-clock"> <div id="dial-wrap"> <div id="dial"><span class="dial-num-12">12</span> <span class="dial-num-1">1</span> <span class="dial-num-2">2</span> <span class="dial-num-3">3</span> <span class="dial-num-4">4</span> <span class="dial-num-5">5</span> <span class="dial-num-6">6</span> <span class="dial-num-7">7</span> <span class="dial-num-8">8</span> <span class="dial-num-9">9</span> <span class="dial-num-10">10</span> <span class="dial-num-11">11</span></div> <div id="hour-hand">&nbsp;</div> <div id="minute-hand">&nbsp;</div> <div id="second-hand">&nbsp;</div> </div> <div id="pendulum">&nbsp;</div> </div> https://saiti-arqivi.ucoz.com/board/12-1-0-1653 საათები საიტისათვის https://saiti-arqivi.ucoz.com/board/12-1-0-1653 Sun, 10 Nov 2024 03:00:06 GMT მაგარი მენიუ საიტისათვის {საჩვენებელი} <meta charset="UTF-8"> <link href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" rel="apple-touch-icon" type="image/png" /><meta name="apple-mobile-web-app-title" content="CodePen"> <link href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" rel="shortcut icon" type="image/x-icon" /> <link color="#111" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" rel="mask-icon" type="image/x-icon" /><script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script> <title></title> <link href="https://codepen.io/ahmadbassamemran/pen/BPbVPe" rel="canonical" /><meta name="keywords" content="Developer, Designer, Menu, Hamburger Icons Animations, CSS3, HTML, Buttons, Web, animation, animations, hamburger, icon, icons, span, transition, transform "> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet" /> <style type="text/css">@charset "UTF-8"; body { padding: 0; margin: 0; background-color: #324252; } h1 { font-family: "Century Gothic"; margin: 30px auto 30px auto; color: #09fbd2; width: 100%; text-align: center; } ul.menu { padding: 0; list-style: none; width: 400px; margin: 20px auto; font-family: "Century Gothic"; box-shadow: 0px 0px 25px #00000070; clear: both; display: table; margin-bottom: 100px; } ul.menu .list { font-size: 14px; border-bottom: 1px solid #324252; position: relative; width: 100%; box-sizing: border-box; height: 50px; vertical-align: sub; background: #3e5165; clear: both; } ul.menu .list:after { content: ""; font-family: FontAwesome; position: absolute; right: 17px; top: 17px; padding: 0px 5px; color: #fff; } ul.menu .list:before { content: ""; font-family: FontAwesome; position: absolute; left: 17px; top: 17px; padding: 0px 5px; color: #fff; } ul.menu .list a { text-decoration: none; color: #fff; padding: 17px 0px 17px 45px; display: block; height: 100%; box-sizing: border-box; } ul.menu .list a:hover { background-color: #324252; transition: 300ms all; color: #09fbd2; } ul.menu .list .items { height: 0px; overflow: hidden; } ul.menu .list .items a { padding: 17px; } ul.menu .list .items a:hover { background-color: #3f5d79; color: #fff; transition: 300ms all; } ul.menu .list:last-child { border-bottom: none; } ul.menu .active:after { content: ""; font-family: FontAwesome; position: absolute; right: 17px; top: 17px; padding: 0px 5px; color: #fff; } ul.menu .active:before { content: ""; font-family: FontAwesome; position: absolute; left: 17px; top: 17px; padding: 0px 5px; color: #fff; } ul.menu .active > .items { display: block; background: #23313f; padding: 0px; height: auto; color: #fff; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition: all 200ms; clear: both; float: left; width: 100%; } ul.menu .active > .items li { padding: 0px; border-bottom: 1px solid #324252; list-style: none; } ul.menu .active > .items li:last-child { border-color: transparent; padding-bottom: 0px; } ul.menu .active > .items .active > .items { background-color: #2f4b67; } ul.menu .active > a { color: #46efa4; text-transform: uppercase; font-weight: bold; } ul.menu .active .list { background: #697d92; } ul.menu .active .list a { padding: 17px 0px 17px 45px; } /* footer */ footer { background-color: #222; color: #fff; font-size: 14px; bottom: 0; position: fixed; left: 0; right: 0; text-align: center; z-index: 999; } footer p { margin: 10px 0; font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif; } footer .fa-heart { color: red; } footer .fa-dev { color: #fff; } footer .fa-twitter-square { color: #1da0f1; } footer .fa-instagram { color: #f0007c; } fotter .fa-linkedin { color: #0073b1; } footer .fa-codepen { color: #fff; } footer a { color: #3c97bf; text-decoration: none; margin-right: 5px; } .youtubeBtn { position: fixed; left: 50%; transform: translatex(-50%); bottom: 45px; cursor: pointer; transition: all 0.3s; vertical-align: middle; text-align: center; display: inline-block; } .youtubeBtn i { font-size: 20px; float: left; } .youtubeBtn a { color: #ff0000; text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); animation: youtubeAnim 1000ms linear infinite; float: right; } .youtubeBtn a:hover { color: #c9110f; transition: all 0.3s ease-in-out; text-shadow: none; } .youtubeBtn i:active { transform: scale(0.9); transition: all 0.3s ease-in-out; } .youtubeBtn span { font-family: "Lato"; font-weight: bold; color: #fff; display: block; font-size: 12px; float: right; line-height: 20px; padding-left: 5px; } @keyframes youtubeAnim { 0%, 100% { color: #c9110f; } 50% { color: #ff0000; } } /* footer */ </style> <script> window.console = window.console || function(t) {}; </script> <ul class="menu"> <li class="list"><a href="#">List 1 </a> <ul class="items"> <li><a href="#">Item 1-1</a></li> <li><a href="#">Item 1-2</a></li> <li><a href="#">Item 1-3</a></li> </ul> </li> <li class="list"><a href="#">List 2</a> <ul class="items"> <li><a href="#">Item 2-1 </a></li> <li><a href="#">Item 2-2 </a></li> <li><a href="#">Item 2-3 </a></li> </ul> </li> <li class="list"><a href="#">List 3</a> <ul class="items"> <li><a href="#">Item 3-1 </a></li> <li><a href="#">Item 3-2 </a></li> <li><a href="#">Item 3-2 </a></li> </ul> </li> <li class="list"><a href="#">List 4</a> <ul class="items"> <li><a href="#">Item 4-1 </a></li> <li><a href="#">Item 4-2 </a></li> <li class="list"><a href="#">List 4-1</a> <ul class="items"> <li><a href="#">Item 4-1-1</a></li> <li><a href="#">Item 4-1-2</a></li> <li class="list"><a href="#">List 4-2</a> <ul class="items"> <li><a href="#">Item 4-2-1</a></li> <li><a href="#">Item 4-2-2</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> <script id="rendered-js" > const list = document.querySelectorAll('.list'); function accordion(e) { e.stopPropagation(); if (this.classList.contains('active')) { this.classList.remove('active'); } else if (this.parentElement.parentElement.classList.contains('active')) { this.classList.add('active'); } else { for (i = 0; i < list.length; i++) {if (window.CP.shouldStopExecution(0)) break; list[i].classList.remove('active'); }window.CP.exitedLoop(0); this.classList.add('active'); } } for (i = 0; i < list.length; i++) {if (window.CP.shouldStopExecution(1)) break; list[i].addEventListener('click', accordion); }window.CP.exitedLoop(1); //# sourceURL=pen.js </script> https://saiti-arqivi.ucoz.com/board/6-1-0-1629 მენიუ საიტისთვის https://saiti-arqivi.ucoz.com/board/6-1-0-1629 Wed, 06 Nov 2024 02:54:38 GMT რეიტინგი ვარსკვლავებით (ნიმუში) <style type="text/css">.u-star-rating-30 { list-style:none; margin:0px; padding:0px; width:150px; height:30px; position:relative; background: url('/.s/img/stars/3/30.png') top left repeat-x } .u-star-rating-30 li{ padding:0px; margin:0px; float:left } .u-star-rating-30 li a { display:block;width:30px;height: 30px;line-height:30px;text-decoration:none;text-indent:-9000px;z-index:20;position:absolute;padding: 0px;overflow:hidden } .u-star-rating-30 li a:hover { background: url('/.s/img/stars/3/30.png') left center;z-index:2;left:0px;border:none } .u-star-rating-30 a.u-one-star { left:0px } .u-star-rating-30 a.u-one-star:hover { width:30px } .u-star-rating-30 a.u-two-stars { left:30px } .u-star-rating-30 a.u-two-stars:hover { width:60px } .u-star-rating-30 a.u-three-stars { left:60px } .u-star-rating-30 a.u-three-stars:hover { width:90px } .u-star-rating-30 a.u-four-stars { left:90px } .u-star-rating-30 a.u-four-stars:hover { width:120px } .u-star-rating-30 a.u-five-stars { left:120px } .u-star-rating-30 a.u-five-stars:hover { width:150px } .u-star-rating-30 li.u-current-rating { top:0 !important; left:0 !important;margin:0 !important;padding:0 !important;outline:none;background: url('/.s/img/stars/3/30.png') left bottom;position: absolute;height:30px !important;line-height:30px !important;display:block;text-indent:-9000px;z-index:1 } </style> <script> var usrarids = {}; function ustarrating(id, mark) { if (!usrarids[id]) { usrarids[id] = 1; $(".u-star-li-"+id).hide(); _uPostForm('', {type:'POST', url:'/stuff/', data:{ 'a':'65', 'id':id, 'mark':mark, 'mod':'stuff', 'ajax':'2' }}); } } </script> <ul class="uStarRating2043 u-star-rating-30" id="uStarRating2043" title="Рейтинг: 4.8/5"> <li class="u-current-rating uCurStarRating2043" id="uCurStarRating2043" style="width:100%;">&nbsp;</li> <li class="u-star-li-2043"><a class="u-one-star" href="https://saiti-arqivi.ucoz.com/board/23-1-0-1611" onclick="ustarrating('2043', 1); return false;">1</a></li> <li class="u-star-li-2043"><a class="u-two-stars" href="https://saiti-arqivi.ucoz.com/board/23-1-0-1611" onclick="ustarrating('2043', 2); return false;">2</a></li> <li class="u-star-li-2043"><a class="u-three-stars" href="https://saiti-arqivi.ucoz.com/board/23-1-0-1611" onclick="ustarrating('2043', 3); return false;">3</a></li> <li class="u-star-li-2043"><a class="u-four-stars" href="https://saiti-arqivi.ucoz.com/board/23-1-0-1611" onclick="ustarrating('2043', 4); return false;">4</a></li> <li class="u-star-li-2043"><a class="u-five-stars" href="https://saiti-arqivi.ucoz.com/board/23-1-0-1611" onclick="ustarrating('2043', 5); return false;">5</a></li> </ul> <div class="shop-itempage-rating-text"><!--<s3119>-->რეიტინგი<!--</s>-->: <b><span id="entRating86">5.0</span></b>/<span id="entRated86">1</span></div> https://saiti-arqivi.ucoz.com/board/23-1-0-1611 რეიტინგი საიტისათვის https://saiti-arqivi.ucoz.com/board/23-1-0-1611 Tue, 05 Nov 2024 01:03:09 GMT