From d848be5ea462c0ae4accbd78b1b7402e34d770ed Mon Sep 17 00:00:00 2001
From: Davit Rizhinashvili <davit.rizhinashvili@quantori.com>
Date: Fri, 7 Oct 2022 06:19:39 +0300
Subject: [PATCH] finish with sun
---
wiki/layout.html | 14 +-------
wiki/moving-sun.html | 69 ++++++++++++++++++++++++++++++++++++
wiki/pages/contribution.html | 22 ++++++++----
3 files changed, 85 insertions(+), 20 deletions(-)
create mode 100644 wiki/moving-sun.html
diff --git a/wiki/layout.html b/wiki/layout.html
index 55f4cb9..57170b2 100644
--- a/wiki/layout.html
+++ b/wiki/layout.html
@@ -22,20 +22,8 @@
<!-- Navigation -->
{% include 'menu.html' %}
- <!-- Header -->
- <header class="bg-hero py-5 mb-5">
- <div class="container h-100">
- <div class="row h-100 align-items-center">
- <div class="col-lg-12">
- <h1 class="display-4 text-white mt-5 mb-2">{{ self.title() }}</h1>
- <p class="lead mb-5 text-white-50">{% block lead %}{% endblock %}</p>
- </div>
- </div>
- </div>
- </header>
-
<!-- Page Content -->
- <div class="container">
+ <div class="container" style="margin-top: 84px;">
{% block page_content %}{% endblock %}
</div>
diff --git a/wiki/moving-sun.html b/wiki/moving-sun.html
new file mode 100644
index 0000000..1c0cd51
--- /dev/null
+++ b/wiki/moving-sun.html
@@ -0,0 +1,69 @@
+<style>
+ #moving_sun {
+ aspect-ratio: 1;
+ position: fixed;
+ top: 30vw;
+ left: 0px;
+ width: 75px;
+ border: none;
+ border-radius: 50%;
+ background-color: yellow;
+ }
+</style>
+
+<div id="moving_sun">
+
+</div>
+
+
+<script>
+
+ const sunSize = 75;
+ const degFromMid = 45;
+ const degRange = degFromMid * 2;
+ const degStart = 90 - degFromMid;
+ const reducedWidth = window.innerWidth - sunSize;
+
+
+ const degToRad = (deg) => {
+ return deg * 0.0174532925;
+ }
+
+ const radius = reducedWidth / 2 / Math.sin(degToRad(degFromMid));
+
+ const setSunPosition = (degrees) => {
+
+ const rads = degToRad(degrees);
+ const a = radius * Math.sin(rads);
+ const b = radius * Math.cos(rads);
+ console.log(radius,reducedWidth)
+ //first point coords
+ const x = reducedWidth / 2 - b;
+ const y = radius - a;
+
+ const sunElement = document.getElementById('moving_sun');
+ sunElement.style.left = `${x}px`;
+ sunElement.style.top = `${y}px`;
+ }
+
+ setSunPosition(degStart);
+
+ window.addEventListener('scroll',() => {
+ var body = document.body;
+ // var height = body.clientHeight - window.innerWidth;
+ var body = document.body,
+ html = document.documentElement;
+ const footer = document.getElementsByTagName('footer');
+ const footerHeight = footer?.length ? footer[0]?.clientHeight : 0;
+
+ var height = Math.max(body.scrollHeight,body.offsetHeight,
+ html.clientHeight,html.scrollHeight,html.offsetHeight) - window.innerHeight;
+
+ const moveDegrees = window.scrollY / height * degRange + degStart;
+ setSunPosition(moveDegrees);
+
+
+ })
+
+
+</script>
\ No newline at end of file
diff --git a/wiki/pages/contribution.html b/wiki/pages/contribution.html
index d5b10dc..ae24043 100644
--- a/wiki/pages/contribution.html
+++ b/wiki/pages/contribution.html
@@ -1,20 +1,28 @@
{% extends "layout.html" %}
-
+
{% block title %}Contribution{% endblock %}
-{% block lead %}Make a useful contribution for future iGEM teams. Use this page to document that contribution.{% endblock %}
+{% block lead %}Make a useful contribution for future iGEM teams. Use this page to document that contribution.{%
+endblock %}
{% block page_content %}
-<div class="row mt-4">
+<div class="row mt-4" style="height: 4000px;">
<div class="col">
<div class="bd-callout bd-callout-info">
<h4>Bronze Medal Criterion #4</h4>
- <p>Make a useful contribution for future iGEM teams. Use this page to document that contribution.<p>
- <p>If you are making a contribution by adding information to an existing Part or creating a new Part, you must document your contribution on the Part's Main Page on the <a href="http://parts.igem.org/Main_Page">Registry</a> for your team to be eligible for this criteria. You can use this page to link to that part and include additional information about your contribution.</p>
+ <p>Make a useful contribution for future iGEM teams. Use this page to document that contribution.
+ <p>
+ <p>If you are making a contribution by adding information to an existing Part or creating a new Part, you must
+ document your contribution on the Part's Main Page on the <a href="http://parts.igem.org/Main_Page">Registry</a>
+ for your team to be eligible for this criteria. You can use this page to link to that part and include
+ additional information about your contribution.</p>
<hr>
- <p>Please see the <a href="https://competition.igem.org/judging/medals">2022 Medals Page</a> for more information.</p>
+ <p>Please see the <a href="https://competition.igem.org/judging/medals">2022 Medals Page</a> for more information.
+ </p>
</div>
</div>
</div>
-{% endblock %}
+{%include 'moving-sun.html'%}
+
+{% endblock %}
\ No newline at end of file
--
GitLab