mirror of
https://github.com/wekan/wekan.git
synced 2025-09-22 01:50:48 +02:00
Reorganized docs to fix building WeKan
This commit is contained in:
Lauri Ojansivu
parent
57ee624398
commit
6e11aa27f8
11 changed files with 0 additions and 8295 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 883 B |
|
|
@ -1,469 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||||
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
|
||||
<head>
|
||||
<title>WeKan ® - MultiDrag at InteractJS.io</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="maximum-scale=1.0,width=device-width">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="application-name" content="WeKan ®">
|
||||
<meta name="msapplication-TileColor" content="#00aba9">
|
||||
<meta name="theme-color" content="#fff">
|
||||
<style>
|
||||
/* VML for IE */
|
||||
v\:* {
|
||||
behavior: url(#default#VML);
|
||||
}
|
||||
|
||||
#drag-1, #drag-2, #drag-3, #drag-4, #drag-5,
|
||||
#drag-6, #drag-7, #drag-8, #drag-9, #drag-10 {
|
||||
color: white;
|
||||
/* margin: 1rem 0 0 1rem; */
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
transform: translate(0px, 0px);
|
||||
cursor: move;
|
||||
border-radius: 25px;
|
||||
padding: 20px;
|
||||
/* background GIF produces dithered background at Amiga IBrowse, so better to use
|
||||
table background color to get solid color
|
||||
background:url("img/round-blue.gif") top left no-repeat; */
|
||||
outline: none; /* Remove default browser focus outline */
|
||||
transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
|
||||
}
|
||||
|
||||
/* At active card at, show red border and shadow on focus*/
|
||||
#drag-1:focus, #drag-2:focus, #drag-3:focus,
|
||||
#drag-4:focus, #drag-5:focus, #drag-6:focus,
|
||||
#drag-7:focus, #drag-8:focus, #drag-9:focus,
|
||||
#drag-10:focus {
|
||||
border-color: #f00; /* Red border on focus */
|
||||
box-shadow: 0 0 0 5px rgba(255, 0, 0, 0.5); /* Red shadow on focus */
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
|
||||
/* top + 130px is next position +20 ... background-color: #5e98c2; */
|
||||
#drag-1 { position: absolute; top: 300px; left: 10px;}
|
||||
#drag-2 { position: absolute; top: 430px; left: 10px;}
|
||||
#drag-3 { position: absolute; top: 560px; left: 10px; }
|
||||
#drag-4 { position: absolute; top: 690px; left: 10px;}
|
||||
#drag-5 { position: absolute; top: 820px; left: 10px;}
|
||||
#drag-6 { position: absolute; top: 300px; left: 260px; }
|
||||
#drag-7 { position: absolute; top: 430px; left: 260px; }
|
||||
#drag-8 { position: absolute; top: 560px; left: 260px; }
|
||||
#drag-9 { position: absolute; top: 690px; left: 260px; }
|
||||
#drag-10 { position: absolute; top: 820px; left: 260px; }
|
||||
|
||||
.draggable {
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.redlines {
|
||||
position: fixed; /* or position: absolute */
|
||||
top: 440px;
|
||||
left: 150px;
|
||||
width: 50px;
|
||||
height: 2px;
|
||||
pointer-events: none; /* so that below cards can be clicked */
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="js/interact.js"></script>
|
||||
<style type="text/css">
|
||||
#drop_file_zone {
|
||||
background-color: #EEE;
|
||||
border: #999 5px dashed;
|
||||
width: 290px;
|
||||
height: 200px;
|
||||
padding: 8px;
|
||||
font-size: 18px;
|
||||
}
|
||||
#drag_upload_file {
|
||||
width:50%;
|
||||
margin:0 auto;
|
||||
}
|
||||
#drag_upload_file p {
|
||||
text-align: center;
|
||||
}
|
||||
#drag_upload_file #selectfile {
|
||||
display: none;
|
||||
}
|
||||
#oneboard {
|
||||
min-height: 100px;
|
||||
border: 1px solid black;
|
||||
padding: 2px;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
}
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background-color: #dfdfdf;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<br>
|
||||
|
||||
<br>
|
||||
|
||||
<h2>MultiDrag test, for future version of <a href="https://wekan.github.io">WeKan Open Source kanban</a></h2>
|
||||
|
||||
<p>This MultiDrag test uses <a href="https://interactjs.io">https://interactjs.io</a> drag drop</p>
|
||||
|
||||
<p>Features:</p>
|
||||
|
||||
<ul>
|
||||
<li>Newest browsers, MultiDrag: Touchscreen, you can drag many cards at once with each finger.
|
||||
Use case: Many users can drag their own card at big touch screen. Or one user can drag many cards.
|
||||
There is not any kanban software with MultiDrag feature yet.
|
||||
</li>
|
||||
<li>Ladybird, OneDrag: Touchscreen, drag only one card at once. Is it possible to get MultiDrag?</li>
|
||||
<li>Legacy Browsers: Uses HTML4 tables, and GIF image for rounded corners, to be visible at Netsurf and Amiga IBrowse.
|
||||
No drag drop features, so there will be buttons to move cards.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Background GIF produces dithered background at Amiga IBrowse,
|
||||
so better to use table background color to get solid color:
|
||||
table background="img/round-blue.gif" => table bgcolor="#5e98c2"
|
||||
But this causes card to not have rounded corners at Netsurf and Amiga IBrowse.
|
||||
So, to have rounded corners at Netsurf and Amiga IBrowse, use background GIF.
|
||||
|
||||
valid_colors = ['white', 'green', 'yellow', 'orange', 'red', 'purple', 'blue', 'sky', 'lime', 'pink', 'black',
|
||||
'silver', 'peachpuff', 'crimson', 'plum', 'darkgreen', 'slateblue', 'magenta', 'gold', 'navy',
|
||||
'gray', 'saddlebrown', 'paleturquoise', 'mistyrose', 'indigo']
|
||||
|
||||
|
||||
<table bgcolor="#5e98c2"
|
||||
-->
|
||||
|
||||
<table bgcolor="blue" tabindex="1" style="border-collapse: collapse;" width="200" height="80"
|
||||
border="0" padding="0" spacing="0" id="drag-1" class="draggable"
|
||||
border-collapse="collapse">
|
||||
<tbody><tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="40" valign="middle" align="top">
|
||||
<font size="1" color="white" face="arial">
|
||||
<b>At touchscreen</b>
|
||||
<p></p></font>
|
||||
</td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
<tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="20"></td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
<tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="20"></td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
|
||||
<br>
|
||||
|
||||
<table bgcolor="green" tabindex="2" style="border-collapse: collapse;" width="200" height="80"
|
||||
border="0" padding="0" spacing="0" id="drag-2" class="draggable" border-collapse="collapse">
|
||||
<tbody><tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="40" valign="middle" align="top">
|
||||
<font size="1" color="white" face="arial">
|
||||
<b>Drag many at once</b>
|
||||
<p></p></font>
|
||||
</td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
<tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="20"></td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
<tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="20"></td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
|
||||
<br>
|
||||
|
||||
<table bgcolor="red" tabindex="3" style="border-collapse: collapse;" width="200" height="80"
|
||||
border="0" padding="0" spacing="0" id="drag-3" class="draggable" border-collapse="collapse">
|
||||
<tbody><tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="40" valign="middle" align="top">
|
||||
<font size="1" color="white" face="arial">
|
||||
<b>Visible at Netsurf</b>
|
||||
<p></p></font>
|
||||
</td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
<tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="20"></td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
<tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="20"></td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
|
||||
<br>
|
||||
|
||||
<table bgcolor="yellow" tabindex="4" style="border-collapse: collapse;" width="200" height="80"
|
||||
border="0" padding="0" spacing="0" id="drag-4" class="draggable" border-collapse="collapse">
|
||||
<tbody><tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="40" valign="middle" align="top">
|
||||
<font size="1" color="black" face="arial">
|
||||
<b>and Amiga IBrowse</b>
|
||||
<p></p></font>
|
||||
</td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
<tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="20"></td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
<tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="20"></td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
|
||||
<table bgcolor="gray" tabindex="5" style="border-collapse: collapse;" width="200" height="80"
|
||||
border="0" padding="0" spacing="0" id="drag-5" class="draggable" border-collapse="collapse">
|
||||
<tbody><tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="40" valign="middle" align="top">
|
||||
<font size="1" color="white" face="arial">
|
||||
<b>For all browsers</b>
|
||||
<p></p></font>
|
||||
</td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
<tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="20"></td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
<tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="20"></td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
|
||||
<table bgcolor="black" tabindex="6" style="border-collapse: collapse;" width="200" height="80"
|
||||
border="0" padding="0" spacing="0" id="drag-6" class="draggable" border-collapse="collapse">
|
||||
<tbody><tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="40" valign="middle" align="top">
|
||||
<font size="1" color="white" face="arial">
|
||||
<b>And all screen sizes</b>
|
||||
<p></p></font>
|
||||
</td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
<tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="20"></td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
<tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="20"></td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
|
||||
<table bgcolor="cyan" tabindex="7" style="border-collapse: collapse;" width="200" height="80"
|
||||
border="0" padding="0" spacing="0" id="drag-7" class="draggable" border-collapse="collapse">
|
||||
<tbody><tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="40" valign="middle" align="top">
|
||||
<font size="1" color="black" face="arial">
|
||||
<b>And all OS</b>
|
||||
<p></p></font>
|
||||
</td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
<tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="20"></td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
<tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="20"></td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
|
||||
<table bgcolor="pink" tabindex="8" style="border-collapse: collapse;" width="200" height="80"
|
||||
border="0" padding="0" spacing="0" id="drag-8" class="draggable" border-collapse="collapse">
|
||||
<tbody><tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="40" valign="middle" align="top">
|
||||
<font size="1" color="black" face="arial">
|
||||
<b>And CPUs</b>
|
||||
<p></p></font>
|
||||
</td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
<tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="20"></td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
<tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="20"></td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
|
||||
<table bgcolor="orange" tabindex="9" style="border-collapse: collapse;" width="200" height="80"
|
||||
border="0" padding="0" spacing="0" id="drag-9" class="draggable" border-collapse="collapse">
|
||||
<tbody><tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="40" valign="middle" align="top">
|
||||
<font size="1" color="black" face="arial">
|
||||
<b>At Earth</b>
|
||||
<p></p></font>
|
||||
</td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
<tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="20"></td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
<tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="20"></td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
|
||||
<table bgcolor="lightblue" tabindex="10" style="border-collapse: collapse;" width="200" height="80"
|
||||
border="0" padding="0" spacing="0" id="drag-10" class="draggable" border-collapse="collapse">
|
||||
<tbody><tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="40" valign="middle" align="top">
|
||||
<font size="1" color="black" face="arial">
|
||||
<b>And Space</b>
|
||||
<p></p></font>
|
||||
</td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
<tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="20"></td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
<tr border="0" padding="0" spacing="0">
|
||||
<td width="20" height="20"></td>
|
||||
<td width="160" height="20"></td>
|
||||
<td width="20" height="20"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="redlines">
|
||||
<svg height="210" width="500">
|
||||
<line x1="0" y1="0" x2="270" y2="150" style="stroke:rgb(255,0,0);stroke-width:2" />
|
||||
</svg>
|
||||
<v:group coordorigin="0 0" coordsize="500 210" style="width:500px;height:210px;">
|
||||
<v:line from="0,0" to="270,150" strokecolor="red" strokeweight="2pt" />
|
||||
</v:group>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// target elements with the "draggable" class
|
||||
interact('.draggable')
|
||||
.draggable({
|
||||
// Disabled inertia, because it restricted area where to drag card,
|
||||
// and returned card to wrong position.
|
||||
// enable inertial throwing
|
||||
//inertia: true, // This is default. Trying to disable it.
|
||||
inertia: false,
|
||||
// keep the element within the area of it's parent. // This is default. Trying to disable it.
|
||||
/*
|
||||
modifiers: [
|
||||
interact.modifiers.restrictRect({
|
||||
restriction: 'parent',
|
||||
endOnly: true
|
||||
})
|
||||
],
|
||||
*/
|
||||
// enable autoScroll
|
||||
autoScroll: true,
|
||||
|
||||
listeners: {
|
||||
// call this function on every dragmove event
|
||||
move: dragMoveListener,
|
||||
|
||||
// call this function on every dragend event
|
||||
end (event) {
|
||||
var textEl = event.target.querySelector('p')
|
||||
|
||||
textEl && (textEl.textContent =
|
||||
'moved ' +
|
||||
(Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
|
||||
Math.pow(event.pageY - event.y0, 2) | 0))
|
||||
.toFixed(0) + 'px from ' +
|
||||
'x' + event.x0.toFixed(0) + '=>' + event.pageX.toFixed(0) +
|
||||
', y' + event.y0.toFixed(0) + '=>' + event.pageY.toFixed(0));
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function dragMoveListener (event) {
|
||||
var target = event.target
|
||||
// keep the dragged position in the data-x/data-y attributes
|
||||
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
|
||||
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
|
||||
|
||||
// translate the element
|
||||
target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
|
||||
|
||||
// update the posiion attributes
|
||||
target.setAttribute('data-x', x)
|
||||
target.setAttribute('data-y', y)
|
||||
}
|
||||
|
||||
// this function is used later in the resizing and gesture demos
|
||||
window.dragMoveListener = dragMoveListener
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,47 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>To Do</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.card {
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.list-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="list-title">To Do</div>
|
||||
<div class="card">Card 1</div>
|
||||
<div class="card">Card 2</div>
|
||||
<div class="card">Card 3</div>
|
||||
<div class="card">Card 4</div>
|
||||
<div class="card">Card 5</div>
|
||||
<div class="card">Card 6</div>
|
||||
<div class="card">Card 7</div>
|
||||
<div class="card">Card 8</div>
|
||||
<div class="card">Card 9</div>
|
||||
<div class="card">Card 10</div>
|
||||
<div class="card">Card 11</div>
|
||||
<div class="card">Card 12</div>
|
||||
<div class="card">Card 13</div>
|
||||
<div class="card">Card 14</div>
|
||||
<div class="card">Card 15</div>
|
||||
<div class="card">Card 16</div>
|
||||
<div class="card">Card 17</div>
|
||||
<div class="card">Card 18</div>
|
||||
<div class="card">Card 19</div>
|
||||
<div class="card">Card 20</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>To Do</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.card {
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.list-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="list-title">To Do</div>
|
||||
<div class="card">Card 1</div>
|
||||
<div class="card">Card 2</div>
|
||||
<div class="card">Card 3</div>
|
||||
<div class="card">Card 4</div>
|
||||
<div class="card">Card 5</div>
|
||||
<div class="card">Card 6</div>
|
||||
<div class="card">Card 7</div>
|
||||
<div class="card">Card 8</div>
|
||||
<div class="card">Card 9</div>
|
||||
<div class="card">Card 10</div>
|
||||
<div class="card">Card 11</div>
|
||||
<div class="card">Card 12</div>
|
||||
<div class="card">Card 13</div>
|
||||
<div class="card">Card 14</div>
|
||||
<div class="card">Card 15</div>
|
||||
<div class="card">Card 16</div>
|
||||
<div class="card">Card 17</div>
|
||||
<div class="card">Card 18</div>
|
||||
<div class="card">Card 19</div>
|
||||
<div class="card">Card 20</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>To Do</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.card {
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.list-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="list-title">To Do</div>
|
||||
<div class="card">Card 1</div>
|
||||
<div class="card">Card 2</div>
|
||||
<div class="card">Card 3</div>
|
||||
<div class="card">Card 4</div>
|
||||
<div class="card">Card 5</div>
|
||||
<div class="card">Card 6</div>
|
||||
<div class="card">Card 7</div>
|
||||
<div class="card">Card 8</div>
|
||||
<div class="card">Card 9</div>
|
||||
<div class="card">Card 10</div>
|
||||
<div class="card">Card 11</div>
|
||||
<div class="card">Card 12</div>
|
||||
<div class="card">Card 13</div>
|
||||
<div class="card">Card 14</div>
|
||||
<div class="card">Card 15</div>
|
||||
<div class="card">Card 16</div>
|
||||
<div class="card">Card 17</div>
|
||||
<div class="card">Card 18</div>
|
||||
<div class="card">Card 19</div>
|
||||
<div class="card">Card 20</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>To Do</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.card {
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.list-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="list-title">To Do</div>
|
||||
<div class="card">Card 1</div>
|
||||
<div class="card">Card 2</div>
|
||||
<div class="card">Card 3</div>
|
||||
<div class="card">Card 4</div>
|
||||
<div class="card">Card 5</div>
|
||||
<div class="card">Card 6</div>
|
||||
<div class="card">Card 7</div>
|
||||
<div class="card">Card 8</div>
|
||||
<div class="card">Card 9</div>
|
||||
<div class="card">Card 10</div>
|
||||
<div class="card">Card 11</div>
|
||||
<div class="card">Card 12</div>
|
||||
<div class="card">Card 13</div>
|
||||
<div class="card">Card 14</div>
|
||||
<div class="card">Card 15</div>
|
||||
<div class="card">Card 16</div>
|
||||
<div class="card">Card 17</div>
|
||||
<div class="card">Card 18</div>
|
||||
<div class="card">Card 19</div>
|
||||
<div class="card">Card 20</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Kanban Board</title>
|
||||
<style>
|
||||
.kanban-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
.list-frame {
|
||||
flex: 1;
|
||||
margin: 0 10px;
|
||||
border: 1px solid #ccc;
|
||||
height: 95vh;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="kanban-container">
|
||||
<iframe src="list1.html" class="list-frame" frameborder="0"></iframe>
|
||||
<iframe src="list2.html" class="list-frame" frameborder="0"></iframe>
|
||||
<iframe src="list3.html" class="list-frame" frameborder="0"></iframe>
|
||||
<iframe src="list4.html" class="list-frame" frameborder="0"></iframe>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue