コマンドライン
このコミットが含まれているのは:
コミット
1eb40503f5
|
@ -0,0 +1,238 @@
|
|||
<template>
|
||||
<span>
|
||||
<img src="/assets/img/bash/app_icon.png" width="50" @click="openterm = true" />
|
||||
<vue-resizable
|
||||
class="resizable"
|
||||
ref="resizableComponent"
|
||||
:dragSelector="dragSelector"
|
||||
:active="handlers"
|
||||
:fit-parent="fit"
|
||||
:max-width="maxW | checkEmpty"
|
||||
:max-height="maxH | checkEmpty"
|
||||
:min-width="minW | checkEmpty"
|
||||
:min-height="minH | checkEmpty"
|
||||
:width="width"
|
||||
:height="height"
|
||||
:top="top"
|
||||
:left="left"
|
||||
v-show="openterm"
|
||||
fit-parent
|
||||
@mount="eHandler"
|
||||
@resize:move="eHandler"
|
||||
@resize:start="eHandler"
|
||||
@resize:end="eHandler"
|
||||
@drag:move="eHandler"
|
||||
@drag:start="eHandler"
|
||||
@drag:end="eHandler"
|
||||
>
|
||||
<div class="konsole" id="dragger">
|
||||
<div class="draggerheader">
|
||||
<div class="konsole_top_left"></div>
|
||||
<div class="konsole_top"><div style="width: 540px; margin: auto;">ロリ端末</div></div>
|
||||
<div class="konsole_top_min"></div>
|
||||
<div class="konsole_top_max"></div>
|
||||
<div class="konsole_top_right" @click="openterm = false"></div>
|
||||
</div>
|
||||
<div class="konsole_left"></div>
|
||||
<div class="konsoleuser">
|
||||
ロリコマンドラインですね〜♡<br />
|
||||
shiken@technicalsuwako.jp:/$ <span style="font-stretch: condensed;">█</span>
|
||||
</div>
|
||||
<div class="konsole_right"></div>
|
||||
<div class="konsole_bottom_left"></div>
|
||||
<div class="konsole_bottom"></div>
|
||||
<div class="konsole_bottom_right"></div>
|
||||
</div>
|
||||
</vue-resizable>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueResizable from 'vue-resizable';
|
||||
|
||||
export default {
|
||||
components: { VueResizable },
|
||||
data: function () {
|
||||
const tW = 600;
|
||||
const tH = 300;
|
||||
return {
|
||||
openterm: false,
|
||||
handlers: ["r", "rb", "b", "lb", "l", "lt", "t", "rt"],
|
||||
left: `calc(50% - ${tW / 2}px)`,
|
||||
top: `calc(50% - ${tH / 2}px)`,
|
||||
height: tH,
|
||||
width: tW,
|
||||
maxW: 600,
|
||||
maxH: 300,
|
||||
minW: 600,
|
||||
minH: 300,
|
||||
fit: true,
|
||||
event: "",
|
||||
dragSelector: ".draggerheader"
|
||||
}
|
||||
},
|
||||
created: function () {
|
||||
},
|
||||
methods: {
|
||||
eHandler (data) {
|
||||
console.log(data);
|
||||
this.width = data.width;
|
||||
this.height = data.height;
|
||||
this.left = data.left;
|
||||
this.top = data.top;
|
||||
this.event = data.eventName;
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
checkEmpty (value) {
|
||||
return typeof value !== "number" ? 0 : value;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#dragger {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
#draggerheader {
|
||||
cursor: move;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.konsole {
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
color: #fcfcfc;
|
||||
}
|
||||
|
||||
.konsole_top_left {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
background: url('/assets/img/bash/top_left.png') no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.konsole_top {
|
||||
height: 30px;
|
||||
background: url('/assets/img/bash/top_bg.png') repeat-x;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 30px;
|
||||
width: 496px;
|
||||
padding-top: 7px;
|
||||
padding-right: 30px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.konsole_top_right {
|
||||
height: 30px;
|
||||
width: 28px;
|
||||
background: url('/assets/img/bash/top_right.png') no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.konsole_top_right:hover {
|
||||
background: url('/assets/img/bash/top_right_hover.png') no-repeat;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.konsole_top_max {
|
||||
height: 30px;
|
||||
width: 23px;
|
||||
background: url('/assets/img/bash/top_max.png') no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 28px;
|
||||
}
|
||||
|
||||
.konsole_top_max:hover {
|
||||
background: url('/assets/img/bash/top_max_hover.png') no-repeat;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.konsole_top_min {
|
||||
height: 30px;
|
||||
width: 23px;
|
||||
background: url('/assets/img/bash/top_min.png') no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 51px;
|
||||
}
|
||||
|
||||
.konsole_top_min:hover {
|
||||
background: url('/assets/img/bash/top_min_hover.png') no-repeat;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.konsole_left {
|
||||
width: 2px;
|
||||
background: url('/assets/img/bash/left_bg.png') repeat-y;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 0;
|
||||
height: 267px;
|
||||
}
|
||||
|
||||
.konsoleuser { background: url('/assets/img/bash/user_bg.png') repeat; }
|
||||
.konsoleroot { background: url('/assets/img/bash/root_bg.png') repeat; }
|
||||
|
||||
.konsoleuser, .konsoleroot {
|
||||
background-size: cover;
|
||||
backdrop-filter: blur(17px);
|
||||
font-family: "Lucida Console", Monospace, "DejaVu Sans Mono", "Courier New", MiscFixed;
|
||||
font-size: 12px;
|
||||
color: #fcfcfc;
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 2px;
|
||||
height: 268px;
|
||||
width: 596px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.konsole_right {
|
||||
width: 2px;
|
||||
background: url('/assets/img/bash/right_bg.png') repeat-y;
|
||||
position: absolute;
|
||||
height: 267px;
|
||||
top: 30px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.konsole_bottom_left {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background: url('/assets/img/bash/bottom_left.png') no-repeat;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.konsole_bottom {
|
||||
height: 2px;
|
||||
background: url('/assets/img/bash/bottom_bg.png') repeat-x;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 2px;
|
||||
width: 595px;
|
||||
}
|
||||
|
||||
.konsole_bottom_right {
|
||||
height: 3px;
|
||||
width: 3px;
|
||||
background: url('/assets/img/bash/bottom_right.png') no-repeat;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,128 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="regText" v-for="(res, i) in result" :key="`res-${i}`">
|
||||
{{ res.text }}
|
||||
<br v-if="res.text" />
|
||||
<span class="regBold">
|
||||
{{ res.username }}@{{ res.hostname }}:<span class="pathText">{{ res.path }}</span>
|
||||
</span>$
|
||||
<input
|
||||
:key="i"
|
||||
:password="res.password"
|
||||
:autofocus="res.active"
|
||||
:disabled="!res.active"
|
||||
spellcheck="false"
|
||||
type="text"
|
||||
class="inputField"
|
||||
v-model="res.command"
|
||||
@keyup.enter="exec(res.command, i)"
|
||||
/>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Cookies from 'js-cookie';
|
||||
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
user: Cookies.get('username'),
|
||||
host: '076.ne.jp',
|
||||
pwd: '/',
|
||||
result: []
|
||||
}
|
||||
},
|
||||
created: function () {
|
||||
this.result = [];
|
||||
this.user = Cookies.get('username');
|
||||
this.host = '076.ne.jp';
|
||||
this.pwd = '/';
|
||||
|
||||
this.result.push({
|
||||
username: this.user,
|
||||
hostname: this.host,
|
||||
path: this.pwd,
|
||||
active: true,
|
||||
text: '',
|
||||
field: false,
|
||||
password: false,
|
||||
command: ''
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
exec(text, key) {
|
||||
var arg = text.split(' ');
|
||||
this.result[key].active = false;
|
||||
|
||||
if (arg[0] === 'ls') this.ls(this.result[key].path);
|
||||
else if (arg[0] === 'cd') this.cd(arg[1]);
|
||||
else if (arg[0] === 'clear') this.clear();
|
||||
else this.result.push({
|
||||
username: this.user,
|
||||
hostname: this.host,
|
||||
path: this.pwd,
|
||||
active: true,
|
||||
text: arg[0] + ': コマンドは見つかれません。',
|
||||
field: false,
|
||||
password: false,
|
||||
command: ''
|
||||
});
|
||||
},
|
||||
ls(pwd) {
|
||||
var neopwd = pwd.replace('/', 'sl');
|
||||
axios.get('/api/rpc/bash/exec', { arg: ['ls', '', ''] }).then(res => {
|
||||
this.result.push({
|
||||
username: this.user,
|
||||
hostname: this.host,
|
||||
path: this.pwd,
|
||||
active: true,
|
||||
text: res.data,
|
||||
field: false,
|
||||
password: false,
|
||||
command: ''
|
||||
})
|
||||
})
|
||||
},
|
||||
cd(pwd) {
|
||||
if (pwd === '/fuck' || pwd === 'fuck') {
|
||||
this.result.push({
|
||||
username: this.user,
|
||||
hostname: this.host,
|
||||
path: this.pwd,
|
||||
active: true,
|
||||
text: 'bash: cd: ' + pwd + ': このファイルまたはフォルダがありません。',
|
||||
field: false,
|
||||
password: false,
|
||||
command: ''
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (!pwd.startsWith('/')) pwd = '/' + pwd;
|
||||
|
||||
this.pwd = pwd;
|
||||
},
|
||||
clear() { this.result = []; }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.inputField {
|
||||
background-color: #31363b;
|
||||
color: #2ecc71;
|
||||
border-width: 0px;
|
||||
font-family: monospace;
|
||||
font-size: large;
|
||||
width: 500px;
|
||||
outline: none;
|
||||
}
|
||||
.regBold { font-weight: bold; }
|
||||
.regText { color: #2ecc71; }
|
||||
.pathText { color: #3498db; }
|
||||
h1, h2 { font-weight: normal; }
|
||||
ul { list-style-type: none; padding: 0; }
|
||||
li { display: inline-block; margin: 0 10px; }
|
||||
a { color: #1cdc9a; }
|
||||
</style>
|
|
@ -1,128 +1,179 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="regText" v-for="(res, i) in result" :key="`res-${i}`">
|
||||
{{ res.text }}
|
||||
<br v-if="res.text" />
|
||||
<span class="regBold">
|
||||
{{ res.username }}@{{ res.hostname }}:<span class="pathText">{{ res.path }}</span>
|
||||
</span>$
|
||||
<input
|
||||
:key="i"
|
||||
:password="res.password"
|
||||
:autofocus="res.active"
|
||||
:disabled="!res.active"
|
||||
spellcheck="false"
|
||||
type="text"
|
||||
class="inputField"
|
||||
v-model="res.command"
|
||||
@keyup.enter="exec(res.command, i)"
|
||||
/>
|
||||
<br />
|
||||
<span>
|
||||
<img src="/assets/img/bash/app_icon.png" width="50" @click="openterm = true" />
|
||||
<div class="konsole" id="dragger">
|
||||
<div class="draggerheader">
|
||||
<div class="konsole_top_left"></div>
|
||||
<div class="konsole_top"><div style="width: 540px; margin: auto;">ロリ端末</div></div>
|
||||
<div class="konsole_top_min"></div>
|
||||
<div class="konsole_top_max"></div>
|
||||
<div class="konsole_top_right" @click="openterm = false"></div>
|
||||
</div>
|
||||
<div class="konsole_left"></div>
|
||||
<div class="konsoleuser">
|
||||
ロリコマンドラインですね〜♡<br />
|
||||
shiken@technicalsuwako.jp:/$ <span style="font-stretch: condensed;">█</span>
|
||||
</div>
|
||||
<div class="konsole_right"></div>
|
||||
<div class="konsole_bottom_left"></div>
|
||||
<div class="konsole_bottom"></div>
|
||||
<div class="konsole_bottom_right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Cookies from 'js-cookie';
|
||||
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
user: Cookies.get('username'),
|
||||
host: '076.ne.jp',
|
||||
pwd: '/',
|
||||
result: []
|
||||
openterm: false
|
||||
}
|
||||
},
|
||||
created: function () {
|
||||
this.result = [];
|
||||
this.user = Cookies.get('username');
|
||||
this.host = '076.ne.jp';
|
||||
this.pwd = '/';
|
||||
|
||||
this.result.push({
|
||||
username: this.user,
|
||||
hostname: this.host,
|
||||
path: this.pwd,
|
||||
active: true,
|
||||
text: '',
|
||||
field: false,
|
||||
password: false,
|
||||
command: ''
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
exec(text, key) {
|
||||
var arg = text.split(' ');
|
||||
this.result[key].active = false;
|
||||
|
||||
if (arg[0] === 'ls') this.ls(this.result[key].path);
|
||||
else if (arg[0] === 'cd') this.cd(arg[1]);
|
||||
else if (arg[0] === 'clear') this.clear();
|
||||
else this.result.push({
|
||||
username: this.user,
|
||||
hostname: this.host,
|
||||
path: this.pwd,
|
||||
active: true,
|
||||
text: arg[0] + ': コマンドは見つかれません。',
|
||||
field: false,
|
||||
password: false,
|
||||
command: ''
|
||||
});
|
||||
},
|
||||
ls(pwd) {
|
||||
var neopwd = pwd.replace('/', 'sl');
|
||||
axios.get('/api/rpc/bash/exec', { arg: ['ls', '', ''] }).then(res => {
|
||||
this.result.push({
|
||||
username: this.user,
|
||||
hostname: this.host,
|
||||
path: this.pwd,
|
||||
active: true,
|
||||
text: res.data,
|
||||
field: false,
|
||||
password: false,
|
||||
command: ''
|
||||
})
|
||||
})
|
||||
},
|
||||
cd(pwd) {
|
||||
if (pwd === '/fuck' || pwd === 'fuck') {
|
||||
this.result.push({
|
||||
username: this.user,
|
||||
hostname: this.host,
|
||||
path: this.pwd,
|
||||
active: true,
|
||||
text: 'bash: cd: ' + pwd + ': このファイルまたはフォルダがありません。',
|
||||
field: false,
|
||||
password: false,
|
||||
command: ''
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (!pwd.startsWith('/')) pwd = '/' + pwd;
|
||||
|
||||
this.pwd = pwd;
|
||||
},
|
||||
clear() { this.result = []; }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.inputField {
|
||||
background-color: #31363b;
|
||||
color: #2ecc71;
|
||||
border-width: 0px;
|
||||
font-family: monospace;
|
||||
font-size: large;
|
||||
width: 500px;
|
||||
outline: none;
|
||||
#dragger {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
}
|
||||
.regBold { font-weight: bold; }
|
||||
.regText { color: #2ecc71; }
|
||||
.pathText { color: #3498db; }
|
||||
h1, h2 { font-weight: normal; }
|
||||
ul { list-style-type: none; padding: 0; }
|
||||
li { display: inline-block; margin: 0 10px; }
|
||||
a { color: #1cdc9a; }
|
||||
</style>
|
||||
|
||||
#draggerheader {
|
||||
cursor: move;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.konsole {
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
color: #fcfcfc;
|
||||
}
|
||||
|
||||
.konsole_top_left {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
background: url('/assets/img/bash/top_left.png') no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.konsole_top {
|
||||
height: 30px;
|
||||
background: url('/assets/img/bash/top_bg.png') repeat-x;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 30px;
|
||||
width: 496px;
|
||||
padding-top: 7px;
|
||||
padding-right: 30px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.konsole_top_right {
|
||||
height: 30px;
|
||||
width: 28px;
|
||||
background: url('/assets/img/bash/top_right.png') no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.konsole_top_right:hover {
|
||||
background: url('/assets/img/bash/top_right_hover.png') no-repeat;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.konsole_top_max {
|
||||
height: 30px;
|
||||
width: 23px;
|
||||
background: url('/assets/img/bash/top_max.png') no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 28px;
|
||||
}
|
||||
|
||||
.konsole_top_max:hover {
|
||||
background: url('/assets/img/bash/top_max_hover.png') no-repeat;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.konsole_top_min {
|
||||
height: 30px;
|
||||
width: 23px;
|
||||
background: url('/assets/img/bash/top_min.png') no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 51px;
|
||||
}
|
||||
|
||||
.konsole_top_min:hover {
|
||||
background: url('/assets/img/bash/top_min_hover.png') no-repeat;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.konsole_left {
|
||||
width: 2px;
|
||||
background: url('/assets/img/bash/left_bg.png') repeat-y;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 0;
|
||||
height: 267px;
|
||||
}
|
||||
|
||||
.konsoleuser { background: url('/assets/img/bash/user_bg.png') repeat; }
|
||||
.konsoleroot { background: url('/assets/img/bash/root_bg.png') repeat; }
|
||||
|
||||
.konsoleuser, .konsoleroot {
|
||||
background-size: cover;
|
||||
backdrop-filter: blur(17px);
|
||||
font-family: "Lucida Console", Monospace, "DejaVu Sans Mono", "Courier New", MiscFixed;
|
||||
font-size: 12px;
|
||||
color: #fcfcfc;
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 2px;
|
||||
height: 268px;
|
||||
width: 596px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.konsole_right {
|
||||
width: 2px;
|
||||
background: url('/assets/img/bash/right_bg.png') repeat-y;
|
||||
position: absolute;
|
||||
height: 267px;
|
||||
top: 30px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.konsole_bottom_left {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background: url('/assets/img/bash/bottom_left.png') no-repeat;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.konsole_bottom {
|
||||
height: 2px;
|
||||
background: url('/assets/img/bash/bottom_bg.png') repeat-x;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 2px;
|
||||
width: 595px;
|
||||
}
|
||||
|
||||
.konsole_bottom_right {
|
||||
height: 3px;
|
||||
width: 3px;
|
||||
background: url('/assets/img/bash/bottom_right.png') no-repeat;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
|
@ -43,6 +43,152 @@
|
|||
right: 16px;
|
||||
}
|
||||
|
||||
#dragger {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
#draggerheader {
|
||||
cursor: move;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.konsole {
|
||||
display: none;
|
||||
width: 600px;
|
||||
height: 358px;
|
||||
margin: auto;
|
||||
color: #fcfcfc;
|
||||
}
|
||||
|
||||
.konsole_top_left {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
background: url('/assets/img/bash/top_left.png') no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.konsole_top {
|
||||
height: 30px;
|
||||
background: url('/assets/img/bash/top_bg.png') repeat-x;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 30px;
|
||||
width: 496px;
|
||||
padding-top: 7px;
|
||||
padding-right: 30px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.konsole_top_right {
|
||||
height: 30px;
|
||||
width: 28px;
|
||||
background: url('/assets/img/bash/top_right.png') no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.konsole_top_right:hover {
|
||||
background: url('/assets/img/bash/top_right_hover.png') no-repeat;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.konsole_top_max {
|
||||
height: 30px;
|
||||
width: 23px;
|
||||
background: url('/assets/img/bash/top_max.png') no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 28px;
|
||||
}
|
||||
|
||||
.konsole_top_max:hover {
|
||||
background: url('/assets/img/bash/top_max_hover.png') no-repeat;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.konsole_top_min {
|
||||
height: 30px;
|
||||
width: 23px;
|
||||
background: url('/assets/img/bash/top_min.png') no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 51px;
|
||||
}
|
||||
|
||||
.konsole_top_min:hover {
|
||||
background: url('/assets/img/bash/top_min_hover.png') no-repeat;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.konsole_left {
|
||||
width: 2px;
|
||||
background: url('/assets/img/bash/left_bg.png') repeat-y;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 0;
|
||||
height: 325px;
|
||||
}
|
||||
|
||||
.konsoleuser { background: url('/assets/img/bash/user_bg.png') repeat; }
|
||||
.konsoleroot { background: url('/assets/img/bash/root_bg.png') repeat; }
|
||||
|
||||
.konsoleuser, .konsoleroot {
|
||||
background-size: cover;
|
||||
backdrop-filter: blur(17px);
|
||||
font-family: "Lucida Console", Monospace, "DejaVu Sans Mono", "Courier New", MiscFixed;
|
||||
font-size: 12px;
|
||||
color: #fcfcfc;
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 2px;
|
||||
height: 326px;
|
||||
width: 596px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.konsole_right {
|
||||
width: 2px;
|
||||
background: url('/assets/img/bash/right_bg.png') repeat-y;
|
||||
position: absolute;
|
||||
height: 325px;
|
||||
top: 30px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.konsole_bottom_left {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background: url('/assets/img/bash/bottom_left.png') no-repeat;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.konsole_bottom {
|
||||
height: 2px;
|
||||
background: url('/assets/img/bash/bottom_bg.png') repeat-x;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 2px;
|
||||
width: 595px;
|
||||
}
|
||||
|
||||
.konsole_bottom_right {
|
||||
height: 3px;
|
||||
width: 3px;
|
||||
background: url('/assets/img/bash/bottom_right.png') no-repeat;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/// Stroke font-character
|
||||
/// @param {Integer} $stroke - Stroke width
|
||||
/// @param {Color} $color - Stroke color
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
.konsole {
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
height: 358px;
|
||||
margin: auto;
|
||||
color: #fcfcfc;
|
||||
}
|
||||
|
@ -103,7 +103,7 @@
|
|||
position: absolute;
|
||||
top: 30px;
|
||||
left: 0;
|
||||
height: 267px;
|
||||
height: 325px;
|
||||
}
|
||||
|
||||
.konsoleuser { background: url('/assets/img/bash/user_bg.png') repeat; }
|
||||
|
@ -120,7 +120,7 @@
|
|||
position: absolute;
|
||||
top: 30px;
|
||||
left: 2px;
|
||||
height: 258px;
|
||||
height: 316px;
|
||||
width: 586px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
@ -129,7 +129,7 @@
|
|||
width: 2px;
|
||||
background: url('/assets/img/bash/right_bg.png') repeat-y;
|
||||
position: absolute;
|
||||
height: 267px;
|
||||
height: 325px;
|
||||
top: 30px;
|
||||
right: 0;
|
||||
}
|
||||
|
@ -211,6 +211,18 @@
|
|||
document.onmousemove = null;
|
||||
}
|
||||
}
|
||||
|
||||
function showdiv (id) {
|
||||
if (showdiv.div) showdiv.div.style.display = 'none';
|
||||
showdiv.div = document.getElementById(id);
|
||||
showdiv.div.style.display = 'block';
|
||||
}
|
||||
|
||||
function hidediv (id) {
|
||||
if (showdiv.div) showdiv.div.style.display = 'block';
|
||||
showdiv.div = document.getElementById(id);
|
||||
showdiv.div.style.display = 'none';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -88,6 +88,31 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md" style="padding-bottom: 32px;">
|
||||
<div class="within">
|
||||
<a href="#" onclick="showdiv('dragger');"><img src="/assets/img/bash/app_icon.png" width="50" /></a>
|
||||
</div>
|
||||
<div class="konsole" id="dragger">
|
||||
<div class="draggerheader">
|
||||
<div class="konsole_top_left"></div>
|
||||
<div class="konsole_top"><div style="width: 540px; margin: auto;">ロリ端末</div></div>
|
||||
<div class="konsole_top_min"></div>
|
||||
<div class="konsole_top_max"></div>
|
||||
<div class="konsole_top_right" onclick="hidediv('dragger');"></div>
|
||||
</div>
|
||||
<div class="konsole_left"></div>
|
||||
<div class="konsoleuser">
|
||||
ロリコマンドラインですね〜♡<br />
|
||||
shiken@technicalsuwako.jp:/$ <span style="font-stretch: condensed;">█</span>
|
||||
</div>
|
||||
<div class="konsole_right"></div>
|
||||
<div class="konsole_bottom_left"></div>
|
||||
<div class="konsole_bottom"></div>
|
||||
<div class="konsole_bottom_right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3" style="padding-bottom: 32px;">
|
||||
<div class="nav flex-column nav-pills sidemenu">
|
||||
|
@ -111,5 +136,51 @@
|
|||
|
||||
<!-- Scripts -->
|
||||
<script src="{{ asset('js/app.js') }}"></script>
|
||||
<script>
|
||||
dragElement(document.getElementById("dragger"));
|
||||
|
||||
function dragElement (elmnt) {
|
||||
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
|
||||
if (document.getElementById(elmnt.id + "header")) document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
|
||||
else elmnt.onmousedown = dragMouseDown;
|
||||
|
||||
function dragMouseDown (e) {
|
||||
e = e || window.event;
|
||||
e.preventDefault();
|
||||
pos3 = e.clientX;
|
||||
pos4 = e.clientY;
|
||||
document.onmouseup = closeDragElement;
|
||||
document.onmousemove = elementDrag;
|
||||
}
|
||||
|
||||
function elementDrag (e) {
|
||||
e = e || window.event;
|
||||
e.preventDefault();
|
||||
pos1 = pos3 - e.clientX;
|
||||
pos2 = pos4 - e.clientY;
|
||||
pos3 = e.clientX;
|
||||
pos4 = e.clientY;
|
||||
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
|
||||
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
|
||||
}
|
||||
|
||||
function closeDragElement () {
|
||||
document.onmouseup = null;
|
||||
document.onmousemove = null;
|
||||
}
|
||||
}
|
||||
|
||||
function showdiv (id) {
|
||||
if (showdiv.div) showdiv.div.style.display = 'none';
|
||||
showdiv.div = document.getElementById(id);
|
||||
showdiv.div.style.display = 'block';
|
||||
}
|
||||
|
||||
function hidediv (id) {
|
||||
if (showdiv.div) showdiv.div.style.display = 'block';
|
||||
showdiv.div = document.getElementById(id);
|
||||
showdiv.div.style.display = 'none';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
@section('content')
|
||||
|
||||
<a href="#"><img src="/assets/img/bash/app_icon.png" width="50" /></a>
|
||||
<a href="#" onclick="showdiv('dragger');"><img src="/assets/img/bash/app_icon.png" width="50" /></a>
|
||||
|
||||
<div class="konsole" id="dragger">
|
||||
<div id="draggerheader">
|
||||
|
@ -10,7 +10,7 @@
|
|||
<div class="konsole_top"><div style="width: 540px; margin: auto;">ロリ端末</div></div>
|
||||
<div class="konsole_top_min"></div>
|
||||
<div class="konsole_top_max"></div>
|
||||
<div class="konsole_top_right"></div>
|
||||
<div class="konsole_top_right" onclick="hidediv('dragger');"></div>
|
||||
</div>
|
||||
<div class="konsole_left"></div>
|
||||
<div class="konsoleuser">
|
||||
|
|
新しいイシューから参照