Spaces:
Paused
Paused
Upload index.html
Browse files- templates/index.html +48 -20
templates/index.html
CHANGED
|
@@ -5,35 +5,63 @@
|
|
| 5 |
<head>
|
| 6 |
<meta charset="UTF-8">
|
| 7 |
<title>Three.js Cube</title>
|
|
|
|
| 8 |
<style>
|
| 9 |
body { margin: 0; }
|
| 10 |
/*canvas { width: 100%; height: 100% }*/
|
| 11 |
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
|
| 23 |
-
|
| 24 |
-
|
| 25 |
-
|
| 26 |
-
|
| 27 |
-
|
| 28 |
-
}
|
|
|
|
|
|
|
|
|
|
| 29 |
</style>
|
| 30 |
</head>
|
| 31 |
<body>
|
| 32 |
-
<button id="buttonOverlay" class="buttonOverlay">Generate Motion</button>
|
| 33 |
-
<button id="buttonOverlaySecond" class="buttonOverlay">Toggle Draw</button>
|
| 34 |
|
| 35 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 36 |
|
|
|
|
| 37 |
|
| 38 |
|
| 39 |
|
|
|
|
| 5 |
<head>
|
| 6 |
<meta charset="UTF-8">
|
| 7 |
<title>Three.js Cube</title>
|
| 8 |
+
<link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
|
| 9 |
<style>
|
| 10 |
body { margin: 0; }
|
| 11 |
/*canvas { width: 100%; height: 100% }*/
|
| 12 |
|
| 13 |
+
|
| 14 |
+
|
| 15 |
+
|
| 16 |
+
/*.buttonOverlay {*/
|
| 17 |
+
/* position: absolute;*/
|
| 18 |
+
/* top: 3%; !* Distance from the top of the container *!*/
|
| 19 |
+
/* left: 60%; !* Distance from the left of the container *!*/
|
| 20 |
+
/* z-index: 100; !* Ensures it's above the canvas *!*/
|
| 21 |
+
/* !* Additional styles *!*/
|
| 22 |
+
/* padding: 10px 20px; !* Example padding, adjust as needed *!*/
|
| 23 |
+
/* border: none; !* Example style, adjust as needed *!*/
|
| 24 |
+
/* background-color: #007bff; !* Example background color, adjust as needed *!*/
|
| 25 |
+
/* color: white; !* Text color *!*/
|
| 26 |
+
/* font-size: 32px; !* Text size *!*/
|
| 27 |
+
/* cursor: pointer; !* Mouse cursor on hover *!*/
|
| 28 |
+
/* border-radius: 5px; !* Rounded corners *!*/
|
| 29 |
+
/*}*/
|
| 30 |
+
/*#buttonOverlaySecond {*/
|
| 31 |
+
/* left: 30%;*/
|
| 32 |
+
/*}*/
|
| 33 |
</style>
|
| 34 |
</head>
|
| 35 |
<body>
|
|
|
|
|
|
|
| 36 |
|
| 37 |
+
<!-- <canvas id="canvas" class="webgl" style="height: 100%; width: 100%;"></canvas>-->
|
| 38 |
+
<div class="flex-container">
|
| 39 |
+
<div class="left-column">
|
| 40 |
+
<img src="/static/tutorial.gif" alt="this slowpoke moves" width="250" />
|
| 41 |
+
</div>
|
| 42 |
+
<div class="right-column">
|
| 43 |
+
<div class="container">
|
| 44 |
+
<button id="toggleDraw" class="button-74" role="button">Draw Trajectory</button>
|
| 45 |
+
<button id="generateMotion" class="button-74" role="button">Generate Motion</button>
|
| 46 |
+
<button id="reset" class="button-74" role="button">Reset</button>
|
| 47 |
+
|
| 48 |
+
</div>
|
| 49 |
+
|
| 50 |
+
<div id="canvas-container"></div>
|
| 51 |
+
|
| 52 |
+
</div>
|
| 53 |
+
|
| 54 |
+
<!-- <button id="buttonOverlay" class="buttonOverlay">Generate Motion</button>-->
|
| 55 |
+
<!-- <button id="buttonOverlaySecond" class="buttonOverlay">Toggle Draw</button>-->
|
| 56 |
+
|
| 57 |
+
<!-- <script src="/static/index.js" type="module" ></script>-->
|
| 58 |
+
</div>
|
| 59 |
+
</div>
|
| 60 |
+
|
| 61 |
+
|
| 62 |
+
|
| 63 |
|
| 64 |
+
<script src="/static/index.js" type="module"></script>
|
| 65 |
|
| 66 |
|
| 67 |
|