240 lines
11 KiB
HTML
240 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
|
|
<title>E/PLACE</title>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
<link rel="icon" href="/favicon.ico" />
|
||
|
|
<link
|
||
|
|
rel="stylesheet"
|
||
|
|
type="text/css"
|
||
|
|
media="screen"
|
||
|
|
href="index.css"
|
||
|
|
/>
|
||
|
|
<link rel="stylesheet/less" type="text/css" href="styles.less" />
|
||
|
|
<link
|
||
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
||
|
|
rel="stylesheet"
|
||
|
|
/>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/less"></script>
|
||
|
|
<script type="module">
|
||
|
|
if (import.meta.env.MODE === "debug") {
|
||
|
|
const link = document.createElement("link");
|
||
|
|
link.rel = "stylesheet";
|
||
|
|
link.type = "text/css";
|
||
|
|
link.media = "screen";
|
||
|
|
link.href = "debug/index.css";
|
||
|
|
document.head.appendChild(link);
|
||
|
|
}
|
||
|
|
|
||
|
|
const script = document.createElement("script");
|
||
|
|
if (import.meta.env.MODE !== "debug") {
|
||
|
|
script.src = "./index.js";
|
||
|
|
} else {
|
||
|
|
script.src = "./debug/debug.js";
|
||
|
|
}
|
||
|
|
script.type = "module";
|
||
|
|
document.head.appendChild(script);
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="App">
|
||
|
|
<div class="AlertContainer" id="alert-container"></div>
|
||
|
|
<div class="Container" id="container">
|
||
|
|
<div class="RoomList Hidden" id="left-container">
|
||
|
|
<div class="Header">
|
||
|
|
<h1 class="Title">E/PLACE</h1>
|
||
|
|
<button class="CloseButton" id="close-left">
|
||
|
|
<i class="fa-solid fa-backward"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="ListContainer">
|
||
|
|
<div class="ListSearchBar">
|
||
|
|
<div class="InputContainer">
|
||
|
|
<input
|
||
|
|
aria-placeholder="Search a room..."
|
||
|
|
placeholder="Search a room..."
|
||
|
|
class="Input"
|
||
|
|
id="search-input"
|
||
|
|
/>
|
||
|
|
<div class="Divider"></div>
|
||
|
|
<button class="RoomButton" id="create-room">
|
||
|
|
<i class="fa-solid fa-square-plus"></i>
|
||
|
|
</button>
|
||
|
|
<button class="RoomButton" id="refresh-rooms">
|
||
|
|
<i class="fa-solid fa-rotate"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="FilterContainer">
|
||
|
|
<span class="FilterText">Filters:</span>
|
||
|
|
<div class="FilterHeader">
|
||
|
|
<button class="Filter" id="filter-name">
|
||
|
|
<span>Name</span>
|
||
|
|
<i class="fa-solid fa-sort-down"></i>
|
||
|
|
</button>
|
||
|
|
<button class="Filter" id="filter-owner">
|
||
|
|
<span>Owned by you</span>
|
||
|
|
<i class="fa-solid fa-plus"></i>
|
||
|
|
</button>
|
||
|
|
<button class="Filter" id="filter-public">
|
||
|
|
<span>Public</span>
|
||
|
|
<i class="fa-solid fa-minus"></i>
|
||
|
|
</button>
|
||
|
|
<button class="Filter" id="filter-private">
|
||
|
|
<span>Private</span>
|
||
|
|
<i class="fa-solid fa-minus"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="RoomsContainer" id="rooms-container"></div>
|
||
|
|
</div>
|
||
|
|
<div class="StudentProfile">
|
||
|
|
<img src="" class="Avatar" id="profile-info-avatar" />
|
||
|
|
<div class="TextContainer">
|
||
|
|
<span class="Login" id="profile-info-login"></span>
|
||
|
|
<span class="Quote" id="profile-info-quote"></span>
|
||
|
|
</div>
|
||
|
|
<button class="ModifyProfileButton" id="profile-update">
|
||
|
|
<i class="fa-solid fa-pencil"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="RoomCanvas">
|
||
|
|
<div class="Header">
|
||
|
|
<div class="Header-left">
|
||
|
|
<button class="HeaderButton" id="MenuButton">
|
||
|
|
Menu
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="Header-center">
|
||
|
|
<div class="TextContainer">
|
||
|
|
<h2 class="Title" id="room-name">
|
||
|
|
{{room_name}}
|
||
|
|
</h2>
|
||
|
|
<span class="Description" id="room-description"
|
||
|
|
>{{room_description}}</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="HeaderDivider"></div>
|
||
|
|
<div class="ButtonContainer">
|
||
|
|
<button class="RoomButton" id="edit-room">
|
||
|
|
<i class="fa-solid fa-pencil"></i>
|
||
|
|
</button>
|
||
|
|
<button class="RoomButton" id="delete-room">
|
||
|
|
<i class="fa-solid fa-trash-can"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="Header-right">
|
||
|
|
<button class="HeaderButton" id="ChatButton">
|
||
|
|
Chat
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="GuildLeaderboard" id="guild-leaderboard">
|
||
|
|
<div class="LeaderboardHeader">
|
||
|
|
<i class="fa-solid fa-trophy"></i>
|
||
|
|
<span class="LeaderboardTitle">GUILDS</span>
|
||
|
|
</div>
|
||
|
|
<ol class="LeaderboardList" id="leaderboard-list"></ol>
|
||
|
|
</div>
|
||
|
|
<div class="CanvasContainer" id="canvas-container">
|
||
|
|
<canvas class="Canvas" id="canvas"></canvas>
|
||
|
|
<img
|
||
|
|
class="Selector"
|
||
|
|
id="selector"
|
||
|
|
src="/selector.svg"
|
||
|
|
/>
|
||
|
|
<div class="Tooltip" id="tooltip">
|
||
|
|
<div class="Header">
|
||
|
|
<div class="PlacedByInfo">
|
||
|
|
<img
|
||
|
|
src="{{student_avatar}}"
|
||
|
|
class="Avatar"
|
||
|
|
id="tooltip-info-avatar"
|
||
|
|
/>
|
||
|
|
<div class="Profile">
|
||
|
|
<span
|
||
|
|
class="Login"
|
||
|
|
id="tooltip-info-login"
|
||
|
|
>{{student_login}}</span
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
class="Guild"
|
||
|
|
id="tooltip-info-guild"
|
||
|
|
>{{student_guild}}</span
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
class="Quote"
|
||
|
|
id="tooltip-info-quote"
|
||
|
|
>{{student_quote}}</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="TextContainer">
|
||
|
|
<span id="tooltip-date"
|
||
|
|
>{{date_placed}}</span
|
||
|
|
>
|
||
|
|
<span id="tooltip-time"
|
||
|
|
>{{time_placed}}</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="ButtonContainer">
|
||
|
|
<button class="ColorPicker" id="color-picker">
|
||
|
|
<i class="fas fa-eye-dropper"></i>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
class="PlaceButton"
|
||
|
|
id="color-place-button"
|
||
|
|
>
|
||
|
|
PLACE
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="PositionTooltip" id="position-tooltip">
|
||
|
|
<span>X=0</span>
|
||
|
|
<span>Y=0</span>
|
||
|
|
</div>
|
||
|
|
<div class="ColorWheelContainer" id="color-wheel-container">
|
||
|
|
<div class="ColorWheel" id="color-wheel"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="RoomChat" id="right-container">
|
||
|
|
<div class="ChatContainer">
|
||
|
|
<div class="Header">
|
||
|
|
<button class="CloseButton" id="close-right">
|
||
|
|
<i class="fa-solid fa-forward"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="ChatMessageContainer"
|
||
|
|
id="chat-message-container"
|
||
|
|
></div>
|
||
|
|
<form
|
||
|
|
class="InputContainer"
|
||
|
|
id="chat-input-form"
|
||
|
|
autocomplete="off"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
aria-placeholder="Type your message here..."
|
||
|
|
placeholder="Type your message here..."
|
||
|
|
class="Input"
|
||
|
|
id="message-content"
|
||
|
|
name="message-content"
|
||
|
|
autocomplete="off"
|
||
|
|
/>
|
||
|
|
<div class="ChatTimeout">
|
||
|
|
<i class="fa-solid fa-stopwatch"></i>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|