Skip to content

Commit

Permalink
Add Launch Site Map (Fixes #58)
Browse files Browse the repository at this point in the history
  • Loading branch information
@suriyaa
suriyaa committed Aug 19, 2024
1 parent 543bdb3 commit 34c6c1a
Showing 1 changed file with 237 additions and 123 deletions.
360 changes: 237 additions & 123 deletions mission.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,131 +12,245 @@
second-button: "<a href='#learn-more' class='smoothscroll btn btn--stroke'>Learn More</a>"
---

<!-- wo we are
<!-- wo we are
================================================== -->
<section id='learn-more' class="s-about">
<div class="row section-header has-bottom-sep" data-aos="fade-up">
<div class="col-full">
<h1 class="display-1 display-1--light"><div class="tektur">Pioneer in Student Rocketry</div></h1>
</div>
</div> <!-- end section-header -->

<div class="row about-desc" data-aos="fade-up">
<div class="col-full">
As a pioneer in student rocketry, Elara Aerospace endeavours to construct the first rocket with a bi-liquid Methalox rocket engine to ascend to an altitude of 100 kilometres. Innovation propels us forward; by pushing the limits with liquid rocket engines, we are able to conduct scientific experiments in the upper atmosphere that are unlike any other. Our objective? Motivate progress in the aerospace industry by providing exceptional prospects for exploration and pioneering revelations. We invite you to collaborate with us as we redefine the boundaries of possibility in the field of aerospace engineering.
</div>
</div>
</div>
</section>

<!-- un-sdgs
<section id='learn-more' class="s-about">
<div class="row section-header has-bottom-sep" data-aos="fade-up">
<div class="col-full">
<h1 class="display-1 display-1--light">
<div class="tektur">Pioneer in Student Rocketry</div>
</h1>
</div>
</div>
<!-- end section-header -->

<div class="row about-desc" data-aos="fade-up">
<div class="col-full">
As a pioneer in student rocketry, Elara Aerospace endeavours to construct the first rocket with a bi-liquid Methalox rocket engine to ascend to an altitude of 100 kilometres. Innovation propels us forward; by pushing the limits with liquid rocket engines, we are able to conduct scientific experiments in the upper atmosphere that are unlike any other. Our objective? Motivate progress in the aerospace industry by providing exceptional prospects for exploration and pioneering revelations. We invite you to collaborate with us as we redefine the boundaries of possibility in the field of aerospace engineering.
</div>
</div>
</div>
</section>

<!-- un-sdgs
================================================== -->
<section id='un-sdgs' class="s-services">
<div class="row section-header has-bottom-sep" data-aos="fade-up">
<div class="col-full">
<h3 class="subhead">Making an impact</h3>
<h1 class="display-2">Sustainability is part of our core</h1>
</div>
</div> <!-- end section-header -->

{% include un-sdgs.html %}
</section>

<!-- timeline
<section id='un-sdgs' class="s-services">
<div class="row section-header has-bottom-sep" data-aos="fade-up">
<div class="col-full">
<h3 class="subhead">Making an impact</h3>
<h1 class="display-2">Sustainability is part of our core</h1>
</div>
</div>
<!-- end section-header -->

{% include un-sdgs.html %}
</section>

<!-- timeline
================================================== -->
<section id='timeline' class="s-services">

<div class="row section-header has-bottom-sep" data-aos="fade-up">
<div class="col-full">
<h3 class="subhead">Timeline</h3>
<h1 class="display-2">Our plan to achieve the impossible</h1>
</div>
</div> <!-- end section-header -->

<div class="row half-bottom">
<div class="col-six tab-full">
<h3>Goals in Sight</h3>
<dl>
<dt><strong>Brainstorm</strong></dt>
<dd>Establishing Objectives and a Mission Statement</dd>
<dt><strong>Planning</strong></dt>
<dd>Generating Initial Drafts and Concepts</dd>
<dt><strong>Prototype</strong></dt>
<dd>Manufacture and test each subsystem</dd>
<dt><strong>Launch</strong></dt>
<dd>Launching the rocket on 14th November 2024</dd>
</dl>
</div>
<br><br>
<div class="col-six tab-full">
<ul class="skill-bars">
<li>
<section id='timeline' class="s-services">

<div class="row section-header has-bottom-sep" data-aos="fade-up">
<div class="col-full">
<h3 class="subhead">Timeline</h3>
<h1 class="display-2">Our plan to achieve the impossible</h1>
</div>
</div>
<!-- end section-header -->

<div class="row half-bottom">
<div class="col-six tab-full">
<h3>Goals in Sight</h3>
<dl>
<dt><strong>Brainstorm</strong></dt>
<dd>Establishing Objectives and a Mission Statement</dd>
<dt><strong>Planning</strong></dt>
<dd>Generating Initial Drafts and Concepts</dd>
<dt><strong>Prototype</strong></dt>
<dd>Manufacture and test each subsystem</dd>
<dt><strong>Launch</strong></dt>
<dd>Launching the rocket on 14th November 2024</dd>
</dl>
</div>
<br><br>
<div class="col-six tab-full">
<ul class="skill-bars">
<li>
<div class="progress percent95"><span>95%</span></div>
<strong>Brainstorm</strong>
</li>
<li>
</li>
<li>
<div class="progress percent90"><span>90%</span></div>
<strong>Planning</strong>
</li>
<li>
</li>
<li>
<div class="progress percent35"><span>35%</span></div>
<strong>Prototype</strong>
</li>
<li>
</li>
<li>
<div class="progress percent25"><span>25%</span></div>
<strong>Launch</strong>
</li>
</ul>
</div>
</div>
<center>
<a href='/apply/' class='btn btn--primary'>Join Us</a>
</center>
</section> <!-- end s-services -->

<!-- services
</li>
</ul>
</div>
</div>

<center>
<a href='/apply/' class='btn btn--primary'>Join Us</a>
</center>
</section>
<!-- end s-services -->

<!-- launch location
================================================== -->
<section id='learn-more' class="s-about">
<div class="row section-header has-bottom-sep" data-aos="fade-up">
<div class="col-full">
<h3 class="subhead subhead--dark">Launch Location</h3>
<h1 class="display-2 display-1--light">First Launch in Italy</h1>
</div>
</div>
<!-- end section-header -->

<div class="row about-desc" data-aos="fade-up">
<div class="col-full">
<p>
Under supervision of the Italian military DIFESA and<br> privately-integrated launch provider OLM Launch
</p>
</div>
</div>
<!-- end about-desc -->

<!-- Italy Map -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://d3js.org/topojson.v3.min.js"></script>
<style>
#titlemap {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
text-align: center;
}

