forked from Simnation/Main
226 lines
9.3 KiB
HTML
226 lines
9.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<title>Blips Creator</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width">
|
||
|
|
|
||
|
|
<!-- Script CSS -->
|
||
|
|
<link href="index.css" rel="stylesheet" type="text/css" />
|
||
|
|
|
||
|
|
<!-- Bootstrap CSS -->
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||
|
|
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body style="background-color: transparent !important;">
|
||
|
|
<div id="notification" class="toast position-absolute mt-5 start-50 translate-middle" role="alert"
|
||
|
|
aria-live="assertive" aria-atomic="true">
|
||
|
|
<div class="toast-header">
|
||
|
|
<strong class="me-auto">Blips Creator</strong>
|
||
|
|
</div>
|
||
|
|
<div id="notification-message" class="toast-body">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="map-utilities" class="big-container container">
|
||
|
|
<div class="row mt-2">
|
||
|
|
<div class="col">
|
||
|
|
<button id="create-blip-btn" type="button" class="btn btn-success">Create Blip</button>
|
||
|
|
<button id="create-global-blip-btn" type="button" class="btn btn-warning">Create Global Blip (admin)</button>
|
||
|
|
<button id="refresh-blips-btn" type="button" class="btn btn-info">Refresh</button>
|
||
|
|
<button id="map-utilities-close-btn" type="button" class="btn-close btn-close-white float-end"
|
||
|
|
aria-label="Close"></button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="blips-container" class="container my-2"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="edit-blip" class="little-container container">
|
||
|
|
<button id="edit-blip-close-btn" type="button" class="btn-close btn-close-white float-end mt-2 mb-4"
|
||
|
|
aria-label="Close"></button>
|
||
|
|
|
||
|
|
<select id="edit-blip-type" class="form-select mt-3">
|
||
|
|
<option value="coords" selected>Coordinate</option>
|
||
|
|
<option value="area">Area</option>
|
||
|
|
<option value="radius">Radius</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<div id="edit-blip-sprite-name-container" class="row mt-4">
|
||
|
|
<figure id="edit-blip-sprite-container" class="figure col-3">
|
||
|
|
<img id="edit-blip-sprite" class="blip-sprite img-fluid mt-3 ms-3" alt="Current Blip">
|
||
|
|
<figcaption class="figure-caption">Blip Image</figcaption>
|
||
|
|
</figure>
|
||
|
|
|
||
|
|
<div class="col-9">
|
||
|
|
<div class="input-group mt-3">
|
||
|
|
<span class="input-group-text" id="edit-blip-name-describe">Blip Name</span>
|
||
|
|
<input id="edit-blip-name" type="text" class="form-control" placeholder="Blip Name"
|
||
|
|
aria-label="Blip Name" aria-describedby="edit-blip-name-describe">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="edit-blip-scale-container">
|
||
|
|
<label for="edit-blip-scale" class="form-label mt-3 fs-2">Blip Scale</label>
|
||
|
|
<input id="edit-blip-scale" type="range" class="form-range" min="0.5" max="2.0" step="0.01">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="edit-blip-height-width-container">
|
||
|
|
<label for="edit-blip-width" class="form-label mt-3 fs-2">Blip width</label>
|
||
|
|
<input id="edit-blip-width" type="range" class="form-range" min="1.0" max="10000.0" step="1.0">
|
||
|
|
|
||
|
|
<label for="edit-blip-height" class="form-label mt-3 fs-2">Blip height</label>
|
||
|
|
<input id="edit-blip-height" type="range" class="form-range" min="1.0" max="10000.0" step="1.0">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<label for="edit-blip-alpha" class="form-label mt-3 fs-2">Blip Opacity</label>
|
||
|
|
<input id="edit-blip-alpha" type="range" class="form-range" min="0" max="255" step="1">
|
||
|
|
|
||
|
|
<p class="fs-2">Blip Color</p>
|
||
|
|
<div id="blip-colors" class="container my-2"></div>
|
||
|
|
|
||
|
|
<div id="edit-blip-tick-container" class="form-check form-switch mt-3 fs-4">
|
||
|
|
<input class="form-check-input" type="checkbox" id="edit-blip-tick">
|
||
|
|
<label class="form-check-label" for="edit-blip-tick">Tick on Blip</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="edit-blip-outline-container" class="form-check form-switch mt-3 fs-4">
|
||
|
|
<input class="form-check-input" type="checkbox" id="edit-blip-outline">
|
||
|
|
<label class="form-check-label" for="edit-blip-outline">Outline</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-check mt-3 fs-5">
|
||
|
|
<input class="form-check-input" type="radio" name="edit-blip-display" data-display=3
|
||
|
|
id="edit-blip-display-mainmap">
|
||
|
|
<label class="form-check-label" for="edit-blip-display-mainmap">
|
||
|
|
Main map only
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="form-check fs-5">
|
||
|
|
<input class="form-check-input" type="radio" name="edit-blip-display" data-display=5
|
||
|
|
id="edit-blip-display-minimap">
|
||
|
|
<label class="form-check-label" for="edit-blip-display-minimap">
|
||
|
|
Minimap only
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="form-check fs-5">
|
||
|
|
<input class="form-check-input" type="radio" name="edit-blip-display" data-display=2
|
||
|
|
id="edit-blip-display-both">
|
||
|
|
<label class="form-check-label" for="edit-blip-display-both">
|
||
|
|
Main map + Minimap
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button id="edit-blip-share-btn" type="button" class="btn btn-info mt-3">Share blip</button>
|
||
|
|
<button id="edit-blip-delete-btn" type="button" class="btn btn-danger mt-3 mb-3 col-12">Delete Blip</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="delete-blip-modal" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
|
||
|
|
<div class="modal-dialog">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title">Delete blip</h5>
|
||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<p>Are you sure to delete this blip?</p>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||
|
|
<button id="delete-blip-btn" type="button" class="btn btn-danger">Delete</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="create-blip-mode" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
|
||
|
|
<div class="modal-dialog modal-dialog-centered">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title">Blip creation mode</h5>
|
||
|
|
<button id="blip-mode-close-btn" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<p>How would you like to create the blip?</p>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button id="create-blip-from-coords-btn" class="btn btn-secondary">Create from coords</button>
|
||
|
|
<button id="create-blip-place-blip-btn" class="btn btn-success">Place blip</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="create-from-coords-modal" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
|
||
|
|
<div class="modal-dialog modal-dialog-centered">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title">Create from coordinates</h5>
|
||
|
|
<button id="from-coords-close-btn" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="input-group mb-3">
|
||
|
|
<span class="input-group-text" id="x-coord-label">x</span>
|
||
|
|
<input id="x-coord" type="text" class="form-control" aria-label="x" aria-describedby="x-coord-label">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input-group mb-3">
|
||
|
|
<span class="input-group-text" id="y-coord-label">y</span>
|
||
|
|
<input id="y-coord" type="text" class="form-control" aria-label="y" aria-describedby="y-coord-label">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input-group mb-3">
|
||
|
|
<span class="input-group-text" id="z-coord-label">z</span>
|
||
|
|
<input id="z-coord" type="text" class="form-control" aria-label="z" aria-describedby="z-coord-label">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button id="current-coords-btn" type="button" class="btn btn-secondary my-2">Current coords</button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button id="confirm-from-coords" class="btn btn-success">Create</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="share-choose-id" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
|
||
|
|
<div class="modal-dialog modal-dialog-centered">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title">Share blip</h5>
|
||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="input-group mb-3">
|
||
|
|
<span class="input-group-text" id="player-id-label">Player ID</span>
|
||
|
|
<input id="player-id" type="text" class="form-control" aria-label="Player ID" aria-describedby="player-id-label">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
|
||
|
|
<button id="share-btn" class="btn btn-success">Share</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="blip-sprites" class="container mt-2 border border-2 rounded" style="resize: vertical;"></div>
|
||
|
|
|
||
|
|
<!-- jQuery, then bootstrap, then popper -->
|
||
|
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||
|
|
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"
|
||
|
|
integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc"
|
||
|
|
crossorigin="anonymous"></script>
|
||
|
|
|
||
|
|
<script src="index.js"></script>
|
||
|
|
<script src="../utils/dialogs/dialogs.js"></script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|