Skip to content

Commit 7411a92

Browse files
The-InfinitysThe-Infinitys
authored
add new items
1 parent 6302699 commit 7411a92

File tree

12 files changed

+1041
-0
lines changed

12 files changed

+1041
-0
lines changed

‎public/app/WebDevelopperTool/BookMarkLet.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>InfinityDevelopperTool</title>
6+
</head>
7+
<body>
8+
<a href="javascript:if(null==document.getElementById(%22InfinityDevelopperTool%22))%7Blet%20i=document.createElement(%22div%22);i.id=%22InfinityDevelopperTool%22,i.innerHTML='%3Cdiv%20id=%22InfinityDevelopperTool%22%3E%3Cstyle%3E%23DevelopperToolBox%7Bz-index:999999999;padding:0;position:fixed;width:20%25;height:100%25;top:0;right:0;background-color:%23000%7D%23VisibleSwitch%7Bz-index:99999999999999999;position:fixed;top:0;right:0%25;width:5%25;height:5%25;padding:0;background-color:%23fff;color:%23000;border:1px%20solid%20%23808080%7D%23MaximiseSwitch%7Bz-index:99999999999999999;position:fixed;top:0;right:5%25;width:5%25;height:5%25;padding:0;background-color:%23fff;color:%23000;border:1px%20solid%20%23808080%7D%23HTML%7Bposition:absolute;top:5%25;left:0%25;width:33%25;height:5%25;color:%23ffa500;font-family:arial;border:2px%20solid%20%23ffa500%7D%23CSS%7Bposition:absolute;top:5%25;left:33.3%25;width:33%25;height:5%25;color:%23add8e6;font-family:arial;border:2px%20solid%20%23add8e6%7D%23JS%7Bposition:absolute;top:5%25;right:0;width:33%25;height:5%25;color:%23ff0;font-family:arial;border:2px%20solid%20%23ff0%7D%3C/style%3E%3Cbutton%20id=%22VisibleSwitch%22%3Ex%3C/button%3E%20%3Cbutton%20id=%22MaximiseSwitch%22%3E%5B%5D%3C/button%3E%3Cdiv%20id=%22DevelopperToolBox%22%3E%20%3Cbutton%20id=%22HTML%22%3E&lt;%3E%3C/button%3E%3Cdiv%20id=%22HTMLEditor%22%3E%3C/div%3E%3Cbutton%20id=%22CSS%22%3E%23%3C/button%3E%3Cdiv%20id=%22CSSEditor%22%3E%3C/div%3E%3Cbutton%20id=%22JS%22%3EJS%3C/button%3E%3Cdiv%20id=%22JSEditor%22%3E%3C/div%3E%3C/div%3E%3C/div%3E',document.body.appendChild(i)%7D;void(0);">1:MakeUpFrame</a><br>
9+
<a href="javascript:if(null!=document.getElementById(%22InfinityDevelopperTool%22))%7Blet%20e=document.createElement(%22script%22);e.id=%22InfinityDevelopperTool%22,e.innerHTML='function%20openDevelopper()%7Bdocument.getElementById(%22DevelopperToolBox%22).style.visibility=%22visible%22;document.getElementById(%22MaximiseSwitch%22).style.visibility=%22visible%22;CSSEditor.style.visibility=%22hidden%22;JSEditor.style.visibility=%22hidden%22;HTMLEditor.style.visibility=%22visible%22;document.getElementById(%22VisibleSwitch%22).style.opacity=%221%22%7Dvar%20HTMLEditor=document.getElementById(%22HTMLEditor%22),CSSEditor=document.getElementById(%22CSSEditor%22),JSEditor=document.getElementById(%22JSEditor%22);openDevelopper();document.querySelector(%22%23VisibleSwitch%22).addEventListener(%22click%22,()=%3E%7Bdocument.getElementById(%22DevelopperToolBox%22).style.visibility===%22visible%22?(document.getElementById(%22DevelopperToolBox%22).style.visibility=%22hidden%22,document.getElementById(%22MaximiseSwitch%22).style.visibility=%22hidden%22,CSSEditor.style.visibility=%22hidden%22,JSEditor.style.visibility=%22hidden%22,HTMLEditor.style.visibility=%22hidden%22,document.getElementById(%22VisibleSwitch%22).style.opacity=%220%22):openDevelopper()%7D);document.querySelector(%22%23MaximiseSwitch%22).addEventListener(%22click%22,()=%3E%7Bdocument.getElementById(%22DevelopperToolBox%22).style.width=document.getElementById(%22DevelopperToolBox%22).style.width==%22100%25%22?%2220%25%22:%22100%25%22%7D);HTMLSource.value=getHTMLSource();document.querySelector(%22%23HTML%22).addEventListener(%22click%22,()=%3E%7BCSSEditor.style.visibility=%22hidden%22,JSEditor.style.visibility=%22hidden%22,HTMLEditor.style.visibility=%22visible%22%7D);document.querySelector(%22%23CSS%22).addEventListener(%22click%22,()=%3E%7BHTMLEditor.style.visibility=%22hidden%22,JSEditor.style.visibility=%22hidden%22,CSSEditor.style.visibility=%22visible%22%7D);document.querySelector(%22%23JS%22).addEventListener(%22click%22,()=%3E%7BCSSEditor.style.visibility=%22hidden%22,HTMLEditor.style.visibility=%22hidden%22,JSEditor.style.visibility=%22visible%22%7D)',document.body.appendChild(e)%7D;void(0);">2:SetUpMainScript</a><br>
10+
<a href="javascript:if(null!=document.getElementById(%22InfinityDevelopperTool%22))%7Blet%20o=document.createElement(%22style%22);o.innerHTML=%22%23HTMLEditor%7Bposition:absolute;top:10%25;left:0;width:100%25;height:90%25;border:2px%20solid%20orange%7D%23HTMLSource%7Bposition:absolute;top:0;left:0;width:100%25;height:80%25;border:2px%20solid%20orange%7D%23UpdateHTML%7Bz-index:999999;position:absolute;top:80%25;left:0;width:100%25;height:10%25;border:2px%20solid%20orange%7D%23RestoreHTML%7Bz-index:999999;position:absolute;top:90%25;left:0;width:100%25;height:10%25;border:2px%20solid%20orange%7D%23CSSEditor%7Bvisibility:hidden;position:absolute;top:10%25;left:0;width:100%25;height:90%25;border:2px%20solid%20lightblue%7D%23CSSSource%7Bposition:absolute;top:0;left:0;width:100%25;height:90%25;border:2px%20solid%20lightblue%7D%23UpdateCSS%7Bz-index:999999;position:absolute;top:90%25;left:0;width:100%25;height:10%25;border:2px%20solid%20lightblue%7D%23JSEditor%7Bvisibility:hidden;position:absolute;top:10%25;left:0;width:100%25;height:90%25;border:2px%20solid%20yellow%7D%23JSSource%7Bposition:absolute;top:0;left:0;width:100%25;height:70%25;border:2px%20solid%20yellow%7D%23JSRunnerButton%7Bz-index:999999;position:absolute;top:70%25;left:0;width:100%25;height:10%25;background-color:%23000;color:yellow;border:2px%20solid%20yellow%7D%23JSRunnerConsole%7Bz-index:999999;position:absolute;top:80%25;left:0;width:100%25;height:20%25;color:%23fff;font-family:sans-serif;background-color:%23000;border:2px%20solid%20yellow;overflow:scroll;font-size:5px%7D%22,document.getElementById(%22InfinityDevelopperTool%22).appendChild(o)%7D;void(0);">3:SetUpCSS</a><br>
11+
<a href="javascript:null!=document.getElementById(%22InfinityDevelopperTool%22)&&(document.getElementById(%22HTMLEditor%22).innerHTML='%3Ctextarea%20id=%22HTMLSource%22%20id=%22%22%20cols=%2230%22%20rows=%2210%22%20placeHolder=%22//Please%20Write%20Here%20to%20Code%22%3E%3C/textarea%3E%3Cbutton%20id=%22UpdateHTML%22%3EUpdate%3C/button%3E%3Cbutton%20id=%22RestoreHTML%22%3ERestore%3C/button%3E',document.getElementById(%22CSSEditor%22).innerHTML='%3Ctextarea%20id=%22CSSSource%22%20cols=%2230%22%20rows=%2210%22%20placeHolder=%22//Please%20Write%20Here%20to%20Code%22%3E%3C/textarea%3E%3Cbutton%20id=%22UpdateCSS%22%3EUpdate%3C/button%3E%3Cstyle%20id=%22CSSAdder%22%3E%3C/style%3E',document.getElementById(%22JSEditor%22).innerHTML='%3Ctextarea%20id=%22JSSource%22%20rows=%2230%22%20cols=%2210%22%20placeHolder=%22//Please%20Write%20Here%20to%20Code%22%3E%3C/textarea%3E%3Cbutton%20id=%22JSRunnerButton%22%3ERun%3C/button%3E%3Cdiv%20id=%22JSRunnerConsole%22%3E%3C/div%3E%3Cscript%20id=%22JSRunner%22%3E%3C%5C/script%3E');void(0);">4:CreateInnerElements</a><br>
12+
<a href="javascript:if(null!=document.getElementById(%22InfinityDevelopperTool%22))%7Blet%20i=document.createElement(%22script%22);i.innerHTML='document.querySelector(%22%23HTML%22).addEventListener(%22click%22,(e)=%3E%7BCSSEditor.style.visibility=%22hidden%22;JSEditor.style.visibility=%22hidden%22;HTMLEditor.style.visibility=%22visible%22%7D);document.querySelector(%22%23CSS%22).addEventListener(%22click%22,(e)=%3E%7BHTMLEditor.style.visibility=%22hidden%22;JSEditor.style.visibility=%22hidden%22;CSSEditor.style.visibility=%22visible%22%7D);document.querySelector(%22%23JS%22).addEventListener(%22click%22,(e)=%3E%7BCSSEditor.style.visibility=%22hidden%22;HTMLEditor.style.visibility=%22hidden%22;JSEditor.style.visibility=%22visible%22%7D)',document.getElementById(%22InfinityDevelopperTool%22).appendChild(i)%7D;void(0);">5:SetUpUIScript</a><br>
13+
<a href="javascript:if(null!=document.getElementById(%22InfinityDevelopperTool%22))%7Blet%20e=document.createElement(%22script%22);e.innerHTML='var%20HTMLSource=document.getElementById(%22HTMLSource%22);function%20getHTMLSource()%7Breturn%20document.documentElement.outerHTML.replace(%22/&/g%22,%22&amp;%22).replace(%22/%3C/g%22,%22&lt;%22).replace(%22/%3E/g%22,%22&gt;%22)%7D%20HTMLSource.value=getHTMLSource();document.querySelector(%22%23RestoreHTML%22).addEventListener(%22click%22,(e)=%3E%7BHTMLSource.value=getHTMLSource()%7D);document.querySelector(%22%23UpdateHTML%22).addEventListener(%22click%22,(e)=%3E%7Bconsole.log(HTMLSource.value);document.open();document.write(HTMLSource.value)%7D)',document.getElementById(%22InfinityDevelopperTool%22).appendChild(e)%7D;void(0);">6:Build HTML Editor</a><br>
14+
<a href="javascript:if(null!=document.getElementById(%22InfinityDevelopperTool%22))%7Blet%20e=document.createElement(%22script%22);e.innerHTML='document.querySelector(%22%23UpdateCSS%22).addEventListener(%22click%22,(e)=%3E%7Blet%20before=document.getElementById(%22CSSAdder%22);before.remove();let%20after=document.createElement(%22style%22);after.id=%22CSSAdder%22;after.innerHTML=document.getElementById(%22CSSSource%22).value;document.getElementById(%22CSSEditor%22).appendChild(after)%7D)',document.getElementById(%22InfinityDevelopperTool%22).appendChild(e)%7D;void(0);">7:Build CSS Editor</a><br>
15+
<a href="javascript:if(null!=document.getElementById(%22InfinityDevelopperTool%22))%7Blet%20e=document.createElement(%22script%22);e.innerHTML='console.log=((logTextAreaArgument)=%3E%7Blet%20logTextArea=logTextAreaArgument;return(text)=%3E(logTextArea.innerHTML+=%22%3E%22+text+%22%3Cbr%3E%22)%7D)(document.getElementById(%22JSRunnerConsole%22));console.info=((logTextAreaArgument)=%3E%7Blet%20logTextArea=logTextAreaArgument;return(text)=%3E(logTextArea.innerHTML+=%22%5Bi%5D%3E%22+text+%22%3Cbr%3E%22)%7D)(document.getElementById(%22JSRunnerConsole%22));console.warn=((logTextAreaArgument)=%3E%7Blet%20logTextArea=logTextAreaArgument;return(text)=%3E(logTextArea.innerHTML+=%22%5B%E2%9A%A0%EF%B8%8E%5D%3E%22+text+%22%3Cbr%3E%22)%7D)(document.getElementById(%22JSRunnerConsole%22));console.error=((logTextAreaArgument)=%3E%7Blet%20logTextArea=logTextAreaArgument;return(text)=%3E(logTextArea.innerHTML+=%22%5B%C3%97%5D%3E%22+text+%22%3Cbr%3E%22)%7D)(document.getElementById(%22JSRunnerConsole%22));document.querySelector(%22%23JSRunnerButton%22).addEventListener(%22click%22,(e)=%3E%7Blet%20before=document.getElementById(%22JSRunner%22);before.remove();let%20after=document.createElement(%22script%22);after.id=%22JSRunner%22;after.innerHTML=document.getElementById(%22JSSource%22).value;document.getElementById(%22JSEditor%22).appendChild(after)%7D)',document.getElementById(%22InfinityDevelopperTool%22).appendChild(e)%7D;void(0);">8:Build JS Editor</a>
16+
</body>
17+
</html>

