Skip to content

Commit

Permalink
Merge pull request #36 from UFOMG/feature/animations
Browse files Browse the repository at this point in the history 
Feature/animations
  • Loading branch information
@mdflynn
mdflynn authored Feb 26, 2021
2 parents 85af386 + 83fed44 commit 19e511d
Show file tree
Hide file tree
Showing 3 changed files with 905 additions and 50 deletions.
278 changes: 253 additions & 25 deletions src/Components/MainPage/MainPage.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import "./MainPage.scss";
import ufoHover from '../../assets/ufo.png'
import { Link } from "react-router-dom";
import fetchSightings from "../../api";
import { useDispatch } from "react-redux";
Expand All @@ -13,34 +12,263 @@ const MainPage = () => {
fetchSightings(dispatch);
});






return (
<main className="main">
<div className="main-content">
<div id="app">
<div id="wrapper">
<h1 className="glitch" data-text="UFOMG">
UFOMG
</h1>
</div>
</div>
<div className="btn-container">
<div className="container">
<Link to="/sightings-map">
<div className="button mainBtns">
<span>Sightings</span>
<div className="main-content ">
<section className='content'>
<div class="scene">
<div class="ufoWrap">
<div class='center'>
<div class="ufoInner">
<div id='ufo'>
<ul class='blinkers'>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="dome"></div>
<div class="antigrav">
<div class="rings">
<div class="inner"></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

</ul>
</div>
</div>
<img src={ufoHover} className='submit ufoIcon'/>
</Link>
</div>
<div className="container">
<Link to="/report-form">
<div className="button mainBtns">
<span>Report Sighting</span>
<div class="thrust">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<img src={ufoHover} className='submit ufoIcon'/>
</Link>
</div>
</div>
</div>
</div>
</div>
<div class="foreground">
<ul class="trees3">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="trees2">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="trees1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="background">
<div class="stars">
<li class="small"></li>
<li class="small"></li>
<li></li>
<li class="small"></li>
<li class="small"></li>
<li></li>
<li></li>
<li></li>
<li class="small"></li>
<li></li>
<li></li>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
<li></li>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
<li></li>
<li class="small"></li>
<li class="small"></li>
<li></li>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="small"></li>
<li></li>
<li class="small"></li>
<li class="small"></li>
<li></li>
<li></li>
<li class="small"></li>
<li></li>
<li class="small"></li>
<li class="small"></li>
<li></li>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
<li></li>
<li></li>
</div>
</div>
</div>
<div class="camera">
<div class="battery">
<div class="juice"></div>
</div>
<div class="rec">
<span><span></span>REC</span>
</div>
<div class="meta">
<p>F2.3&nbsp;&nbsp;0dB&nbsp;&nbsp;15.7V
<span class="exposure">
<span class="plus">+</span>
<span class="minus">-</span>
</span>
</p>
</div>
<div class="timer">
<label id="hours">00</label>:
<label id="minutes">00</label>:
<label id="seconds">00</label>
</div>
</div>
<div id="app">
<div id="wrapper">
<h1 className="glitch" data-text="UFOMG">
UFOMG
</h1>
</div>
</div>
<div className="main-btns">
<Link to="/sightings-map">
<button className="btns">Sightings</button>
</Link>
<Link to="/report-form">
<button className="btns">Report Sighting</button>
</Link>
</div>
</section>
</div>
</main>
);
Expand Down
Loading

0 comments on commit 19e511d

Please sign in to comment.