summaryrefslogtreecommitdiff
path: root/rannak/mangud/uliopilane
diff options
context:
space:
mode:
authorRasmus Luha <rasmus.luha@gmail.com>2022-10-30 15:19:30 +0200
committerRasmus Luha <rasmus.luha@gmail.com>2022-10-30 15:19:30 +0200
commit85c0341a0813556749bc5d34fe35fe8a18f1f5a8 (patch)
treed1550e309239b3d522ea6b029e0c3d4b074dc661 /rannak/mangud/uliopilane
parent03f99c33287e99e4db9e4cb4d3877fcf4114b877 (diff)
ajatelg done, add to index
Diffstat (limited to 'rannak/mangud/uliopilane')
-rw-r--r--rannak/mangud/uliopilane/ajatelg/index.html193
-rw-r--r--rannak/mangud/uliopilane/ajatelg/script.js72
-rw-r--r--rannak/mangud/uliopilane/ajatelg/styles.css173
3 files changed, 429 insertions, 9 deletions
diff --git a/rannak/mangud/uliopilane/ajatelg/index.html b/rannak/mangud/uliopilane/ajatelg/index.html
index b7e7c2f..5cd5881 100644
--- a/rannak/mangud/uliopilane/ajatelg/index.html
+++ b/rannak/mangud/uliopilane/ajatelg/index.html
@@ -1,12 +1,187 @@
-<!doctype html>
<html lang="en">
- <head>
- <meta charset="UTF-8"/>
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=, initial-scale=1.0">
<title>Ajatelg</title>
- <link href="styles.css" rel="stylesheet"/>
- </head>
- <body>
-
- <script src="script.js"></script>
- </body>
+ <link rel="stylesheet" href="styles.css">
+ <!-- Bootstrap - CSS only -->
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
+</head>
+
+<body class="text-white">
+
+ <div class="text-center text-white align-items-center pb-5 pealkiri">
+ <h1 class="pb-1 pt-2">Ajatelg</h1>
+ <p>Pane Sündumsed ajateljel õigsse järjekorda</p>
+
+ <div class="row">
+ <div>
+ <button class="moveOn" disabled>Liigu Edasi</button>
+ </div>
+ </div>
+
+ </div>
+
+
+ <!-- Main stuff -->
+
+ <div class="row">
+
+ <div class="col-3 position-fixed">
+ <div class="list col startBasket text-center">
+ <div id="fosforiit" class="list-item" draggable="true">Fosforiidi Sõda</div>
+
+ <div id="muusikapaevad" class="list-item" draggable="true">
+ 9. Tartu levimuusikapäevad
+ <p>(esmakordselt kõlas “Ei ole üksi ükski maa)”</p>
+ </div>
+
+ <div id="hirvepark" class="list-item" draggable="true">Hirvepargi meeleavaldus</div>
+ <div id="muinsuskaitse" class="list-item" draggable="true">Tartu muinsuskaitsepäevad</div>
+ <div id="laulevRev" class="list-item" draggable="true">Laulev revolutsioon, öölaulupeod</div>
+ <div id="eestiKeel" class="list-item" draggable="true">ENSV Keeleseadus, eesti keel riigikeeleks</div>
+ <div id="lipp" class="list-item" draggable="true">Sinine, must ja valge lipp esimest korda Pika Hermanni tornis</div>
+ <div id="kett" class="list-item" draggable="true">Balti kett Tallinnast Vilniuseni</div>
+ <div id="kongress" class="list-item" draggable="true">Eesti Kongress</div>
+ <div id="interrinne" class="list-item" draggable="true">Interrinne ründab Toompead</div>
+ <div id="august" class="list-item" draggable="true">Augustiputš</div>
+ <div id="iseseisvus" class="list-item" draggable="true">Ülemnõukogu otsus Eesti riiklikust iseseisvusest</div>
+ </div>
+ </div>
+
+
+ <!-------------------
+ TIMELINE
+ notes:
+ position-fixed
+ ms-auto
+ -------------------->
+
+ <div class="col-9 ms-auto timelineContainer">
+ <div class="timeline">
+ <ul>
+
+ <li>
+ <div class="timeline-content">
+ <h3 class="date">1987</h3>
+ <div class="dropBox">
+ <div id="fosforiit" class="list"></div>
+ </div>
+ </div>
+ </li>
+
+ <li>
+ <div class="timeline-content">
+ <h3 class="date">14.05.1987</h3>
+ <div class="dropBox">
+ <div id="muusikapaevad" class="list"></div>
+ </div>
+ </div>
+ </li>
+
+ <li>
+ <div class="timeline-content">
+ <h3 class="date">23.08.1987 </h3>
+ <div class="dropBox">
+ <div id="hirvepark" class="list"></div>
+ </div>
+ </div>
+ </li>
+
+ <li>
+ <div class="timeline-content">
+ <h3 class="date">14.-17.04.1988</h3>
+ <div class="dropBox">
+ <div id="muinsuskaitse" class="list"></div>
+ </div>
+ </div>
+ </li>
+
+ <li>
+ <div class="timeline-content">
+ <h3 class="date">suvi 1988</h3>
+ <div class="dropBox">
+ <div id="laulevRev" class="list"></div>
+ </div>
+ </div>
+ </li>
+
+ <li>
+ <div class="timeline-content">
+ <h3 class="date">18.01.1989</h3>
+ <div class="dropBox">
+ <div id="eestiKeel" class="list"></div>
+ </div>
+ </div>
+ </li>
+
+ <li>
+ <div class="timeline-content">
+ <h3 class="date">24.02.1989</h3>
+ <div class="dropBox">
+ <div id="lipp" class="list"></div>
+ </div>
+ </div>
+ </li>
+
+ <li>
+ <div class="timeline-content">
+ <h3 class="date">23.08.1989</h3>
+ <div class="dropBox">
+ <div id="kett" class="list"></div>
+ </div>
+ </div>
+ </li>
+
+ <li>
+ <div class="timeline-content">
+ <h3 class="date">11.-12.03.1990</h3>
+ <div class="dropBox">
+ <div id="kongress" class="list"></div>
+ </div>
+ </div>
+ </li>
+
+ <li>
+ <div class="timeline-content">
+ <h3 class="date">15.05 1990</h3>
+ <div class="dropBox">
+ <div id="interrinne" class="list"></div>
+ </div>
+ </div>
+ </li>
+
+ <li>
+ <div class="timeline-content">
+ <h3 class="date">18.-21.08.1991</h3>
+ <div class="dropBox">
+ <div id="august" class="list"></div>
+ </div>
+ </div>
+ </li>
+
+ <li>
+ <div class="timeline-content">
+ <h3 class="date">20.08.1991</h3>
+ <div class="dropBox">
+ <div id="iseseisvus" class="list"></div>
+ </div>
+ </div>
+ </li>
+
+ </ul>
+ </div>
+ </div>
+
+
+
+ </div>
+
+
+ <script src="script.js"></script>
+
+ <!-- JavaScript Bundle with Popper -->
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
+</body>
</html>
diff --git a/rannak/mangud/uliopilane/ajatelg/script.js b/rannak/mangud/uliopilane/ajatelg/script.js
index e69de29..5c667a5 100644
--- a/rannak/mangud/uliopilane/ajatelg/script.js
+++ b/rannak/mangud/uliopilane/ajatelg/script.js
@@ -0,0 +1,72 @@
+const list_items = document.querySelectorAll(".list-item");
+const lists = document.querySelectorAll(".list");
+
+let draggedItem = null;
+
+for (let i=0; i < list_items.length; i++){
+ const item = list_items[i];
+
+ /* Event Listeners */
+ item.addEventListener("dragstart", e => {
+ draggedItem = item;
+ setTimeout(() => (item.style.display = "none"), 0);
+ });
+
+ item.addEventListener("dragend", e => {
+ setTimeout(() => {
+ draggedItem.style.display = "block";
+ draggedItem = null}, 0);
+ checkIfAllGood();
+ });
+
+ for (let j=0; j < lists.length; j++){
+ const list = lists[j];
+
+
+ /* Event Listeners */
+ list.addEventListener("dragenter",e => (e.preventDefault()));
+
+ list.addEventListener("dragover",e => {
+ e.preventDefault();
+ //list.style.backgroundColor = "rgba(0,0,0,0.5)";
+ });
+
+
+ list.addEventListener("dragleave",e => {
+ //list.style.backgroundColor = "rgba(0,0,0,0.3)";
+ });
+
+
+ list.addEventListener("drop",e => {
+ if ((list.children.length == 0 && list.id ==draggedItem.id) || list.className.includes("startBasket"))
+ list.append(draggedItem);
+ //list.style.backgroundColor = "rgba(0,0,0,0.5)";
+ })
+ }
+
+}
+
+function checkIfAllGood(){
+ let rightDone = [];
+
+ for (let j=0; j < lists.length; j++){
+ const list = lists[j];
+ if (list.className.includes("startBasket")){
+ continue;
+ }
+ else if (list.children.length == 1){
+ if (list.id == list.children[0].id){
+ if (!rightDone.includes(list.id))
+ rightDone.push(list.id);
+ console.log(rightDone.length);
+ console.log(rightDone);
+ }
+ }
+ } // For loop end
+
+ if (rightDone.length == 12) {
+ const btn = document.querySelector(".moveOn");
+ btn.disabled = false;
+ btn.onclick = () => location.href = "";
+ }
+}
diff --git a/rannak/mangud/uliopilane/ajatelg/styles.css b/rannak/mangud/uliopilane/ajatelg/styles.css
index e69de29..5966c9b 100644
--- a/rannak/mangud/uliopilane/ajatelg/styles.css
+++ b/rannak/mangud/uliopilane/ajatelg/styles.css
@@ -0,0 +1,173 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap");
+html {
+ font-family: "Montserrat";
+}
+
+* {
+ margin: 0 !important;
+ padding: 0 !important;
+ box-sizing: border-box !important;
+}
+
+body{
+ background-color: #111 !important;
+}
+
+.pealkiri {
+ width: 100vw !important;
+}
+
+/* Green Btn */
+.moveOn{
+ display: inline-block;
+ border: none;
+ padding: 6px 12px;
+ margin-botton: 0;
+ font-size: 1rem;
+ font-weight: normal;
+ text-align: center;
+ cursor: pointer;
+ border-radius: 4px;
+ background-color: #4BB543;
+ color: white;
+}
+
+button:disabled{
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+/* Left side Part */
+
+
+
+.list .list-item {
+ background-color: #1e1f22 !important;
+ color: white;
+ font-weight: bold;
+ height: 3rem;
+ border-radius: 8px !important;
+ cursor: pointer;
+ margin: 5px !important;
+}
+
+.list-item p {
+ font-size: .9rem;
+}
+
+.startBasket {
+ height: 100% !important;
+ min-height: 4rem;
+}
+
+
+/* Timeline css part*/
+
+.timelineContainer {
+ min-height: 100vh;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 100px 0;
+}
+
+.timeline {
+ width: 80%;
+ height: auto;
+ max-width: 800px;
+ margin: 0 auto;
+ position: relative;
+}
+
+.timeline ul {
+ list-style: none;
+}
+
+.timeline ul li {
+ padding: 20px;
+ background-color: #1e1f22;
+ color: white;
+ margin-bottom: 20px;
+}
+
+.timeline ul li:last-child {
+ margin-bottom: 0;
+}
+
+.timeline-content .list {
+ background-color: #1e1f22 !important;
+ min-height: 4rem;
+ border-radius: 8px !important;
+ margin: 10px !important;
+ text-align: center !important;
+ vertical-align: middle;
+}
+
+.timeline-content .date {
+ font-size: 16px;
+ font-weight: 400;
+ margin-bottom: 10px;
+ letter-spacing: 2px;
+ color: #CFF8F8;
+}
+
+/* Responsivness */
+@media only screen and (min-width: 768px) {
+
+ /* Vertical line */
+ .timeline:before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 2px;
+ height: 100%;
+ background-color: gray;
+ }
+ .timeline ul li {
+ width: 50%;
+ position: relative;
+ margin-bottom: 50px;
+ }
+ .timeline ul li:nth-child(odd) {
+ float: left;
+ clear: right;
+ transform: translateX(-30px);
+ border-radius: 20px 0px 20px 20px;
+ }
+ .timeline ul li:nth-child(even) {
+ float: right;
+ clear: left;
+ transform: translateX(30px);
+ border-radius: 0px 20px 20px 20px;
+ }
+
+ /*Balls*/
+ .timeline ul li::before {
+ content: "";
+ position: absolute;
+ height: 20px;
+ width: 20px;
+ border-radius: 50%;
+ background-color: gray;
+ top: 0px;
+ }
+ .timeline ul li:nth-child(odd)::before {
+ transform: translate(50%, -50%);
+ right: -30px;
+ }
+ .timeline ul li:nth-child(even)::before {
+ transform: translate(-50%, -50%);
+ left: -30px;
+ }
+ .timeline-content .date {
+ position: absolute;
+ top: -30px;
+ }
+ .timeline ul li:hover::before {
+ background-color: aqua;
+ }
+
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 06:57:37 +0000