Umbraco 10 403 and other errors - .net-6.0

I are trying to deploy my first umbraco 10 website to plesk hosting service.
Have published the site using visual studio 17 and the site is up and running fine however when I go to the back office the page is blank. at best I get the menus across the top. But none of the tree or information in the main part of the screen.
I do get these errors up
Authorization error: Unauthorized access to URL:
/umbraco/backoffice/umbracoapi/backofficeassets/GetSupportedLocales
Contact your administrator for information.
×
Authorization error: Unauthorized access to URL:
/umbraco/backoffice/umbracoapi/updatecheck/GetCheck
Contact your administrator for information.
×
Authorization error: Unauthorized access to URL:
LocalizedText
Contact your administrator for information.
×
Authorization error: Unauthorized access to URL:
/umbraco/backoffice/umbracoapi/tour/GetTours
Contact your administrator for information.
×
Authorization error: Unauthorized access to URL:
/umbraco/backoffice/umbracoapi/contenttype/AllowsCultureVariation
Contact your administrator for information.
×
Authorization error: Unauthorized access to URL:
/umbraco/backoffice/umbracoapi/section/GetSections
Contact your administrator for information.
×
Authorization error: Unauthorized access to URL:
/umbraco/backoffice/umbracoapi/section/GetSections
Contact your administrator for information.
If I look at the console I have these errors
Failed to load resource: the server responded with a status of 403 ()
umbraco-backoffice-js.js.vbff92525987e3f7cfb9c113a93c5c023af38d7bc:147 Possibly unhandled rejection: {"errorMsg":"Failed to get tours","data":"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\r\n<html xmlns=\"http://www.w3.org/1999/xhtml\">\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\"/>\r\n<title>403 - Forbidden: Access is denied.</title>\r\n<style type=\"text/css\">\r\n<!--\r\nbody{margin:0;font-size:.7em;font-family:Verdana, Arial, Helvetica, sans-serif;background:#EEEEEE;}\r\nfieldset{padding:0 15px 10px 15px;} \r\nh1{font-size:2.4em;margin:0;color:#FFF;}\r\nh2{font-size:1.7em;margin:0;color:#CC0000;} \r\nh3{font-size:1.2em;margin:10px 0 0 0;color:#000000;} \r\n#header{width:96%;margin:0 0 0 0;padding:6px 2% 6px 2%;font-family:\"trebuchet MS\", Verdana, sans-serif;color:#FFF;\r\nbackground-color:#555555;}\r\n#content{margin:0 0 0 2%;position:relative;}\r\n.content-container{background:#FFF;width:96%;margin-top:8px;padding:10px;position:relative;}\r\n-->\r\n</style>\r\n</head>\r\n<body>\r\n<div id=\"header\"><h1>Server Error</h1></div>\r\n<div id=\"content\">\r\n <div class=\"content-container\"><fieldset>\r\n <h2>403 - Forbidden: Access is denied.</h2>\r\n <h3>You do not have permission to view this directory or page using the credentials that you supplied.</h3>\r\n </fieldset></div>\r\n</div>\r\n</body>\r\n</html>\r\n","status":403}
(anonymous) # umbraco-backoffice-js.js.vbff92525987e3f7cfb9c113a93c5c023af38d7bc:147
umbraco/backoffice/umbracoapi/language/GetAllLanguages:1 Failed to load resource: the server responded with a status of 403 ()
umbraco-backoffice-js.js.vbff92525987e3f7cfb9c113a93c5c023af38d7bc:147 Possibly unhandled rejection: {"errorMsg":"Failed to get languages","data":"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\r\n<html xmlns=\"http://www.w3.org/1999/xhtml\">\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\"/>\r\n<title>403 - Forbidden: Access is denied.</title>\r\n<style type=\"text/css\">\r\n<!--\r\nbody{margin:0;font-size:.7em;font-family:Verdana, Arial, Helvetica, sans-serif;background:#EEEEEE;}\r\nfieldset{padding:0 15px 10px 15px;} \r\nh1{font-size:2.4em;margin:0;color:#FFF;}\r\nh2{font-size:1.7em;margin:0;color:#CC0000;} \r\nh3{font-size:1.2em;margin:10px 0 0 0;color:#000000;} \r\n#header{width:96%;margin:0 0 0 0;padding:6px 2% 6px 2%;font-family:\"trebuchet MS\", Verdana, sans-serif;color:#FFF;\r\nbackground-color:#555555;}\r\n#content{margin:0 0 0 2%;position:relative;}\r\n.content-container{background:#FFF;width:96%;margin-top:8px;padding:10px;position:relative;}\r\n-->\r\n</style>\r\n</head>\r\n<body>\r\n<div id=\"header\"><h1>Server Error</h1></div>\r\n<div id=\"content\">\r\n <div class=\"content-container\"><fieldset>\r\n <h2>403 - Forbidden: Access is denied.</h2>\r\n <h3>You do not have permission to view this directory or page using the credentials that you supplied.</h3>\r\n </fieldset></div>\r\n</div>\r\n</body>\r\n</html>\r\n","status":403}
(anonymous) # umbraco-backoffice-js.js.vbff92525987e3f7cfb9c113a93c5c023af38d7bc:147
umbraco/backoffice/umbracoapi/dashboard/GetDashboard?section=content:1 Failed to load resource: the server responded with a status of 403 ()
umbraco-backoffice-js.js.vbff92525987e3f7cfb9c113a93c5c023af38d7bc:147 Possibly unhandled rejection: {"errorMsg":"Failed to get dashboard content","data":"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\r\n<html xmlns=\"http://www.w3.org/1999/xhtml\">\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\"/>\r\n<title>403 - Forbidden: Access is denied.</title>\r\n<style type=\"text/css\">\r\n<!--\r\nbody{margin:0;font-size:.7em;font-family:Verdana, Arial, Helvetica, sans-serif;background:#EEEEEE;}\r\nfieldset{padding:0 15px 10px 15px;} \r\nh1{font-size:2.4em;margin:0;color:#FFF;}\r\nh2{font-size:1.7em;margin:0;color:#CC0000;} \r\nh3{font-size:1.2em;margin:10px 0 0 0;color:#000000;} \r\n#header{width:96%;margin:0 0 0 0;padding:6px 2% 6px 2%;font-family:\"trebuchet MS\", Verdana, sans-serif;color:#FFF;\r\nbackground-color:#555555;}\r\n#content{margin:0 0 0 2%;position:relative;}\r\n.content-container{background:#FFF;width:96%;margin-top:8px;padding:10px;position:relative;}\r\n-->\r\n</style>\r\n</head>\r\n<body>\r\n<div id=\"header\"><h1>Server Error</h1></div>\r\n<div id=\"content\">\r\n <div class=\"content-container\"><fieldset>\r\n <h2>403 - Forbidden: Access is denied.</h2>\r\n <h3>You do not have permission to view this directory or page using the credentials that you supplied.</h3>\r\n </fieldset></div>\r\n</div>\r\n</body>\r\n</html>\r\n","status":403}
(anonymous) # umbraco-backoffice-js.js.vbff92525987e3f7cfb9c113a93c5c023af38d7bc:147
umbraco/backoffice/umbracoapi/dashboard/GetDashboard?section=media:1 Failed to load resource: the server responded with a status of 403 ()
umbraco-backoffice-js.js.vbff92525987e3f7cfb9c113a93c5c023af38d7bc:147 Possibly unhandled rejection: {"errorMsg":"Failed to get dashboard media","data":"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\r\n<html xmlns=\"http://www.w3.org/1999/xhtml\">\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\"/>\r\n<title>403 - Forbidden: Access is denied.</title>\r\n<style type=\"text/css\">\r\n<!--\r\nbody{margin:0;font-size:.7em;font-family:Verdana, Arial, Helvetica, sans-serif;background:#EEEEEE;}\r\nfieldset{padding:0 15px 10px 15px;} \r\nh1{font-size:2.4em;margin:0;color:#FFF;}\r\nh2{font-size:1.7em;margin:0;color:#CC0000;} \r\nh3{font-size:1.2em;margin:10px 0 0 0;color:#000000;} \r\n#header{width:96%;margin:0 0 0 0;padding:6px 2% 6px 2%;font-family:\"trebuchet MS\", Verdana, sans-serif;color:#FFF;\r\nbackground-color:#555555;}\r\n#content{margin:0 0 0 2%;position:relative;}\r\n.content-container{background:#FFF;width:96%;margin-top:8px;padding:10px;position:relative;}\r\n-->\r\n</style>\r\n</head>\r\n<body>\r\n<div id=\"header\"><h1>Server Error</h1></div>\r\n<div id=\"content\">\r\n <div class=\"content-container\"><fieldset>\r\n <h2>403 - Forbidden: Access is denied.</h2>\r\n <h3>You do not have permission to view this directory or page using the credentials that you supplied.</h3>\r\n </fieldset></div>\r\n</div>\r\n</body>\r\n</html>\r\n","status":403}
(anonymous) # umbraco-backoffice-js.js.vbff92525987e3f7cfb9c113a93c5c023af38d7bc:147
umbraco/backoffice/umbracoapi/dashboard/GetDashboard?section=content:1 Failed to load resource: the server responded with a status of 403 ()
umbraco-backoffice-js.js.vbff92525987e3f7cfb9c113a93c5c023af38d7bc:147 Possibly unhandled rejection: {"errorMsg":"Failed to get dashboard content","data":"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\r\n<html xmlns=\"http://www.w3.org/1999/xhtml\">\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\"/>\r\n<title>403 - Forbidden: Access is denied.</title>\r\n<style type=\"text/css\">\r\n<!--\r\nbody{margin:0;font-size:.7em;font-family:Verdana, Arial, Helvetica, sans-serif;background:#EEEEEE;}\r\nfieldset{padding:0 15px 10px 15px;} \r\nh1{font-size:2.4em;margin:0;color:#FFF;}\r\nh2{font-size:1.7em;margin:0;color:#CC0000;} \r\nh3{font-size:1.2em;margin:10px 0 0 0;color:#000000;} \r\n#header{width:96%;margin:0 0 0 0;padding:6px 2% 6px 2%;font-family:\"trebuchet MS\", Verdana, sans-serif;color:#FFF;\r\nbackground-color:#555555;}\r\n#content{margin:0 0 0 2%;position:relative;}\r\n.content-container{background:#FFF;width:96%;margin-top:8px;padding:10px;position:relative;}\r\n-->\r\n</style>\r\n</head>\r\n<body>\r\n<div id=\"header\"><h1>Server Error</h1></div>\r\n<div id=\"content\">\r\n <div class=\"content-container\"><fieldset>\r\n <h2>403 - Forbidden: Access is denied.</h2>\r\n <h3>You do not have permission to view this directory or page using the credentials that you supplied.</h3>\r\n </fieldset></div>\r\n</div>\r\n</body>\r\n</html>\r\n","status":403}
(anonymous) # umbraco-backoffice-js.js.vbff92525987e3f7cfb9c113a93c5c023af38d7bc:147
umbraco/views/common/drawers/help/help.html?umb__rnd=55cf41cb7a843f406e64be738e39702729f99e46:1 Failed to load resource: the server responded with a status of 403 ()
umbraco/backoffice/umbracoapi/authentication/GetRemainingTimeoutSeconds:1 Failed to load resource: the server responded with a status of 403 ()
umbraco-backoffice-js.js.vbff92525987e3f7cfb9c113a93c5c023af38d7bc:147 Possibly unhandled rejection: {"errorMsg":"Server call failed for checking remaining seconds","data":"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\r\n<html xmlns=\"http://www.w3.org/1999/xhtml\">\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\"/>\r\n<title>403 - Forbidden: Access is denied.</title>\r\n<style type=\"text/css\">\r\n<!--\r\nbody{margin:0;font-size:.7em;font-family:Verdana, Arial, Helvetica, sans-serif;background:#EEEEEE;}\r\nfieldset{padding:0 15px 10px 15px;} \r\nh1{font-size:2.4em;margin:0;color:#FFF;}\r\nh2{font-size:1.7em;margin:0;color:#CC0000;} \r\nh3{font-size:1.2em;margin:10px 0 0 0;color:#000000;} \r\n#header{width:96%;margin:0 0 0 0;padding:6px 2% 6px 2%;font-family:\"trebuchet MS\", Verdana, sans-serif;color:#FFF;\r\nbackground-color:#555555;}\r\n#content{margin:0 0 0 2%;position:relative;}\r\n.content-container{background:#FFF;width:96%;margin-top:8px;padding:10px;position:relative;}\r\n-->\r\n</style>\r\n</head>\r\n<body>\r\n<div id=\"header\"><h1>Server Error</h1></div>\r\n<div id=\"content\">\r\n <div class=\"content-container\"><fieldset>\r\n <h2>403 - Forbidden: Access is denied.</h2>\r\n <h3>You do not have permission to view this directory or page using the credentials that you supplied.</h3>\r\n </fieldset></div>\r\n</div>\r\n</body>\r\n</html>\r\n","status":403}
(anonymous) # umbraco-backoffice-js.js.vbff92525987e3f7cfb9c113a93c5c023af38d7bc:147
umbraco/backoffice/umbracoapi/dashboard/GetDashboard?section=media:1 Failed to load resource: the server responded with a status of 403 ()
umbraco-backoffice-js.js.vbff92525987e3f7cfb9c113a93c5c023af38d7bc:147 Possibly unhandled rejection: {"errorMsg":"Failed to get dashboard media","data":"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\r\n<html xmlns=\"http://www.w3.org/1999/xhtml\">\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\"/>\r\n<title>403 - Forbidden: Access is denied.</title>\r\n<style type=\"text/css\">\r\n<!--\r\nbody{margin:0;font-size:.7em;font-family:Verdana, Arial, Helvetica, sans-serif;background:#EEEEEE;}\r\nfieldset{padding:0 15px 10px 15px;} \r\nh1{font-size:2.4em;margin:0;color:#FFF;}\r\nh2{font-size:1.7em;margin:0;color:#CC0000;} \r\nh3{font-size:1.2em;margin:10px 0 0 0;color:#000000;} \r\n#header{width:96%;margin:0 0 0 0;padding:6px 2% 6px 2%;font-family:\"trebuchet MS\", Verdana, sans-serif;color:#FFF;\r\nbackground-color:#555555;}\r\n#content{margin:0 0 0 2%;position:relative;}\r\n.content-container{background:#FFF;width:96%;margin-top:8px;padding:10px;position:relative;}\r\n-->\r\n</style>\r\n</head>\r\n<body>\r\n<div id=\"header\"><h1>Server Error</h1></div>\r\n<div id=\"content\">\r\n <div class=\"content-container\"><fieldset>\r\n <h2>403 - Forbidden: Access is denied.</h2>\r\n <h3>You do not have permission to view this directory or page using the credentials that you supplied.</h3>\r\n </fieldset></div>\r\n</div>\r\n</body>\r\n</html>\r\n","status":403}
(anonymous) # umbraco-backoffice-js.js.vbff92525987e3f7cfb9c113a93c5c023af38d7bc:147
umbraco/backoffice/umbracoapi/dashboard/GetDashboard?section=content:1 Failed to load resource: the server responded with a status of 403 ()
umbraco-backoffice-js.js.vbff92525987e3f7cfb9c113a93c5c023af38d7bc:147 Possibly unhandled rejection: {"errorMsg":"Failed to get dashboard content","data":"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\r\n<html xmlns=\"http://www.w3.org/1999/xhtml\">\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\"/>\r\n<title>403 - Forbidden: Access is denied.</title>\r\n<style type=\"text/css\">\r\n<!--\r\nbody{margin:0;font-size:.7em;font-family:Verdana, Arial, Helvetica, sans-serif;background:#EEEEEE;}\r\nfieldset{padding:0 15px 10px 15px;} \r\nh1{font-size:2.4em;margin:0;color:#FFF;}\r\nh2{font-size:1.7em;margin:0;color:#CC0000;} \r\nh3{font-size:1.2em;margin:10px 0 0 0;color:#000000;} \r\n#header{width:96%;margin:0 0 0 0;padding:6px 2% 6px 2%;font-family:\"trebuchet MS\", Verdana, sans-serif;color:#FFF;\r\nbackground-color:#555555;}\r\n#content{margin:0 0 0 2%;position:relative;}\r\n.content-container{background:#FFF;width:96%;margin-top:8px;padding:10px;position:relative;}\r\n-->\r\n</style>\r\n</head>\r\n<body>\r\n<div id=\"header\"><h1>Server Error</h1></div>\r\n<div id=\"content\">\r\n <div class=\"content-container\"><fieldset>\r\n <h2>403 - Forbidden: Access is denied.</h2>\r\n <h3>You do not have permission to view this directory or page using the credentials that you supplied.</h3>\r\n </fieldset></div>\r\n</div>\r\n</body>\r\n</html>\r\n","status":403}
If I then refresh the page I get a 403 error on both the front end and the backend.
If check the access for all files and folders and made sure they have full read right access.
The website works fine locally in debug mode from VS.

