Cho chơi ké với
Demo:
https://www.nguyenhoangdat.ga/p/chay-code-html.html
Source Code:
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="main-wrapper">
<div class="main section" id="main">
<div class="widget Blog" data-version="1" id="Blog1"><div class="blog-posts hfeed"><div class="date-outer"><div class="date-posts"><div class="post-outer"><div class="post hentry"><div class="post-body entry-content" id="post-body-3785207230381785944"><center><span style="font-family: helvetica; font-size: x-large; font-stretch: normal; font-style: normal; font-variant: normal; line-height: normal;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEiTDHL66OXfSARmz8kjV2PcpYgpsWXREbSMmdpIvF-PGI2Fl7prykhI6jAqm22UcWFtyBrJoj9KeJXWXMzxdmteb4GqZDK-GoMY7nzkSJ8pBoMx0OmikVrigsJBZJ2vqAYJR5HumCtmLLTmPm4Dfi80wSjW2t5as1XDWQ-zLWBZSvAeHD_yj5FvQZZX=s2864" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1432" data-original-width="2864" height="320" src="https://blogger.googleusercontent.com/img/a/AVvXsEiTDHL66OXfSARmz8kjV2PcpYgpsWXREbSMmdpIvF-PGI2Fl7prykhI6jAqm22UcWFtyBrJoj9KeJXWXMzxdmteb4GqZDK-GoMY7nzkSJ8pBoMx0OmikVrigsJBZJ2vqAYJR5HumCtmLLTmPm4Dfi80wSjW2t5as1XDWQ-zLWBZSvAeHD_yj5FvQZZX=w640-h320" width="640" /></a></div></span></center><center><br /><form method="post" name="form1">
<textarea name="code" onclick="focus(this.code)" placeholder="Nhập (Dán) Code Mà Bạn Muốn Chạy" style="background: rgb(206, 214, 224); border-radius: 2px; border: 4px solid rgb(230, 230, 230); height: 250px; padding: 4px; scroll: auto; width: 75%; "></textarea></form>
<br />
<center><button class="btn btn-2" onclick="preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()"> <font><b> Chạy Code</b></font></button><span style="text-align: left;"> </span></center>
<br />
<iframe frameborder="0" name="preview" src="about:blank" style="background: #ced6e0; border-radius: 2px; border: 4px solid #e6e6e6; height: 250px; padding: 4px; width: 75%;"></iframe></center></div></div></div></div></div></div></div></div></div></div>
<style>
.codepro-note {
position: relative!important;
padding: 20px 20px 20px 50px!important;
background: #e1f5fe!important;
color: #01579b!important;
font-size: .85rem!important;
font-family: var(--fontB)!important;
line-height: 1.6em!important;
border-radius: 10px!important;
overflow: hidden!important;
}
.codepro-note:before {
content: ''!important;
width: 60px!important;
height: 60px!important;
background: #01579b!important;
display: block!important;
border-radius: 50%!important;
position: absolute!important;
top: -8px!important;
left: -12px!important;
opacity: .05!important;
}
.codepro-note:after {
content: '\002A'!important;
position: absolute!important;
left: 18px!important;
top: 20px!important;
font-size: 22px!important;
min-width: 15px!important;
text-align: center!important;
}
</style>
<style>
.btn{background:none;border:2px solid;border-bottom-width:4px;font:700 14px/1 Noto Sans,sans-serif;letter-spacing:inherit;margin:1em;padding:1em 2em;transition:color 1s;text-transform:uppercase}.btn-1{color:#9c89f7}.btn-1:hover{-webkit-animation:halftone 1s forwards;animation:halftone 1s forwards;background:radial-gradient(circle,#9c89f7 0.2em,transparent 0.25em) 0 0/1.25em 1.25em,radial-gradient(circle,#9c89f7 0.2em,transparent 0.25em) 6.25em 6.25em/1.25em 1.25em;color:#e4f789}@-webkit-keyframes halftone{100%{background-size:2.375em 2.375em,0.1em 0.1em}}@keyframes halftone{100%{background-size:2.375em 2.375em,0.1em 0.1em}}.btn-2{color:#82f6d8}.btn-2:hover{-webkit-animation:stripes-move 0.75s infinite linear;animation:stripes-move 0.75s infinite linear;background:repeating-linear-gradient(45deg,#82f6d8 0,#82f6d8 0.25em,transparent 0.25em,transparent 0.5em);color:#f682a0}@-webkit-keyframes stripes-move{100%{background-position:5em 0}}@keyframes stripes-move{100%{background-position:5em 0}}.btn-3{color:#d3f169}.btn-3:hover{-webkit-animation:sawtooth 0.35s infinite linear;animation:sawtooth 0.35s infinite linear;background:linear-gradient(45deg,#d3f169 0.5em,transparent 0.5em) 0 0/1em 1em,linear-gradient(-45deg,#d3f169 0.5em,transparent 0.5em) 0 0/1em 1em;color:#8769f1}@-webkit-keyframes sawtooth{100%{background-position:1em 0}}@keyframes sawtooth{100%{background-position:1em 0}}.btn-4{color:#eea163}.btn-4:hover{-webkit-animation:zigzag 1s linear infinite;animation:zigzag 1s linear infinite;background:linear-gradient(135deg,rgba(238,161,99,0.25) 0.25em,transparent 0.25em) -0.5em 0,linear-gradient(225deg,rgba(238,161,99,0.25) 0.25em,transparent 0.25em) -0.5em 0,linear-gradient(315deg,rgba(238,161,99,0.25) 0.25em,transparent 0.25em) 0 0,linear-gradient(45deg,rgba(238,161,99,0.25) 0.25em,transparent 0.25em) 0 0;background-size:0.75em 0.75em;color:#63b0ee}@-webkit-keyframes zigzag{100%{background-position:1em 0,1em 0,-0.75em 0,-0.75em 0}}@keyframes zigzag{100%{background-position:1em 0,1em 0,-0.75em 0,-0.75em 0}}.btn-5{color:#7cf07f}.btn-5:hover{-webkit-animation:blinds 0.75s linear forwards;animation:blinds 0.75s linear forwards;background:linear-gradient(0deg,#7cf07f 25%,transparent 25%) 0 0/0.5em 0.5em,linear-gradient(0deg,#88d6f3 50%,transparent 50%) 0 0/1em 1em;color:#f07ced}@-webkit-keyframes blinds{100%{background-position:0 0,0 -3em;background-size:0 0,1em 6em}}@keyframes blinds{100%{background-position:0 0,0 -3em;background-size:0 0,1em 6em}}.btn-6{color:#f9879b}.btn-6:hover{-webkit-animation:pulse 1s ease-in infinite;animation:pulse 1s ease-in infinite;background:radial-gradient(circle,rgba(249,135,155,0.25) 43%,transparent 50%) 0 0/1em 1em,radial-gradient(circle,rgba(249,135,155,0.25) 43%,transparent 50%) 0.5em 0.5em/2em 2em;color:#0bdcb7}@-webkit-keyframes pulse{50%{background-position:0.66em 0.66em,-0.33em -0.33em}100%{background-size:2em 2em,1em 1em;background-position:-1.5em -1.5em,-1em -1em}}@keyframes pulse{50%{background-position:0.66em 0.66em,-0.33em -0.33em}100%{background-size:2em 2em,1em 1em;background-position:-1.5em -1.5em,-1em -1em}}
</style>
<p class="codepro-note"><b>NHĐ Blog: </b>Đây là công cụ giúp chúng ta biết được code mà mình đã viết. Chúc các bạn thành công</p><div style="text-align: center;">©Copyright <a href="https://www.nguyenhoangdat.ga/" target="_blank">Nguyễn Hoàng Đạt Blog</a></div>
