osc-vitap · Yaswanth-Varma-Sangaraju · Jan 24, 2025
diff --git a/earthdateslector/earth.png b/earthdateslector/earth.png
diff --git a/earthdateslector/index.html b/earthdateslector/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Date Picker</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <h1>Date of Birth</h1>
+  <div id="dobArea">
+    <button id="date">
+      <div></div>
+      <input type="checkbox">
+      <div id="datePicker">
+        <svg viewBox="0 0 350 166">
+          <ellipse id="ellipse" cx="175" cy="83" rx="150" ry="73"
+          style="fill-opacity: 0; stroke: yellow; stroke-width: 0.5" />
+          <image id="earth" height="15" width="15" href="earth.png"></image>
+          <image id="sun" x="105" y="68" height="30" width="30" href="sun.png"></image>
+        </svg>
+      </div>
+    </button>
+  </div>
+
+  <!-- Start Quiz button -->
+  <div id="startQuizArea">
+    <button id="startQuizButton"><a href="../quiz/index.html">Start Quiz</a></button>
+  </div>
+
+  <script src="logic.js"></script>
+</body>
+
+</html>
diff --git a/earthdateslector/logic.js b/earthdateslector/logic.js
@@ -0,0 +1,116 @@
+/*
+  The formula I use is not the scientifically best formula.
+  If you want more correct result use Kepler’s laws.
+  Also I use center of circumcircle of ellipse because
+  orbit of the earth is not too much ellipse, it's almost a circle
+  and Sun is almost in the middle of the circle, you can use center of ellipse
+*/
+
+"use strict"
+
+const earth = document.getElementById("earth")
+const dateButton = document.getElementById("date")
+const datePicker = document.getElementById("datePicker")
+const ellipse = document.getElementById("ellipse")
+
+var isPressing = false
+
+const earthSize = 15
+const horizontalRadius = 150
+const verticalRadius = 73
+const horizontalMargin = 25
+const verticalMargin = 10
+
+var today = new Date()
+var year = today.getFullYear()
+var start = new Date(today.getFullYear(), 0, 0)
+var diff = today - start
+const oneDay = 1000 * 60 * 60 * 24
+var dayNumber = Math.floor(diff / oneDay)
+var date = dateFromDay(dayNumber)
+dateButton.children[0].innerText = addZero(date.getDate()) + "/" + addZero(date.getMonth()+1) + "/" + date.getFullYear()
+
+var degree = 2*Math.asin(((dayNumber-1)/(182.5 + (isLeapyear()?0.5:0)))-1)
+var x = horizontalRadius*Math.cos(degree)
+var y = verticalRadius*Math.sin(degree)
+
+earth.setAttribute("x",horizontalRadius + x - earthSize/2 + horizontalMargin)
+earth.setAttribute("y",verticalRadius - y - earthSize/2 + verticalMargin)
+
+
+earth.addEventListener("mousedown", mousedown)
+earth.addEventListener("touchstart", mousedown)
+
+addEventListener("mousemove", mousemove)
+addEventListener("touchmove", mousemove)
+
+addEventListener("mouseup", mouseup)
+addEventListener("touchend", mouseup)
+
+
+var dateButtonRect = dateButton.getBoundingClientRect()
+datePicker.style.top = dateButtonRect.height + "px"
+datePicker.style.right = 0
+dateButton.style.height = dateButtonRect.height + "px"
+
+function mousedown(e) {
+  isPressing = true
+}
+
+function mousemove(e) {
+  if(!isPressing)
+    return
+
+  const { clientX, clientY } = e.touches != null ? e.touches[0] : e
+
+  const rect = ellipse.getBoundingClientRect()
+  const ellipseCenterX = rect.x + rect.width/2 + horizontalMargin
+  const ellipseCenterY = rect.y + rect.height/2 + verticalMargin
+  degree = Math.atan2(ellipseCenterY - clientY, clientX - ellipseCenterX)
+
+  let x = horizontalRadius*Math.cos(degree)
+  let y = verticalRadius*Math.sin(degree)
+
+  earth.setAttribute("x", horizontalRadius + x - earthSize/2 + horizontalMargin)
+  earth.setAttribute("y", verticalRadius - y - earthSize/2 + verticalMargin)
+
+  let oldDate = date
+
+  var dayNumber = ((182.5 + (isLeapyear()?0.5:0))*(Math.sin((degree)/2) + 1) + 1)
+
+  date = dateFromDay(dayNumber)
+
+  if(oldDate.getDate() == 1 && oldDate.getMonth() == 0 && date.getDate() == 31 && date.getMonth() == 11){
+    year--
+  }else if(oldDate.getDate() == 31 && oldDate.getMonth() == 11 && date.getDate() == 1 && date.getMonth() == 0){
+    year++
+  }
+
+  dayNumber = ((182.5 + (isLeapyear()?0.5:0))*(Math.sin((degree)/2)+1)+1)
+  date = dateFromDay(dayNumber)
+
+  if(date.getTime() > today.getTime()){
+    dateButton.children[0].classList.add("future")
+    dateButton.children[0].innerText = " YOU CAN'T TIME TRAVEL" // We don't like time travelers!
+  }else{
+    dateButton.children[0].classList.remove("future")
+    dateButton.children[0].innerText = addZero(date.getDate()) + "/" + addZero(date.getMonth() + 1) + "/" + date.getFullYear()
+  }
+}
+
+function dateFromDay(day){
+  var date = new Date(year, 0)
+  return new Date(date.setDate(day))
+}
+
+function mouseup(e) {
+  isPressing = false
+}
+
+function addZero(num){
+  return num<10?"0"+num:num
+}
+
+function isLeapyear(){
+  return (year % 100 === 0) ? (year % 400 === 0) : (year % 4 === 0)
+}
diff --git a/earthdateslector/style.css b/earthdateslector/style.css
@@ -0,0 +1,124 @@
+html, body {
+    height: 100%;
+  }
+
+  body {
+    margin: 0;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
+    background: #464646;
+    font: 16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    gap: 1rem;
+  }
+
+  h1 {
+    color: #fff;
+    font-size: 4rem;
+    font-weight: 300;
+    margin: 0;
+  }
+
+  h2 {
+    color: #fff;
+    font-size: 1.1rem;
+    font-weight: 300;
+    margin: 0;
+  }
+
+  input {
+    outline: 0;
+    border: none;
+    border-bottom: 1px solid #fff;
+    border-radius: 0;
+    background: transparent;
+    width: 220px;
+    padding: 0;
+    color: #fff;
+    -webkit-text-fill-color: #fff;
+    opacity: 1;
+  }
+
+  #signupArea {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #signupArea > *{
+    margin-top: 15px;
+  }
+
+  #signupArea > div {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  #datePicker {
+    display: flex;
+    gap: 1rem;
+    width: 75vw;
+    max-width: 400px;
+    position: absolute;
+    z-index: 99;
+
+    background-color: black;
+    border-radius: 60px 0px 60px 60px;
+
+    clip-path: circle(0% at 100% 0%);
+    transition: clip-path 0.7s;
+
+    cursor: grab;
+  }
+
+  button {
+
+    border: none;
+    background: #fff;
+    color: #464646;
+    border-radius: 0.3rem;
+    padding: 0.5rem;
+    cursor: pointer;
+    position: relative;
+  }
+
+
+  #date input{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin:0;
+    border: none;
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+  }
+
+  .future{
+    color: red;
+    font-size: 0.6rem;
+  }
+
+  #date input:checked ~ #datePicker{
+    clip-path: circle(150% at 100% 100%);
+  }
+
+  input, button {
+    font: inherit;
+  }
+  #startQuizButton {
+    margin-top: 20px;
+    padding: 10px 20px;
+    background-color: #4CAF50; /* Green background */
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+  #startQuizButton:hover {
+    background-color: #45a049; /* Darker green on hover */
+  }
+
diff --git a/earthdateslector/sun.png b/earthdateslector/sun.png