You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

71 lines
2.4 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html class="gr__"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>steam engine</title>
<script type="text/javascript" src="origin_debate.js"></script>
<script src="_steam_engine__files/jquery-1.js"></script>
<script src="_steam_engine__files/jquery-ui.js"></script>
<style type="text/css">
body{
background-color: black;
color: white;
}
main{background-image: url("https://i.ytimg.com/vi/d96Knr0DAmU/maxresdefault.jpg") /*, url("https://cdn.pixabay.com/photo/2016/04/01/22/41/perspective-1301762_640.png")*/;
position: relative;
width: 3000px;
height: 2000px;
margin-top: -500px;
border: 2px solid green;
cursor: all-scroll;
}
pre{
border-radius: 25px;
position: absolute;
top: 500px;
left: 500px;
padding: 10px;
border: 2px solid #fff;
}
</style>
</head>
<body data-gr-c-s-loaded="true" style="cursor: auto;">
<main class="movable draggable ui-draggable ui-draggable-handle" style="left: 440px; top: 703px;">
<div id="steam_engine" class="draggable draggable ui-draggable ui-draggable-handle">
<pre style="left: 599px; top: 784px; font-size: 50px;">STEAM ENGINE</pre>
<pre style="left: 451.533px; top: 756.533px;">James Watt</pre>
<pre style="left: 523.867px; top: 711.867px;">17631775</pre>
<pre style="left: 456.55px; top: 925.55px; font-size: 23px;">thermodynamics</pre>
<pre style="left: 318.967px; top: 980.967px;">Sadi Carnot</pre>
<pre style="left: 291.717px; top: 1024.72px;">1824</pre>
<pre style="left: 361.017px; top: 1026.02px;"><i>Reflections on the Motive Power of Fire</i></pre>
<pre style="left: 895.9px; top: 739.9px;">centrifugal governor</pre>
</div>
<div id="origin_debate"></div>
</main>
<script type="text/javascript">
$(document).ready(function(){
for (var i = 0; i < x.length; i++) {
$("#origin_debate").append('<pre class="movable">' + x[i] + '</pre>');
}
$( function() {
$( ".draggable" ).draggable();
});
var words = document.querySelectorAll(".movable");
for (var e = 0; e < words.length; e++){
var span = words[e];
span.classList.add("draggable");
}
});
</script>
</body></html>