Archived
113 lines
5.5 KiB
HTML
113 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Collavas</title>
|
|
<meta property="og:title" content="Collavas WEB">
|
|
<meta property="og:url" content="https://www.collavas.com/">
|
|
<meta property="og:description" content="Collavas, it's a canvas with no limitations and publicly accessible!">
|
|
<meta property="og:image" content="/static/img/logo.png">
|
|
<link rel="shortcut icon" href="/static/img/logo.png" type="image/png">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
|
|
<script src="/static/js/mobile-UujD4m.js"></script>
|
|
<link rel="stylesheet" href="/static/css/main-96wMDN.css">
|
|
<link rel="stylesheet" href="/static/css/icons-UujD4m.css">
|
|
</head>
|
|
<body>
|
|
<div class="main">
|
|
<div class="messages"></div>
|
|
<div class="top-bar">
|
|
<div class="logo">
|
|
<a href="">
|
|
<img src="/static/img/logo.png" alt="Logo">
|
|
</a>
|
|
</div>
|
|
<div class="menu">
|
|
<ul>
|
|
<li><a href="//discord.gg/wgwb6z8krC">Discord</a></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropbtn" style="display: flex; flex-direction: row;">Settings<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><style>svg{fill:#ffffff;margin-left:5px;}</style><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg></a>
|
|
<div class="dropdown-content" id="myDropdown">
|
|
<p>Color</p>
|
|
<div class="color-palette">
|
|
<input type="color" id="colorPicker" value="#000000" onchange="changeColor(event)">
|
|
</div>
|
|
<p>Name (press enter to save)</p>
|
|
<input type="text" id="username" maxlength="20">
|
|
<p id="nameStatus" style="margin-top:5px;"></p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div id="welcome" style="z-index:9999999;">
|
|
<div class="message pink">
|
|
<img src="/static/img/logo.png" style="width: 200px; height: auto;margin-left: auto;margin-right: auto;">
|
|
<p style="white-space: nowrap;margin: 25px 50px 25px 50px">Welcome to <span id="w-version"></span></p>
|
|
<p>Collavas is a free canvas with no rules, we allow users to draw what ever they want on our 10000x10000 canvas, viewable and editible by anyone on the web since March 19th, 2024. This project was made possible by the <a href="//aesthetiful.com/" target="_blank">Aesthetiful.com</a> infrastructure.</p>
|
|
<p>This project is in its early stages of development, if there are any bugs please report it to our <a href="//discord.gg/wgwb6z8krC" target="_blank">Discord Server</a>.</p>
|
|
<br><h2>v0.1.4 update</h2>
|
|
<ul style="text-align: left;"><li>Increased chat limitations</li><li>Loading older chats</li><li>Server shutting down randomly is fixed</li></ul><br><br>
|
|
<a href="javascript:void(0)" id="w-close"><p>close<svg height="10" width="10" style="margin: 0;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg></p></a>
|
|
</div>
|
|
</div>
|
|
<div id="transition">
|
|
<div class="spinner"></div>
|
|
</div>
|
|
<div class="content-wrapper"> <!-- Wrap your content here -->
|
|
<!-- Buttons for panning -->
|
|
<div class="action-buttons">
|
|
<button class="buttonTog" id="buttonTog" onclick="toggleOP()">Toggle UI</button>
|
|
<button class="resetView" id="resetView" onclick="resetView()">Reset View</button>
|
|
</div>
|
|
<div class="chat-container">
|
|
<div class="chat-messages">
|
|
<ul></ul>
|
|
</div>
|
|
<div class="chat-input">
|
|
<input id="chat-input" type="text" placeholder="Type to chat...">
|
|
</div>
|
|
</div>
|
|
<div class="pan-buttons" id="buttons">
|
|
<div class="top">
|
|
<button class="up" onclick="pan('up')">Up</button>
|
|
</div>
|
|
<div class="middle">
|
|
<button class="left" onclick="pan('left')">Left</button>
|
|
<button class="right" onclick="pan('right')">Right</button>
|
|
</div>
|
|
<div class="base">
|
|
<button class="down" onclick="pan('down')">Down</button>
|
|
</div>
|
|
</div>
|
|
<div class="clients" id="connectedClients">
|
|
<p id="clientNum">Connected Clients: N/A</p>
|
|
</div>
|
|
<div class="coordinates" id="xy">
|
|
<p>x: </p><p id="x">0</p><p>y: </p><p id="y">0</p>
|
|
</div>
|
|
<div class="data-size" id="data">
|
|
<p>Size: 0MB</p>
|
|
</div>
|
|
<div class="ping" id="ping">
|
|
<p></p>
|
|
</div>
|
|
<div class="client-version" id="version">
|
|
<p></p>
|
|
</div>
|
|
<div class="collavas">
|
|
<p>Collavas WEB © 2024 All rights reserved.</p>
|
|
</div>
|
|
<!-- Canvas container -->
|
|
<div class="canvasWrapper">
|
|
<div class="canvasContainer" id="canvasContainer">
|
|
<canvas id="drawingCanvas" class="canvas-main" width="10000" height="10000"></canvas>
|
|
</div>
|
|
</div>
|
|
<audio src="" id="audio-player" style="display: none;">
|
|
</div>
|
|
</div>
|
|
<script src="/static/js/main-96wMDN.js"></script>
|
|
</body>
|
|
</html> |