diff options
Diffstat (limited to 'rannak/mangud/uliopilane')
| -rw-r--r-- | rannak/mangud/uliopilane/ajatelg/index.html | 193 | ||||
| -rw-r--r-- | rannak/mangud/uliopilane/ajatelg/script.js | 72 | ||||
| -rw-r--r-- | rannak/mangud/uliopilane/ajatelg/styles.css | 173 |
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; + } + +} |