Sobriety Calculator<\/title>\n\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link id=\"google-fonts\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto+Flex:opsz,wdth,wght,GRAD,XOPQ,YTFI@8..144,25,100..1000,94,133,788&family=Roboto:wght@900&family=Sofia+Pro:wght@400;700&display=swap\" rel=\"stylesheet\">\n\n <style>\n\n .main-wrapper {\n font-family: 'sofia-pro';\n width: 100%;\n max-width: 500px;\n margin: 0 auto;\n }\n\n .card {\n background-color: #ffffff;\n padding: 25px;\n border-radius: 12px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n width: 100%;\n box-sizing: border-box;\n margin-bottom: 20px;\n }\n\n h1 {\n margin-top: 0;\n color: #1c1e21;\n text-align: center;\n }\n\n .profile-section {\n margin-bottom: 20px;\n text-align: center;\n }\n\n #profileImage {\n width: 100px;\n height: 100px;\n border-radius: 50%;\n object-fit: cover;\n border: 4px solid #ddd;\n margin-bottom: 10px;\n }\n\n .upload-btn {\n display: inline-block;\n padding: 8px 16px;\n background-color: #e4e6eb;\n color: #050505;\n border-radius: 0px;\n cursor: pointer;\n font-weight: 600;\n transition: background-color 0.2s;\n margin: 5px;\n }\n\n .upload-btn:hover {\n background-color: #dcdde1;\n }\n\n .form-group {\n text-align: left;\n margin-bottom: 15px;\n }\n\n .form-group label {\n display: block;\n font-weight: 600;\n margin-bottom: 5px;\n }\n\n .name-input-group {\n display: flex;\n align-items: center;\n }\n\n .name-input-group select,\n .name-input-group input,\n #sobrietyDate {\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 0px;\n font-size: 16px;\n box-sizing: border-box;\n -webkit-appearance: none;\n }\n\n .name-input-group select {\n width: 20%;\n border-radius: 0px;\n border-right: none;\n background-color: #f8f9fa;\n }\n\n .name-input-group input[type=\"text\"] {\n width: 80%;\n border-radius: 0px;\n }\n\n #calculateBtn, #downloadBtn {\n width: 100%;\n padding: 12px;\n font-size: 18px;\n font-weight: 700;\n color: #fff;\n border: none;\n border-radius: 0px;\n cursor: pointer;\n margin-top: 10px;\n transition: background-color 0.2s ease;\n }\n\n #calculateBtn {\n background-color: #007bff;\n }\n\n #calculateBtn:hover {\n background-color: #0056b3;\n }\n\n #downloadBtn {\n border-radius: 0px;\n background-color: #28a745;\n }\n\n #downloadBtn:hover {\n background-color: #218838;\n }\n\n #result-display {\n width: 100%;\n aspect-ratio: 1 \/ 1;\n position: relative;\n overflow: hidden;\n border-radius: 0px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n user-select: none;\n }\n\n #result-display svg {\n width: 100%;\n height: 100%;\n display: block;\n }\n\n .hidden { display: none; }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"main-wrapper\">\n <div class=\"card\">\n <h1>\u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5 \u03c4\u03b9\u03c2 \u03bc\u03ad\u03c1\u03b5\u03c2 \u03ba\u03b1\u03b8\u03b1\u03c1\u03cc\u03c4\u03b7\u03c4\u03ac\u03c2 \u03c3\u03bf\u03c5<\/h1>\n <div class=\"profile-section\">\n <img decoding=\"async\" id=\"profileImage\" src=\"https:\/\/placehold.co\/150x150\/e4e6eb\/050505?text=\u0395\u03b9\u03ba\u03cc\u03bd\u03b1\" alt=\"Profile Picture Preview\">\n <div>\n <label for=\"imageUpload\" class=\"upload-btn\">\u0391\u03bd\u03ad\u03b2\u03b1\u03c3\u03b5 \u03c4\u03b7 \u03a6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1 \u03c3\u03bf\u03c5 (\u03c0\u03c1\u03bf\u03b1\u03b9\u03c1\u03b5\u03c4\u03b9\u03ba\u03cc)<\/label>\n <input type=\"file\" id=\"imageUpload\" accept=\"image\/*\" hidden>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label for=\"userName\">\u039c\u03b5 \u03bb\u03ad\u03bd\u03b5<\/label>\n <div class=\"name-input-group\">\n <input type=\"text\" id=\"userName\" placeholder=\"\u039c\u03b5 \u03bb\u03ad\u03bd\u03b5\">\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label for=\"sobrietyDate\">\u03ba\u03b1\u03b9 \u03b7 \u03c0\u03c1\u03ce\u03c4\u03b7 \u03bc\u03ad\u03c1\u03b1 \u03ba\u03b1\u03b8\u03b1\u03c1\u03cc\u03c4\u03b7\u03c4\u03ac\u03c2 \u03bc\u03bf\u03c5 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03c4\u03b9\u03c2<\/label>\n <input type=\"date\" id=\"sobrietyDate\">\n <\/div>\n <button id=\"calculateBtn\">\u039a\u03ac\u03bd\u03b5 \u03c4\u03bf\u03bd \u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03bc\u03cc<\/button>\n <\/div>\n\n <div id=\"result-display\" class=\"hidden\">\n<svg id=\"Layer_2\" data-name=\"Layer 2\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" viewBox=\"0.54 13.06 331.14 331.14\">\n <defs>\n <style>\n .cls-1 { fill: url(#Stainless_Steel-5); filter: url(#drop-shadow-1); }\n .dynamic-days-font { font-family: 'Roboto Flex', sans-serif; font-size: 41.86px; font-variation-settings: 'slnt' 0, 'wdth' 25, 'GRAD' 94, 'XOPQ' 133, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 788, 'YTLC' 514, 'YTUC' 712; }\n .dynamic-days-font, .cls-3, .cls-4, .cls-5 { fill: #fff; }\n .cls-3 { font-size: 14.98px; }\n .cls-3, .cls-4 { font-family: 'sofia-pro', sans-serif; }\n .cls-4 { font-size: 10.04px; }\n .cls-6 { filter: url(#drop-shadow-3); stroke-width: 1.17px; }\n .cls-6, .cls-7 { stroke: #fff; stroke-miterlimit: 10; }\n .cls-7 { fill: #171717; stroke-width: 1.09px; }\n .cls-11 { opacity: .4; }\n .cls-12 { fill: url(#Stainless_Steel); }\n .cls-12, .cls-13, .cls-14, .cls-15 { fill-rule: evenodd; }\n .cls-5 { font-family: 'sofia-pro', sans-serif; font-weight: 700; font-size: 11px; }\n .cls-13 { fill: url(#Stainless_Steel-4); }\n .cls-14 { fill: url(#Stainless_Steel-3); }\n .cls-15 { fill: url(#Stainless_Steel-2); }\n .cls-34 { filter: url(#drop-shadow-2); }\n <\/style>\n <linearGradient id=\"Stainless_Steel\" data-name=\"Stainless Steel\" x1=\"74.43\" y1=\"46.2\" x2=\"154.4\" y2=\"249.41\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0\" stop-color=\"#e5e2df\"\/>\n <stop offset=\"0\" stop-color=\"#d8d4d0\"\/>\n <stop offset=\"0\" stop-color=\"#ccc7c2\"\/>\n <stop offset=\".07\" stop-color=\"#bdb8b4\"\/>\n <stop offset=\".15\" stop-color=\"#a7a3a0\"\/>\n <stop offset=\".52\" stop-color=\"#e0e1e2\"\/>\n <stop offset=\".62\" stop-color=\"#d3d3d3\"\/>\n <stop offset=\".82\" stop-color=\"#b1aeac\"\/>\n <stop offset=\".88\" stop-color=\"#a7a3a0\"\/>\n <stop offset=\"1\" stop-color=\"#d1d3d4\"\/>\n <stop offset=\"1\" stop-color=\"#a7a9ac\"\/>\n <\/linearGradient>\n <linearGradient id=\"Stainless_Steel-2\" data-name=\"Stainless Steel\" x1=\"74.55\" y1=\"46.15\" x2=\"154.53\" y2=\"249.36\" xlink:href=\"#Stainless_Steel\"\/>\n <linearGradient id=\"Stainless_Steel-3\" data-name=\"Stainless Steel\" x1=\"74.49\" y1=\"46.17\" x2=\"154.46\" y2=\"249.39\" xlink:href=\"#Stainless_Steel\"\/>\n <linearGradient id=\"Stainless_Steel-4\" data-name=\"Stainless Steel\" x1=\"144.45\" y1=\"18.64\" x2=\"224.43\" y2=\"221.85\" xlink:href=\"#Stainless_Steel\"\/>\n <linearGradient id=\"Stainless_Steel-5\" data-name=\"Stainless Steel\" x1=\"255.44\" y1=\"22.65\" x2=\"268.76\" y2=\"96.87\" xlink:href=\"#Stainless_Steel\"\/>\n <filter id=\"drop-shadow-1\" x=\"198.26\" y=\"0\" width=\"159\" height=\"160\" filterUnits=\"userSpaceOnUse\">\n <feOffset dx=\"14\" dy=\"12\"\/>\n <feGaussianBlur result=\"blur\" stdDeviation=\"13\"\/>\n <feFlood flood-color=\"#000\" flood-opacity=\".75\"\/>\n <feComposite in2=\"blur\" operator=\"in\"\/>\n <feComposite in=\"SourceGraphic\"\/>\n <\/filter>\n <filter id=\"drop-shadow-2\" x=\"155.26\" y=\"65\" width=\"199\" height=\"263\" filterUnits=\"userSpaceOnUse\">\n <feOffset dx=\"14\" dy=\"12\"\/>\n <feGaussianBlur result=\"blur-2\" stdDeviation=\"13\"\/>\n <feFlood flood-color=\"#000\" flood-opacity=\".75\"\/>\n <feComposite in2=\"blur-2\" operator=\"in\"\/>\n <feComposite in=\"SourceGraphic\"\/>\n <\/filter>\n <filter id=\"drop-shadow-3\" x=\"100.4\" y=\".15\" width=\"209\" height=\"209\" filterUnits=\"userSpaceOnUse\">\n <feOffset dx=\"15.02\" dy=\"12.88\"\/>\n <feGaussianBlur result=\"blur-3\" stdDeviation=\"13.95\"\/>\n <feFlood flood-color=\"#000\" flood-opacity=\".56\"\/>\n <feComposite in2=\"blur-3\" operator=\"in\"\/>\n <feComposite in=\"SourceGraphic\"\/>\n <\/filter>\n <clipPath id=\"profileClipPath\"><circle cx=\"190.13\" cy=\"91.96\" r=\"61.38\"\/><\/clipPath>\n <\/defs>\n <g id=\"Layer_1-2\" data-name=\"Layer 1\">\n <rect class=\"cls-7\" x=\".54\" y=\"13.06\" width=\"331.14\" height=\"331.14\" rx=\"14.02\" ry=\"14.02\"\/>\n <text class=\"cls-3\" text-anchor=\"middle\" x=\"166.11\" y=\"299.34\">\n <tspan id=\"svg-share-line1\" x=\"166.11\" dy=\"0em\">\u0395\u03af\u03bc\u03b1\u03b9 \u03bf\/\u03b7...<\/tspan>\n <tspan id=\"svg-share-line2\" x=\"166.11\" dy=\"1.2em\">...\u039a\u03b1\u03b8\u03b1\u03c1\u03cc\u03c2\/\u03ae<\/tspan>\n <\/text>\n <text class=\"cls-5\" text-anchor=\"middle\" transform=\"translate(322.13 99.42) rotate(-90)\"><tspan id=\"svg-date-stamp\">Current Date<\/tspan><\/text>\n <g id=\"Layer_1-2-2\" data-name=\"Layer 1-2\">\n <path class=\"cls-12\" d=\"M131.76,96.76c9.37,2.08,18.08,6.41,25.49,12.49,5.83,4.83,10.75,10.64,14.45,17.18,1.47,2.45,2.72,5.05,3.66,7.72l-31.8,8.23s-11.8-45.62-11.8-45.62ZM126.06,146.91l-10.31,2.67-13.62-52.65-17.66,4.57,15.3,59.14c-1.01-.99-1.95-2.08-2.82-3.19l-2.85-3.26c-5.69-6.53-11.36-13.31-17.05-19.84l-17.11-19.74c-1.9-2.18-3.76-4.53-5.63-6.63-2.92,3.84-5.45,7.91-7.69,12.16-2.22,4.32-4.04,8.88-5.41,13.57-8.13,27.53-.76,57.29,19.23,77.88,1.7,1.73,3.57,3.49,5.4,5.1s3.86,3,5.67,4.53l24.61-6.37c-1.55-.85-3.14-1.52-4.73-2.19-19.91-9.6-33.24-28.91-35.1-50.93-.37-3.99-.32-8,.08-11.94.46-3.7,1.11-7.29,2.1-10.88.47.21,8.58,9.95,9.76,11.31,3.3,3.73,6.48,7.66,9.78,11.39,6.6,7.46,12.89,15.34,19.49,22.8,6.6,7.46,12.94,15.24,19.49,22.8,3.22,3.75,6.46,7.58,9.68,11.33,2.02,2.31,8.32,9.93,9.78,11.39l-16.62-64.22,10.31-2.67c1.03,3.98,10.07,39.57,10.47,40.13.61.09,15.49-3.92,17.36-4.41l-10.41-40.23,31.64-8.19c.51,4.54.55,9.19-.02,13.76-.99,8.09-3.47,15.9-7.46,23.02-1.43,2.54-3.11,5.06-4.85,7.34-.25.32-1.78,2.13-1.64,2.34.61.09,22.52-5.74,25.1-6.41,18.5-39.96,1.16-87.32-38.8-105.82-13.54-6.25-28.57-8.61-43.43-6.77l17.89,69.14h0l.08-.02Z\"\/>\n <path class=\"cls-15\" d=\"M212.25,134.03c12.39,52.06-19.77,104.31-71.81,116.77-52.06,12.39-104.31-19.77-116.77-71.81-12.39-52.06,19.77-104.31,71.81-116.77h0c52.06-12.39,104.31,19.77,116.69,71.83l.08-.02ZM89.35,62.05C37.11,77.9,7.61,133.04,23.47,185.29c15.85,52.25,70.99,81.74,123.24,65.89,52.25-15.85,81.74-70.99,65.89-123.24h0c-15.83-52.17-70.9-81.68-123.16-65.91l-.08.02Z\"\/>\n <path class=\"cls-14\" d=\"M33.43,180.96l-.4-1.56c-12.72-46.89,15.01-95.32,61.9-108.04,46.89-12.72,95.32,15.01,108.04,61.9,12.72,46.89-15.01,95.32-61.9,108.04-42.61,11.53-87.16-10.21-104.19-50.89-1.3-3.08-2.46-6.28-3.39-9.54l-.06.1ZM92.36,70.44c-47.6,14.15-74.75,64.18-60.6,111.79,14.15,47.6,64.18,74.75,111.79,60.6,47.6-14.15,74.75-64.18,60.6-111.79h0c-14.05-47.54-64.09-74.69-111.61-60.56l-.16.04-.02-.08Z\"\/>\n <path class=\"cls-13\" d=\"M222.19,214.64l-1.17.3-.34-1.33,1.25-.32c-.51-.03-1,0-1.45.21l.38,1.48c.41-.02.86-.22,1.25-.32h0l.08-.02Z\"\/>\n <\/g>\n <path class=\"cls-1\" d=\"M268.56,32.82c19.4,2.75,32.94,20.76,30.2,40.16-2.75,19.4-20.76,32.94-40.16,30.2s-32.94-20.76-30.2-40.16c2.75-19.4,20.76-32.94,40.16-30.2M269.23,28.13c-22.02-3.12-42.4,12.2-45.51,34.22-3.12,22.02,12.2,42.4,34.22,45.51s42.4-12.2,45.51-34.22c3.12-22.02-12.2-42.4-34.22-45.51h0Z\"\/>\n <path id=\"keytag_color\" class=\"cls-34\" d=\"M268.79,121.21l3.54-24.97-24.99-3.54-3.54,24.97c-27.81,9.13-67.18,89.68-63.05,119.47,4.8,34.67,53.59,37.33,53.59,37.33,0,0,47.61,10.99,61.85-20.98,12.24-27.47-3.21-115.79-27.4-132.28Z\"\/>\n <g id=\"top_ofkeytags\" class=\"cls-11\">\n <path d=\"M226.29,130.61l1.03,5.96c.81-.94,1.61-1.85,2.42-2.72l-1-5.78c-.81.81-1.63,1.65-2.45,2.53Z\"\/>\n <path d=\"M282.26,139c-.53-1.08-1.08-2.12-1.63-3.13l-2.6,5.27c.53,1.06,1.04,2.16,1.55,3.29l2.67-5.43Z\"\/>\n <path d=\"M216.14,143.27l1.89,5.56c.67-.98,1.34-1.95,2.02-2.9l-1.86-5.47c-.68.92-1.37,1.86-2.05,2.81Z\"\/>\n <path d=\"M208.51,154.92l2.58,4.89c.57-.96,1.14-1.91,1.71-2.85l-2.55-4.84c-.58.93-1.16,1.86-1.73,2.81Z\"\/>\n <path d=\"M198.74,183.81l-3.91-2.76c-.4.88-.79,1.77-1.17,2.65l3.92,2.77c.38-.88.77-1.77,1.17-2.66Z\"\/>\n <path d=\"M197.73,174.84l3.56,3.46c.43-.9.86-1.8,1.3-2.69l-3.55-3.45c-.44.89-.88,1.79-1.32,2.68Z\"\/>\n <path d=\"M207.16,166.77l-3.1-4.15c-.5.91-1,1.82-1.5,2.74l3.12,4.17c.49-.93.98-1.85,1.48-2.77Z\"\/>\n <path d=\"M190.13,192.24l4.22,2.08c.34-.88.69-1.77,1.05-2.65l-4.22-2.08c-.36.89-.71,1.77-1.05,2.65Z\"\/>\n <path d=\"M295.6,217.15l4.69-.07c-.04-.94-.09-1.89-.15-2.84l-4.69.07c.06.95.11,1.9.15,2.84Z\"\/>\n <path d=\"M185.44,236.5c-.09-.65-.15-1.33-.2-2.03l-4.61,1.57c.04.37.07.75.12,1.11.08.59.18,1.18.29,1.75l4.55-1.55c-.05-.29-.11-.56-.15-.85Z\"\/>\n <path d=\"M287.24,150.66l-3.33,4.72c.38,1.1.76,2.21,1.12,3.34l3.38-4.79c-.38-1.11-.77-2.2-1.17-3.27Z\"\/>\n <path d=\"M295.04,208.84l4.64-.8c-.08-.94-.17-1.89-.27-2.84l-4.64.8c.1.95.18,1.9.27,2.84Z\"\/>\n <path d=\"M291.86,251.57c-.16.36-.34.71-.51,1.06l3.92,2.77c.32-.62.63-1.25.92-1.9.1-.23.2-.48.3-.72l-3.98-2.81c-.21.56-.42,1.09-.65,1.6Z\"\/>\n <path d=\"M288.61,171.15l3.85-3.95c-.29-1.07-.58-2.13-.88-3.18l-3.81,3.92c.29,1.06.57,2.13,.84,3.21Z\"\/>\n <path d=\"M291.08,181.94l4.17-3.12c-.22-1.02-.44-2.04-.67-3.05l-4.14,3.1c.22,1.02.44,2.04,.65,3.07Z\"\/>\n <path d=\"M292.85,191.56l4.38-2.31c-.17-.98-.34-1.96-.52-2.94l-4.37,2.3c.17.98.34,1.97,.5,2.95Z\"\/>\n <path d=\"M294.13,200.41l4.54-1.55c-.12-.95-.25-1.91-.39-2.87l-4.53,1.54c.13.96.26,1.92,.38,2.87Z\"\/>\n <path d=\"M295.46,234.33l4.58,1.42c.08-.95.15-1.92.2-2.91l-4.61-1.43c-.05.99-.11,1.97-.18,2.92Z\"\/>\n <path d=\"M235.01,269.77l-.41-.02s-.42-.03-1.15-.09l-.68,4.69c1,.1,1.57.13,1.57.13,0,0,.44.1,1.25.26l.68-4.69c-.55-.11-.86-.18-.87-.18l-.39-.09Z\"\/>\n <path d=\"M250.62,271.54l.82,4.76c.94.01,1.9,0,2.88-.01l-.82-4.73c-.99.01-1.95,0-2.89-.02Z\"\/>\n <path d=\"M241.89,270.91l.07,4.78c.89.1,1.84.2,2.85.28l-.07-4.76c-1.03-.09-1.98-.19-2.85-.3Z\"\/>\n <path d=\"M268.98,269.64l2.27,4.3c.93-.26,1.85-.55,2.76-.86l-2.24-4.25c-.9.29-1.83.56-2.79.81Z\"\/>\n <path d=\"M259.7,271.24l1.57,4.61c.95-.1,1.91-.23,2.87-.38l-1.55-4.57c-.97.13-1.93.25-2.89.34Z\"\/>\n <path d=\"M294.27,243.5l4.35,2.14c.2-.94.39-1.9.56-2.89l-4.41-2.17c-.15,1.01-.32,1.98-.5,2.92Z\"\/>\n <path d=\"M295.79,225.57l4.67.67c0-.95,0-1.9,0-2.87l-4.69-.68c.01.97.02,1.93.02,2.87Z\"\/>\n <path d=\"M285.79,260.5l3.41,3.32c.66-.67,1.29-1.37,1.91-2.11l-3.42-3.32c-.6.74-1.23,1.44-1.9,2.11Z\"\/>\n <path d=\"M192.43,199.46l-4.48-1.39c-.32.9-.63,1.79-.94,2.68l4.48,1.39c.3-.89.62-1.78.94-2.68Z\"\/>\n <path d=\"M278,266.22l2.88,3.85c.83-.46,1.65-.95,2.45-1.47l-2.85-3.82c-.79.51-1.62.98-2.48,1.44Z\"\/>\n <path d=\"M187.47,215.81l-4.82.07c-.22.96-.43,1.92-.62,2.85l4.79-.07c.2-.93.42-1.89.65-2.85Z\"\/>\n <path d=\"M183.21,246.14c.38.88.78,1.74,1.22,2.57l4.21-2.22c-.44-.83-.83-1.69-1.2-2.58l-4.23,2.23Z\"\/>\n <path d=\"M185.73,224.83l-4.84.84c-.12,1.01-.21,1.98-.28,2.93l4.78-.83c.09-.95.2-1.94.34-2.94Z\"\/>\n <path d=\"M223.58,272.95c.99.2,1.93.38,2.81.53l1.41-4.56c-.89-.15-1.83-.32-2.82-.51l-1.41,4.55Z\"\/>\n <path d=\"M189.78,207.42l-4.69-.68c-.28.93-.55,1.84-.8,2.76l4.67.67c.26-.91.54-1.83.82-2.75Z\"\/>\n <path d=\"M205.15,267.02c.88.41,1.77.8,2.65,1.17l2.79-3.95c-.89-.36-1.79-.73-2.68-1.13l-2.76,3.91Z\"\/>\n <path d=\"M188.7,254.97c.62.73,1.26,1.43,1.93,2.11l3.84-2.87c-.68-.67-1.33-1.36-1.95-2.09l-3.81,2.85Z\"\/>\n <path d=\"M214.34,270.57c.94.29,1.86.57,2.76.82l2.13-4.32c-.91-.24-1.84-.5-2.78-.79l-2.11,4.29Z\"\/>\n <path d=\"M196.35,261.93c.79.56,1.59,1.1,2.4,1.61l3.37-3.47c-.83-.5-1.64-1.02-2.44-1.57l-3.34,3.43Z\"\/>\n <path d=\"M256.04,121.26c-6.9-.98-13.29,3.82-14.27,10.73-.98,6.9,3.82,13.29,10.73,14.27,6.9.98,13.29-3.82,14.27-10.73.98-6.9-3.82-13.29-10.73-14.27ZM262.07,134.86c-.61,4.3-4.61,7.31-8.91,6.7-4.3-.61-7.31-4.61-6.7-8.91.61-4.3,4.61-7.31,8.91-6.7s7.31,4.61,6.7,8.91Z\"\/>\n <path d=\"M247.33,92.71l-4.58,32.36c3.06-4.05,8.16-6.36,13.54-5.6s9.64,4.4,11.45,9.14l4.58-32.36-24.99-3.54Z\"\/>\n <\/g>\n <text id=\"time-number\" class=\"dynamic-days-font\" text-anchor=\"middle\" transform=\"translate(240 210) rotate(8.06)\"><tspan x=\"0\" y=\"0\">90<\/tspan><\/text>\n <text id=\"time-unit\" class=\"cls-4\" text-anchor=\"middle\" transform=\"translate(240 224) rotate(8.06)\"><tspan x=\"0\" y=\"0\">\u0397\u039c\u0395\u03a1\u0395\u03a3<\/tspan><\/text>\n <g id=\"profile_image\" style=\"display:none;\">\n <circle class=\"cls-6\" cx=\"190.13\" cy=\"91.96\" r=\"61.38\"\/>\n <image id=\"svg-profile-pic\" width=\"122.76\" height=\"122.76\" x=\"128.75\" y=\"30.58\" clip-path=\"url(#profileClipPath)\" preserveAspectRatio=\"xMidYMid slice\"\/>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <div class=\"card hidden\" id=\"download-wrapper\">\n <button id=\"downloadBtn\">\u039b\u03ae\u03c8\u03b7 \u0395\u03b9\u03ba\u03cc\u03bd\u03b1\u03c2<\/button>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html-to-image\/1.11.11\/html-to-image.min.js\"><\/script>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const ui = {\n nameInput: document.getElementById('userName'),\n dateInput: document.getElementById('sobrietyDate'),\n genderArticleSelect: document.getElementById('genderArticle'),\n imageUpload: document.getElementById('imageUpload'),\n profileImage: document.getElementById('profileImage'),\n calculateBtn: document.getElementById('calculateBtn'),\n downloadBtn: document.getElementById('downloadBtn'),\n downloadWrapper: document.getElementById('download-wrapper'),\n resultDisplay: document.getElementById('result-display'),\n keytagColor: document.getElementById('keytag_color'),\n topOfKeytags: document.getElementById('top_ofkeytags'),\n timeNumber: document.getElementById('time-number'),\n timeUnit: document.getElementById('time-unit'),\n profileImageGroup: document.getElementById('profile_image'),\n svgProfilePic: document.querySelector('#profile_image image'),\n svgShareLine1: document.getElementById('svg-share-line1'),\n svgShareLine2: document.getElementById('svg-share-line2'),\n svgDateStamp: document.getElementById('svg-date-stamp'),\n };\n\n ui.dateInput.max = new Date().toISOString().split(\"T\")[0];\n\n ui.imageUpload.addEventListener('change', (event) => {\n const file = event.target.files[0];\n if (file) {\n const objectURL = URL.createObjectURL(file);\n ui.profileImage.src = objectURL;\n }\n });\n\n const getKeyTagStyle = (totalDays) => {\n if (totalDays >= 730) return { bgColor: '#000000', textColor: '#FFFFFF' }; \/\/ 2+ years -> Black\n if (totalDays >= 540) return { bgColor: '#808080', textColor: '#FFFFFF' }; \/\/ 18 months -> Gray\n if (totalDays >= 365) return { bgColor: '#F5FFFA', textColor: '#000000' }; \/\/ 1 year -> Moon Glow\n if (totalDays >= 270) return { bgColor: '#FFFF00', textColor: '#000000' }; \/\/ 9 months -> Yellow\n if (totalDays >= 180) return { bgColor: '#0000FF', textColor: '#FFFFFF' }; \/\/ 6 months -> Blue\n if (totalDays >= 90) return { bgColor: '#FF0000', textColor: '#FFFFFF' }; \/\/ 90 days -> Red\n if (totalDays >= 60) return { bgColor: '#008000', textColor: '#FFFFFF' }; \/\/ 60 days -> Green\n if (totalDays >= 30) return { bgColor: '#FFA500', textColor: '#000000' }; \/\/ 30 days -> Orange\n return { bgColor: '#FFFFFF', textColor: '#000000' }; \/\/ 0-29 days -> White\n };\n\n const pluralize = (count, s, p) => count === 1 ? `${count} ${s}` : `${count} ${p}`;\n\n ui.calculateBtn.addEventListener('click', () => {\n const dateValue = ui.dateInput.value;\n const userName = ui.nameInput.value.trim();\n if (!dateValue || !userName) {\n \/\/ Using a custom modal\/alert in the future would be better\n alert('\u03a0\u03b1\u03c1\u03b1\u03ba\u03b1\u03bb\u03ce \u03c3\u03c5\u03bc\u03c0\u03bb\u03b7\u03c1\u03ce\u03c3\u03c4\u03b5 \u03c4\u03bf \u03cc\u03bd\u03bf\u03bc\u03b1 \u03ba\u03b1\u03b9 \u03c4\u03b7\u03bd \u03b7\u03bc\u03b5\u03c1\u03bf\u03bc\u03b7\u03bd\u03af\u03b1.');\n return;\n }\n\n const startDate = new Date(dateValue);\n\n const hasProfileImage = ui.profileImage.src.startsWith('blob:');\n ui.profileImageGroup.style.display = hasProfileImage ? 'block' : 'none';\n if(hasProfileImage) {\n ui.svgProfilePic.setAttribute('href', ui.profileImage.src);\n } else {\n ui.svgProfilePic.removeAttribute('href'); \/\/ \u0391\u03c6\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 \u03b1\u03bd \u03b4\u03b5\u03bd \u03c5\u03c0\u03ac\u03c1\u03c7\u03b5\u03b9 \u03b5\u03b9\u03ba\u03cc\u03bd\u03b1\n }\n\n let adjective = \"\u039a\u03b1\u03b8\u03b1\u03c1\u03cc\u03c4\u03b7\u03c4\u03b1\u03c2!\";\n\n const now = new Date();\n startDate.setHours(0, 0, 0, 0);\n now.setHours(0, 0, 0, 0);\n\n let totalDays = Math.round((now.getTime() - startDate.getTime()) \/ (1000 * 60 * 60 * 24));\n\n const style = getKeyTagStyle(totalDays);\n \n \/\/ Directly change the inline style of the element, which has higher priority.\n ui.keytagColor.style.fill = style.bgColor;\n ui.timeNumber.style.fill = style.textColor;\n ui.timeUnit.style.fill = style.textColor;\n \n \/\/ If the background is black, make the highlight white. Otherwise, reset it.\n const highlightPaths = ui.topOfKeytags.querySelectorAll('path');\n if (totalDays >= 730) {\n highlightPaths.forEach(path => path.style.fill = 'white');\n } else {\n highlightPaths.forEach(path => path.style.fill = ''); \n }\n\n const displayDays = totalDays <= 0 ? 1 : totalDays;\n ui.timeNumber.textContent = displayDays;\n ui.timeUnit.textContent = displayDays === 1 ? '\u0397\u039c\u0395\u03a1\u0391' : '\u0397\u039c\u0395\u03a1\u0395\u03a3';\n\n let years = now.getFullYear() - startDate.getFullYear();\n let months = now.getMonth() - startDate.getMonth();\n let days = now.getDate() - startDate.getDate();\n\n if (days < 0) {\n months--;\n const prevMonth = new Date(now.getFullYear(), now.getMonth(), 0);\n days += prevMonth.getDate();\n }\n if (months < 0) {\n years--;\n months += 12;\n }\n\n if (now.getMonth() === startDate.getMonth() && now.getDate() === startDate.getDate() && totalDays > 0) {\n days = 0;\n months = 0;\n }\n\n const timeParts = [];\n if (years > 0) timeParts.push(pluralize(years, '\u03a7\u03c1\u03cc\u03bd\u03bf', '\u03a7\u03c1\u03cc\u03bd\u03b9\u03b1'));\n if (months > 0) timeParts.push(pluralize(months, '\u039c\u03ae\u03bd\u03b1', '\u039c\u03ae\u03bd\u03b5\u03c2'));\n if (days > 0) timeParts.push(pluralize(days, '\u039c\u03ad\u03c1\u03b1', '\u039c\u03ad\u03c1\u03b5\u03c2'));\n\n let timeString;\n if (totalDays <= 0) {\n timeString = `1 \u03b7\u03bc\u03ad\u03c1\u03b1`;\n } else if (timeParts.length === 0 && years > 0) {\n timeString = pluralize(years, '\u03a7\u03c1\u03cc\u03bd\u03bf', '\u03a7\u03c1\u03cc\u03bd\u03b9\u03b1');\n } else {\n timeString = timeParts.join(', ');\n }\n\n ui.svgShareLine1.textContent = `\u039c\u03b5 \u03bb\u03ad\u03bd\u03b5 ${userName}, \u039c\u03cc\u03bd\u03bf \u03b3\u03b9\u03b1 \u03a3\u03ae\u03bc\u03b5\u03c1\u03b1`;\n ui.svgShareLine2.textContent = `${timeString} ${adjective}`;\n\n const dateOptions = { day: 'numeric', month: 'long', year: 'numeric' };\n ui.svgDateStamp.textContent = new Date().toLocaleDateString('el-GR', dateOptions);\n\n ui.resultDisplay.classList.remove('hidden');\n ui.downloadWrapper.classList.remove('hidden');\n });\n\n async function embedFonts(node) {\n try {\n const fontLinks = Array.from(document.querySelectorAll('link[rel=\"stylesheet\"][id=\"google-fonts\"]'));\n const fontCSS = await Promise.all(\n fontLinks.map(link => fetch(link.href).then(res => res.text()))\n );\n\n const style = document.createElement('style');\n style.textContent = fontCSS.join('\\n');\n node.querySelector('defs').appendChild(style);\n } catch (e) {\n console.error(\"Could not embed fonts:\", e);\n }\n }\n\n ui.downloadBtn.addEventListener('click', async () => {\n const resultNode = document.getElementById('result-display');\n if (!resultNode) return;\n\n const tempContainer = document.createElement('div');\n tempContainer.style.position = 'absolute';\n tempContainer.style.top = '-9999px';\n tempContainer.style.left = '-9999px';\n\n const nodeToClone = resultNode.cloneNode(true);\n nodeToClone.style.width = '1080px';\n nodeToClone.style.height = '1080px';\n\n tempContainer.appendChild(nodeToClone);\n document.body.appendChild(tempContainer);\n\n try {\n const svgElementInClone = nodeToClone.querySelector('svg');\n const profileGroupClone = svgElementInClone.querySelector('g#profile_image'); \/\/ \u0395\u03b4\u03ce \u03ba\u03bf\u03b9\u03c4\u03ac\u03bc\u03b5 \u03c4\u03bf UI (main) \u03b1\u03bd\u03c4\u03b9\u03ba\u03b5\u03af\u03bc\u03b5\u03bd\u03bf, \u03c0\u03bf\u03c5 \u03ad\u03c7\u03b5\u03b9 \u03c4\u03bf \u03c3\u03c9\u03c3\u03c4\u03cc src \u03b3\u03b9\u03b1 \u03c4\u03bf profileImage\n const hasProfileImage = ui.profileImage.src.startsWith('blob:');\n if(!hasProfileImage && profileGroupClone){\n profileGroupClone.parentNode.removeChild(profileGroupClone);\n }\n await embedFonts(svgElementInClone);\n\n const dataUrl = await htmlToImage.toJpeg(svgElementInClone, {\n quality: 1.0,\n width: 1080,\n height: 1080\n });\n\n const link = document.createElement('a');\n link.download = 'sobriety-milestone.jpg';\n link.href = dataUrl;\n link.click();\n } catch (error) {\n console.error('Oops, something went wrong!', error);\n alert('Could not download image. See console for details.');\n } finally {\n document.body.removeChild(tempContainer);\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Sobriety Calculator \u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5 \u03c4\u03b9\u03c2 \u03bc\u03ad\u03c1\u03b5\u03c2 \u03ba\u03b1\u03b8\u03b1\u03c1\u03cc\u03c4\u03b7\u03c4\u03ac\u03c2 \u03c3\u03bf\u03c5 \u0391\u03bd\u03ad\u03b2\u03b1\u03c3\u03b5 \u03c4\u03b7 \u03a6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1 \u03c3\u03bf\u03c5 (\u03c0\u03c1\u03bf\u03b1\u03b9\u03c1\u03b5\u03c4\u03b9\u03ba\u03cc) \u039c\u03b5 \u03bb\u03ad\u03bd\u03b5 \u03ba\u03b1\u03b9 \u03b7 \u03c0\u03c1\u03ce\u03c4\u03b7 \u03bc\u03ad\u03c1\u03b1 \u03ba\u03b1\u03b8\u03b1\u03c1\u03cc\u03c4\u03b7\u03c4\u03ac\u03c2 \u03bc\u03bf\u03c5 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03c4\u03b9\u03c2 \u039a\u03ac\u03bd\u03b5 \u03c4\u03bf\u03bd \u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03bc\u03cc \u0395\u03af\u03bc\u03b1\u03b9 \u03bf\/\u03b7… …\u039a\u03b1\u03b8\u03b1\u03c1\u03cc\u03c2\/\u03ae Current Date 90 \u0397\u039c\u0395\u03a1\u0395\u03a3 \u039b\u03ae\u03c8\u03b7 \u0395\u03b9\u03ba\u03cc\u03bd\u03b1\u03c2<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11095","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.na-greece.gr\/en\/wp-json\/wp\/v2\/pages\/11095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.na-greece.gr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.na-greece.gr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.na-greece.gr\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.na-greece.gr\/en\/wp-json\/wp\/v2\/comments?post=11095"}],"version-history":[{"count":124,"href":"https:\/\/www.na-greece.gr\/en\/wp-json\/wp\/v2\/pages\/11095\/revisions"}],"predecessor-version":[{"id":18299,"href":"https:\/\/www.na-greece.gr\/en\/wp-json\/wp\/v2\/pages\/11095\/revisions\/18299"}],"wp:attachment":[{"href":"https:\/\/www.na-greece.gr\/en\/wp-json\/wp\/v2\/media?parent=11095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Sobriety Calculator<\/title>\n\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link id=\"google-fonts\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto+Flex:opsz,wdth,wght,GRAD,XOPQ,YTFI@8..144,25,100..1000,94,133,788&family=Roboto:wght@900&family=Sofia+Pro:wght@400;700&display=swap\" rel=\"stylesheet\">\n\n <style>\n\n .main-wrapper {\n font-family: 'sofia-pro';\n width: 100%;\n max-width: 500px;\n margin: 0 auto;\n }\n\n .card {\n background-color: #ffffff;\n padding: 25px;\n border-radius: 12px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n width: 100%;\n box-sizing: border-box;\n margin-bottom: 20px;\n }\n\n h1 {\n margin-top: 0;\n color: #1c1e21;\n text-align: center;\n }\n\n .profile-section {\n margin-bottom: 20px;\n text-align: center;\n }\n\n #profileImage {\n width: 100px;\n height: 100px;\n border-radius: 50%;\n object-fit: cover;\n border: 4px solid #ddd;\n margin-bottom: 10px;\n }\n\n .upload-btn {\n display: inline-block;\n padding: 8px 16px;\n background-color: #e4e6eb;\n color: #050505;\n border-radius: 0px;\n cursor: pointer;\n font-weight: 600;\n transition: background-color 0.2s;\n margin: 5px;\n }\n\n .upload-btn:hover {\n background-color: #dcdde1;\n }\n\n .form-group {\n text-align: left;\n margin-bottom: 15px;\n }\n\n .form-group label {\n display: block;\n font-weight: 600;\n margin-bottom: 5px;\n }\n\n .name-input-group {\n display: flex;\n align-items: center;\n }\n\n .name-input-group select,\n .name-input-group input,\n #sobrietyDate {\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 0px;\n font-size: 16px;\n box-sizing: border-box;\n -webkit-appearance: none;\n }\n\n .name-input-group select {\n width: 20%;\n border-radius: 0px;\n border-right: none;\n background-color: #f8f9fa;\n }\n\n .name-input-group input[type=\"text\"] {\n width: 80%;\n border-radius: 0px;\n }\n\n #calculateBtn, #downloadBtn {\n width: 100%;\n padding: 12px;\n font-size: 18px;\n font-weight: 700;\n color: #fff;\n border: none;\n border-radius: 0px;\n cursor: pointer;\n margin-top: 10px;\n transition: background-color 0.2s ease;\n }\n\n #calculateBtn {\n background-color: #007bff;\n }\n\n #calculateBtn:hover {\n background-color: #0056b3;\n }\n\n #downloadBtn {\n border-radius: 0px;\n background-color: #28a745;\n }\n\n #downloadBtn:hover {\n background-color: #218838;\n }\n\n #result-display {\n width: 100%;\n aspect-ratio: 1 \/ 1;\n position: relative;\n overflow: hidden;\n border-radius: 0px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n user-select: none;\n }\n\n #result-display svg {\n width: 100%;\n height: 100%;\n display: block;\n }\n\n .hidden { display: none; }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"main-wrapper\">\n <div class=\"card\">\n <h1>\u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5 \u03c4\u03b9\u03c2 \u03bc\u03ad\u03c1\u03b5\u03c2 \u03ba\u03b1\u03b8\u03b1\u03c1\u03cc\u03c4\u03b7\u03c4\u03ac\u03c2 \u03c3\u03bf\u03c5<\/h1>\n <div class=\"profile-section\">\n <img decoding=\"async\" id=\"profileImage\" src=\"https:\/\/placehold.co\/150x150\/e4e6eb\/050505?text=\u0395\u03b9\u03ba\u03cc\u03bd\u03b1\" alt=\"Profile Picture Preview\">\n <div>\n <label for=\"imageUpload\" class=\"upload-btn\">\u0391\u03bd\u03ad\u03b2\u03b1\u03c3\u03b5 \u03c4\u03b7 \u03a6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1 \u03c3\u03bf\u03c5 (\u03c0\u03c1\u03bf\u03b1\u03b9\u03c1\u03b5\u03c4\u03b9\u03ba\u03cc)<\/label>\n <input type=\"file\" id=\"imageUpload\" accept=\"image\/*\" hidden>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label for=\"userName\">\u039c\u03b5 \u03bb\u03ad\u03bd\u03b5<\/label>\n <div class=\"name-input-group\">\n <input type=\"text\" id=\"userName\" placeholder=\"\u039c\u03b5 \u03bb\u03ad\u03bd\u03b5\">\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label for=\"sobrietyDate\">\u03ba\u03b1\u03b9 \u03b7 \u03c0\u03c1\u03ce\u03c4\u03b7 \u03bc\u03ad\u03c1\u03b1 \u03ba\u03b1\u03b8\u03b1\u03c1\u03cc\u03c4\u03b7\u03c4\u03ac\u03c2 \u03bc\u03bf\u03c5 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03c4\u03b9\u03c2<\/label>\n <input type=\"date\" id=\"sobrietyDate\">\n <\/div>\n <button id=\"calculateBtn\">\u039a\u03ac\u03bd\u03b5 \u03c4\u03bf\u03bd \u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03bc\u03cc<\/button>\n <\/div>\n\n <div id=\"result-display\" class=\"hidden\">\n<svg id=\"Layer_2\" data-name=\"Layer 2\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" viewBox=\"0.54 13.06 331.14 331.14\">\n <defs>\n <style>\n .cls-1 { fill: url(#Stainless_Steel-5); filter: url(#drop-shadow-1); }\n .dynamic-days-font { font-family: 'Roboto Flex', sans-serif; font-size: 41.86px; font-variation-settings: 'slnt' 0, 'wdth' 25, 'GRAD' 94, 'XOPQ' 133, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 788, 'YTLC' 514, 'YTUC' 712; }\n .dynamic-days-font, .cls-3, .cls-4, .cls-5 { fill: #fff; }\n .cls-3 { font-size: 14.98px; }\n .cls-3, .cls-4 { font-family: 'sofia-pro', sans-serif; }\n .cls-4 { font-size: 10.04px; }\n .cls-6 { filter: url(#drop-shadow-3); stroke-width: 1.17px; }\n .cls-6, .cls-7 { stroke: #fff; stroke-miterlimit: 10; }\n .cls-7 { fill: #171717; stroke-width: 1.09px; }\n .cls-11 { opacity: .4; }\n .cls-12 { fill: url(#Stainless_Steel); }\n .cls-12, .cls-13, .cls-14, .cls-15 { fill-rule: evenodd; }\n .cls-5 { font-family: 'sofia-pro', sans-serif; font-weight: 700; font-size: 11px; }\n .cls-13 { fill: url(#Stainless_Steel-4); }\n .cls-14 { fill: url(#Stainless_Steel-3); }\n .cls-15 { fill: url(#Stainless_Steel-2); }\n .cls-34 { filter: url(#drop-shadow-2); }\n <\/style>\n <linearGradient id=\"Stainless_Steel\" data-name=\"Stainless Steel\" x1=\"74.43\" y1=\"46.2\" x2=\"154.4\" y2=\"249.41\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0\" stop-color=\"#e5e2df\"\/>\n <stop offset=\"0\" stop-color=\"#d8d4d0\"\/>\n <stop offset=\"0\" stop-color=\"#ccc7c2\"\/>\n <stop offset=\".07\" stop-color=\"#bdb8b4\"\/>\n <stop offset=\".15\" stop-color=\"#a7a3a0\"\/>\n <stop offset=\".52\" stop-color=\"#e0e1e2\"\/>\n <stop offset=\".62\" stop-color=\"#d3d3d3\"\/>\n <stop offset=\".82\" stop-color=\"#b1aeac\"\/>\n <stop offset=\".88\" stop-color=\"#a7a3a0\"\/>\n <stop offset=\"1\" stop-color=\"#d1d3d4\"\/>\n <stop offset=\"1\" stop-color=\"#a7a9ac\"\/>\n <\/linearGradient>\n <linearGradient id=\"Stainless_Steel-2\" data-name=\"Stainless Steel\" x1=\"74.55\" y1=\"46.15\" x2=\"154.53\" y2=\"249.36\" xlink:href=\"#Stainless_Steel\"\/>\n <linearGradient id=\"Stainless_Steel-3\" data-name=\"Stainless Steel\" x1=\"74.49\" y1=\"46.17\" x2=\"154.46\" y2=\"249.39\" xlink:href=\"#Stainless_Steel\"\/>\n <linearGradient id=\"Stainless_Steel-4\" data-name=\"Stainless Steel\" x1=\"144.45\" y1=\"18.64\" x2=\"224.43\" y2=\"221.85\" xlink:href=\"#Stainless_Steel\"\/>\n <linearGradient id=\"Stainless_Steel-5\" data-name=\"Stainless Steel\" x1=\"255.44\" y1=\"22.65\" x2=\"268.76\" y2=\"96.87\" xlink:href=\"#Stainless_Steel\"\/>\n <filter id=\"drop-shadow-1\" x=\"198.26\" y=\"0\" width=\"159\" height=\"160\" filterUnits=\"userSpaceOnUse\">\n <feOffset dx=\"14\" dy=\"12\"\/>\n <feGaussianBlur result=\"blur\" stdDeviation=\"13\"\/>\n <feFlood flood-color=\"#000\" flood-opacity=\".75\"\/>\n <feComposite in2=\"blur\" operator=\"in\"\/>\n <feComposite in=\"SourceGraphic\"\/>\n <\/filter>\n <filter id=\"drop-shadow-2\" x=\"155.26\" y=\"65\" width=\"199\" height=\"263\" filterUnits=\"userSpaceOnUse\">\n <feOffset dx=\"14\" dy=\"12\"\/>\n <feGaussianBlur result=\"blur-2\" stdDeviation=\"13\"\/>\n <feFlood flood-color=\"#000\" flood-opacity=\".75\"\/>\n <feComposite in2=\"blur-2\" operator=\"in\"\/>\n <feComposite in=\"SourceGraphic\"\/>\n <\/filter>\n <filter id=\"drop-shadow-3\" x=\"100.4\" y=\".15\" width=\"209\" height=\"209\" filterUnits=\"userSpaceOnUse\">\n <feOffset dx=\"15.02\" dy=\"12.88\"\/>\n <feGaussianBlur result=\"blur-3\" stdDeviation=\"13.95\"\/>\n <feFlood flood-color=\"#000\" flood-opacity=\".56\"\/>\n <feComposite in2=\"blur-3\" operator=\"in\"\/>\n <feComposite in=\"SourceGraphic\"\/>\n <\/filter>\n <clipPath id=\"profileClipPath\"><circle cx=\"190.13\" cy=\"91.96\" r=\"61.38\"\/><\/clipPath>\n <\/defs>\n <g id=\"Layer_1-2\" data-name=\"Layer 1\">\n <rect class=\"cls-7\" x=\".54\" y=\"13.06\" width=\"331.14\" height=\"331.14\" rx=\"14.02\" ry=\"14.02\"\/>\n <text class=\"cls-3\" text-anchor=\"middle\" x=\"166.11\" y=\"299.34\">\n <tspan id=\"svg-share-line1\" x=\"166.11\" dy=\"0em\">\u0395\u03af\u03bc\u03b1\u03b9 \u03bf\/\u03b7...<\/tspan>\n <tspan id=\"svg-share-line2\" x=\"166.11\" dy=\"1.2em\">...\u039a\u03b1\u03b8\u03b1\u03c1\u03cc\u03c2\/\u03ae<\/tspan>\n <\/text>\n <text class=\"cls-5\" text-anchor=\"middle\" transform=\"translate(322.13 99.42) rotate(-90)\"><tspan id=\"svg-date-stamp\">Current Date<\/tspan><\/text>\n <g id=\"Layer_1-2-2\" data-name=\"Layer 1-2\">\n <path class=\"cls-12\" d=\"M131.76,96.76c9.37,2.08,18.08,6.41,25.49,12.49,5.83,4.83,10.75,10.64,14.45,17.18,1.47,2.45,2.72,5.05,3.66,7.72l-31.8,8.23s-11.8-45.62-11.8-45.62ZM126.06,146.91l-10.31,2.67-13.62-52.65-17.66,4.57,15.3,59.14c-1.01-.99-1.95-2.08-2.82-3.19l-2.85-3.26c-5.69-6.53-11.36-13.31-17.05-19.84l-17.11-19.74c-1.9-2.18-3.76-4.53-5.63-6.63-2.92,3.84-5.45,7.91-7.69,12.16-2.22,4.32-4.04,8.88-5.41,13.57-8.13,27.53-.76,57.29,19.23,77.88,1.7,1.73,3.57,3.49,5.4,5.1s3.86,3,5.67,4.53l24.61-6.37c-1.55-.85-3.14-1.52-4.73-2.19-19.91-9.6-33.24-28.91-35.1-50.93-.37-3.99-.32-8,.08-11.94.46-3.7,1.11-7.29,2.1-10.88.47.21,8.58,9.95,9.76,11.31,3.3,3.73,6.48,7.66,9.78,11.39,6.6,7.46,12.89,15.34,19.49,22.8,6.6,7.46,12.94,15.24,19.49,22.8,3.22,3.75,6.46,7.58,9.68,11.33,2.02,2.31,8.32,9.93,9.78,11.39l-16.62-64.22,10.31-2.67c1.03,3.98,10.07,39.57,10.47,40.13.61.09,15.49-3.92,17.36-4.41l-10.41-40.23,31.64-8.19c.51,4.54.55,9.19-.02,13.76-.99,8.09-3.47,15.9-7.46,23.02-1.43,2.54-3.11,5.06-4.85,7.34-.25.32-1.78,2.13-1.64,2.34.61.09,22.52-5.74,25.1-6.41,18.5-39.96,1.16-87.32-38.8-105.82-13.54-6.25-28.57-8.61-43.43-6.77l17.89,69.14h0l.08-.02Z\"\/>\n <path class=\"cls-15\" d=\"M212.25,134.03c12.39,52.06-19.77,104.31-71.81,116.77-52.06,12.39-104.31-19.77-116.77-71.81-12.39-52.06,19.77-104.31,71.81-116.77h0c52.06-12.39,104.31,19.77,116.69,71.83l.08-.02ZM89.35,62.05C37.11,77.9,7.61,133.04,23.47,185.29c15.85,52.25,70.99,81.74,123.24,65.89,52.25-15.85,81.74-70.99,65.89-123.24h0c-15.83-52.17-70.9-81.68-123.16-65.91l-.08.02Z\"\/>\n <path class=\"cls-14\" d=\"M33.43,180.96l-.4-1.56c-12.72-46.89,15.01-95.32,61.9-108.04,46.89-12.72,95.32,15.01,108.04,61.9,12.72,46.89-15.01,95.32-61.9,108.04-42.61,11.53-87.16-10.21-104.19-50.89-1.3-3.08-2.46-6.28-3.39-9.54l-.06.1ZM92.36,70.44c-47.6,14.15-74.75,64.18-60.6,111.79,14.15,47.6,64.18,74.75,111.79,60.6,47.6-14.15,74.75-64.18,60.6-111.79h0c-14.05-47.54-64.09-74.69-111.61-60.56l-.16.04-.02-.08Z\"\/>\n <path class=\"cls-13\" d=\"M222.19,214.64l-1.17.3-.34-1.33,1.25-.32c-.51-.03-1,0-1.45.21l.38,1.48c.41-.02.86-.22,1.25-.32h0l.08-.02Z\"\/>\n <\/g>\n <path class=\"cls-1\" d=\"M268.56,32.82c19.4,2.75,32.94,20.76,30.2,40.16-2.75,19.4-20.76,32.94-40.16,30.2s-32.94-20.76-30.2-40.16c2.75-19.4,20.76-32.94,40.16-30.2M269.23,28.13c-22.02-3.12-42.4,12.2-45.51,34.22-3.12,22.02,12.2,42.4,34.22,45.51s42.4-12.2,45.51-34.22c3.12-22.02-12.2-42.4-34.22-45.51h0Z\"\/>\n <path id=\"keytag_color\" class=\"cls-34\" d=\"M268.79,121.21l3.54-24.97-24.99-3.54-3.54,24.97c-27.81,9.13-67.18,89.68-63.05,119.47,4.8,34.67,53.59,37.33,53.59,37.33,0,0,47.61,10.99,61.85-20.98,12.24-27.47-3.21-115.79-27.4-132.28Z\"\/>\n <g id=\"top_ofkeytags\" class=\"cls-11\">\n <path d=\"M226.29,130.61l1.03,5.96c.81-.94,1.61-1.85,2.42-2.72l-1-5.78c-.81.81-1.63,1.65-2.45,2.53Z\"\/>\n <path d=\"M282.26,139c-.53-1.08-1.08-2.12-1.63-3.13l-2.6,5.27c.53,1.06,1.04,2.16,1.55,3.29l2.67-5.43Z\"\/>\n <path d=\"M216.14,143.27l1.89,5.56c.67-.98,1.34-1.95,2.02-2.9l-1.86-5.47c-.68.92-1.37,1.86-2.05,2.81Z\"\/>\n <path d=\"M208.51,154.92l2.58,4.89c.57-.96,1.14-1.91,1.71-2.85l-2.55-4.84c-.58.93-1.16,1.86-1.73,2.81Z\"\/>\n <path d=\"M198.74,183.81l-3.91-2.76c-.4.88-.79,1.77-1.17,2.65l3.92,2.77c.38-.88.77-1.77,1.17-2.66Z\"\/>\n <path d=\"M197.73,174.84l3.56,3.46c.43-.9.86-1.8,1.3-2.69l-3.55-3.45c-.44.89-.88,1.79-1.32,2.68Z\"\/>\n <path d=\"M207.16,166.77l-3.1-4.15c-.5.91-1,1.82-1.5,2.74l3.12,4.17c.49-.93.98-1.85,1.48-2.77Z\"\/>\n <path d=\"M190.13,192.24l4.22,2.08c.34-.88.69-1.77,1.05-2.65l-4.22-2.08c-.36.89-.71,1.77-1.05,2.65Z\"\/>\n <path d=\"M295.6,217.15l4.69-.07c-.04-.94-.09-1.89-.15-2.84l-4.69.07c.06.95.11,1.9.15,2.84Z\"\/>\n <path d=\"M185.44,236.5c-.09-.65-.15-1.33-.2-2.03l-4.61,1.57c.04.37.07.75.12,1.11.08.59.18,1.18.29,1.75l4.55-1.55c-.05-.29-.11-.56-.15-.85Z\"\/>\n <path d=\"M287.24,150.66l-3.33,4.72c.38,1.1.76,2.21,1.12,3.34l3.38-4.79c-.38-1.11-.77-2.2-1.17-3.27Z\"\/>\n <path d=\"M295.04,208.84l4.64-.8c-.08-.94-.17-1.89-.27-2.84l-4.64.8c.1.95.18,1.9.27,2.84Z\"\/>\n <path d=\"M291.86,251.57c-.16.36-.34.71-.51,1.06l3.92,2.77c.32-.62.63-1.25.92-1.9.1-.23.2-.48.3-.72l-3.98-2.81c-.21.56-.42,1.09-.65,1.6Z\"\/>\n <path d=\"M288.61,171.15l3.85-3.95c-.29-1.07-.58-2.13-.88-3.18l-3.81,3.92c.29,1.06.57,2.13,.84,3.21Z\"\/>\n <path d=\"M291.08,181.94l4.17-3.12c-.22-1.02-.44-2.04-.67-3.05l-4.14,3.1c.22,1.02.44,2.04,.65,3.07Z\"\/>\n <path d=\"M292.85,191.56l4.38-2.31c-.17-.98-.34-1.96-.52-2.94l-4.37,2.3c.17.98.34,1.97,.5,2.95Z\"\/>\n <path d=\"M294.13,200.41l4.54-1.55c-.12-.95-.25-1.91-.39-2.87l-4.53,1.54c.13.96.26,1.92,.38,2.87Z\"\/>\n <path d=\"M295.46,234.33l4.58,1.42c.08-.95.15-1.92.2-2.91l-4.61-1.43c-.05.99-.11,1.97-.18,2.92Z\"\/>\n <path d=\"M235.01,269.77l-.41-.02s-.42-.03-1.15-.09l-.68,4.69c1,.1,1.57.13,1.57.13,0,0,.44.1,1.25.26l.68-4.69c-.55-.11-.86-.18-.87-.18l-.39-.09Z\"\/>\n <path d=\"M250.62,271.54l.82,4.76c.94.01,1.9,0,2.88-.01l-.82-4.73c-.99.01-1.95,0-2.89-.02Z\"\/>\n <path d=\"M241.89,270.91l.07,4.78c.89.1,1.84.2,2.85.28l-.07-4.76c-1.03-.09-1.98-.19-2.85-.3Z\"\/>\n <path d=\"M268.98,269.64l2.27,4.3c.93-.26,1.85-.55,2.76-.86l-2.24-4.25c-.9.29-1.83.56-2.79.81Z\"\/>\n <path d=\"M259.7,271.24l1.57,4.61c.95-.1,1.91-.23,2.87-.38l-1.55-4.57c-.97.13-1.93.25-2.89.34Z\"\/>\n <path d=\"M294.27,243.5l4.35,2.14c.2-.94.39-1.9.56-2.89l-4.41-2.17c-.15,1.01-.32,1.98-.5,2.92Z\"\/>\n <path d=\"M295.79,225.57l4.67.67c0-.95,0-1.9,0-2.87l-4.69-.68c.01.97.02,1.93.02,2.87Z\"\/>\n <path d=\"M285.79,260.5l3.41,3.32c.66-.67,1.29-1.37,1.91-2.11l-3.42-3.32c-.6.74-1.23,1.44-1.9,2.11Z\"\/>\n <path d=\"M192.43,199.46l-4.48-1.39c-.32.9-.63,1.79-.94,2.68l4.48,1.39c.3-.89.62-1.78.94-2.68Z\"\/>\n <path d=\"M278,266.22l2.88,3.85c.83-.46,1.65-.95,2.45-1.47l-2.85-3.82c-.79.51-1.62.98-2.48,1.44Z\"\/>\n <path d=\"M187.47,215.81l-4.82.07c-.22.96-.43,1.92-.62,2.85l4.79-.07c.2-.93.42-1.89.65-2.85Z\"\/>\n <path d=\"M183.21,246.14c.38.88.78,1.74,1.22,2.57l4.21-2.22c-.44-.83-.83-1.69-1.2-2.58l-4.23,2.23Z\"\/>\n <path d=\"M185.73,224.83l-4.84.84c-.12,1.01-.21,1.98-.28,2.93l4.78-.83c.09-.95.2-1.94.34-2.94Z\"\/>\n <path d=\"M223.58,272.95c.99.2,1.93.38,2.81.53l1.41-4.56c-.89-.15-1.83-.32-2.82-.51l-1.41,4.55Z\"\/>\n <path d=\"M189.78,207.42l-4.69-.68c-.28.93-.55,1.84-.8,2.76l4.67.67c.26-.91.54-1.83.82-2.75Z\"\/>\n <path d=\"M205.15,267.02c.88.41,1.77.8,2.65,1.17l2.79-3.95c-.89-.36-1.79-.73-2.68-1.13l-2.76,3.91Z\"\/>\n <path d=\"M188.7,254.97c.62.73,1.26,1.43,1.93,2.11l3.84-2.87c-.68-.67-1.33-1.36-1.95-2.09l-3.81,2.85Z\"\/>\n <path d=\"M214.34,270.57c.94.29,1.86.57,2.76.82l2.13-4.32c-.91-.24-1.84-.5-2.78-.79l-2.11,4.29Z\"\/>\n <path d=\"M196.35,261.93c.79.56,1.59,1.1,2.4,1.61l3.37-3.47c-.83-.5-1.64-1.02-2.44-1.57l-3.34,3.43Z\"\/>\n <path d=\"M256.04,121.26c-6.9-.98-13.29,3.82-14.27,10.73-.98,6.9,3.82,13.29,10.73,14.27,6.9.98,13.29-3.82,14.27-10.73.98-6.9-3.82-13.29-10.73-14.27ZM262.07,134.86c-.61,4.3-4.61,7.31-8.91,6.7-4.3-.61-7.31-4.61-6.7-8.91.61-4.3,4.61-7.31,8.91-6.7s7.31,4.61,6.7,8.91Z\"\/>\n <path d=\"M247.33,92.71l-4.58,32.36c3.06-4.05,8.16-6.36,13.54-5.6s9.64,4.4,11.45,9.14l4.58-32.36-24.99-3.54Z\"\/>\n <\/g>\n <text id=\"time-number\" class=\"dynamic-days-font\" text-anchor=\"middle\" transform=\"translate(240 210) rotate(8.06)\"><tspan x=\"0\" y=\"0\">90<\/tspan><\/text>\n <text id=\"time-unit\" class=\"cls-4\" text-anchor=\"middle\" transform=\"translate(240 224) rotate(8.06)\"><tspan x=\"0\" y=\"0\">\u0397\u039c\u0395\u03a1\u0395\u03a3<\/tspan><\/text>\n <g id=\"profile_image\" style=\"display:none;\">\n <circle class=\"cls-6\" cx=\"190.13\" cy=\"91.96\" r=\"61.38\"\/>\n <image id=\"svg-profile-pic\" width=\"122.76\" height=\"122.76\" x=\"128.75\" y=\"30.58\" clip-path=\"url(#profileClipPath)\" preserveAspectRatio=\"xMidYMid slice\"\/>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <div class=\"card hidden\" id=\"download-wrapper\">\n <button id=\"downloadBtn\">\u039b\u03ae\u03c8\u03b7 \u0395\u03b9\u03ba\u03cc\u03bd\u03b1\u03c2<\/button>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html-to-image\/1.11.11\/html-to-image.min.js\"><\/script>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const ui = {\n nameInput: document.getElementById('userName'),\n dateInput: document.getElementById('sobrietyDate'),\n genderArticleSelect: document.getElementById('genderArticle'),\n imageUpload: document.getElementById('imageUpload'),\n profileImage: document.getElementById('profileImage'),\n calculateBtn: document.getElementById('calculateBtn'),\n downloadBtn: document.getElementById('downloadBtn'),\n downloadWrapper: document.getElementById('download-wrapper'),\n resultDisplay: document.getElementById('result-display'),\n keytagColor: document.getElementById('keytag_color'),\n topOfKeytags: document.getElementById('top_ofkeytags'),\n timeNumber: document.getElementById('time-number'),\n timeUnit: document.getElementById('time-unit'),\n profileImageGroup: document.getElementById('profile_image'),\n svgProfilePic: document.querySelector('#profile_image image'),\n svgShareLine1: document.getElementById('svg-share-line1'),\n svgShareLine2: document.getElementById('svg-share-line2'),\n svgDateStamp: document.getElementById('svg-date-stamp'),\n };\n\n ui.dateInput.max = new Date().toISOString().split(\"T\")[0];\n\n ui.imageUpload.addEventListener('change', (event) => {\n const file = event.target.files[0];\n if (file) {\n const objectURL = URL.createObjectURL(file);\n ui.profileImage.src = objectURL;\n }\n });\n\n const getKeyTagStyle = (totalDays) => {\n if (totalDays >= 730) return { bgColor: '#000000', textColor: '#FFFFFF' }; \/\/ 2+ years -> Black\n if (totalDays >= 540) return { bgColor: '#808080', textColor: '#FFFFFF' }; \/\/ 18 months -> Gray\n if (totalDays >= 365) return { bgColor: '#F5FFFA', textColor: '#000000' }; \/\/ 1 year -> Moon Glow\n if (totalDays >= 270) return { bgColor: '#FFFF00', textColor: '#000000' }; \/\/ 9 months -> Yellow\n if (totalDays >= 180) return { bgColor: '#0000FF', textColor: '#FFFFFF' }; \/\/ 6 months -> Blue\n if (totalDays >= 90) return { bgColor: '#FF0000', textColor: '#FFFFFF' }; \/\/ 90 days -> Red\n if (totalDays >= 60) return { bgColor: '#008000', textColor: '#FFFFFF' }; \/\/ 60 days -> Green\n if (totalDays >= 30) return { bgColor: '#FFA500', textColor: '#000000' }; \/\/ 30 days -> Orange\n return { bgColor: '#FFFFFF', textColor: '#000000' }; \/\/ 0-29 days -> White\n };\n\n const pluralize = (count, s, p) => count === 1 ? `${count} ${s}` : `${count} ${p}`;\n\n ui.calculateBtn.addEventListener('click', () => {\n const dateValue = ui.dateInput.value;\n const userName = ui.nameInput.value.trim();\n if (!dateValue || !userName) {\n \/\/ Using a custom modal\/alert in the future would be better\n alert('\u03a0\u03b1\u03c1\u03b1\u03ba\u03b1\u03bb\u03ce \u03c3\u03c5\u03bc\u03c0\u03bb\u03b7\u03c1\u03ce\u03c3\u03c4\u03b5 \u03c4\u03bf \u03cc\u03bd\u03bf\u03bc\u03b1 \u03ba\u03b1\u03b9 \u03c4\u03b7\u03bd \u03b7\u03bc\u03b5\u03c1\u03bf\u03bc\u03b7\u03bd\u03af\u03b1.');\n return;\n }\n\n const startDate = new Date(dateValue);\n\n const hasProfileImage = ui.profileImage.src.startsWith('blob:');\n ui.profileImageGroup.style.display = hasProfileImage ? 'block' : 'none';\n if(hasProfileImage) {\n ui.svgProfilePic.setAttribute('href', ui.profileImage.src);\n } else {\n ui.svgProfilePic.removeAttribute('href'); \/\/ \u0391\u03c6\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 \u03b1\u03bd \u03b4\u03b5\u03bd \u03c5\u03c0\u03ac\u03c1\u03c7\u03b5\u03b9 \u03b5\u03b9\u03ba\u03cc\u03bd\u03b1\n }\n\n let adjective = \"\u039a\u03b1\u03b8\u03b1\u03c1\u03cc\u03c4\u03b7\u03c4\u03b1\u03c2!\";\n\n const now = new Date();\n startDate.setHours(0, 0, 0, 0);\n now.setHours(0, 0, 0, 0);\n\n let totalDays = Math.round((now.getTime() - startDate.getTime()) \/ (1000 * 60 * 60 * 24));\n\n const style = getKeyTagStyle(totalDays);\n \n \/\/ Directly change the inline style of the element, which has higher priority.\n ui.keytagColor.style.fill = style.bgColor;\n ui.timeNumber.style.fill = style.textColor;\n ui.timeUnit.style.fill = style.textColor;\n \n \/\/ If the background is black, make the highlight white. Otherwise, reset it.\n const highlightPaths = ui.topOfKeytags.querySelectorAll('path');\n if (totalDays >= 730) {\n highlightPaths.forEach(path => path.style.fill = 'white');\n } else {\n highlightPaths.forEach(path => path.style.fill = ''); \n }\n\n const displayDays = totalDays <= 0 ? 1 : totalDays;\n ui.timeNumber.textContent = displayDays;\n ui.timeUnit.textContent = displayDays === 1 ? '\u0397\u039c\u0395\u03a1\u0391' : '\u0397\u039c\u0395\u03a1\u0395\u03a3';\n\n let years = now.getFullYear() - startDate.getFullYear();\n let months = now.getMonth() - startDate.getMonth();\n let days = now.getDate() - startDate.getDate();\n\n if (days < 0) {\n months--;\n const prevMonth = new Date(now.getFullYear(), now.getMonth(), 0);\n days += prevMonth.getDate();\n }\n if (months < 0) {\n years--;\n months += 12;\n }\n\n if (now.getMonth() === startDate.getMonth() && now.getDate() === startDate.getDate() && totalDays > 0) {\n days = 0;\n months = 0;\n }\n\n const timeParts = [];\n if (years > 0) timeParts.push(pluralize(years, '\u03a7\u03c1\u03cc\u03bd\u03bf', '\u03a7\u03c1\u03cc\u03bd\u03b9\u03b1'));\n if (months > 0) timeParts.push(pluralize(months, '\u039c\u03ae\u03bd\u03b1', '\u039c\u03ae\u03bd\u03b5\u03c2'));\n if (days > 0) timeParts.push(pluralize(days, '\u039c\u03ad\u03c1\u03b1', '\u039c\u03ad\u03c1\u03b5\u03c2'));\n\n let timeString;\n if (totalDays <= 0) {\n timeString = `1 \u03b7\u03bc\u03ad\u03c1\u03b1`;\n } else if (timeParts.length === 0 && years > 0) {\n timeString = pluralize(years, '\u03a7\u03c1\u03cc\u03bd\u03bf', '\u03a7\u03c1\u03cc\u03bd\u03b9\u03b1');\n } else {\n timeString = timeParts.join(', ');\n }\n\n ui.svgShareLine1.textContent = `\u039c\u03b5 \u03bb\u03ad\u03bd\u03b5 ${userName}, \u039c\u03cc\u03bd\u03bf \u03b3\u03b9\u03b1 \u03a3\u03ae\u03bc\u03b5\u03c1\u03b1`;\n ui.svgShareLine2.textContent = `${timeString} ${adjective}`;\n\n const dateOptions = { day: 'numeric', month: 'long', year: 'numeric' };\n ui.svgDateStamp.textContent = new Date().toLocaleDateString('el-GR', dateOptions);\n\n ui.resultDisplay.classList.remove('hidden');\n ui.downloadWrapper.classList.remove('hidden');\n });\n\n async function embedFonts(node) {\n try {\n const fontLinks = Array.from(document.querySelectorAll('link[rel=\"stylesheet\"][id=\"google-fonts\"]'));\n const fontCSS = await Promise.all(\n fontLinks.map(link => fetch(link.href).then(res => res.text()))\n );\n\n const style = document.createElement('style');\n style.textContent = fontCSS.join('\\n');\n node.querySelector('defs').appendChild(style);\n } catch (e) {\n console.error(\"Could not embed fonts:\", e);\n }\n }\n\n ui.downloadBtn.addEventListener('click', async () => {\n const resultNode = document.getElementById('result-display');\n if (!resultNode) return;\n\n const tempContainer = document.createElement('div');\n tempContainer.style.position = 'absolute';\n tempContainer.style.top = '-9999px';\n tempContainer.style.left = '-9999px';\n\n const nodeToClone = resultNode.cloneNode(true);\n nodeToClone.style.width = '1080px';\n nodeToClone.style.height = '1080px';\n\n tempContainer.appendChild(nodeToClone);\n document.body.appendChild(tempContainer);\n\n try {\n const svgElementInClone = nodeToClone.querySelector('svg');\n const profileGroupClone = svgElementInClone.querySelector('g#profile_image'); \/\/ \u0395\u03b4\u03ce \u03ba\u03bf\u03b9\u03c4\u03ac\u03bc\u03b5 \u03c4\u03bf UI (main) \u03b1\u03bd\u03c4\u03b9\u03ba\u03b5\u03af\u03bc\u03b5\u03bd\u03bf, \u03c0\u03bf\u03c5 \u03ad\u03c7\u03b5\u03b9 \u03c4\u03bf \u03c3\u03c9\u03c3\u03c4\u03cc src \u03b3\u03b9\u03b1 \u03c4\u03bf profileImage\n const hasProfileImage = ui.profileImage.src.startsWith('blob:');\n if(!hasProfileImage && profileGroupClone){\n profileGroupClone.parentNode.removeChild(profileGroupClone);\n }\n await embedFonts(svgElementInClone);\n\n const dataUrl = await htmlToImage.toJpeg(svgElementInClone, {\n quality: 1.0,\n width: 1080,\n height: 1080\n });\n\n const link = document.createElement('a');\n link.download = 'sobriety-milestone.jpg';\n link.href = dataUrl;\n link.click();\n } catch (error) {\n console.error('Oops, something went wrong!', error);\n alert('Could not download image. See console for details.');\n } finally {\n document.body.removeChild(tempContainer);\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Sobriety Calculator \u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5 \u03c4\u03b9\u03c2 \u03bc\u03ad\u03c1\u03b5\u03c2 \u03ba\u03b1\u03b8\u03b1\u03c1\u03cc\u03c4\u03b7\u03c4\u03ac\u03c2 \u03c3\u03bf\u03c5 \u0391\u03bd\u03ad\u03b2\u03b1\u03c3\u03b5 \u03c4\u03b7 \u03a6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1 \u03c3\u03bf\u03c5 (\u03c0\u03c1\u03bf\u03b1\u03b9\u03c1\u03b5\u03c4\u03b9\u03ba\u03cc) \u039c\u03b5 \u03bb\u03ad\u03bd\u03b5 \u03ba\u03b1\u03b9 \u03b7 \u03c0\u03c1\u03ce\u03c4\u03b7 \u03bc\u03ad\u03c1\u03b1 \u03ba\u03b1\u03b8\u03b1\u03c1\u03cc\u03c4\u03b7\u03c4\u03ac\u03c2 \u03bc\u03bf\u03c5 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03c4\u03b9\u03c2 \u039a\u03ac\u03bd\u03b5 \u03c4\u03bf\u03bd \u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03bc\u03cc \u0395\u03af\u03bc\u03b1\u03b9 \u03bf\/\u03b7… …\u039a\u03b1\u03b8\u03b1\u03c1\u03cc\u03c2\/\u03ae Current Date 90 \u0397\u039c\u0395\u03a1\u0395\u03a3 \u039b\u03ae\u03c8\u03b7 \u0395\u03b9\u03ba\u03cc\u03bd\u03b1\u03c2<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11095","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.na-greece.gr\/en\/wp-json\/wp\/v2\/pages\/11095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.na-greece.gr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.na-greece.gr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.na-greece.gr\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.na-greece.gr\/en\/wp-json\/wp\/v2\/comments?post=11095"}],"version-history":[{"count":124,"href":"https:\/\/www.na-greece.gr\/en\/wp-json\/wp\/v2\/pages\/11095\/revisions"}],"predecessor-version":[{"id":18299,"href":"https:\/\/www.na-greece.gr\/en\/wp-json\/wp\/v2\/pages\/11095\/revisions\/18299"}],"wp:attachment":[{"href":"https:\/\/www.na-greece.gr\/en\/wp-json\/wp\/v2\/media?parent=11095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}