Related

Capture external form inputs embedded on my WordPress

I have embedded this form on my website FREE SEO AUDIT:
<div id="seo-audit-form-div"><script type="text/javascript" id="seo-audit-form" src="https://www.octoboard.com/scripts/seo-audit-form.js?_id_agp_665760"></script></div>
that represents on load to:
<div id="seo-audit-form-div"><script type="text/javascript" id="seo-audit-form" src="https://www.octoboard.com/scripts/seo-audit-form.js?_id_agp_665760">
</script><div>
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800" rel="stylesheet">
<style>
#inputs {display: flex !important;margin:0 0 0 140px !important;}
#seoAuditForm {opacity:0;-webkit-transition: opacity .6s;-moz-transition: opacity .6s;-o-transition: opacity .6s;transition: opacity .6s;}
.label {display:flex !important;align-items:center !important;justify-content:center !important;min-width:140px !important;width:140px !important;background-color: #405668 !important;color:#ffffff !important;z-index:1 !important;}
.formInput{font-size:16px !important;border-radius:4px !important;border:1px solid #A9A9A9 !important;left:-4px !important;position: relative !important;z-index:0 !important;width:100% !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;margin: 0 !important;padding: 0 0 0 8px !important;height:36px !important;box-sizing:content-box !important;-moz-box-sizing:content-box !important;}
.formInputContainer{display: flex !important;flex-grow:1 !important;margin:0 6px 10px 0 !important;border-radius:4px !important;border:none !important;overflow:hidden !important;height:38px !important;}
.checkTextContainer{display:flex !important;align-items:center !important;justify-content:center !important;margin-left:5px !important;color:#CC4F3F !important;font-size:10px !important;font-weight:400 !important;}
.redText{color:#C45E53 !important;}
#websiteLabel {display:flex !important;align-items:center !important;justify-content:center !important;width: 140px !important; font-size: 28px !important; font-weight: 600 !important; color: #ffffff !important; height: 44px !important; margin: 0 10px 0 5px !important;}
#buttonBlock {display:flex !important;justify-content:flex-end !important;margin:0 10px 0 0 !important;}
#_website {width:100% !important;height:38px !important;margin:0 10px 10px 0 !important;font-size:16px !important;padding:0 0 0 10px !important;border-radius:4px !important;border:1px solid #A9A9A9 !important;}
#seoFormButton {cursor:pointer !important;width:320px !important;height:48px !important;background:none !important;background-color:#405668 !important;display:flex !important;align-items:center !important;justify-content:center !important;color:#ffffff !important;border-radius:4px !important;border:none !important;font-size:18px !important;padding:2px 20px 0 20px !important;}
#buttonContainer {display:flex !important;flex-direction:column !important;}
#media (max-width:600px) {
.label {display:none !important;}
.formInput {left:0 !important;}
#inputs {margin:0 0 0 0 !important;}
#websiteLabel {display:none !important;}
.formInputContainer {margin:0 0 10px 0 !important;}
#_website {margin:0 0 10px 0 !important;}
}
#media (max-width:450px) {
#seoFormButton {width:100% !important;}
#buttonContainer {width:100% !important;}
#buttonBlock {margin:0 0 0 0 !important;}
}
</style>
<div style="padding:23px 23px 23px 23px !important;background-color:RGBA(0,0,0,0) !important;font-family:Nunito Sans,sans-serif !important;">
<form class="" id="seoAuditForm" style="opacity: 1;" data-hs-cf-bound="true">
<div style="display: flex !important;">
<div id="websiteLabel">WEBSITE</div>
<input type="url" size="40" id="_website" placeholder="Enter your domain">
</div>
<div id="inputs" style="flex-direction: column;">
<div class="formInputContainer">
<div class="label">NAME</div>
<input class="formInput" type="text" size="40" id="_name" placeholder="Enter your name">
</div>
<div class="formInputContainer">
<div class="label">EMAIL</div>
<input class="formInput" type="text" size="40" id="_email" placeholder="Enter your email">
</div><div class="formInputContainer">
<div class="label">PHONE</div>
<input class="formInput" type="text" size="40" id="_phone" placeholder="Enter your phone number">
</div>
</div>
<div id="buttonBlock">
<div id="buttonContainer">
<div style="display:flex !important;justify-content:flex-end !important;align-items:center !important;margin:0 0 20px 0 !important;">
<input type="checkbox" id="consent" style="margin: 0 !important;">
<span style="display:flex !important;margin:0 0 0 5px !important;color:#ffffff !important;font-size:14px !important;font-weight:400 !important;opacity:0.87 !important;">I agree to Terms and Conditions.</span>
</div>
<button type="button" id="seoFormButton" class="" name="">RUN AUDIT</button>
<div style="display:flex !important;justify-content:flex-end !important;min-height:20px !important;margin:5px 0 0 0 !important;">
<div id="checkEmailAndDomain" style="display:none;">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="0 0 13.309 11.494"><defs><style>.a{fill:#cc4f3f;}</style></defs><path class="a" d="M1,13.494H14.309L7.655,2Zm7.259-1.815H7.05v-1.21h1.21Zm0-2.42H7.05V6.84h1.21Z" transform="translate(-1 -2)"></path></svg>
<span class="checkTextContainer">Please enter email address and domain to generate SEO Audit.</span>
</div>
<div id="checkConsent" style="display:none;">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="0 0 13.309 11.494"><defs><style>.a{fill:#cc4f3f;}</style></defs><path class="a" d="M1,13.494H14.309L7.655,2Zm7.259-1.815H7.05v-1.21h1.21Zm0-2.42H7.05V6.84h1.21Z" transform="translate(-1 -2)"></path></svg>
<span class="checkTextContainer">Please tick the checkbox and accept our conditions.</span>
</div>
</div>
</div>
</div>
</form>
</div></div></div>
I need to collect these inputs and send them to a webhook.
Is there any way to collect the input fields in this form and send it to a webhook after submit?
I've tried a few listening scripts but was unsuccessful.

Laravel email notification blade component is not rendering properly

The bounty expires in 7 days. Answers to this question are eligible for a +250 reputation bounty.
Lars Nyström wants to draw more attention to this question.
My Laravel email notification prints blade component names instead of html element names in the output. Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -webkit-text-size-adjust: none; background-color: #ffffff; color: #718096; height: 100%; line-height: 1.4; margin: 0; padding: 0; width: 100% !important;">
<:message style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
# Hi,
<:button :url="$actionUrl" :color="$color" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
Open
</:button>
See ya!
<subcopy style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
If you're having trouble clicking the "Open" button, copy and paste the URL below
into your web browser: <span class="break-all" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; word-break: break-all;">[http://localhost:3000/](http://localhost:3000/)</span>
</subcopy>
</:message>
</body></html>
As you can see, there is a <:message> and a <:button> component in the output, but they should probably have been replaced with some html.
How can I fix this? I've tried publishing the notification views but that doesn't do anything. This is Laravel 9.
Edit
I understand there must be something wrong with my app, but I can reproduce this issue by doing the following (in my app):
Generate a new notification with php artisan make:notification MyNotification --markdown=emails.my-notification.
In routes/web.php, add:
Route::get("/test-notification", function () {
return (new \App\Notifications\MyNotification)->toMail(new \App\User);
});
The output when visiting /test-notification in a browser is (if you view the source of the page):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -webkit-text-size-adjust: none; background-color: #ffffff; color: #718096; height: 100%; line-height: 1.4; margin: 0; padding: 0; width: 100% !important;">
<:message style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
# Introduction
The body of your message.
<:button :url="''" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
Button Text
</:button>
Thanks,<br>
Laravel
</:message>
</body></html>
However, if I follow those two steps in a fresh Laravel 9 application, the output instead is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Laravel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="color-scheme" content="light">
<meta name="supported-color-schemes" content="light">
<style>
#media only screen and (max-width: 600px) {
.inner-body {
width: 100% !important;
}
.footer {
width: 100% !important;
}
}
#media only screen and (max-width: 500px) {
.button {
width: 100% !important;
}
}
</style>
</head>
<body style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -webkit-text-size-adjust: none; background-color: #ffffff; color: #718096; height: 100%; line-height: 1.4; margin: 0; padding: 0; width: 100% !important;">
<table class="wrapper" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%; background-color: #edf2f7; margin: 0; padding: 0; width: 100%;">
<tr>
<td align="center" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
<table class="content" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%; margin: 0; padding: 0; width: 100%;">
<tr>
<td class="header" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; padding: 25px 0; text-align: center;">
<a href="http://localhost" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; color: #3d4852; font-size: 19px; font-weight: bold; text-decoration: none; display: inline-block;">
<img src="https://laravel.com/img/notification-logo.png" class="logo" alt="Laravel Logo" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; max-width: 100%; border: none; height: 75px; max-height: 75px; width: 75px;">
</a>
</td>
</tr>
<!-- Email Body -->
<tr>
<td class="body" width="100%" cellpadding="0" cellspacing="0" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%; background-color: #edf2f7; border-bottom: 1px solid #edf2f7; border-top: 1px solid #edf2f7; margin: 0; padding: 0; width: 100%; border: hidden !important;">
<table class="inner-body" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 570px; background-color: #ffffff; border-color: #e8e5ef; border-radius: 2px; border-width: 1px; box-shadow: 0 2px 0 rgba(0, 0, 150, 0.025), 2px 4px 0 rgba(0, 0, 150, 0.015); margin: 0 auto; padding: 0; width: 570px;">
<!-- Body content -->
<tr>
<td class="content-cell" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; max-width: 100vw; padding: 32px;">
<h1 style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; color: #3d4852; font-size: 18px; font-weight: bold; margin-top: 0; text-align: left;">Hello!</h1>
<p style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; font-size: 16px; line-height: 1.5em; margin-top: 0; text-align: left;">The introduction to the notification.</p>
<table class="action" align="center" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%; margin: 30px auto; padding: 0; text-align: center; width: 100%;">
<tr>
<td align="center" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
<tr>
<td align="center" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
<tr>
<td style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
Notification Action
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; font-size: 16px; line-height: 1.5em; margin-top: 0; text-align: left;">Thank you for using our application!</p>
<p style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; font-size: 16px; line-height: 1.5em; margin-top: 0; text-align: left;">Regards,<br>
Laravel</p>
<table class="subcopy" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; border-top: 1px solid #e8e5ef; margin-top: 25px; padding-top: 25px;">
<tr>
<td style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
<p style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; line-height: 1.5em; margin-top: 0; text-align: left; font-size: 14px;">If you're having trouble clicking the "Notification Action" button, copy and paste the URL below
into your web browser: <span class="break-all" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; word-break: break-all;">http://localhost:50027</span></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
<table class="footer" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 570px; margin: 0 auto; padding: 0; text-align: center; width: 570px;">
<tr>
<td class="content-cell" align="center" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; max-width: 100vw; padding: 32px;">
<p style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; line-height: 1.5em; margin-top: 0; color: #b0adc5; font-size: 12px; text-align: center;">© 2023 Laravel. All rights reserved.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
So somewhere in my application, the resolution of blade components in markdown emails is disabled. I have run artisan view:clear to clear the cache. Maybe there are other caches in play?
I can also pinpoint that this problem was introduced when I upgraded Laravel from 9.34.0 to 9.35.0. I.e., with 9.34.0 the components resolve just fine, but in 9.35.0 and onwards I get the behavior described above.
To display a component, you may use a Blade component tag within one
of your Blade templates. Blade component tags start with the string x-
followed by the kebab case name of the component class:
<x-button/>
<x-user-profile/>
If the component class is nested deeper within the app/View/Components
directory, you may use the . character to indicate directory nesting.
For example, if we assume a component is located at
app/View/Components/Inputs/Button.php, we may render it like so:
<x-inputs.button/>
Reference: https://laravel.com/docs/10.x/blade#rendering-components
This is embarrassing, but I will own my mistake in the hope it helps someone else. In an edit to my question I wrote
So somewhere in my application, the resolution of blade components in markdown emails is disabled.
Turns out I actually have this in my AppServiceProvider:
class AppServiceProvider extends ServiceProvider
{
public function boot()
{
// ...
Blade::withoutComponentTags();
// ...
}
// ...
}
So yeah, I explicitly disabled blade component tags and then forgot about it... Sorry for wasting your time.

Add an overlay image over the top of a responsive image

So here is what I have:
HTML
<div class="frame-container">
<img src="http://placehold.it/400x600" id="image" alt="test" />
<div class="overlay"></div>
</div>
<button id="button">Add Overlay</button>
CSS
.frame-container{
padding: 15%;
background-color: #333333;
-webkit-box-shadow: 4px 6px 5px -1px rgba(120,120,120,0.75);
-moz-box-shadow: 4px 6px 5px -1px rgba(120,120,120,0.75);
box-shadow: 4px 6px 5px -1px rgba(120,120,120,0.75);
}
#image {
width:100%;
overflow: hidden;
}
.frame-holder{
border: 4em #000000 solid;
}
.overlay{
width:100%;
height:100%;
background-color:fff;
background-image: url('http://placehold.it/400x600&text=woo!');
background-size:cover;
z-index:9999;
display:hidden;
}
JS
<script>
$('#button').click(function(){
$('.overlay').css( "display", 'inline'; );
});
</script>
https://jsfiddle.net/vwvu5ee8/7/
All I want to be able to do is click the button and it add the overlay image over the top of the current image.
I've tried all sorts but have started to run out of ideas. I'm sure there is an easy answer from this position.
Try using display:none and display:block instead of display:hidden. There was also an issue with your z-index stacking.
HTML
<div class="frame-container">
<div class="overlay"></div>
<img src="http://placehold.it/400x600&text=Image" id="image" alt="test" />
</div>
<button id="addOverlay">Add Overlay</button>
CSS
.frame-container{
padding: 15%;
background-color: #333333;
position:relative;
-webkit-box-shadow: 4px 6px 5px -1px rgba(120,120,120,0.75);
-moz-box-shadow: 4px 6px 5px -1px rgba(120,120,120,0.75);
box-shadow: 4px 6px 5px -1px rgba(120,120,120,0.75);
}
#image {
width:100%;
overflow: hidden;
position:relative;
z-index:10;
}
.overlay{
width:70%;
height:70%;
position:absolute;
background-color:fff;
background-image: url('http://placehold.it/400x600&text=Overlay');
background-size:cover;
z-index:100;
display:none;
}
JS
$('#addOverlay').click(function(e){
$('.overlay').css('display','block');
});
Here's the demo. And an alternate version using 2 images instead of a background image.

