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