‎public/app/WebDevelopperTool/Source/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<div id="InfinityDevelopperTool">
2+
<button id="VisibleSwitch">x</button>
3+
<button id="MaximiseSwitch">[]</button>
4+
<div id="DevelopperToolBox">
5+
<button id="HTML">&lt;&gt;</button>
6+
<div id="HTMLEditor">
7+
<textarea id="HTMLSource" id="" cols="30" rows="10" placeHolder="//Please Write Here to Code"></textarea>
8+
<button id="UpdateHTML">Update</button>
9+
<button id="RestoreHTML">Restore</button>
10+
</div>
11+
<button id="CSS">#</button>
12+
<div id="CSSEditor">
13+
<textarea id="CSSSource" cols="30" rows="10" placeHolder="//Please Write Here to Code"></textarea>
14+
<button id="UpdateCSS">Update</button>
15+
<style id="CSSAdder"></style>
16+
</div>
17+
<button id="JS">JS</button>
18+
<div id="JSEditor">
19+
<textarea id="JSSource" rows="30" cols="10" placeHolder="//Please Write Here to Code">
20+
</textarea>
21+
<button id="JSRunnerButton">Run</button>
22+
<div id="JSRunnerConsole">
23+
</div>
24+
<script id="JSRunner"></script>
25+
</div>
26+
</div>
27+
</div>

