コマンドライン
このコミットが含まれているのは:
コミット
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>
|
<template>
|
||||||
<div>
|
<span>
|
||||||
<div class="regText" v-for="(res, i) in result" :key="`res-${i}`">
|
<img src="/assets/img/bash/app_icon.png" width="50" @click="openterm = true" />
|
||||||
{{ res.text }}
|
<div class="konsole" id="dragger">
|
||||||
<br v-if="res.text" />
|
<div class="draggerheader">
|
||||||
<span class="regBold">
|
<div class="konsole_top_left"></div>
|
||||||
{{ res.username }}@{{ res.hostname }}:<span class="pathText">{{ res.path }}</span>
|
<div class="konsole_top"><div style="width: 540px; margin: auto;">ロリ端末</div></div>
|
||||||
</span>$
|
<div class="konsole_top_min"></div>
|
||||||
<input
|
<div class="konsole_top_max"></div>
|
||||||
:key="i"
|
<div class="konsole_top_right" @click="openterm = false"></div>
|
||||||
:password="res.password"
|
</div>
|
||||||
:autofocus="res.active"
|
<div class="konsole_left"></div>
|
||||||
:disabled="!res.active"
|
<div class="konsoleuser">
|
||||||
spellcheck="false"
|
ロリコマンドラインですね〜♡<br />
|
||||||
type="text"
|
shiken@technicalsuwako.jp:/$ <span style="font-stretch: condensed;">█</span>
|
||||||
class="inputField"
|
</div>
|
||||||
v-model="res.command"
|
<div class="konsole_right"></div>
|
||||||
@keyup.enter="exec(res.command, i)"
|
<div class="konsole_bottom_left"></div>
|
||||||
/>
|
<div class="konsole_bottom"></div>
|
||||||
<br />
|
<div class="konsole_bottom_right"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Cookies from 'js-cookie';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data: function () {
|
data: function () {
|
||||||
return {
|
return {
|
||||||
user: Cookies.get('username'),
|
openterm: false
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.inputField {
|
#dragger {
|
||||||
background-color: #31363b;
|
position: absolute;
|
||||||
color: #2ecc71;
|
z-index: 9;
|
||||||
border-width: 0px;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: large;
|
|
||||||
width: 500px;
|
|
||||||
outline: none;
|
|
||||||
}
|
}
|
||||||
.regBold { font-weight: bold; }
|
|
||||||
.regText { color: #2ecc71; }
|
#draggerheader {
|
||||||
.pathText { color: #3498db; }
|
cursor: move;
|
||||||
h1, h2 { font-weight: normal; }
|
z-index: 10;
|
||||||
ul { list-style-type: none; padding: 0; }
|
}
|
||||||
li { display: inline-block; margin: 0 10px; }
|
|
||||||
a { color: #1cdc9a; }
|
.konsole {
|
||||||
</style>
|
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;
|
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
|
/// Stroke font-character
|
||||||
/// @param {Integer} $stroke - Stroke width
|
/// @param {Integer} $stroke - Stroke width
|
||||||
/// @param {Color} $color - Stroke color
|
/// @param {Color} $color - Stroke color
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
|
|
||||||
.konsole {
|
.konsole {
|
||||||
width: 600px;
|
width: 600px;
|
||||||
height: 300px;
|
height: 358px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
color: #fcfcfc;
|
color: #fcfcfc;
|
||||||
}
|
}
|
||||||
|
@ -103,7 +103,7 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 30px;
|
top: 30px;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: 267px;
|
height: 325px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.konsoleuser { background: url('/assets/img/bash/user_bg.png') repeat; }
|
.konsoleuser { background: url('/assets/img/bash/user_bg.png') repeat; }
|
||||||
|
@ -120,7 +120,7 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 30px;
|
top: 30px;
|
||||||
left: 2px;
|
left: 2px;
|
||||||
height: 258px;
|
height: 316px;
|
||||||
width: 586px;
|
width: 586px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
@ -129,7 +129,7 @@
|
||||||
width: 2px;
|
width: 2px;
|
||||||
background: url('/assets/img/bash/right_bg.png') repeat-y;
|
background: url('/assets/img/bash/right_bg.png') repeat-y;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 267px;
|
height: 325px;
|
||||||
top: 30px;
|
top: 30px;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
@ -211,6 +211,18 @@
|
||||||
document.onmousemove = 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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -88,6 +88,31 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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="row">
|
||||||
<div class="col-md-3" style="padding-bottom: 32px;">
|
<div class="col-md-3" style="padding-bottom: 32px;">
|
||||||
<div class="nav flex-column nav-pills sidemenu">
|
<div class="nav flex-column nav-pills sidemenu">
|
||||||
|
@ -111,5 +136,51 @@
|
||||||
|
|
||||||
<!-- Scripts -->
|
<!-- Scripts -->
|
||||||
<script src="{{ asset('js/app.js') }}"></script>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
@section('content')
|
@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 class="konsole" id="dragger">
|
||||||
<div id="draggerheader">
|
<div id="draggerheader">
|
||||||
|
@ -10,7 +10,7 @@
|
||||||
<div class="konsole_top"><div style="width: 540px; margin: auto;">ロリ端末</div></div>
|
<div class="konsole_top"><div style="width: 540px; margin: auto;">ロリ端末</div></div>
|
||||||
<div class="konsole_top_min"></div>
|
<div class="konsole_top_min"></div>
|
||||||
<div class="konsole_top_max"></div>
|
<div class="konsole_top_max"></div>
|
||||||
<div class="konsole_top_right"></div>
|
<div class="konsole_top_right" onclick="hidediv('dragger');"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="konsole_left"></div>
|
<div class="konsole_left"></div>
|
||||||
<div class="konsoleuser">
|
<div class="konsoleuser">
|
||||||
|
|
新しいイシューから参照