datbogie.github.io/image-view.html at main · DatBogie/datbogie.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Image View - Dat Bogie</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="image-view.css">
</head>
<body>
    <div class="center">
        <img id="image" draggable="false">
    </div>
    <div class="bottom">
        <div id="controls">
            <button id="z+" title="Zoom In">&plus;</button>
            <button id="z%" title="Reset Zoom">&percnt;</button>
            <button id="z-" title="Zoom Out">&minus;</button>
            <span class="hidden spacer"></span>
            <span class="hidden inline-container"><input id="url" type="text" placeholder="Paste Image URL Here..."><button id="load">Load Image</button></span>
        </div>
    </div>
</body>
<script src="image-view.js"></script>
</html>