Kendo ui template is not working with html encoded symbols

I have a template like that
<script type="text/x-kendo-template" id="email-view-template">
<div>#=email_subject#</div>
<div>#=email_body#</div>
</script>
The values comes from database(email_subject and email_body). Because of email_body kendo template is not working. email_body can have some encoded symbols (like ')
Normally if I use # character in template i escape like \\# . but email_body comes from database.
How can I solve this problem?
Example email_body which is comes from database
<p>http://www.revula.com/tto/admin/event/show/id/3</p><p>Linkte detayları verilen etkinliğe katılmak isteyen t&uuml;m personelin bilgisi i&ccedil;in &Ouml;zyeğin &Uuml;niversitesinden aldığım aşağıdaki mesajı paylaşıyorum.</p><div style="font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;">Ekrem Bey Merhaba,</div><div style="font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;"><br clear="none" /></div><div id="yui_3_16_0_1_1418222798054_35228" style="font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;">Telefonda da bahsettiğim gibi eğitim verimliliğini arttırabilmek i&ccedil;in aşağıda linkini paylaştığım anketi ekip arkadaşlarınıza, eğitim &ouml;ncesi tamamlanması doğrultusunda iletebilirseniz &ccedil;ok seviniriz.</div><div style="font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;"><br clear="none" /></div><div id="yui_3_16_0_1_1418222798054_35230" style="font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;"><a href="https://tr.surveymonkey.com/s/TargetEgitimi" id="yui_3_16_0_1_1418222798054_35229" rel="nofollow" shape="rect" style="margin:0px;padding:0px;background-color:transparent;color:purple;outline:none;" target="_blank">https://tr.surveymonkey.com/s/TargetEgitimi</a>&nbsp;</div><div style="font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;"><br clear="none" /></div><div style="font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;"><br clear="none" /></div><div id="yui_3_16_0_1_1418222798054_35216" style="font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;">İyi &ccedil;alışmalar,</div><div style="font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;">Gizem Asker/&Ouml;z&Uuml;</div><div></div><p></p>
I would suggest using jQuery for decoding it. You can do it by:
$("<div/>").html(subject).text()
This uses jQuery by appending it to the a div element but since it is not part of your page this is not a problem and then get text for it.
Following a snippet showing this approach
$(document).ready(function() {
var msg = "<p>http://www.revula.com/tto/admin/event/show/id/3</p><p>Linkte detayları verilen etkinliğe katılmak isteyen t&uuml;m personelin bilgisi i&ccedil;in &Ouml;zyeğin &Uuml;niversitesinden aldığım aşağıdaki mesajı paylaşıyorum.</p><div style='font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;'>Ekrem Bey Merhaba,</div><div style='font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;'><br clear='none' /></div><div id='yui_3_16_0_1_1418222798054_35228' style='font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;'>Telefonda da bahsettiğim gibi eğitim verimliliğini arttırabilmek i&ccedil;in aşağıda linkini paylaştığım anketi ekip arkadaşlarınıza, eğitim &ouml;ncesi tamamlanması doğrultusunda iletebilirseniz &ccedil;ok seviniriz.</div><div style='font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;'><br clear='none' /></div><div id='yui_3_16_0_1_1418222798054_35230' style='font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;'><a href='https://tr.surveymonkey.com/s/TargetEgitimi' id='yui_3_16_0_1_1418222798054_35229' rel='nofollow' shape='rect' style='margin:0px;padding:0px;background-color:transparent;color:purple;outline:none;' target='_blank'>https://tr.surveymonkey.com/s/TargetEgitimi</a>&nbsp;</div><div style='font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;'><br clear='none' /></div><div style='font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;'><br clear='none' /></div><div id='yui_3_16_0_1_1418222798054_35216' style='font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;'>İyi &ccedil;alışmalar,</div><div style='font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;'>Gizem Asker/&Ouml;z&Uuml;</div><div></div><p></p>";
var decoded = $("<div/>").html(msg).text();
console.log("decoded", decoded);
var model = kendo.observable({
email_subject : "This is the subject",
email_body : decoded
});
var tmpl = kendo.template($("#template").html());
$("#tgt_template").html(tmpl(model));
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.web.min.js"></script>
<script type="text/x-kendo-template" id="template">
<div>
<div>Subject: #=email_subject#</div>
<div>#=email_body#</div>
</div>
</script>
<div id="tgt_template"></div>

How do I place an image/logo in browser tab

Quick question. You know when you open a new window & at the top of the page you see the tab for said window & you'll see whatever you typed in your title tag & you'll see a little image (website's logo). How do I place an image/logo in that little tab? Do I have to place an image link within my title tag or something?!
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Round Table</title>
<meta charset="utf-8">
<link rel="stylesheet" href="RTH.css">
<script src="RTH.js"></script>
</head>
<body>
<H1> Come & take a seat at the Round Table B] </H1>
<p> "Where <i>REAL MUSIC</i> still exists"</p><br><br>
<ol type=I> <H2> <li>BEAT$</li>
<br><li>Music by Mercile$$</li>
<br><li>Spoken Word</li> <br>
<li>Tale$ of a Blind Sword$man</li> </H2> </ol><br><br><br>
<dt><i>RTH</i> consists of:</dt>
<dd>Show Luciano, Pistol McFly, Dior, YZ, & last but not least...Mercile$$</dd>
<p> thee music industry is DEAD !! i hope to bring restoration.<br>
~mercile$$</p><br>
<footer>© Round Table</footer>
</font>
</body>
</html>
& here's my CSS file:
body {
background-image: url("Round Table, Hoe II.jpg");
background-repeat: Repeat;
font-family: AR Christy, Kozuka Gothic Pr6N, Cooper std;
color: Red;
text-shadow: 1px 0 0 #CEA40C, 0 -1px 0 #CEA40C, 0 1px 0 #CEA40C, -1px 0 0 #CEA40C;
font-size: 25px;
margin: 0 auto;
text-align: center;
width: 700px;
}
h1 {
font-family: AR Christy, Kozuka Gothic Pr6N, Cooper std;
color: Red;
text-shadow: 2px 0 0 #CEA40C, 0 0px 0 #CEA40C, 0 2px 0 #CEA40C, 0px 0 0 #CEA40C;
margin: 0 auto;
text-align: center;
width: 700px;
}
i {
font-family: AR Christy, Kozuka Gothic Pr6N, Cooper std;
color: White;
text-shadow: 2px 0 0 #CEA40C, 0 0px 0 #CEA40C, 0 2px 0 #CEA40C, 0px 0 0 #CEA40C;
margin: 0 auto;
text-align: center;
width: 700px;
}
dt {
color: #1BD29B;
text-shadow: 4px 0 0 #CEA40C, 0 0px 0 #CEA40C, 0 4px 0 #CEA40C, 0px 0 0 #CEA40C;
font-size: 45pt;
padding: 10px;
}
dd {
color: White;
padding: 5px 10px 5px 10px;
background: #f03;
border: solid 2px #fff;
}
p {
padding: 5px 10px 5px 10px;
background: #f03;
border: solid 2px #fff;
}
footer {
}
its easy use this site to convert the image http://www.favicongenerator.com/
and then in the head, but change the name of ur image and path
<link rel="shortcut icon" type="image/png" href="img/logo-favicon.ico.png">
You need a square image or icon then put this code in your head
<link rel="icon" type="image/png" href="/path/image.png"/>
One important thing is to put your link between the head tags:
<html>
<head>
<link rel="shortcut icon" type="image/png" href="img/logo.ico">
</head>
.
.
.
</html>

Resources