mirror of
https://github.com/syssecfsu/witty.git
synced 2024-12-24 11:42:34 +01:00
WIP
This commit is contained in:
Zhi Wang
parent
c144151c42
commit
98e37801c4
1
assets/pause.svg
Normal file
1
assets/pause.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z"/></svg>
|
||||||
|
After Width: | Height: | Size: 474 B |
1
assets/play.svg
Normal file
1
assets/play.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"/></svg>
|
||||||
|
After Width: | Height: | Size: 371 B |
77
assets/replay.html
Normal file
77
assets/replay.html
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
|
||||||
|
<script src="/assets/external/xterm.js"></script>
|
||||||
|
<script src="/assets/external/xterm-addon-attach.js"></script>
|
||||||
|
<script src="/assets/external/xterm-addon-fit.js"></script>
|
||||||
|
<script src="/assets/external/xterm-addon-web-links.js"></script>
|
||||||
|
|
||||||
|
<script src="/assets/replay.js"></script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/assets/external/xterm.css" />
|
||||||
|
<link href="/assets/external/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="/assets/main.css" />
|
||||||
|
|
||||||
|
<title>Replay</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav class="navbar navbar-dark bg-dark shadow-sm navbar-xs">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand mx-auto" href="https://github.com/syssecfsu/witty" target="_blank">
|
||||||
|
<img src="/assets/logo.svg" style="margin-right: 0.5rem;" height="28"
|
||||||
|
class="d-inline-block align-text-top">
|
||||||
|
replay terminal
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="d-flex flex-column align-items-center" style="margin-top: 2rem;">
|
||||||
|
<div id="terminal">
|
||||||
|
<div id="terminal_view"></div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<button type="button" class="btn btn-primary btn-sm" style="margin-right: 3px;">
|
||||||
|
<img src="/assets/play.svg" id="play-btn" height="18px">
|
||||||
|
</button>
|
||||||
|
<div class="progress" id="replay-control" style="width: 906px;">
|
||||||
|
<div class="progress-bar bg-secondary" role="progressbar" style="width: 25%" aria-valuenow="25"
|
||||||
|
aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function Init() {
|
||||||
|
let term = createReplayTerminal();
|
||||||
|
var str = [
|
||||||
|
' ┌────────────────────────────────────────────────────────────────────────────┐\n',
|
||||||
|
' │ \u001b[32;1mhttps://github.com/syssecfsu/witty\x1b[0m <- click it! │\n',
|
||||||
|
' └────────────────────────────────────────────────────────────────────────────┘\n',
|
||||||
|
''
|
||||||
|
].join('');
|
||||||
|
|
||||||
|
term.writeln(str);
|
||||||
|
|
||||||
|
// adjust the progress bar size to that of terminal
|
||||||
|
let vp = document.querySelector("#terminal")
|
||||||
|
let pbar = document.querySelector("#replay-control")
|
||||||
|
pbar.setAttribute("style", "width:" + (vp.offsetWidth - 32) + "px");
|
||||||
|
|
||||||
|
|
||||||
|
document.getElementById("play-btn").src = "/assets/pause.svg";
|
||||||
|
}
|
||||||
|
|
||||||
|
Init()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
46
assets/replay.js
Normal file
46
assets/replay.js
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
function createReplayTerminal() {
|
||||||
|
// vscode-snazzy https://github.com/Tyriar/vscode-snazzy
|
||||||
|
// copied from xterm.js website
|
||||||
|
var baseTheme = {
|
||||||
|
foreground: '#eff0eb',
|
||||||
|
background: '#282a36',
|
||||||
|
selection: '#97979b33',
|
||||||
|
black: '#282a36',
|
||||||
|
brightBlack: '#686868',
|
||||||
|
red: '#ff5c57',
|
||||||
|
brightRed: '#ff5c57',
|
||||||
|
green: '#5af78e',
|
||||||
|
brightGreen: '#5af78e',
|
||||||
|
yellow: '#f3f99d',
|
||||||
|
brightYellow: '#f3f99d',
|
||||||
|
blue: '#57c7ff',
|
||||||
|
brightBlue: '#57c7ff',
|
||||||
|
magenta: '#ff6ac1',
|
||||||
|
brightMagenta: '#ff6ac1',
|
||||||
|
cyan: '#9aedfe',
|
||||||
|
brightCyan: '#9aedfe',
|
||||||
|
white: '#f1f1f0',
|
||||||
|
brightWhite: '#eff0eb'
|
||||||
|
};
|
||||||
|
|
||||||
|
const term = new Terminal({
|
||||||
|
fontFamily: `'Fira Code', ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace`,
|
||||||
|
fontSize: 12,
|
||||||
|
theme: baseTheme,
|
||||||
|
convertEol: true,
|
||||||
|
cursorBlink: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
term.open(document.getElementById('terminal_view'));
|
||||||
|
term.resize(124, 37);
|
||||||
|
|
||||||
|
const weblinksAddon = new WebLinksAddon.WebLinksAddon();
|
||||||
|
term.loadAddon(weblinksAddon);
|
||||||
|
|
||||||
|
// fit the xterm viewpoint to parent element
|
||||||
|
const fitAddon = new FitAddon.FitAddon();
|
||||||
|
term.loadAddon(fitAddon);
|
||||||
|
fitAddon.fit();
|
||||||
|
|
||||||
|
return term;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user