1 Star 0 Fork 85

简单得不简单/CoCo Waddle

forked from Cocotais Team/Waddle 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
index.html 63.03 KB
一键复制 编辑 原始数据 按行查看 历史
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="theme-color" id="pwa-color" content="#6d50f0" />
<link rel="manifest" href="./manifest.json" />
<link rel="apple-touch-icon" href="./static/img/apple-touch-icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="让CoCo没有难做的控件" />
<script src="./static/js/jquery-3.6.0.min.js"></script>
<script>
var version = 'V1.4.11(505)-alpha'; //以后版本号改我就行!
console.log(
'%c ',
"background: url('https://waddle.coco-central.cn/static/img/cs.png');padding:14px 100px;background-size: contain;background-repeat: no-repeat;"
);
console.log(
'%c嘿,欢迎使用 Waddle!',
'font-size:13px;color:rgb(222,154,81)'
);
console.log(
'%c\n本工具基于blockly开发,CoCo中控台所有成员共同开发!\n\n特别鸣谢:https://gitee.com/coco-ag/coco-waddle/contributors?ref=master',
'font-size:15px;color:rgb(179,222,255)'
);
console.log(
'%c\n欢迎各位进入开源仓库参与建设:https://gitee.com/coco-ag/coco-waddle/\n建议或特性反馈链接:https://www.yuque.com/forms/share/21daa75d-9aac-4887-8eb9-77dd20e658ec',
'font-size:14px;color:rgb(42,125,255)'
);
console.log(
'%c' + version + ' ©️ 2022 CoCo Central, All rights reserved.',
'color:red;'
);
</script>
<script>
// 判断浏览器是否支持 service worker
if ('serviceWorker' in navigator) {
// load 事件完成之后才注册 service worker
window.addEventListener('load', function () {
// 注册 sw.js
navigator.serviceWorker
.register('/sw.js')
.then(function (registration) {
// 注册成功
//console.log('sw.js 注册成功', registration.scope);
})
.catch(function (err) {
// 注册失败:(
//console.log('sw.js 注册失败 ', err);
});
});
}
</script>
<style>
.nav-item {
font-size: 25px;
padding: 5px;
}
</style>
<link
rel="shortcut icon"
href="./static/img/logo.svg"
type="image/x-icon"
/>
</head>
<script>
//获取cookie
function getCookie(cname) {
var name = cname + '=';
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return '';
}
var theme = getCookie('mode');
var date = new Date();
if (
(date.getMonth() == 2 && date.getDate() == 21) ||
(date.getFullYear() == 2022 &&
date.getMonth() == 2 &&
date.getDate() == 27) ||
(date.getMonth() == 11 && date.getDate() == 13)
) {
var rip = document.createElement('style');
rip.innerText =
'html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}';
document.body.appendChild(rip);
}
</script>
<body>
<div class="loading">
<div class="loading-pair">
<div class="container">
<svg
xmlns="http://www.w3.org/2000/svg"
height="100"
viewBox="0 0 817.192 606.339"
>
<defs>
<style>
.cls-1 {
fill: none;
stroke: rgb(255, 255, 255);
stroke-width: 20px;
fill-rule: evenodd;
}
</style>
</defs>
<g
id="组_41"
data-name="组 41"
transform="translate(-15658.403 -6102.205)"
>
<path
id="lu1"
data-name="路径 1"
class="cls-1"
d="M908.359,2160a18.415,18.415,0,0,1,17.867,22.883c-23.091,92.37-109.4,437.594-134.638,538.555a36.832,36.832,0,0,1-35.734,27.9H624.033a18.415,18.415,0,0,1-17.867-22.883L740.8,2187.9a36.832,36.832,0,0,1,35.734-27.9Z"
transform="translate(15540.223 3950.705)"
/>
<path
id="lu2"
data-name="路径 2"
class="cls-1"
d="M86.166,2182.883A18.414,18.414,0,0,1,104.033,2160H235.854a36.832,36.832,0,0,1,35.734,27.9L315.4,2363.138a73.641,73.641,0,0,1,0,35.729c-14.336,57.35-59.375,237.5-78.684,314.735a9.206,9.206,0,0,1-17.866,0Z"
transform="translate(15581.385 3950.705)"
/>
<path
id="lu3"
data-name="路径 3"
class="cls-1"
d="M328.065,2749.34a36.831,36.831,0,0,1-35.734-45.766c29.128-116.514,105.44-421.764,128.918-515.672a36.832,36.832,0,0,1,35.734-27.9H546.8a36.832,36.832,0,0,1,35.734,27.9c11.52,46.079,34.2,136.81,43.808,175.236a73.642,73.642,0,0,1,0,35.729c-14.336,57.35-59.374,237.5-78.683,314.735a9.207,9.207,0,0,1-17.867,0c-3.038-12.146-6.549-26.2-10.033-40.13a18.417,18.417,0,0,0-35.734,0c-4.263,17.054-8.566,34.265-11.993,47.967a36.831,36.831,0,0,1-35.733,27.9Z"
transform="translate(15565.109 3950.705)"
/>
</g>
</svg>
</div>
<noscript>请打开javascript获得最佳体验</noscript>
<p
id="loading-text"
onclick="document.getElementById('loading-text').style.color = 'rgba(255,255,255,100)'"
style="color: rgb(255, 255, 255)"
>
让CoCo没有难做的控件
</p>
</div>
</div>
<script>
document.body.style.overflow = 'hidden'; //禁止页面滑动
var tipList = [
'让CoCo没有难做的控件',
'你知道吗?在Waddle中有三个彩蛋!',
'点击2次Waddle图标有惊喜!',
'试一试夜间模式!',
'工具是给开发者调试的利器!',
'不会操作?看看模板!',
'Waddle由CoCo编辑器中控台制作!',
'试试在f12中搜搜所有贡献者的名字?',
'听说Waddle有VSCode主题了?',
'咕咕咕~',
'不会用怎么办?首先不要慌张,打开语雀看看。',
'不要问我实体定义怎么做,我会告诉你我们都没做~不要问我什么时候做出来,我会告诉你114514年后~',
'我们抄的隔街Phigros的Tips~',
'Waddle缂栬緫鍣�',
'祝编程猫发展的越来越好!',
'你看不到我~',
'Waddle编辑器上gitee项目推荐了!',
'没啥能看的?',
];
document.getElementById('loading-text').innerText =
tipList[Math.floor(Math.random() * tipList.length)];
if (document.getElementById('loading-text').innerText == '你看不到我~') {
document.getElementById('loading-text').style.color =
'rgba(255,255,255,0)';
}
if (theme == 'dark') {
document.getElementsByClassName('loading')[0].style.backgroundColor =
'#525252';
} else {
if (theme == 'light') {
document.getElementsByClassName('loading')[0].style.backgroundColor =
'#6d50f0';
} else {
if (
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches
) {
document.getElementsByClassName(
'loading'
)[0].style.backgroundColor = '#525252';
} else {
document.getElementsByClassName(
'loading'
)[0].style.backgroundColor = '#6d50f0';
}
}
}
$('.cls-1').animate({ 'stroke-dashoffset': '1650px' }, 10);
</script>
<style>
.container {
width: 40%;
margin: 4em auto;
}
#lu1,
#lu2,
#lu3 {
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1650px;
}
.cls-1 {
stroke-linecap: round;
stroke-linejoin: round;
stroke-dashoffset: 0px;
}
.loading {
background-color: #ffffff;
position: absolute;
display: block;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
text-align: center;
}
.loading-pair {
margin-top: 22vh;
}
</style>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '1600px' }, 10);
</script>
<div id="body" style="visibility: hidden">
<nav
class="navbar navbar-expand navbar-dark"
style="background-color: #6d50f0; min-width: 316px"
>
<div class="container-fluid" style="min-height: 52px">
<a class="navbar-brand" href="#">
<img
id="logo"
src="./static/img/waddle.svg"
style="
height: 30px;
width: auto;
padding-left: 15px;
padding-bottom: 3px;
"
alt="Waddle"
onclick="estchk()"
/>
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li
class="nav-item dropdown"
data-title="文件"
onclick="fix_bug()"
>
<a
id="navbarDropdown"
class="nav-link"
href="#"
role="button"
data-bs-toggle="dropdown"
one-link-mark="yes"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24.96"
height="24"
fill="currentColor"
viewBox="0 0 130 125"
>
<path
id="联合_1"
data-name="联合 1"
d="M7,125a7,7,0,0,1-7-7V57a7,7,0,0,1,7-7H123a7,7,0,0,1,7,7v61a7,7,0,0,1-7,7ZM4.667,35A4.667,4.667,0,0,1,0,30.334V7A7,7,0,0,1,7,0H48.823A20,20,0,0,1,68.6,17h48.067A13.334,13.334,0,0,1,130,30.334,4.667,4.667,0,0,1,125.333,35Z"
/>
</svg>
</a>
<ul
class="dropdown-menu"
aria-labelledby="navbarDropdownMenuLink"
>
<li>
<a
class="dropdown-item"
href="javascript:void(0)"
onclick='newsth.style.display = "block";document.getElementsByClassName("newsth-content")[0].className = "newsth-content show";document.getElementsByClassName("newsth")[0].className = "newsth show"'
>
新建
</a>
</li>
<li>
<a
class="dropdown-item"
href="javascript:void(0)"
onclick="save()"
>
保存到电脑
</a>
</li>
<li>
<a
class="dropdown-item"
href="javascript:void(0)"
onclick="openfile()"
>
打开Waddle文件
</a>
</li>
<div
style="
height: 1px;
background-color: #f2f2f2;
margin: 0 10px;
"
></div>
<li>
<a
class="dropdown-item"
href="javascript:void(0)"
onclick="js_save()"
>
另存为js文件
</a>
</li>
</ul>
</li>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '1550px' }, 10);
</script>
<li
class="nav-item"
data-title="代码"
style="right: 20; top: auto; position: absolute; min-height: 50"
>
<a id="switch_code" class="nav-link" href="javascript:void(0)">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24.96"
height="24"
fill="currentColor"
viewBox="0 0 130 125"
>
<path
id="减去_1"
data-name="减去 1"
d="M123,125H7a7.008,7.008,0,0,1-7-7V7A7.008,7.008,0,0,1,7,0H123a7.008,7.008,0,0,1,7,7V118A7.008,7.008,0,0,1,123,125ZM69.814,69.944a7.008,7.008,0,0,0-7,7v1a7.008,7.008,0,0,0,7,7h36a7.008,7.008,0,0,0,7-7v-1a7.008,7.008,0,0,0-7-7ZM27.793,19.565a6.954,6.954,0,0,0-4.95,2.05l-.707.707a7,7,0,0,0,0,9.9L42.207,52.293,22.43,72.071a7.008,7.008,0,0,0,0,9.9l.706.707a7,7,0,0,0,9.9,0L58.492,57.222a7.008,7.008,0,0,0,0-9.9l-.707-.707c-.155-.155-.315-.3-.476-.435L32.743,21.615A6.954,6.954,0,0,0,27.793,19.565Z"
/>
</svg>
</a>
</li>
<li class="nav-item" data-title="关于">
<a
class="nav-link"
href="javascript:void(0)"
onclick='aboutus.style.display = "block";document.getElementsByClassName("aboutus-content")[0].className = "aboutus-content show";document.getElementsByClassName("aboutus")[0].className = "aboutus show"'
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="25.92"
height="25.92"
fill="currentColor"
viewBox="0 0 135 135"
>
<path
id="circle-question-solid"
d="M67.5,0A67.5,67.5,0,1,0,135,67.5,67.495,67.495,0,0,0,67.5,0Zm0,103.469a8.33,8.33,0,0,1-8.437-8.437A8.188,8.188,0,0,1,67.5,86.594a8.438,8.438,0,0,1,0,16.875ZM85.72,66.027,73.828,73.41v.527a6.328,6.328,0,0,1-12.656,0V69.719a6.5,6.5,0,0,1,3.164-5.537l15.029-8.965a5.653,5.653,0,0,0,2.9-5.01,6.062,6.062,0,0,0-6.038-5.8H62.754a5.7,5.7,0,0,0-5.8,5.8,6.328,6.328,0,0,1-12.656,0A18.293,18.293,0,0,1,62.517,31.75H75.99c10.758,0,18.932,8.174,18.932,18.457A18.517,18.517,0,0,1,85.72,66.027Z"
/>
</svg>
</a>
</li>
<li class="nav-item" data-title="主题">
<a
class="nav-link"
href="javascript:void(0)"
onclick="switch_theme()"
>
<svg
id="theme"
xmlns="http://www.w3.org/2000/svg"
width="22.627776"
height="25.344"
fill="currentColor"
viewBox="0 0 135 135"
>
<path
id="moon-solid_3_"
data-name="moon-solid (3)"
d="M32,98A65.973,65.973,0,0,1,97.941,32a79.615,79.615,0,0,1,12.051,1.1,3.1,3.1,0,0,1,.966,5.728,51.7,51.7,0,0,0,35.216,95.734,3.1,3.1,0,0,1,2.979,4.994A65.919,65.919,0,0,1,32,98Z"
transform="translate(-32 -32)"
/>
</svg>
</a>
</li>
<!--菜单栏图标全由海藻酸钠绘制-->
</ul>
</div>
</div>
</nav>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '1500px' }, 10);
</script>
<div id="table">
<div id="blocklyDiv" style="width: 100vw"></div>
<!--ToolBox积木-->
<xml id="toolbox" style="display: none; width: 100vw"></xml>
<!--工作区积木-->
<xml id="workspaceblocks" style="display: none"></xml>
</div>
<a
href="#"
download="#"
style="display: none"
id="downa"
aria-label="下载"
></a>
<style>
.nav-item:hover:after,
.close:hover:after {
content: attr(data-title);
position: absolute;
border-radius: 8px;
height: max-content;
text-align: center;
width: 43px;
top: 55px;
background-color: rgba(0, 0, 0, 0.4);
border: 8px solid rgba(0, 0, 0, 0);
z-index: 600;
font-size: 12px;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
-webkit-animation: scale-up-top 0.2s
cubic-bezier(0.39, 0.575, 0.565, 1) both;
animation: scale-up-top 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
.close:hover:after {
top: 42px;
right: -10px;
}
@keyframes scale-up-top {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
opacity: 0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
opacity: 1;
}
}
@-webkit-keyframes scale-up-top {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
opacity: 0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
opacity: 1;
}
}
.js_button {
padding: 10px;
}
.nav {
height: 5%;
}
.nav-item {
height: 5%;
margin-left: 12px;
-webkit-transition-duration: 0.1s;
/* Safari */
transition-duration: 0.1s;
}
.nav-link {
height: 5%;
}
*::-webkit-scrollbar {
display: none;
}
* {
scrollbar-width: none;
-ms-overflow-style: none;
}
.nav-item:not(.dropdown-menu):hover {
border-radius: 10%;
}
.iconfont {
font-family: 'iconfont' !important;
font-size: 18px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.swal-footer {
background-color: rgb(245, 248, 250);
margin-top: 32px;
text-align: center;
border-top: 1px solid #e9eef1;
overflow: hidden;
}
.swal-modal {
border-radius: 10px;
width: 400px;
}
.swal-button--confirm {
background-color: #6d50f0;
}
.swal-button--confirm:not([disabled]):hover {
background-color: #5439ce;
}
.swal-content__input:focus {
outline: none;
border-color: #6d50f0;
}
.swal-content__input {
border-radius: 10px;
}
.swal-overlay {
backdrop-filter: blur(10px);
}
.swal-button--confirm:not([disabled]):focus {
background-color: #6d50f0;
}
.blocklyMenuItem {
color: rgb(136, 125, 107);
}
.blocklyMenuItemDisabled {
color: #ccc;
}
.blocklyMenuItem {
-webkit-transition-duration: 0.1s;
/* Safari */
transition-duration: 0.1s;
}
.blocklyMenuItemHighlight {
background-color: #e3ddfc;
color: #000;
}
</style>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '1450px' }, 10);
</script>
<!-- 代码框 -->
<div id="myModal" class="modal">
<!-- 代码框内容 -->
<div class="modal-content" id="content">
<div class="modal-header">
<span></span>
<span class="close" data-title="关闭">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24.96"
height="24"
fill="currentColor"
viewBox="0 0 130 125"
>
<path
id="减去_1"
data-name="减去 1"
d="M123,125H7a7.008,7.008,0,0,1-7-7V7A7.008,7.008,0,0,1,7,0H123a7.008,7.008,0,0,1,7,7V118A7.008,7.008,0,0,1,123,125ZM69.814,69.944a7.008,7.008,0,0,0-7,7v1a7.008,7.008,0,0,0,7,7h36a7.008,7.008,0,0,0,7-7v-1a7.008,7.008,0,0,0-7-7ZM27.793,19.565a6.954,6.954,0,0,0-4.95,2.05l-.707.707a7,7,0,0,0,0,9.9L42.207,52.293,22.43,72.071a7.008,7.008,0,0,0,0,9.9l.706.707a7,7,0,0,0,9.9,0L58.492,57.222a7.008,7.008,0,0,0,0-9.9l-.707-.707c-.155-.155-.315-.3-.476-.435L32.743,21.615A6.954,6.954,0,0,0,27.793,19.565Z"
/>
</svg>
</span>
</div>
<div class="modal-body">
<pre readonly id="codeArea"></pre>
</div>
<button class="copy">
<svg
class="copyit"
style="display: inline-block"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="25"
height="25"
viewBox="0 0 123 123"
fill="currentColor"
>
<g opacity="1" transform="translate(0 0) rotate(0 61.5 61.5)">
<path
id="减去顶层"
fill-rule="evenodd"
transform="translate(0 24.60000146529137) rotate(0 49.209841973195466 49.199999267354315)"
opacity="1"
d="M0 9.22C0 4.13 4.13 0 9.23 0L89.19 0C94.29 0 98.42 4.13 98.42 9.22L98.42 89.17C98.42 94.27 94.29 98.4 89.19 98.4L9.23 98.4C4.13 98.4 0 94.27 0 89.17L0 9.22Z M12.3025 86.1L12.3025 12.3L86.1125 12.3L86.1125 86.1L12.3025 86.1Z "
/>
<path
id="路径 4"
fill-rule="evenodd"
transform="translate(30.756151314342503 0) rotate(0 46.121924342828734 46.100143921190345)"
opacity="1"
d="M79.98,86.78C80.37,90.01 83.2,92.38 86.45,92.19C89.7,92 92.24,89.31 92.24,86.06L92.24,9.23L92.21,8.34C91.75,3.61 87.77,0 83.02,0L6.15,0L5.43,0.04C2.33,0.41 0,3.03 0,6.15L0.04,6.87C0.41,9.97 3.03,12.3 6.15,12.3L79.94,12.3L79.94,86.06L79.98,86.78Z "
/>
</g>
</svg>
<svg
class="copyityes"
style="display: none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="25"
height="25"
viewBox="0 0 123 123"
fill="currentColor"
>
<g opacity="1" transform="translate(0 0) rotate(0 61.5 61.5)">
<path
id="减去顶层"
fill-rule="evenodd"
transform="translate(0 24.60000146529137) rotate(0 49.209841973195466 49.199999267354315)"
opacity="1"
d="M0 9.22C0 4.13 4.13 0 9.23 0L89.19 0C94.29 0 98.42 4.13 98.42 9.22L98.42 89.17C98.42 94.27 94.29 98.4 89.19 98.4L9.23 98.4C4.13 98.4 0 94.27 0 89.17L0 9.22Z M43.4712 73.7855C41.7912 73.9055 40.1312 73.3255 38.8912 72.1855L38.3812 71.6355L22.7712 53.3255C20.6512 50.8555 20.8312 47.1655 23.1712 44.9055C25.5112 42.6355 29.2112 42.5955 31.6012 44.7955L32.1412 45.3455L43.0012 58.0955L66.4512 29.8655C68.6212 27.2555 72.5012 26.8955 75.1112 29.0655L75.1112 29.0555C77.5012 31.0355 78.0412 34.4855 76.3712 37.0955L75.9212 37.7255L47.7912 71.5755C46.7112 72.8755 45.1512 73.6755 43.4712 73.7855Z "
/>
<path
id="路径 4"
fill-rule="evenodd"
transform="translate(30.756151314342503 0) rotate(0 46.121924342828734 46.100143921190345)"
opacity="1"
d="M92.24,86.06L92.24,9.23L92.21,8.34C91.75,3.61 87.77,0 83.02,0L6.15,0L5.43,0.04C2.33,0.41 0,3.03 0,6.15L0.04,6.87C0.41,9.97 3.03,12.3 6.15,12.3L79.94,12.3L79.94,86.06L79.98,86.78C80.37,90.01 83.2,92.38 86.45,92.19C89.7,92 92.24,89.31 92.24,86.06Z "
/>
</g>
</svg>
</button>
</div>
</div>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '1400px' }, 10);
</script>
<style>
.copy {
-webkit-transition-duration: 0.1s;
/* Safari */
transition-duration: 0.1s;
background: #6d50f0;
border: none;
color: white;
width: 70;
height: 70;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 100px;
position: absolute;
right: 40;
bottom: 40;
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
}
.copy:hover {
background: #5439ce;
box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.6);
}
/* 代码框 (background) */
.modal {
display: none;
/* 默认隐藏 */
position: fixed;
z-index: 1000 !important;
top: 0;
right: 0;
height: 100%;
overflow: hidden !important;
margin-left: auto;
}
/* 代码框内容 */
.modal-content {
position: relative;
background-color: #fefefe;
margin: 0 auto;
padding: 0;
height: 100vh;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
float: right;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.modal-content {
-webkit-animation-name: animateleft;
-webkit-animation-duration: 0.4s;
animation-name: animateleft;
animation-duration: 0.4s;
}
.show.modal-content {
-webkit-animation-name: animateright;
-webkit-animation-duration: 0.4s;
animation-name: animateright;
animation-duration: 0.4s;
}
/* 添加动画 */
@-webkit-keyframes animateright {
from {
opacity: 0;
}
to {
right: 0;
opacity: 1;
}
}
@keyframes animateright {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 添加动画 */
@-webkit-keyframes animateleft {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes animateleft {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* 关闭按钮 */
.close {
color: white;
border: 13px solid #6d50f0;
float: right;
font-size: 28px;
font-weight: bold;
border-radius: 8px;
position: absolute;
right: 20;
}
.close:hover,
.close:focus {
color: white !important;
border: 13px solid #5439ce;
text-decoration: none;
cursor: pointer;
}
.modal-header {
background-color: #6d50f0;
color: white;
min-height: 53px;
max-height: 53px;
}
.modal-body {
padding: 2px 16px;
overflow-y: auto;
overflow-x: auto;
height: 75%;
}
</style>
<!-- 新建浮窗 -->
<div id="mynewsth" class="newsth">
<!-- 新建浮窗内容 -->
<div class="newsth-content">
<div class="newsth-header">
<svg
class="newsth-logo"
xmlns="http://www.w3.org/2000/svg"
width="40"
height="38.16"
fill="currentColor"
viewBox="0 0 130 125"
>
<path
id="联合_1"
data-name="联合 1"
d="M7,125a7,7,0,0,1-7-7V57a7,7,0,0,1,7-7H123a7,7,0,0,1,7,7v61a7,7,0,0,1-7,7ZM4.667,35A4.667,4.667,0,0,1,0,30.334V7A7,7,0,0,1,7,0H48.823A20,20,0,0,1,68.6,17h48.067A13.334,13.334,0,0,1,130,30.334,4.667,4.667,0,0,1,125.333,35Z"
/>
</svg>
<span class="newsth-close">&times;</span>
</div>
<div class="newsth-body">
<div
class="card"
id="card"
onclick='newsth.style.display = "none";workspace.clear();'
>
<span class="sord">空白作品</span>
</div>
<div class="card" id="card" onclick='swal("还没有呢~")'>
<span class="sord">可见控件模版</span>
</div>
<div
class="card"
id="card"
onclick='newsth.style.display = "none";workspace.clear();Blockly.Xml.domToWorkspace(workspaceBlocks, workspace);'
>
<span class="sord">不可见控件模版</span>
</div>
<div
class="card"
id="card"
onclick="newsth.style.display = 'none';upload('./static/Waddle/tutorials/hello.waddle')"
>
<span class="sord">
[不可见控件]
<br />
Hello
</span>
</div>
<div class="card" id="card" onclick='swal("还没有呢~")'>
<span class="sord">
[不可见控件]
<br />
定时器
</span>
</div>
<div class="card" id="card" onclick='swal("还没有呢~")'>
<span class="sord">
[不可见控件]
<br />
Base编解码
</span>
</div>
<div class="card" id="card" onclick='swal("还没有呢~")'>
<span class="sord">
[可见控件]
<br />
超链接
</span>
</div>
<div class="card" id="card" onclick='swal("还没有呢~")'>
<span class="sord">
[可见控件]
<br />
闪烁的按钮
</span>
</div>
</div>
</div>
</div>
<!-- 新建浮窗 -->
<div id="myaboutus" class="aboutus">
<!-- 新建浮窗内容 -->
<div class="aboutus-content" style="min-width: 305px">
<div class="aboutus-header">
<span
class="aboutus-logo"
style="color: #6d50f0; font-weight: bold; font-size: 25px"
>
关于我们
</span>
<span class="aboutus-close">&times;</span>
</div>
<div class="aboutus-body">
<img
width="240"
src="./static/img/waddle.svg"
style="margin: 30px 0"
alt="Waddle"
/>
<p style="color: #ffffff; font-size: 25px; font-weight: bold">
让CoCo没有难做的控件
</p>
<br />
<br />
<p style="color: #ffffff; font-size: 20px; font-weight: bold">
由CoCo中控台所有成员共同开发!
</p>
<!----<p style="color: #ffffff;font-size: 17px;">中子星000(QQ:2422481178)主理制作</br>MathCalculus(QQ:2504556268)主理制作</br>Epeiuss(Mail:ffxw0720@163.com)监制</br>海藻酸钠(QQ:3409473369)美术/UI/监制</br>小鱼yuzifu(QQ:1906929246)前端设计</br>刘lyxAndy(QQ:3449556207)细节处理</p>--->
<p style="color: #ffffff; font-size: 15px">
帮助链接:
<a
href="https://www.yuque.com/coco-central/waddle/index"
style="color: #ffffff; font-size: 15px"
target="_blank"
rel="noopener"
>
https://www.yuque.com/coco-central/waddle/index
</a>
</p>
<br />
<br />
<p
id="version"
style="color: #ffffff; font-size: 25px; font-weight: bold"
onclick="count()"
></p>
<script>
$('#version').text('目前版本:' + version);
</script>
</div>
</div>
</div>
</div>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '1300px' }, 10);
</script>
</body>
<!--引入Blockly必要文件-->
<script src="./static/blockly-master/blockly_compressed.js"></script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '1280px' }, 10);
</script>
<script src="./static/blockly-master/javascript_compressed.js"></script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '1260px' }, 10);
</script>
<script src="./static/blockly-master/blocks_compressed.js"></script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '1240px' }, 10);
</script>
<script src="./static/blockly-master/msg/js/zh-hans.js"></script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '1200px' }, 10);
</script>
<link rel="shortcut icon" href="./static/img/logo.svg" />
<title>Waddle - 让CoCo没有难做的控件</title>
<!--图标库-->
<link
rel="stylesheet"
href="https://at.alicdn.com/t/font_3193112_l62ftr4pl4h.css"
/>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '1180px' }, 10);
</script>
<!--定义Blocks-->
<!-- <script src="static/blockly-master/blocks/invisibleWidget.js"></script> -->
<!-- <script src="static/blockly-master/blocks/coco.js"></script> -->
<script src="./static/blockly-master/blocks/js.js"></script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '1170px' }, 10);
</script>
<!--<script src="./static/Waddle/blocks/procedures.js"></script>-->
<!--Blocks 对应代码-->
<!-- <script src="static/blockly-master/generators/javascript/invisibleWidget.js"></script> -->
<!-- <script src="static/blockly-master/generators/javascript/coco.js"></script> -->
<script src="./static/blockly-master/generators/javascript/js.js"></script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '1160px' }, 10);
</script>
<!--引入框架-->
<script src="./static/js/bootstrap.bundle.min.js"></script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '1010px' }, 10);
</script>
<link href="./static/css/bootstrap.min.css" rel="stylesheet" />
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '910px' }, 10);
</script>
<!--引入高亮-->
<script src="./static/js/highlight.min.js"></script>
<script src="./static/js/javascript.min.js"></script>
<link href="./static/css/googlecode.min.css" rel="stylesheet" />
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '800px' }, 10);
</script>
<!--自定义Blockly样式-->
<script src="./static/Waddle/custom_category.js"></script>
<link href="./static/css/blockly_style.css" rel="stylesheet" />
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '760px' }, 10);
</script>
<!--包含toolbox和积木-->
<!--自定义积木样式-->
<script src="./static/Waddle/custom_renderer.js"></script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '730px' }, 10);
</script>
<!--自定义网格样式-->
<script src="./static/Waddle/custom_grid.js"></script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '710px' }, 10);
</script>
<!--引入Waddle主题-->
<script src="./static/Waddle/core/theme/waddleTheme.js"></script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '700px' }, 10);
</script>
<!--引入tools积木-->
<script src="./static/Waddle/blocks/tools.js"></script>
<script src="./static/Waddle/generators/javascript/tools.js"></script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '680px' }, 10);
</script>
<!--JavaScript积木-->
<script src="./static/blockly-master/blocks/js.js"></script>
<script src="./static/blockly-master/generators/javascript/js.js"></script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '640px' }, 10);
</script>
<!--JavaScript积木-->
<script src="./static/blockly-master/blocks/html.js"></script>
<script src="./static/blockly-master/generators/javascript/html.js"></script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '630px' }, 10);
</script>
<!--不可见控件积木-->
<script src="./static/Waddle/blocks/invisibleWidget.js"></script>
<script src="./static/Waddle/generators/javascript/invisibleWidget.js"></script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '610px' }, 10);
</script>
<!--导入导航栏按钮函数-->
<script src="./static/js/navFuncs.js"></script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '600px' }, 10);
</script>
<!--sweetalert-->
<script src="./static/js/sweetalert.min.js"></script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '500px' }, 10);
</script>
<!--彩蛋定义-->
<script>
function estchk() {
if (document.cookie.includes('easter')) {
swal('彩蛋', '恭喜,你貌似触发了彩蛋!', 'success').then((value) => {
swal('马上去彩蛋!', { buttons: ['取 消', '确 认'] }).then(
(value) => {
if (value) {
if (getCookie('logo-egg') == false) {
document.cookie = 'logo-egg=1';
}
window.location.href = './static/Waddle/eastegg/index.html';
}
}
);
});
} else {
document.cookie = 'easter=1';
}
}
</script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '480px' }, 10);
</script>
<script>
document.body.style.overflow = 'hidden'; //禁止页面滑动
function createjscssfile(filename, filetype) {
undefined;
if (filetype == 'js') {
undefined;
var fileref = document.createElement('script');
fileref.setAttribute('type', 'text/javascript');
fileref.setAttribute('src', filename);
} else if (filetype == 'css') {
undefined;
var fileref = document.createElement('link');
fileref.setAttribute('rel', 'stylesheet');
fileref.setAttribute('type', 'text/css');
fileref.setAttribute('href', filename);
}
return fileref;
}
function replacejscssfile(oldfilename, newfilename, filetype) {
undefined;
var targetelement =
filetype == 'js' ? 'script' : filetype == 'css' ? 'link' : 'none';
var targetattr =
filetype == 'js' ? 'src' : filetype == 'css' ? 'href' : 'none';
var allsuspects = document.getElementsByTagName(targetelement);
for (var i = allsuspects.length; i >= 0; i--) {
undefined;
if (
allsuspects[i] &&
allsuspects[i].getAttribute(targetattr) != null &&
allsuspects[i].getAttribute(targetattr).indexOf(oldfilename) != -1
) {
undefined;
var newelement = createjscssfile(newfilename, filetype);
allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i]);
}
}
}
</script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '460px' }, 10);
</script>
<script>
//加载工作区
//积木盒
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari,旧版IE代码已删除
xmlhttp = new XMLHttpRequest();
} else {
swal('你就别用了吧!你这浏览器不行啊!换一个或升级,谢谢!');
}
xmlhttp.open('GET', './static/Waddle/toolBox.xml', false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
toolbox = document.getElementById('toolbox');
toolbox.innerHTML = xmlDoc.getElementsByTagName('toolbox')[0].innerHTML;
//工作区
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari,旧版IE代码已删除
xmlhttp = new XMLHttpRequest();
} else {
swal('你就别用了吧!你这浏览器不行啊!换一个或升级,谢谢!');
}
xmlhttp.open('GET', './static/Waddle/workspace.xml', false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
workspaceblocks = document.getElementById('workspaceblocks');
workspaceblocks.innerHTML =
xmlDoc.getElementsByTagName('workspaceblocks')[0].innerHTML;
var workspaceBlocks = document.getElementById('workspaceblocks');
//定义主题
var theme = WaddleTheme;
//工作区
var workspace = Blockly.inject('blocklyDiv', {
toolbox: document.getElementById('toolbox'),
grid: CustomGrid,
zoom: {
controls: true,
wheel: false,
startScale: 0.8,
maxScale: 3,
minScale: 0.3,
scaleSpeed: 1.2,
},
move: {
wheel: true,
},
theme: theme,
renderer: 'zelos', //scratch风格,自定义的是custom_renderer
});
/* 加载初始积木 */
Blockly.Xml.domToWorkspace(workspaceBlocks, workspace);
</script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '400px' }, 10);
</script>
<script>
function myUpdateFunction(event) {
var code = Blockly.JavaScript.workspaceToCode(workspace);
document.getElementById('codeArea').innerHTML = code;
hljs.highlightBlock(document.getElementById('codeArea'));
}
workspace.addChangeListener(myUpdateFunction);
var modal = document.getElementById('myModal');
// 打开代码框的按钮对象
var btn = document.getElementById('switch_code');
// 获取 <span> 元素用于关闭弹窗 that closes the modal
var span = document.getElementsByClassName('close')[0];
// 复制代码
var copy = document.getElementsByClassName('copy')[0];
// 点击按钮打开代码框
btn.onclick = function () {
document.getElementsByClassName('modal-content')[0].className =
'modal-content show';
setTimeout(() => {
document.getElementById('blocklyDiv').style.width = '70vw';
document.getElementById('toolbox').style.width = '70vw';
Blockly.svgResize(workspace);
}, 400);
modal.style.display = 'block';
};
// 点击 <span> (x), 关闭代码框
span.onclick = function () {
document.getElementsByClassName('modal-content')[0].className =
'modal-content';
document.getElementById('blocklyDiv').style.width = '100vw';
document.getElementById('toolbox').style.width = '100vw';
Blockly.svgResize(workspace);
setTimeout(() => {
modal.style.display = 'none';
}, 400);
};
// 点击复制,复制代码
copy.onclick = function () {
//window.Swal = swal;
var code = Blockly.JavaScript.workspaceToCode(workspace);
navigator.clipboard.writeText(code);
document.getElementsByClassName('copyit')[0].style.display = 'none';
document.getElementsByClassName('copyityes')[0].style.display =
'inline-block';
setTimeout(() => {
document.getElementsByClassName('copyityes')[0].style.display = 'none';
document.getElementsByClassName('copyit')[0].style.display =
'inline-block';
}, 400);
};
</script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '380px' }, 10);
</script>
<script>
//各种函数
/* 搬迁了,在static/js/navFuncs.js */
window.onbeforeunload = function () {
return '离开后,你的控件就没啦!';
};
// document.getElementById('read').addEventListener('change', function selectedFileChanged() {
// if (this.files.length !== 0) {
// workspace.clear()
// const reader = new FileReader();
// reader.onload = function fileReadCompleted() {
// const xml = Blockly.Xml.textToDom(reader.result);
// Blockly.Xml.domToWorkspace(xml, workspace);
// };
// reader.readAsText(this.files[0]);
// }
// });
</script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '360px' }, 10);
</script>
<style>
/* 代码框 (background) */
.newsth {
display: none;
/* 默认隐藏 */
position: fixed;
z-index: 1000;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
float: right;
background-color: rgba(0, 0, 0, 0.4);
box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
-webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
color: rgba(255, 255, 255, 0.75);
}
.show.newsth {
-webkit-animation: shownewsth 0.3s cubic-bezier(0.39, 0.575, 0.565, 1)
both;
animation: shownewsth 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
.newsth {
-webkit-animation: hidenewsth 0.3s cubic-bezier(0.39, 0.575, 0.565, 1)
both;
animation: hidenewsth 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
.sord {
color: #6d50f0;
font-weight: bold;
font-size: 30px;
}
/* 代码框内容 */
.newsth-content {
position: relative;
min-width: 300px;
border-radius: 10px;
background-color: #fefefe;
margin: 0 auto;
width: 60vw;
overflow: hidden;
height: 75vh;
top: 12.5vh;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: #ffffff;
}
.show.newsth-content {
-webkit-animation: scale-up-center 0.3s
cubic-bezier(0.39, 0.575, 0.565, 1) both;
animation: scale-up-center 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
.newsth-content {
-webkit-animation: scale-hide 0.3s cubic-bezier(0.39, 0.575, 0.565, 1)
both;
animation: scale-hide 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
.card {
margin: 10px;
width: 250px;
height: 250px;
background: rgb(255, 255, 255);
border-radius: 0.4em;
transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: rgb(202, 202, 202) 0.2em solid;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.card:hover {
border: #6d50f0 0.2em solid;
}
@-webkit-keyframes scale-up-center {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
opacity: 0;
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.05);
}
90% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes scale-up-center {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
opacity: 0;
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.05);
}
90% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes scale-hide {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes scale-hide {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes shownewsth {
0% {
opacity: 0;
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
}
100% {
opacity: 1;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}
@keyframes hidenewsth {
0% {
opacity: 1;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
100% {
opacity: 0;
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
}
}
/* 关闭按钮 */
.newsth-close {
color: #6d50f0;
font-weight: bold;
font-size: 50px;
float: right;
position: relative;
right: 4px;
line-height: 32px;
}
.newsth-logo {
position: relative;
left: 10px;
color: #6d50f0;
}
.newsth-close:hover,
.newsth-close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.newsth-header {
padding: 20px 16px;
border-radius: 10px 10px 0 0;
background-color: rgb(245, 248, 250);
color: rgb(245, 248, 250);
}
.newsth-body {
padding: 2px 16px;
overflow-y: auto;
overflow-x: hidden;
height: calc(75vh - 78px);
width: 100%;
text-align: center;
display: flex;
align-items: center;
align-content: flex-start;
flex-wrap: wrap;
justify-content: space-evenly;
}
.dropdown-item:hover {
background: #f5f3fe;
}
.dropdown-item:active {
background: #ddd8f3;
color: black;
}
</style>
<script>
var newsth = document.getElementById('mynewsth');
// 获取 <span> 元素用于关闭弹窗 that closes the newsth
var newsthspan = document.getElementsByClassName('newsth-close')[0];
// 点击 <span> (x), 关闭代码框
newsthspan.onclick = function () {
document.getElementsByClassName('newsth-content')[0].className =
'newsth-content';
document.getElementsByClassName('newsth')[0].className = 'newsth';
setTimeout(() => {
newsth.style.display = 'none';
}, 400);
};
</script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '340px' }, 10);
</script>
<style>
/* 代码框 (background) */
.aboutus {
display: none;
/* 默认隐藏 */
position: fixed;
z-index: 1000;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
float: right;
background-color: rgba(0, 0, 0, 0.4);
box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
-webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
color: rgba(255, 255, 255, 0.75);
}
.show.aboutus {
-webkit-animation: showaboutus 0.3s cubic-bezier(0.39, 0.575, 0.565, 1)
both;
animation: showaboutus 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
.aboutus {
-webkit-animation: hideaboutus 0.3s cubic-bezier(0.39, 0.575, 0.565, 1)
both;
animation: hideaboutus 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
/* 代码框内容 */
.aboutus-content {
position: relative;
border-radius: 10px;
margin: 0 auto;
width: 45vw;
overflow: hidden;
height: 60vh;
top: 20vh;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: #6d50f0;
background: url(./static/img/background.svg);
background-size: cover;
}
.show.aboutus-content {
-webkit-animation: scale-up-center 0.3s
cubic-bezier(0.39, 0.575, 0.565, 1) both;
animation: scale-up-center 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
.aboutus-content {
-webkit-animation: scale-hide 0.3s cubic-bezier(0.39, 0.575, 0.565, 1)
both;
animation: scale-hide 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
@-webkit-keyframes scale-up-center {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
opacity: 0;
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.05);
}
90% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes scale-up-center {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
opacity: 0;
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.05);
}
90% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes scale-hide {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes scale-hide {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes showaboutus {
0% {
opacity: 0;
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
}
100% {
opacity: 1;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}
@keyframes hideaboutus {
0% {
opacity: 1;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
100% {
opacity: 0;
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
}
}
/* 关闭按钮 */
.aboutus-close {
color: #6d50f0;
font-weight: bold;
font-size: 50px;
float: right;
position: relative;
right: 4px;
line-height: 32px;
}
.aboutus-logo {
position: relative;
left: 10px;
}
.aboutus-close:hover,
.aboutus-close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.aboutus-header {
padding: 20px 16px;
border-radius: 10px 10px 0 0;
background-color: rgb(245, 248, 250);
color: rgb(245, 248, 250);
}
.aboutus-body {
padding: 2px 16px;
overflow-y: auto;
overflow-x: hidden;
height: calc(60vh - 77px);
text-align: center;
}
</style>
<script>
var aboutus = document.getElementById('myaboutus');
// 获取 <span> 元素用于关闭弹窗 that closes the aboutus
var aboutusspan = document.getElementsByClassName('aboutus-close')[0];
// 点击 <span> (x), 关闭代码框
aboutusspan.onclick = function () {
document.getElementsByClassName('aboutus-content')[0].className =
'aboutus-content';
document.getElementsByClassName('aboutus')[0].className = 'aboutus';
setTimeout(() => {
aboutus.style.display = 'none';
}, 400);
};
</script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '240px' }, 10);
</script>
<script>
let logo = document.getElementById('logo');
$(window).resize(function () {
if ($(window).width() < 754) {
logo.src = './static/img/logo.svg';
document.getElementsByClassName('modal')[0].style.width = '100%';
} else {
logo.src = './static/img/waddle.svg';
document.getElementsByClassName('modal')[0].style.width = '30%';
}
});
$(window).resize(function () {
document.getElementById('table').style.height =
document.body.clientHeight - 52;
document.getElementById('toolbox').style.height =
document.body.clientHeight - 52;
Blockly.svgResize(workspace);
});
</script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '190px' }, 10);
</script>
<script>
var theme = getCookie('mode');
var date = new Date();
if (
(date.getMonth() == 2 && date.getDate() == 21) ||
(date.getFullYear() == 2022 &&
date.getMonth() == 2 &&
date.getDate() == 27) ||
(date.getMonth() == 11 && date.getDate() == 13)
) {
var rip = document.createElement('style');
rip.innerText =
'html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}';
document.body.appendChild(rip);
}
document.getElementById('table').style.height =
document.body.clientHeight - 52;
document.getElementById('toolbox').style.height =
document.body.clientHeight - 52;
Blockly.svgResize(workspace);
var dark_url = './static/Waddle/custom_category_dark.js';
var light_url = './static/Waddle/custom_category.js';
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari,旧版IE代码已删除
xmlhttp = new XMLHttpRequest();
} else {
swal('你就别用了吧!你这浏览器不行啊!换一个或升级,谢谢!');
}
xmlhttp.open('GET', dark_url, false);
xmlhttp.send();
dark = xmlhttp.responseText;
xmlhttp.open('GET', light_url, false);
xmlhttp.send();
light = xmlhttp.responseText;
var sty = document.createElement('style');
var to_dark = function () {
document.getElementsByTagName('nav')[0].style.backgroundColor = '#525252';
workspace.setTheme(DarkTheme);
document
.getElementById('moon-solid_3_')
.setAttribute(
'd',
'M37.246,131.693,32.052,103,3.313,97.817a4.016,4.016,0,0,1-2.59-6.243l16.65-23.955L.722,43.429a3.85,3.85,0,0,1,2.59-6l28.75-5.185,4.951-28.7A4.026,4.026,0,0,1,43.267.955L67.5,17.578,91.491.721a4.025,4.025,0,0,1,6.254,2.586L102.94,32l28.739,5.185a4.016,4.016,0,0,1,2.59,6.243l-16.65,23.955,16.663,24.19a4.02,4.02,0,0,1-2.6,6.245L102.941,103l-5.194,28.69a4.025,4.025,0,0,1-6.254,2.586l-24-16.622-24,16.623a4.021,4.021,0,0,1-6.254-2.586Zm-3.26-64.075A33.512,33.512,0,1,0,67.5,34.164,33.468,33.468,0,0,0,33.986,67.619ZM47,67.5A20.5,20.5,0,1,1,67.5,88,20.5,20.5,0,0,1,47,67.5Z'
);
document
.getElementById('moon-solid_3_')
.setAttribute('transform', 'translate(0 0)');
document.getElementById('theme').setAttribute('width', '25.92');
document.getElementById('theme').setAttribute('height', '25.92');
sty.innerText =
'.copy{background: #525252;}.copy:hover{background: #666666;}.close{border: 13px solid #525252;}.close:hover,.clos:focus{border: 13px solid #666666;}.swal-content__input,.swal-icon--success:after,.swal-icon--success::before,.swal-icon--success__hide-corners{background-color: #666666;}.swal-title,.swal-text{color:rgb(255,255,255)}.swal-footer{background-color: #525252;border-top: 1px solid #484848;}.swal-modal{background-color: #666666}.nav-item:hover{background-color: #666666;}.close:hover{color:#d9d9d9}.card{background:#666666;border: rgb(255, 255, 255) 0.2em solid;}.aboutus-close{color:#fff;}.newsth-close{color:#fff;}.sord{color:#fff;}';
document.body.appendChild(sty);
document.getElementsByClassName('modal-header')[0].style.backgroundColor =
'#525252';
document.getElementsByClassName('modal-content')[0].style.borderTopColor =
'rgb(82, 82, 82)';
document.getElementsByClassName(
'newsth-header'
)[0].style.backgroundColor = '#525252';
document.getElementsByClassName(
'aboutus-header'
)[0].style.backgroundColor = '#525252';
document.getElementsByClassName(
'newsth-content'
)[0].style.backgroundColor = '#666666';
document.getElementsByClassName('aboutus-logo')[0].style.color = '#fff';
document.getElementsByClassName('newsth-logo')[0].style.color = '#fff';
eval(dark);
document.cookie = 'mode=dark';
document.getElementById('pwa-color').setAttribute('content', '#525252');
replacejscssfile(
'./static/css/blockly_style.css',
'./static/css/blockly_style_dark.css',
'css'
);
};
$('.cls-1').animate({ 'stroke-dashoffset': '150px' }, 10);
var to_light = function () {
document.getElementsByTagName('nav')[0].style.backgroundColor = '#6d50f0';
workspace.setTheme(WaddleTheme);
document
.getElementById('moon-solid_3_')
.setAttribute(
'd',
'M32,98A65.973,65.973,0,0,1,97.941,32a79.615,79.615,0,0,1,12.051,1.1,3.1,3.1,0,0,1,.966,5.728,51.7,51.7,0,0,0,35.216,95.734,3.1,3.1,0,0,1,2.979,4.994A65.919,65.919,0,0,1,32,98Z'
);
document
.getElementById('moon-solid_3_')
.setAttribute('transform', 'translate(-32 -32)');
document.getElementById('theme').setAttribute('width', '22.627776');
document.getElementById('theme').setAttribute('height', '25.344');
sty.innerText =
'.close{border: 13px solid #6d50f0;}.close:hover,.clos:focus{border: 13px solid #5439ce;}.nav-item:hover{background-color: #5439ce;}.close:hover{color:#000000}.card{background:#fff;border: rgb(180, 180, 180) 0.2em solid;}.aboutus-close{color:#6d50f0;}.newsth-close{color:#6d50f0;}.sord{color:#6d50f0;}';
document.body.appendChild(sty);
document.getElementsByClassName('modal-header')[0].style.backgroundColor =
'#6d50f0';
document.getElementsByClassName('modal-content')[0].style.borderTopColor =
'rgb(109, 80, 240)';
document.getElementsByClassName(
'newsth-header'
)[0].style.backgroundColor = '#F5F8FA';
document.getElementsByClassName(
'aboutus-header'
)[0].style.backgroundColor = '#F5F8FA';
document.getElementsByClassName(
'newsth-content'
)[0].style.backgroundColor = '#fff';
document.getElementsByClassName('aboutus-logo')[0].style.color =
'#6d50f0';
document.getElementsByClassName('newsth-logo')[0].style.color = '#6d50f0';
document.getElementById('pwa-color').setAttribute('content', '#6d50f0');
eval(light);
document.cookie = 'mode=light';
replacejscssfile(
'./static/css/blockly_style_dark.css',
'./static/css/blockly_style.css',
'css'
);
};
var theme_conut = 0;
var switch_theme = function () {
if (theme == 'light') {
to_dark();
theme = 'dark';
} else {
to_light();
theme = 'light';
}
theme_conut++;
setTimeout(1000, function () {
theme_conut = 0;
});
if (theme_conut >= 50) {
if (getCookie('theme-egg') == false) {
document.cookie = 'theme-egg=true';
swal('获得成就:主题爱好者');
}
window.open('./static/Waddle/eastegg/vscode/index.html');
}
};
window.onresize = function () {
document.getElementById('table').style.height =
document.body.clientHeight - 52;
document.getElementById('toolbox').style.height =
document.body.clientHeight - 52;
Blockly.svgResize(workspace);
};
$('.cls-1').animate({ 'stroke-dashoffset': '100px' }, 10);
if (theme == 'dark') {
to_dark();
} else {
if (theme == 'light') {
to_light();
} else {
if (
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches
) {
to_dark();
}
}
}
hljs.initHighlightingOnLoad();
if ($(window).width() < 754) {
logo.src = './static/img/logo.svg';
document.getElementsByClassName('modal')[0].style.width = '100%';
} else {
logo.src = './static/img/waddle.svg';
document.getElementsByClassName('modal')[0].style.width = '30%';
}
</script>
<script>
$('.cls-1').animate({ 'stroke-dashoffset': '50px' }, 10);
</script>
<script>
// 等待加载完毕
$('.cls-1').animate({ 'stroke-dashoffset': '0px' }, 10);
setTimeout(() => {
document.getElementById('body').style = 'visibility: visible';
if (getCookie('logo-egg') == 1) {
document.cookie = 'logo-egg=true';
swal('获得成就:最简单的彩蛋');
}
}, 1000);
</script>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/jddbjd/coco-waddle.git
git@gitee.com:jddbjd/coco-waddle.git
jddbjd
coco-waddle
CoCo Waddle
master

搜索帮助