Hello,
i got this own Webside for node Red (HTML,CSS) and i am looking for a simple script that i get an output when i click on The buttons of this Dashboard.
But i have no idea how Java Script works may someone could look at it if there is an simple solution.
I think this should be done easily with the "Id" in the HTML but i ttryed a long time and i cant get it working.
[{"id":"8ad58918.ee8168","type":"http in","z":"23fdc39b.828c1c","name":"","url":"/mysite","method":"get","upload":false,"swaggerDoc":"","x":590,"y":720,"wires":[["4c783328.03dc2c"]]},{"id":"7a857226.0a6bec","type":"http in","z":"23fdc39b.828c1c","name":"","url":"/mysitepost","method":"post","upload":false,"swaggerDoc":"","x":610,"y":920,"wires":[["20480b13.afdb94","b2b68336.996fe"]]},{"id":"20480b13.afdb94","type":"debug","z":"23fdc39b.828c1c","name":"mysitepost","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":830,"y":960,"wires":[]},{"id":"2a90cbb3.d07964","type":"http response","z":"23fdc39b.828c1c","name":"","statusCode":"","headers":{},"x":1270,"y":880,"wires":[]},{"id":"e9a9f9c6.f8ce08","type":"template","z":"23fdc39b.828c1c","name":"CSS","field":"payload.style","fieldType":"msg","format":"html","syntax":"mustache","template":":root {\n\t--icon: #b0bfd8;\n}\n\nbody {\n\twidth: 100%;\n\theight: 100vh;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\toverflow: hidden;\n\tmargin: 0;\n\tbackground-color: #e3efe8;\n\tbackground-image: linear-gradient(315deg, #e3efe8 0%, #96a7cf 74%);\n}\n\n\nnav.menu {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tposition: relative;\n\theight: 150px;\n\tpadding: 0 29px 10px;\n\tbackground: #fff0;\n\talign-items: flex-end;\n\twidth: 700px;\n}\n\nnav.menu:before {\n\tcontent: \"\";\n\twidth: 100%;\n\theight: 150px;\n\tbackground: #181818;\n\tposition: absolute;\n\tleft: 0;\n\tbottom: 0;\n\tborder-radius: 20px;\n\tz-index: -1;\n\tbox-shadow: 1px 1px 2px 0px #fff;\n}\n\ninput { display: none; }\n\nlabel {\n\ttext-decoration: none;\n\tfont-family: sans-serif;\n\ttext-transform: uppercase;\n\tfont-size: 14px;\n\tmin-width: 100px;\n\theight: 100px;\n\tmargin: 10px 10px 20px;\n\ttext-align: center;\n\tdisplay: inline-grid;\n\talign-items: end;\n\tcolor: #b0bfd8;\n\tposition: relative;\n\ttransition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;\n\tcursor: pointer;\n}\n\nlabel:hover {\n\tcolor: #fff;\n\ttext-shadow: 0 0 5px #fff, 0 0 10px #fff;\n}\n\ninput:checked + label {\n\tcolor: #fff;\n\theight: 130px;\n}\n\n.selector {\n\t--hole: #2196f3;\n\tbackground: \n\t\tradial-gradient(circle at 50% 50%, #fff8 30px, #fff0 45px, #fff 50px, #fff0 50px 100%), \n\t\tradial-gradient(circle at 50% 50%, var(--hole) 0 45px, #fff0 50px 100%),\n\t\tradial-gradient(circle at 50% 75px, #181818 0 70px, #fff0 71px 100%);\n\twidth: 95px;\n\theight: 95px;\n\tposition: absolute;\n\tbottom: 47px;\n\tleft: 0;\n\tz-index: -1;\n\ttransition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;\n\tborder: 19px solid #181818;\n\tborder-radius: 100%;\n}\n\n#m-home:checked ~ .selector {\n\tleft: 23px;\n}\n\n#m-search:checked ~ .selector {\n\tleft: 143px;\n\tfilter: hue-rotate(535deg);\n}\n\n#m-notification:checked ~ .selector {\n\tleft: 263px;\n\tfilter: hue-rotate(950deg);\n}\n\n#m-favorites:checked ~ .selector {\n\tleft: 383px;\n\tfilter: hue-rotate(1580deg);\n}\n\n#m-profile:checked ~ .selector {\n\tleft: 502px;\n\tfilter: hue-rotate(1850deg);\n}\n\n#m-profile2:checked ~ .selector {\n\tleft: 621px;\n\tfilter: hue-rotate(1850deg);\n}\n\n.selector:after {\n\tcontent: \"\";\n\tposition: absolute;\n\tbottom: -80px;\n\twidth: 80px;\n\theight: 10px;\n\tbackground: #181818;\n\tleft: calc(50% - 40px);\n\tborder-radius: 5px 5px 15px 15px;\n}\n\ninput:checked ~ .selector:after {\n\tbox-shadow: 0 -17px 35px 8px var(--hole);\n}\n\n\n\n\n\n\n\n/*** ICONS ***/\nlabel:before,\nlabel:after {\n\tcontent: \"\";\n\tposition: absolute;\n\tbox-sizing: border-box;\n\ttransition: all 0.5s ease 0s;\n}\n\nlabel:hover:before,\nlabel:hover:after {\n\tfilter: brightness(1.5) drop-shadow(0px 0px 4px #fff);\n\ttransition: all 0.5s ease 0s;\n}\n\ninput:checked + label:before, \ninput:checked + label:after {\n\tfilter: brightness(1.5) drop-shadow(0px 0px 2px var(--sel));\n\ttransition: all 0.5s ease 0s;\n}\n\n\nlabel[for=m-home]:before {\n\twidth: 40px;\n\theight: 40px;\n\tleft: 30px;\n\ttop: 30px;\n\ttransition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;\n\tborder-radius: 2px;\n\tbackground: \n\t\tconic-gradient(from 90deg at 65% 60%, var(--icon) 0 25%, #fff0 0 100%),\n\t\tconic-gradient(from 180deg at 35% 60%, var(--icon) 0 25%, #fff0 0 100%),\n\t\tconic-gradient(from 135deg at 50% 0%, var(--icon) 0 25%, #fff0 0 100%);\n\tbackground-repeat: no-repeat;\n\tbackground-size: 100% 100%, 100% 100%, 100% 27px;\n}\n\nlabel[for=m-home]:after {\n\twidth: 40px;\n\theight: 40px;\n\tleft: 30px;\n\ttop: 24px;\n\tborder: 6px solid var(--icon);\n\tborder-right-width: 0;\n\tborder-bottom-width: 0;\n\ttransform: rotate(45deg);\n\tborder-radius: 5px;\n\ttransition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;\n}\n\n\nlabel[for=m-search]:before {\n\twidth: 40px;\n\theight: 40px;\n\tleft: 20px;\n\ttop: 17px;\n\tborder: 6px solid var(--icon);\n\tborder-radius: 100%;\n\ttransition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;\n}\n\nlabel[for=m-search]:after {\n\twidth: 22px;\n\theight: 9px;\n\tleft: 60px;\n\ttop: 50px;\n\ttransition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;\n\tbackground: var(--icon);\n\ttransform-origin: left top;\n\ttransform: rotate(45deg);\n\tborder-radius: 0 10px 10px 0;\n}\n\n\nlabel[for=m-notification]:before {\n\twidth: 50px;\n\theight: 42px;\n\tleft: 25px;\n\ttop: 20px;\n\tz-index: 1;\n\tborder-radius: 30px 30px 0 0;\n\ttransition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;\n\tbackground: \n\t\tlinear-gradient(90deg, #fff0 0 6px, var(--icon) 0 calc(100% - 6px), #fff0 calc(100% - 6px) 100%), \n\t\tconic-gradient(from 135deg at 50% 33%, var(--icon) 0 25%, #fff0 0 100%);\n}\n\nlabel[for=m-notification]:after {\n\twidth: 10px;\n\theight: 57px;\n\tleft: 45px;\n\ttop: 14px;\n\tz-index: 0;\n\ttransition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;\n\tbackground: radial-gradient(circle at 50% 6px, var(--icon) 3px, #fff0 4px 100%), #fff0;\n\ttransform-origin: left top;\n\tborder-bottom: 6px solid var(--icon);\n\tborder-radius: 5px;\n}\n\n\nlabel[for=m-favorites]:before {\n\twidth: 50px;\n\theight: 50px;\n\tleft: 18px;\n\ttop: -9px;\n\ttransition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;\n\tbackground: \n\t\tradial-gradient(circle at 16px 16px, var(--icon) 0 16px, #fff0 calc(16px + 1px) 100%), \n\t\tradial-gradient(circle at 34px 34px, var(--icon) 0 16px, #fff0 calc(16px + 1px) 100%), \n\t\tlinear-gradient(45deg, var(--icon) 0 37px, #fff0 38px 100%);\n\tborder-radius: 17px 22px 17px 4px;\n\ttransform: rotate(-45deg);\n\ttransform-origin: center right;\n}\n\n\nlabel[for=m-profile]:before {\n\twidth: 50px;\n\theight: 54px;\n\ttop: 16px;\n\tbackground: \n\t\tradial-gradient(circle at 50% 15px, var(--icon) 0 12px, #fff0 13px 100%),\n\t\tradial-gradient(circle at 50% 100%, var(--icon) 0 22px, #fff0 23px 100%);\n\tleft: 25px;\n\tborder-radius: 8px;\n}\n\nlabel[for=m-profile2]:before {\n\twidth: 50px;\n\theight: 54px;\n\ttop: 16px;\n\tbackground: \n\t\tradial-gradient(circle at 50% 15px, var(--icon) 0 12px, #fff0 13px 100%),\n\t\tradial-gradient(circle at 50% 100%, var(--icon) 0 22px, #fff0 23px 100%);\n\tleft: 25px;\n\tborder-radius: 8px;\n}\n\n\ninput:checked + label {\n\tcolor: var(--sel);\n\ttext-shadow: 0 0 5px var(--sel), 0 0 10px var(--sel);\n}\t\n\ninput:checked + label[for=m-home] {\n\t--sel: #39a1f4;\n}\n\ninput:checked + label[for=m-search] {\n\t--sel: #f48d4e;\n}\n\ninput:checked + label[for=m-notification] {\n\t--sel: #84a91c;\n}\n\ninput:checked + label[for=m-favorites] {\n\t--sel: #ff6275;\n\theight: 125px;\n}\n\ninput:checked + label[for=m-profile] {\n\t--sel: #9d74ff;\n}\n\ninput:checked + label[for=m-profile2] {\n\t--sel: #9d74ff;\n}\n\n@media only screen and (orientation: portrait) {\n\tlabel { color: transparent !important; text-shadow: none !important;}\n}","x":970,"y":820,"wires":[["6d0947c7.d0d4d8"]]},{"id":"61dbe146.63894","type":"template","z":"23fdc39b.828c1c","name":"JavaScript","field":"payload.script","fieldType":"msg","format":"javascript","syntax":"plain","template":"\n","x":790,"y":820,"wires":[["e9a9f9c6.f8ce08"]]},{"id":"c96f4682.70c4f8","type":"http response","z":"23fdc39b.828c1c","name":"","statusCode":"","headers":{},"x":1270,"y":820,"wires":[]},{"id":"f19bf51f.238d08","type":"function","z":"23fdc39b.828c1c","name":"return msg.payload to client","func":"msg.payload = 'The following data was submitted and available in the msg.payload: '+msg.payload;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":1000,"y":880,"wires":[["2a90cbb3.d07964"]]},{"id":"b2b68336.996fe","type":"json","z":"23fdc39b.828c1c","name":"","property":"payload","action":"","pretty":false,"x":810,"y":880,"wires":[["f19bf51f.238d08"]]},{"id":"6d0947c7.d0d4d8","type":"template","z":"23fdc39b.828c1c","name":"HTML","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n <head>\n\n <style>{{{payload.style}}}</style>\n\n\n<nav class=\"menu\">\n\n\t<input type=\"radio\" name=\"nav-item\" id=\"m-home\" checked><label for=\"m-home\">Home</label>\n\t<input type=\"radio\" name=\"nav-item\" id=\"m-search\"><label for=\"m-search\">Search</label>\n\t<input type=\"radio\" name=\"nav-item\" id=\"m-notification\"><label for=\"m-notification\">Notification</label>\n\t<input type=\"radio\" name=\"nav-item\" id=\"m-favorites\"><label for=\"m-favorites\">Favorites</label>\n\t<input type=\"radio\" name=\"nav-item\" id=\"m-profile\"><label for=\"m-profile\">Profile</label>\n\t\t<input type=\"radio\" name=\"nav-item\" id=\"m-profile2\"><label for=\"m-profile2\">Profile2</label>\n\n\t<div class=\"selector\"></div>\n</nav>\n\n<script>{{{payload.script}}}</script>\n","x":1130,"y":820,"wires":[["c96f4682.70c4f8"]]},{"id":"4c783328.03dc2c","type":"function","z":"23fdc39b.828c1c","name":"msg.url = \"mysitepost\";","func":"msg.url = \"mysitepost\";\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":800,"y":720,"wires":[["61dbe146.63894"]]}]
This is my Flow it generates the Webside under the local Node Red Url added with /mysite
Thx for help
