59 lines
1.8 KiB
HTML
59 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
<style>
|
|
.wrapper {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-gap: 7px;
|
|
}
|
|
.one {
|
|
grid-column: 1 ;
|
|
}
|
|
.two {
|
|
grid-column: 2;
|
|
}
|
|
.three {
|
|
grid-column: 3;
|
|
}
|
|
textarea {
|
|
width: calc(100% - 10px)
|
|
}
|
|
.editor-container {
|
|
background-color: #4caf50;
|
|
padding: 4px 5px 10px 5px;
|
|
border-radius: 11px;
|
|
}
|
|
.editor-container[disconnected] {
|
|
background-color: red;
|
|
}
|
|
.disconnected-info {
|
|
display: none;
|
|
}
|
|
.editor-container[disconnected] .disconnected-info {
|
|
display: inline;
|
|
}
|
|
</style>
|
|
<div class="wrapper">
|
|
<div id="container1" class="one editor-container">
|
|
<h1>Server 1 <span class="disconnected-info">(disconnected)</span></h1>
|
|
<textarea id="textarea1" rows=40 autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
|
|
</div>
|
|
<div id="container2" class="two editor-container">
|
|
<h1>Server 2 <span class="disconnected-info">(disconnected)</span></h1>
|
|
<textarea id="textarea2" rows=40 autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
|
|
</div>
|
|
<div id="container3" class="three editor-container">
|
|
<h1>Server 3 <span class="disconnected-info">(disconnected)</span></h1>
|
|
<textarea id="textarea3" rows=40 autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
|
|
</div>
|
|
</div>
|
|
<script src="../../y.js"></script>
|
|
<script src="../../../y-array/y-array.js"></script>
|
|
<script src="../../../y-text/dist/y-text.js"></script>
|
|
<script src="../../../y-memory/y-memory.js"></script>
|
|
<script src="../../../y-websockets-client/y-websockets-client.js"></script>
|
|
<script src="./index.js"></script>
|
|
</body>
|
|
</html>
|