improved layout of website
This commit is contained in:
parent
0956f6d0fe
commit
e374198fef
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 846 B After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 9.2 KiB |
|
|
@ -1,6 +1,14 @@
|
||||||
.main-canvas {
|
.cmd-canvas {
|
||||||
outline: 1px solid #dddddd;;
|
outline: 3px solid #dddddd;;
|
||||||
width: 500px;
|
width: 430px;
|
||||||
|
height: 120px;
|
||||||
|
margin: 50px auto 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.programmer-canvas {
|
||||||
|
outline: 3px solid #dddddd;;
|
||||||
|
width: 338px;
|
||||||
height: 220px;
|
height: 220px;
|
||||||
margin: 50px auto 0;
|
margin: 50px auto 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -20,86 +28,34 @@
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
top: 100px;
|
top: 100px;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
color: #ffffff;
|
color: #000000;
|
||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: move;
|
cursor: move;
|
||||||
}
|
}
|
||||||
|
|
||||||
.robotOrientation {
|
|
||||||
width: 75px;
|
|
||||||
height: 75px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.robotOrientation90 {
|
|
||||||
width: 75px;
|
|
||||||
height: 75px;
|
|
||||||
-webkit-transform: rotate(90deg);
|
|
||||||
-moz-transform: rotate(90deg);
|
|
||||||
-o-transform: rotate(90deg);
|
|
||||||
-ms-transform: rotate(90deg);
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.robotOrientation180 {
|
|
||||||
width: 75px;
|
|
||||||
height: 75px;
|
|
||||||
-webkit-transform: rotate(180deg);
|
|
||||||
-moz-transform: rotate(180deg);
|
|
||||||
-o-transform: rotate(180deg);
|
|
||||||
-ms-transform: rotate(180deg);
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.robotOrientation270 {
|
|
||||||
width: 75px;
|
|
||||||
height: 75px;
|
|
||||||
-webkit-transform: rotate(270deg);
|
|
||||||
-moz-transform: rotate(270deg);
|
|
||||||
-o-transform: rotate(270deg);
|
|
||||||
-ms-transform: rotate(270deg);
|
|
||||||
transform: rotate(270deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.rotate90 {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
-webkit-transform: rotate(90deg);
|
|
||||||
-moz-transform: rotate(90deg);
|
|
||||||
-o-transform: rotate(90deg);
|
|
||||||
-ms-transform: rotate(90deg);
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.rotate180 {
|
|
||||||
-webkit-transform: rotate(180deg);
|
|
||||||
-moz-transform: rotate(180deg);
|
|
||||||
-o-transform: rotate(180deg);
|
|
||||||
-ms-transform: rotate(180deg);
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.rotate270 {
|
|
||||||
-webkit-transform: rotate(270deg);
|
|
||||||
-moz-transform: rotate(270deg);
|
|
||||||
-o-transform: rotate(270deg);
|
|
||||||
-ms-transform: rotate(270deg);
|
|
||||||
transform: rotate(270deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-buffer { margin-top:20px; }
|
.top-buffer { margin-top:20px; }
|
||||||
|
|
||||||
|
.center {
|
||||||
|
margin: 20px;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
-ms-transform: translateX(-50%, -50%);
|
||||||
|
transform: translateX(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
.card0 { left: 0; top: 0; background-color: #E74C3C; position: absolute !important;
|
.cmd0 { left: 0; top: 0; background-color: #E74C3C; position: absolute !important;}
|
||||||
}
|
.cmd1 { left: 92px; top: 0; background-color: #8E44AD; position: absolute !important;}
|
||||||
.card1 { left: 100px; top: 0; background-color: #8E44AD; position: absolute !important;
|
.cmd2 { left: 184px; top: 0; background-color: #5DADE2; }
|
||||||
}
|
.cmd3 { left: 276px; top: 0; background-color: #1ABC9C; }
|
||||||
.card2 { left: 200px; top: 0; background-color: #5DADE2; }
|
.cmd4 { left: 368px; top: 0; background-color: #F1C40F; }
|
||||||
.card3 { left: 300px; top: 0; background-color: #1ABC9C; }
|
|
||||||
.card4 { left: 400px; top: 0; background-color: #F1C40F; }
|
.programmer_cmd0 { left: 0; top: 0; background-color: #E74C3C; position: absolute !important;}
|
||||||
.card5 { left: 50px; top: 120px; background-color: #F39C12; }
|
.programmer_cmd1 { left: 92px; top: 0; background-color: #8E44AD; position: absolute !important;}
|
||||||
.card6 { left: 150px; top: 120px; background-color: #34495E; }
|
.programmer_cmd2 { left: 184px; top: 0; background-color: #5DADE2; }
|
||||||
.card7 { left: 250px; top: 120px; background-color: #FF00FF; }
|
.programmer_cmd3 { left: 276px; top: 0; background-color: #1ABC9C; }
|
||||||
.card8 { left: 350px; top: 120px; background-color: #008080; }
|
.programmer_cmd4 { left: 38px; top: 120px; background-color: #F1C40F; }
|
||||||
|
.programmer_cmd5 { left: 138px; top: 120px; background-color: #F39C12; }
|
||||||
|
.programmer_cmd6 { right: 38px; top: 120px; background-color: #34495E; }
|
||||||
|
|
||||||
.card_hidden { background-color: #dddddd; }
|
.card_hidden { background-color: #dddddd; }
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
<title>Drag</title>
|
<title>imaginaerraum.de</title>
|
||||||
|
|
||||||
<script src="static/jquery-3.5.1.js"></script>
|
<script src="static/jquery-3.5.1.js"></script>
|
||||||
<script src="static/jquery-ui.min.js"></script>
|
<script src="static/jquery-ui.min.js"></script>
|
||||||
|
|
@ -20,9 +20,9 @@
|
||||||
<!-- current program -->
|
<!-- current program -->
|
||||||
<div class="row top-buffer">
|
<div class="row top-buffer">
|
||||||
Aktuelles Programm:
|
Aktuelles Programm:
|
||||||
<div class="main-canvas">
|
<div class="cmd-canvas">
|
||||||
{% for cmd in current_program %}
|
{% for cmd in current_program %}
|
||||||
<div class="box card{{ loop.index0 }}" id="prg_cmd{{ loop.index0 }}" data-action="{{ cmd.action }}" data-color="{{ cmd.color }}" data-img="prg_cmd_img{{ loop.index0 }}"
|
<div class="box cmd{{ loop.index0 }}" id="prg_cmd{{ loop.index0 }}" data-action="{{ cmd.action }}" data-color="{{ cmd.color }}" data-img="prg_cmd_img{{ loop.index0 }}"
|
||||||
style="background-color: rgba({{ cmd.color[0] }},{{ cmd.color[1] }},{{ cmd.color[2] }},0.85)">
|
style="background-color: rgba({{ cmd.color[0] }},{{ cmd.color[1] }},{{ cmd.color[2] }},0.85)">
|
||||||
<img id="prg_cmd_img{{ loop.index0 }}" src="static/{{ cmd.action }}.png">
|
<img id="prg_cmd_img{{ loop.index0 }}" src="static/{{ cmd.action }}.png">
|
||||||
{{ loop.index0 }}
|
{{ loop.index0 }}
|
||||||
|
|
@ -34,9 +34,10 @@
|
||||||
<!-- possible commands -->
|
<!-- possible commands -->
|
||||||
<div class="row top-buffer">
|
<div class="row top-buffer">
|
||||||
Mögliche Befehle:
|
Mögliche Befehle:
|
||||||
<div class="main-canvas">
|
<div class="programmer-canvas">
|
||||||
{% for cmd in valid_commands %}
|
{% for cmd in valid_commands %}
|
||||||
<div class="box card{{ loop.index0 }}" id="valid_cmd{{ loop.index0 }}" data-action="{{ cmd.action }}" data-color="{{ cmd.color }}" data-img="valid_cmd_img{{ loop.index0 }}"
|
<div class="box programmer_cmd{{ loop.index0 }}" id="valid_cmd{{ loop.index0 }}" data-action="{{ cmd.action }}"
|
||||||
|
data-color="{{ cmd.color }}" data-img="valid_cmd_img{{ loop.index0 }}"
|
||||||
style="background-color: rgba({{ cmd.color[0] }},{{ cmd.color[1] }},{{ cmd.color[2] }},0.85)">
|
style="background-color: rgba({{ cmd.color[0] }},{{ cmd.color[1] }},{{ cmd.color[2] }},0.85)">
|
||||||
<img id="valid_cmd_img{{ loop.index0 }}" src="static/{{ cmd.action }}.png">
|
<img id="valid_cmd_img{{ loop.index0 }}" src="static/{{ cmd.action }}.png">
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -44,75 +45,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--
|
<div class="row top-buffer center">
|
||||||
<div class="row top-buffer">
|
|
||||||
{% if robot_info is none %}
|
|
||||||
<div class="col-sm">
|
|
||||||
<label for="inputRobotX">X Position:</label>
|
|
||||||
<input class="form-control" type="number" id="inputRobotX" name="robot_x" min="1" max="13" value="1">
|
|
||||||
<br>
|
|
||||||
<label for="inputRobotY">Y Position:</label>
|
|
||||||
<input class="form-control" type="number" id="inputRobotY" name="robot_y" min="1" max="7" value="1">
|
|
||||||
</div>
|
|
||||||
<div class="col-sm">
|
|
||||||
<label for="orientation">Blickrichtung:</label><br>
|
|
||||||
<img id="orientation" class="robotOrientation" src="/static/orientation.png" alt="0">
|
|
||||||
<input hidden id="inputRobotOrientation" value=">" readonly>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm">
|
|
||||||
<label for="inputRobotID">Roboter ID:</label>
|
|
||||||
<select name="robotID" class="form-control" id="inputRobotID">
|
|
||||||
<option value="11">11</option>
|
|
||||||
<option value="12">12</option>
|
|
||||||
<option value="13">13</option>
|
|
||||||
<option value="14">14</option>
|
|
||||||
</select>
|
|
||||||
<label for="outputRobotFlags">Flaggen:</label><br>
|
|
||||||
{% for f in ['a', 'b', 'c', 'd'] %}
|
|
||||||
<input type="checkbox" class="form-check-input" id="flag_{{ f }}" onclick="return false;">
|
|
||||||
<label class="form-check-label" for="flag_{{ f }}">{{ f }}</label><br>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% else %}
|
|
||||||
<div class="col-sm">
|
|
||||||
<label for="outputRobotX">X Position:</label>
|
|
||||||
<input class="form-control" type="number" id="outputRobotX" name="robot_x" min="1" max="12" value="{{ robot_info[0] }}" readonly>
|
|
||||||
<br>
|
|
||||||
<label for="outputRobotY">Y Position:</label>
|
|
||||||
<input class="form-control" type="number" id="outputRobotY" name="robot_y" min="1" max="6" value="{{ robot_info[1] }}" readonly>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm">
|
|
||||||
<label for="outputOrientation">Blickrichtung:</label><br>
|
|
||||||
{% if robot_info[2] == '>' %}
|
|
||||||
<img id="outputOrientation" class="robotOrientation" src="/static/orientation.png" alt="0">
|
|
||||||
{% elif robot_info[2] == 'v' %}
|
|
||||||
<img id="outputOrientation" class="robotOrientation90" src="/static/orientation.png" alt="0">
|
|
||||||
{% elif robot_info[2] == '<' %}
|
|
||||||
<img id="outputOrientation" class="robotOrientation180" src="/static/orientation.png" alt="0">
|
|
||||||
{% elif robot_info[2] == '^' %}
|
|
||||||
<img id="outputOrientation" class="robotOrientation270" src="/static/orientation.png" alt="0">
|
|
||||||
{% endif %}
|
|
||||||
<br>
|
|
||||||
<label for="outputRobotDmg">Schaden:</label><br>
|
|
||||||
<input class="form-control" name="robotDmg" id="outputRobotDmg" value="{{ robot_info[4] }}" readonly>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm">
|
|
||||||
<label for="outputRobotID">Roboter ID:</label>
|
|
||||||
<input class="form-control" name="robotID" id="outputRobotID" value="{{ robot_info[3] }}" readonly>
|
|
||||||
<label for="outputRobotFlags">Flaggen:</label><br>
|
|
||||||
{% for f in ['a', 'b', 'c', 'd'] %}
|
|
||||||
{% if f in robot_info[5] %}
|
|
||||||
<input type="checkbox" class="form-check-input" id="flag_{{ f }}" checked onclick="return false;">
|
|
||||||
{% else %}
|
|
||||||
<input type="checkbox" class="form-check-input" id="flag_{{ f }}" onclick="return false;">
|
|
||||||
{% endif %}
|
|
||||||
<label class="form-check-label" for="flag_{{ f }}">{{ f }}</label><br>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
-->
|
|
||||||
<div class="row top-buffer">
|
|
||||||
<div class="col-sm">
|
<div class="col-sm">
|
||||||
<input class="btn btn-primary" id="btnSubmit" type="submit" value="Befehle abschicken" />
|
<input class="btn btn-primary" id="btnSubmit" type="submit" value="Befehle abschicken" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -120,10 +53,6 @@
|
||||||
<div id = "alert_placeholder"></div>
|
<div id = "alert_placeholder"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row top-buffer">
|
|
||||||
Viel Spaß beim Spielen!
|
|
||||||
</div>
|
|
||||||
</div><!-- container -->
|
</div><!-- container -->
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -133,40 +62,12 @@
|
||||||
var please_wait = $(".notification").hide();
|
var please_wait = $(".notification").hide();
|
||||||
|
|
||||||
var box = $(".box");
|
var box = $(".box");
|
||||||
var mainCanvas = $(".main-canvas");
|
|
||||||
|
|
||||||
var orientation_icon = $("#orientation");
|
|
||||||
var orientation_input = $("#inputRobotOrientation");
|
|
||||||
|
|
||||||
bootstrap_alert = function() {};
|
bootstrap_alert = function() {};
|
||||||
bootstrap_alert.warning = function(message) {
|
bootstrap_alert.warning = function(message) {
|
||||||
$('#alert_placeholder').html('<div class="alert alert-primary"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>')
|
$('#alert_placeholder').html('<div class="alert alert-primary"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>')
|
||||||
};
|
};
|
||||||
|
|
||||||
orientation_icon.click(function () {
|
|
||||||
if (this.alt === "0") {
|
|
||||||
this.alt = "90";
|
|
||||||
$("#inputRobotOrientation").val("v");
|
|
||||||
//document.getElementById("inputRobotOrientation").value = "v";
|
|
||||||
}
|
|
||||||
else if (this.alt === "90") {
|
|
||||||
this.alt = "180";
|
|
||||||
$("#inputRobotOrientation").val("<");
|
|
||||||
//document.getElementById("inputRobotOrientation").value = "<";
|
|
||||||
}
|
|
||||||
else if (this.alt === "180") {
|
|
||||||
this.alt = "270";
|
|
||||||
$("#inputRobotOrientation").val("^");
|
|
||||||
//document.getElementById("inputRobotOrientation").value = "^";
|
|
||||||
}
|
|
||||||
else if (this.alt === "270") {
|
|
||||||
this.alt = "0";
|
|
||||||
$("#inputRobotOrientation").val(">");
|
|
||||||
//document.getElementById("inputRobotOrientation").value = ">";
|
|
||||||
}
|
|
||||||
$(this).css({'transform' : 'rotate('+ this.alt +'deg)'});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
$("#btnSubmit").click(function () {
|
$("#btnSubmit").click(function () {
|
||||||
//alert("button");
|
//alert("button");
|
||||||
|
|
@ -198,58 +99,6 @@
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
/*
|
|
||||||
box.draggable({
|
|
||||||
containment: mainCanvas,
|
|
||||||
helper: "clone",
|
|
||||||
|
|
||||||
start: function () {
|
|
||||||
$(this).css({
|
|
||||||
opacity: 0
|
|
||||||
});
|
|
||||||
|
|
||||||
$(".box").css("z-index", "0");
|
|
||||||
},
|
|
||||||
|
|
||||||
stop: function () {
|
|
||||||
$(this).css({
|
|
||||||
opacity: 1
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
box.droppable({
|
|
||||||
accept: box,
|
|
||||||
|
|
||||||
drop: function (event, ui) {
|
|
||||||
var draggable = ui.draggable;
|
|
||||||
var droppable = $(this);
|
|
||||||
var dragPos = draggable.position();
|
|
||||||
var dropPos = droppable.position();
|
|
||||||
|
|
||||||
var cmds = [ui.draggable.attr('name').toString(), $(this).attr('name')]
|
|
||||||
|
|
||||||
//console.log(dragPos);
|
|
||||||
//console.log(dropPos);
|
|
||||||
|
|
||||||
//console.log($(cmds));
|
|
||||||
// notify server that cards have been swapped
|
|
||||||
$.post(url='/', {drag: ui.draggable.attr('name'), drop: $(this).attr('name')});
|
|
||||||
|
|
||||||
draggable.css({
|
|
||||||
left: dropPos.left + "px",
|
|
||||||
top: dropPos.top + "px",
|
|
||||||
"z-index": 20
|
|
||||||
});
|
|
||||||
|
|
||||||
droppable.css("z-index", 10).animate({
|
|
||||||
left: dragPos.left,
|
|
||||||
top: dragPos.top
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
*/
|
|
||||||
|
|
||||||
var edited_command = null;
|
var edited_command = null;
|
||||||
|
|
||||||
box.click(function () {
|
box.click(function () {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user