‎public/app/WebDevelopperTool/Source/script.js‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
var HTMLEditor = document.getElementById("HTMLEditor");
2+
var CSSEditor = document.getElementById("CSSEditor");
3+
var JSEditor = document.getElementById("JSEditor");
4+
var HTMLSource = document.getElementById("HTMLSource");
5+
function getHTMLSource() {
6+
return document.documentElement.outerHTML
7+
.replace("/&/g", "&amp;")
8+
.replace("/</g", "&lt;")
9+
.replace("/>/g", "&gt;");
10+
}
11+
function openDevelopper() {
12+
document.getElementById("DevelopperToolBox").style.visibility = "visible";
13+
14+
document.getElementById("MaximiseSwitch").style.visibility = "visible";
15+
16+
CSSEditor.style.visibility = "hidden";
17+
JSEditor.style.visibility = "hidden";
18+
HTMLEditor.style.visibility = "visible";
19+
document.getElementById("VisibleSwitch").style.opacity = "1";
20+
}
21+
openDevelopper();
22+
HTMLSource.value = getHTMLSource();
23+
document.querySelector("#VisibleSwitch").addEventListener("click", (e) => {
24+
if (
25+
document.getElementById("DevelopperToolBox").style.visibility === "visible"
26+
) {
27+
document.getElementById("DevelopperToolBox").style.visibility = "hidden";
28+
document.getElementById("MaximiseSwitch").style.visibility = "hidden";
29+
CSSEditor.style.visibility = "hidden";
30+
JSEditor.style.visibility = "hidden";
31+
HTMLEditor.style.visibility = "hidden";
32+
document.getElementById("VisibleSwitch").style.opacity = "0";
33+
} else {
34+
openDevelopper();
35+
}
36+
});
37+
document.querySelector("#MaximiseSwitch").addEventListener("click", (e) => {
38+
if (document.getElementById("DevelopperToolBox").style.width == "100%") {
39+
document.getElementById("DevelopperToolBox").style.width = "20%";
40+
} else {
41+
document.getElementById("DevelopperToolBox").style.width = "100%";
42+
}
43+
});
44+
document.querySelector("#HTML").addEventListener("click", (e) => {
45+
CSSEditor.style.visibility = "hidden";
46+
JSEditor.style.visibility = "hidden";
47+
HTMLEditor.style.visibility = "visible";
48+
});
49+
document.querySelector("#CSS").addEventListener("click", (e) => {
50+
HTMLEditor.style.visibility = "hidden";
51+
JSEditor.style.visibility = "hidden";
52+
CSSEditor.style.visibility = "visible";
53+
});
54+
document.querySelector("#JS").addEventListener("click", (e) => {
55+
CSSEditor.style.visibility = "hidden";
56+
HTMLEditor.style.visibility = "hidden";
57+
JSEditor.style.visibility = "visible";
58+
});
59+
document.querySelector("#RestoreHTML").addEventListener("click", (e) => {
60+
HTMLSource.value = getHTMLSource();
61+
});
62+
document.querySelector("#UpdateHTML").addEventListener("click", (e) => {
63+
console.log(HTMLSource.value);
64+
document.open();
65+
document.write(HTMLSource.value);
66+
});
67+
/* consoleプログラムの書き換え*/
68+
console.log = ((logTextAreaArgument) => {
69+
let logTextArea = logTextAreaArgument;
70+
return (text) => (logTextArea.innerHTML += ">" + text + "<br>");
71+
})(document.getElementById("JSRunnerConsole"));
72+
console.info = ((logTextAreaArgument) => {
73+
let logTextArea = logTextAreaArgument;
74+
return (text) => (logTextArea.innerHTML += "[i]>" + text + "<br>");
75+
})(document.getElementById("JSRunnerConsole"));
76+
console.warn = ((logTextAreaArgument) => {
77+
let logTextArea = logTextAreaArgument;
78+
return (text) => (logTextArea.innerHTML += "[⚠︎]>" + text + "<br>");
79+
})(document.getElementById("JSRunnerConsole"));
80+
console.error = ((logTextAreaArgument) => {
81+
let logTextArea = logTextAreaArgument;
82+
return (text) => (logTextArea.innerHTML += "[×]>" + text + "<br>");
83+
})(document.getElementById("JSRunnerConsole"));
84+
85+
document.querySelector("#JSRunnerButton").addEventListener("click", (e) => {
86+
let before = document.getElementById("JSRunner");
87+
before.remove();
88+
let after = document.createElement("script");
89+
after.id = "JSRunner";
90+
after.innerHTML = document.getElementById("JSSource").value;
91+
document.getElementById("JSEditor").appendChild(after);
92+
});
93+
document.querySelector("#UpdateCSS").addEventListener("click", (e) => {
94+
let before = document.getElementById("CSSAdder");
95+
before.remove();
96+
let after = document.createElement("style");
97+
after.id = "CSSAdder";
98+
after.innerHTML = document.getElementById("CSSSource").value;
99+
document.getElementById("CSSEditor").appendChild(after);
100+
});

