[TASK] Move files into static folder (prepare for nodejs)
This commit is contained in:
@@ -0,0 +1,131 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Dashboard Test</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="robots" content="noindex,nofollow" />
|
||||
<link rel="stylesheet" type="text/css" href="style/main.css" />
|
||||
<!-- jQuery -->
|
||||
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
|
||||
<!-- jQuery ui smoothness theme -->
|
||||
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom/css/smoothness/jquery-ui-1.10.3.custom.min.css" />
|
||||
<!-- jQuery ui -->
|
||||
<script type="text/javascript" src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="wallpaper"></div>
|
||||
<div id="wrap-all">
|
||||
<div id="wrap-nonfooter-content">
|
||||
<div id="nonfooter-content-container">
|
||||
<div id="headerbar">
|
||||
<ol class="vertical-list">
|
||||
<li><span>Willkommen zum Dashboard-Test!</span></li>
|
||||
<li><span class="navi-active">Spruch des Tages</span></li>
|
||||
<li><span>Logge dich ein!</span></li>
|
||||
<li><span>Oder mach etwas!</span></li>
|
||||
</ol>
|
||||
</div>
|
||||
<div style="padding: 1em; background-color: hsla(0, 0%, 100%, 0.25); border-radius: 5px; color: hsl(0, 0%, 95%); margin-left: 3em; margin-right: 3em; margin-top: 2em; margin-bottom: 1em;">
|
||||
<div style="">
|
||||
<h1>Some random stuff maybe a search bar or some fancy info box?</h1>
|
||||
<p>I do not know what to put here, but it ought to be fun.</p>
|
||||
<p>Well, whatever.</p>
|
||||
</div>
|
||||
<div style="float: right; margin-top: -3.5em;">
|
||||
<input type="text" style="border: 2px solid hsla(0, 0%, 45%, 0.5); width: 25em; font-size: 16pt; border-radius: 5px; padding: 5px; font-family: Sintony;" value="Search ..." />
|
||||
</div>
|
||||
</div>
|
||||
<div style="clear: both;"></div>
|
||||
<div id="content-grid-container">
|
||||
<div class="content-column-bounding-box">
|
||||
<div id="content-column-1" class="content-column">
|
||||
|
||||
<div class="content-container-bounding-box">
|
||||
<div class="content-container-header">
|
||||
<h1>Content Box Header</h1>
|
||||
</div>
|
||||
<div class="content-container-body">
|
||||
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- content-column-1 -->
|
||||
</div><!-- content-column-bounding-box -->
|
||||
<div class="content-column-bounding-box">
|
||||
<div id="content-column-2" class="content-column">
|
||||
|
||||
<div class="content-container-bounding-box">
|
||||
<div class="content-container-header">
|
||||
<h1>Content Box Header</h1>
|
||||
</div>
|
||||
<div class="content-container-body">
|
||||
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-container-bounding-box">
|
||||
<div class="content-container-header">
|
||||
<h1>Content Box Header</h1>
|
||||
</div>
|
||||
<div class="content-container-body">
|
||||
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-container-bounding-box">
|
||||
<div class="content-container-header">
|
||||
<h1>Content Box Header</h1>
|
||||
</div>
|
||||
<div class="content-container-body">
|
||||
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- content-column-2 -->
|
||||
</div><!-- content-column-bounding-box -->
|
||||
<div class="content-column-bounding-box">
|
||||
<div id="content-column-3" class="content-column">
|
||||
|
||||
<div class="content-container-bounding-box">
|
||||
<div class="content-container-header">
|
||||
<h1>Content Box Header</h1>
|
||||
</div>
|
||||
<div class="content-container-body">
|
||||
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-container-bounding-box">
|
||||
<div class="content-container-header">
|
||||
<h1>Content Box Header</h1>
|
||||
</div>
|
||||
<div class="content-container-body">
|
||||
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-container-bounding-box">
|
||||
<div class="content-container-header">
|
||||
<h1>Content Box Header</h1>
|
||||
</div>
|
||||
<div class="content-container-body">
|
||||
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- content-column-3 -->
|
||||
</div><!-- content-column-bounding-box -->
|
||||
<div class="clear-both"></div>
|
||||
</div> <!-- content-grid-container -->
|
||||
</div> <!-- nonfooter-content-container -->
|
||||
</div><!-- wrap-nonfooter-content -->
|
||||
<div id="footer">
|
||||
<div id="footer-content">
|
||||
<p>Project Dashboard - Still in development.</p>
|
||||
</div><!-- footer content -->
|
||||
</div><!-- footer -->
|
||||
</div><!-- wrap-all -->
|
||||
<!-- templates -->
|
||||
<div class="hidden">
|
||||
<div class="droppable-container-placeholder"></div>
|
||||
</div>
|
||||
<!-- main javascript -->
|
||||
<script type="text/javascript" src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 212 B |
Binary file not shown.
|
After Width: | Height: | Size: 208 B |
Binary file not shown.
|
After Width: | Height: | Size: 335 B |
Binary file not shown.
|
After Width: | Height: | Size: 207 B |
Binary file not shown.
|
After Width: | Height: | Size: 262 B |
Binary file not shown.
|
After Width: | Height: | Size: 262 B |
Binary file not shown.
|
After Width: | Height: | Size: 332 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 280 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Vendored
+6
File diff suppressed because one or more lines are too long
@@ -0,0 +1,80 @@
|
||||
$(function() {
|
||||
|
||||
$(".content-container-header").each(function() {
|
||||
$(this).css("background-color", "hsla(" + Math.round(Math.random() * 360) + ", 100%, 50%, 1);");
|
||||
});
|
||||
|
||||
//setup the draggable content containers
|
||||
$(".content-container-bounding-box").draggable({
|
||||
"distance": 10,
|
||||
"handle": "h1",
|
||||
"helper": "clone",
|
||||
"revert": "invalid",
|
||||
"revertDuration": 50,
|
||||
"scope": "widget",
|
||||
"scroll": false,
|
||||
"snap": false,
|
||||
"start": function(event, ui) {
|
||||
//set width and height of dragged clone to originals dimensions
|
||||
$(ui.helper[0]).width(event.target.clientWidth).height(event.target.clientHeight);
|
||||
//change opacity of original to indicate it is being dragged
|
||||
$(event.target).css("opacity", "0.25");
|
||||
//also change opacity of dragged clone to help the user see
|
||||
$(ui.helper[0]).css("opacity", "0.5");
|
||||
},
|
||||
"stop": function(event, ui) {
|
||||
//reset opacity of original
|
||||
$(event.target).css("opacity", "");
|
||||
}
|
||||
});
|
||||
|
||||
//setup the dropzones
|
||||
//put the dragged object into first position of a column
|
||||
$(".content-column").droppable({
|
||||
"greedy": false,
|
||||
"scope": "widget",
|
||||
"tolerance": "pointer",
|
||||
"drop": function(event, ui) {
|
||||
$("#draggable-temporary-clone").remove();
|
||||
$(ui.draggable[0]).prependTo($(event.target));
|
||||
},
|
||||
"over": function(event, ui) {
|
||||
$("#draggable-temporary-clone").remove();
|
||||
//create a placeholder and mark it with an id (so we can remove it later)
|
||||
$(".droppable-container-placeholder")
|
||||
.clone(true)
|
||||
.width(ui.draggable[0].clientWidth)
|
||||
.height(ui.draggable[0].clientHeight)
|
||||
.attr("id", "draggable-temporary-clone")
|
||||
.prependTo(event.target);
|
||||
},
|
||||
"out": function(event, ui) {
|
||||
$("#draggable-temporary-clone").remove();
|
||||
}
|
||||
});
|
||||
|
||||
//put the dragged object into a slot after the object it was dropped on
|
||||
$(".content-container-bounding-box").droppable({
|
||||
"greedy": true,
|
||||
"scope": "widget",
|
||||
"tolerance": "pointer",
|
||||
"drop": function(event, ui) {
|
||||
$("#draggable-temporary-clone").remove();
|
||||
$(ui.draggable[0]).insertAfter(event.target);
|
||||
},
|
||||
"over": function(event, ui) {
|
||||
$("#draggable-temporary-clone").remove();
|
||||
//create a placeholder and mark it with an id (so we can remove it later)
|
||||
$(".droppable-container-placeholder")
|
||||
.clone(true)
|
||||
.width(ui.draggable[0].clientWidth)
|
||||
.height(ui.draggable[0].clientHeight)
|
||||
.attr("id", "draggable-temporary-clone")
|
||||
.insertAfter(event.target);
|
||||
},
|
||||
"out": function(event, ui) {
|
||||
$("#draggable-temporary-clone").remove();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
@@ -0,0 +1,177 @@
|
||||
@font-face {
|
||||
font-family: Sintony;
|
||||
src: url('font/Sintony-Regular.ttf');
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Sintony_Bold;
|
||||
src: url('font/Sintony-Bold.ttf');
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* reset padding and margin on elements, eliminate outlines and borders */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: none 0px;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
/* background-color: #FF00FF; */ /* Development only! */
|
||||
background-color: hsla(0, 0%, 50%, 1);
|
||||
font-family: Sintony, sans-serif;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-family: Sintony_Bold, sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1 { font-size: 12pt; }
|
||||
h2 { font-size: 11pt; }
|
||||
h3 { font-size: 11pt; }
|
||||
h4 { font-size: 11pt; }
|
||||
h5 { font-size: 11pt; }
|
||||
|
||||
.clear-both {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vertical-list {
|
||||
list-style: none;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.vertical-list li {
|
||||
padding-right: 1em;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.navi-active {
|
||||
color: hsla(0, 0%, 100%, 0.95);
|
||||
}
|
||||
|
||||
.content-column-bounding-box {
|
||||
float: left;
|
||||
width: 33.3%;
|
||||
}
|
||||
|
||||
.content-column {
|
||||
padding: 2em 1em 0em 1em;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.content-container-bounding-box {
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
.content-container-bounding-box:last-child {
|
||||
padding-bottom: 4em;
|
||||
}
|
||||
|
||||
.content-container-header {
|
||||
cursor: move;
|
||||
padding-left: 0.75em;
|
||||
padding-right: 0.75em;
|
||||
padding-top: 5px; /* see border-radius */
|
||||
padding-bottom: 0em;
|
||||
color: hsla(0, 0%, 10%, 0.9);
|
||||
background-color: hsla(0, 0%, 65%, 0.75);
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
}
|
||||
|
||||
.content-container-header h1 {
|
||||
color: hsla(0, 0%, 25%, 1);
|
||||
}
|
||||
|
||||
.content-container-body {
|
||||
padding: 0.5em 0.75em 1em 0.75em;
|
||||
color: hsla(0, 0%, 10%, 0.9);
|
||||
background-color: hsla(0, 0%, 100%, 0.8);
|
||||
border-radius: 0px 0px 5px 5px;
|
||||
}
|
||||
|
||||
.content-container-body p {
|
||||
color: hsla(0, 0%, 5%, 1);
|
||||
}
|
||||
|
||||
.droppable-container-placeholder {
|
||||
border-width: 2px 2px 2px 2px;
|
||||
border-style: dashed;
|
||||
border-color: hsla(0, 0%, 33%, 0.75);
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
#wallpaper {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: -999;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
background-color: hsla(0, 0%, 50%, 1);
|
||||
/* epic background image or something like that */
|
||||
background: url('img/bkg01.jpg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
#wrap-all {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#wrap-nonfooter-content {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
#nonfooter-content-container {
|
||||
overflow: auto;
|
||||
padding-bottom: 150px; /* footer height */
|
||||
}
|
||||
|
||||
#headerbar {
|
||||
padding: 0.1em 1em 0.1em 1em;
|
||||
height: 1.75em;
|
||||
text-align: left;
|
||||
line-height: 1.75em;
|
||||
color: hsla(0, 0%, 70%, 0.9);
|
||||
background-color: hsla(0, 0%, 0%, 0.75);
|
||||
font-family: Sintony_Bold;
|
||||
}
|
||||
|
||||
#content-grid-container {
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
#footer {
|
||||
height: 150px; /* footer height */
|
||||
margin-top: -150px; /* footer height */
|
||||
color: hsla(0, 0%, 90%, 0.9);
|
||||
background-color: hsla(0, 0%, 0%, 0.75);
|
||||
|
||||
}
|
||||
|
||||
#footer-content {
|
||||
padding: 1em 1em 1em 1em;
|
||||
}
|
||||
Reference in New Issue
Block a user