106 lines
6.2 KiB
HTML
106 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>wallpaper lol</title>
|
|
|
|
<link rel="stylesheet" href="normalize.css">
|
|
<link rel="stylesheet" href="mini-default.min.css">
|
|
|
|
<style>
|
|
body {
|
|
background-color: #363636;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%238d8d8d' fill-opacity='0.18'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
|
}
|
|
|
|
#img_upload {
|
|
flex-basis: auto;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div class="row">
|
|
<main class="col-lg-2">
|
|
<div class="card">
|
|
<h4 class="section double-padded">Settings</h4>
|
|
<form>
|
|
<div class="input-group vertical">
|
|
<label for="global_width_cm">Global width (cm):</label>
|
|
<input type="number" id="global_width_cm" value="300" step="0.1"
|
|
autocomplete="off">
|
|
<label for="global_height_cm">Global height (cm):</label>
|
|
<input type="number" id="global_height_cm" value="200" step="0.1"
|
|
autocomplete="off">
|
|
<label for="img_upload">Image File:</label>
|
|
<input id="img_upload" type="file" accept=".jpg, .jpeg, .png">
|
|
<label for="img_width_cm">Image width (cm):</label>
|
|
<input type="number" id="img_width_cm" step="0.1" autocomplete="off">
|
|
<label for="img_height_cm">Image height (cm):</label>
|
|
<input type="number" id="img_height_cm" step="0.1" autocomplete="off">
|
|
<label for="img_offset_top">Image top offset (cm):</label>
|
|
<input type="number" id="img_offset_top" step="0.1" autocomplete="off">
|
|
<label for="img_offset_left">Image left offset (cm):</label>
|
|
<input type="number" id="img_offset_left" step="0.1" autocomplete="off">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
<main class="col-lg-8">
|
|
<div class="card fluid">
|
|
<h2 class="section double-padded">Multimonitor Wallpaper Memes</h2>
|
|
<div class="section">
|
|
<div style="position: relative">
|
|
<canvas id="canvas" style="width: 100%" width="3000" height="2000"></canvas>
|
|
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8)"></div>
|
|
<div id="monitor_images">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<main class="col-lg-2" style="height: 100vh">
|
|
<template id="monitor_settings_template">
|
|
<div class="card fluid">
|
|
<h2 class="section">Monitor</h2>
|
|
<form>
|
|
<div class="input-group vertical">
|
|
<label>
|
|
Aspect Ratio:
|
|
<input type="search" name="aspect_ratio" autocomplete="off" value="16:9"
|
|
list="ratio_suggestions">
|
|
</label>
|
|
<datalist id="ratio_suggestions">
|
|
<option value="16:9"></option>
|
|
<option value="16:10"></option>
|
|
<option value="2560:1080"></option>
|
|
<option value="4:3"></option>
|
|
<option value="5:4"></option>
|
|
</datalist>
|
|
<label>
|
|
Screen diagonal (cm):
|
|
<input type="number" name="diagonal_cm" step="0.1" value="61" autocomplete="off">
|
|
</label>
|
|
<label>
|
|
Offset top (cm):
|
|
<input type="number" name="offset_top_cm" step="0.1" value="0" autocomplete="off">
|
|
</label>
|
|
<label>
|
|
Offset left (cm):
|
|
<input type="number" name="offset_left_cm" step="0.1" value="0" autocomplete="off">
|
|
</label>
|
|
<button type="button" name="get_image_button">Get Image</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
<div id="monitors_column" style="max-height: 90%; overflow: auto"></div>
|
|
<div style="text-align: center">
|
|
<button id="add_monitor_button">Add Monitor</button>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="main.js"></script>
|
|
</body>
|
|
</html> |