‎public/app/WebDevelopperTool/Source/style.css‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
#DevelopperToolBox {
2+
z-index: 9999999;
3+
padding: 0;
4+
position: fixed;
5+
width: 20%;
6+
height: 100%;
7+
top: 0;
8+
right: 0;
9+
background-color: black;
10+
}
11+
12+
#VisibleSwitch {
13+
z-index: 99999999999999999;
14+
position: fixed;
15+
top: 0;
16+
right: 0%;
17+
width: 5%;
18+
height: 5%;
19+
padding: 0;
20+
background-color: white;
21+
color: black;
22+
border: 1px solid gray;
23+
}
24+
25+
#MaximiseSwitch {
26+
z-index: 99999999999999999;
27+
position: fixed;
28+
top: 0;
29+
right: 5%;
30+
width: 5%;
31+
height: 5%;
32+
padding: 0;
33+
background-color: white;
34+
color: black;
35+
border: 1px solid gray;
36+
}
37+
38+
#HTML {
39+
position: absolute;
40+
top: 5%;
41+
left: 0%;
42+
width: 33%;
43+
height: 5%;
44+
color: orange;
45+
font-family: arial;
46+
border: 2px solid orange;
47+
}
48+
49+
#CSS {
50+
position: absolute;
51+
top: 5%;
52+
left: 33.3%;
53+
width: 33%;
54+
height: 5%;
55+
color: lightblue;
56+
font-family: arial;
57+
border: 2px solid lightblue;
58+
}
59+
60+
#JS {
61+
position: absolute;
62+
top: 5%;
63+
right: 0;
64+
width: 33%;
65+
height: 5%;
66+
color: yellow;
67+
font-family: arial;
68+
border: 2px solid yellow;
69+
}
70+
71+
#HTMLEditor {
72+
position: absolute;
73+
top: 10%;
74+
left: 0;
75+
width: 100%;
76+
height: 90%;
77+
border: 2px solid orange;
78+
}
79+
80+
#HTMLSource {
81+
position: absolute;
82+
top: 0;
83+
left: 0;
84+
width: 100%;
85+
height: 80%;
86+
border: 2px solid orange;
87+
}
88+
89+
#UpdateHTML {
90+
z-index: 999999;
91+
position: absolute;
92+
top: 80%;
93+
left: 0;
94+
width: 100%;
95+
height: 10%;
96+
border: 2px solid orange;
97+
}
98+
99+
#RestoreHTML {
100+
z-index: 999999;
101+
position: absolute;
102+
top: 90%;
103+
left: 0;
104+
width: 100%;
105+
height: 10%;
106+
border: 2px solid orange;
107+
}
108+
109+
#CSSEditor {
110+
visibility: hidden;
111+
position: absolute;
112+
top: 10%;
113+
left: 0;
114+
width: 100%;
115+
height: 90%;
116+
border: 2px solid lightblue;
117+
}
118+
119+
#CSSSource {
120+
position: absolute;
121+
top: 0;
122+
left: 0;
123+
width: 100%;
124+
height: 90%;
125+
border: 2px solid lightblue;
126+
}
127+
128+
#UpdateCSS {
129+
z-index: 999999;
130+
position: absolute;
131+
top: 90%;
132+
left: 0;
133+
width: 100%;
134+
height: 10%;
135+
border: 2px solid lightblue;
136+
}
137+
138+
#JSEditor {
139+
visibility: hidden;
140+
position: absolute;
141+
top: 10%;
142+
left: 0;
143+
width: 100%;
144+
height: 90%;
145+
border: 2px solid yellow;
146+
}
147+
148+
#JSSource {
149+
position: absolute;
150+
top: 0;
151+
left: 0;
152+
width: 100%;
153+
height: 70%;
154+
border: 2px solid yellow;
155+
}
156+
157+
#JSRunnerButton {
158+
z-index: 999999;
159+
position: absolute;
160+
top: 70%;
161+
left: 0;
162+
width: 100%;
163+
height: 10%;
164+
background-color: black;
165+
color: yellow;
166+
border: 2px solid yellow;
167+
}
168+
169+
#JSRunnerConsole {
170+
z-index: 999999;
171+
position: absolute;
172+
top: 80%;
173+
left: 0;
174+
width: 100%;
175+
height: 20%;
176+
color: white;
177+
font-family: sans-serif;
178+
background-color: black;
179+
border: 2px solid yellow;
180+
overflow: scroll;
181+
font-size:5px;
182+
}

0 commit comments

Comments
 (0)