#map {
width: 100%;
max-width: 800px;
margin: 0 auto;
}

.country {
fill: #ccc;
stroke: #fff;
stroke-width: 0.5px;
}

.marker {
fill: red;
stroke: white;
stroke-width: 1px;
}

.marker-text {
font-size: 12px;
fill: white;
text-anchor: middle; /* Center the text horizontally */
}
</style>

<div id="map"></div>

<script>
const width = 800;
const height = 600;

const svg = d3.select("#map")
.append("svg")
.attr("width", width)
.attr("height", height);

const projection = d3.geoMercator()
.center([12, 42])
.scale(2000)
.translate([width / 2, height / 2]);

const path = d3.geoPath().projection(projection);

// Load Italy GeoJSON data
d3.json("https://raw.githubusercontent.com/openpolis/geojson-italy/master/geojson/limits_IT_regions.geojson").then(function(italy) {
// Draw Italy
svg.selectAll("path")
.data(italy.features)
.enter()
.append("path")
.attr("d", path)
.attr("class", "country");

// Add marker for the new coordinates
const newCoordinates = [8.6191741, 38.9066965]; // New longitude and latitude
const markerPosition = projection(newCoordinates);

// Add the marker circle
svg.append("circle")
.attr("cx", markerPosition[0])
.attr("cy", markerPosition[1])
.attr("r", 5)
.attr("class", "marker");

// Add text label for the marker
svg.append("text")
.attr("x", markerPosition[0])
.attr("y", markerPosition[1] - 10) // Position above the marker
.attr("class", "marker-text")
.text("DIFESA - Military Poligone of Punta Teulada (SARDINIA)"); // Text for the marker
});
</script>
</div>
</section>

<!-- services
================================================== -->
<section id='video' class="s-services">
<div class="row section-header has-bottom-sep" data-aos="fade-up">
<div class="col-full">
<h3 class="subhead">Our Pitch Video</h3>
<h1 class="display-2">Be Part of the First Student Methalox Rocket to Reach 100 km</h1>
</div>
</div> <!-- end section-header -->

<!-- Video.js stylesheet -->
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />

<!-- Video.js Fantasy Theme -->
<link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet" />

<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>

<!-- Embedded YouTube video -->
<style>
.video-container {
position: relative;
width: 100%;
margin: 20px auto;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
height: 0;
}

.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="video-container">
<iframe src="https://www.youtube-nocookie.com/embed/RBvBOw7lvKY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

<!-- Embedded Video.js Video (DEACTIVATED) -->
<!--
<section id='video' class="s-services">
<div class="row section-header has-bottom-sep" data-aos="fade-up">
<div class="col-full">
<h3 class="subhead">Our Pitch Video</h3>
<h1 class="display-2">Be Part of the First Student Methalox Rocket to Reach 100 km</h1>
</div>
</div>
<!-- end section-header -->

<!-- Video.js stylesheet -->
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />

<!-- Video.js Fantasy Theme -->
<link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet" />

<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>

<!-- Embedded YouTube video -->
<style>
.video-container {
position: relative;
width: 100%;
margin: 20px auto;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
height: 0;
}

.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="video-container">
<iframe src="https://www.youtube-nocookie.com/embed/RBvBOw7lvKY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

<!-- Embedded Video.js Video (DEACTIVATED) -->
<!--
<video
id="pitch-video"
class="video-js vjs-big-play-centered vjs-theme-fantasy"
Expand All @@ -149,16 +263,16 @@ <h1 class="display-2">Be Part of the First Student Methalox Rocket to Reach 100
</video>
-->

<!-- Video.js script -->
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<!-- Video.js script -->
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>

<!-- Video.js Watermark (https://github.com/xbgmsharp/videojs-watermark) -->
<script src='/assets/js/videojs.watermark.js'></script>
<!-- Video.js Watermark (https://github.com/xbgmsharp/videojs-watermark) -->
<script src='/assets/js/videojs.watermark.js'></script>

<!-- YouTube Playback Technology for Video.js (https://github.com/videojs/videojs-youtube) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/3.0.1/Youtube.min.js" integrity="sha256-+SwQNzTQ40nndu5fxHxh+yHLc1/sK3NErwy2HNxBgRg=" crossorigin="anonymous"></script>
<!-- YouTube Playback Technology for Video.js (https://github.com/videojs/videojs-youtube) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/3.0.1/Youtube.min.js" integrity="sha256-+SwQNzTQ40nndu5fxHxh+yHLc1/sK3NErwy2HNxBgRg=" crossorigin="anonymous"></script>

<script>
var player = videojs('pitch-video');
</script>
</section>
<script>
var player = videojs('pitch-video');
</script>
</section>

0 comments on commit 34c6c1a

Please sign in to comment.