Improved home page
This commit is contained in:
vjrj
parent
441dfa4c62
commit
9fd889f77f
10 changed files with 282 additions and 335 deletions
|
|
@ -11,7 +11,7 @@ import NavItem from '../NavItem/NavItem';
|
|||
import './Navigation.scss';
|
||||
|
||||
const Navigation = props => (
|
||||
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<nav className="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
|
||||
<div className="container">
|
||||
{/* <Navbar bsClass="navbar navbar-dark bg-dark"> */}
|
||||
{/* https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Navbar.js */}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { translate } from 'react-i18next';
|
|||
import geolocation from '/imports/startup/client/geolocation';
|
||||
import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
|
||||
import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js';
|
||||
import 'leaflet-sleep/Leaflet.Sleep.js';
|
||||
import Control from 'react-leaflet-control';
|
||||
import { Button, ButtonToolbar } from 'react-bootstrap';
|
||||
import './SelectionMap.scss';
|
||||
|
|
@ -97,7 +98,14 @@ class SelectionMap extends Component {
|
|||
<div>
|
||||
{ this.state && this.state.center &&
|
||||
<Map center={this.state.center} zoom={this.state.zoom}
|
||||
ref={(map) => { this.selectionMap = map; }}>
|
||||
ref={(map) => { this.selectionMap = map; }}
|
||||
sleep={true}
|
||||
sleepTime={10750}
|
||||
wakeTime={750}
|
||||
sleepNote={true}
|
||||
hoverToWake={true}
|
||||
wakeMessage={this.props.t('Pulsa para activar')}
|
||||
sleepOpacity={.6}>
|
||||
<TileLayer
|
||||
attribution="&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors"
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import FireAlertsCollection from '../../../api/FireAlerts/FireAlerts';
|
|||
import UserSubsToFiresCollection from '../../../api/Subscriptions/Subscriptions';
|
||||
import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js';
|
||||
import { withTracker } from 'meteor/react-meteor-data';
|
||||
import 'leaflet-sleep/Leaflet.Sleep.js';
|
||||
import Loading from '../../components/Loading/Loading';
|
||||
import './FiresMap.scss';
|
||||
import Leaflet from 'leaflet';
|
||||
|
|
@ -263,13 +264,21 @@ class FiresMap extends React.Component {
|
|||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
// https://github.com/CliffCloud/Leaflet.Sleep
|
||||
<Map ref="fireMap"
|
||||
animate={true}
|
||||
minZoom={5}
|
||||
preferCanvas={true}
|
||||
onClick={this.onClickReset}
|
||||
viewport={this.state.viewport}
|
||||
onViewportChanged={this.onViewportChanged}>
|
||||
onViewportChanged={this.onViewportChanged}
|
||||
sleep={true}
|
||||
sleepTime={750}
|
||||
wakeTime={750}
|
||||
sleepNote={true}
|
||||
hoverToWake={true}
|
||||
wakeMessage={this.props.t('Pulsa para activar')}
|
||||
sleepOpacity={.6}>
|
||||
{/* http://wiki.openstreetmap.org/wiki/Tile_servers */}
|
||||
<TileLayer
|
||||
attribution="© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors"
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
}
|
||||
p {
|
||||
padding-top: 10px;
|
||||
font-size: 1.1em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,17 +2,18 @@ import React, {Component} from 'react';
|
|||
import { Button } from 'react-bootstrap';
|
||||
import { translate, Trans } from 'react-i18next';
|
||||
import {render} from 'react-dom';
|
||||
import { Link } from 'react-router-dom';
|
||||
// import { HashLink as Link } from 'react-router-hash-link';
|
||||
// import { Link } from 'react-router-dom';
|
||||
// https://www.npmjs.com/package/react-resize-detector
|
||||
import ReactResizeDetector from 'react-resize-detector';
|
||||
import {ScrollToTopOnMount, SectionsContainer, Section} from 'react-fullpage';
|
||||
import FiresMap from '../FiresMap/FiresMap';
|
||||
import FireSubscription from '/imports/ui/pages/FireSubscription/FireSubscription';
|
||||
// disabled import './new-age.js';
|
||||
|
||||
|
||||
import './Index.scss';
|
||||
import './Index-custom.scss';
|
||||
|
||||
|
||||
class Index extends Component {
|
||||
// Debounce by David Walsch
|
||||
// https://davidwalsh.name/javascript-debounce-function
|
||||
|
|
@ -55,167 +56,186 @@ class Index extends Component {
|
|||
this.myScaleFunction();
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
$('.carousel').carousel();
|
||||
}
|
||||
|
||||
render() {
|
||||
// https://github.com/subtirelumihail/react-fullpage
|
||||
let fullPageOptions = {
|
||||
activeClass: 'active', // the class that is appended to the sections links
|
||||
anchors: ['home', 'crowdsourcing', 'platforms', 'participe', 'fires'], // the anchors for each sections
|
||||
arrowNavigation: false, // use arrow keys (true after development)
|
||||
className: 'section-container', // the class name for the section container
|
||||
delay: 1000, // the scroll animation speed
|
||||
navigation: false, // use dots navigation
|
||||
scrollBar: false, // use the browser default scrollbar
|
||||
sectionClassName: 'section', // the section class name
|
||||
sectionPaddingTop: '0', // the section top padding
|
||||
sectionPaddingBottom: '0', // the section bottom padding
|
||||
verticalAlign: false // align the content of each section vertical
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="IndexDisabled full-width">
|
||||
{/* https://v4-alpha.getbootstrap.com/components/carousel/ */}
|
||||
<header>
|
||||
<ReactResizeDetector handleWidth handleHeight onResize={this._onResize} />
|
||||
<div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
|
||||
<ol className="carousel-indicators">
|
||||
<li data-target="#carouselExampleIndicators" data-slide-to="0" className="active"></li>
|
||||
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
|
||||
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
|
||||
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
|
||||
</ol>
|
||||
<div className="carousel-inner" role="listbox">
|
||||
|
||||
<div className="carousel-item carousel-item-1 active">
|
||||
<div className="slide-1-icon"></div>
|
||||
<div className="carousel-caption">
|
||||
<h3><i className="fa fa-map-pointer" aria-hidden="true"></i>Elige un lugar</h3>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
<ScrollToTopOnMount />
|
||||
<SectionsContainer className="container" {...fullPageOptions}>
|
||||
<Section>
|
||||
<header>
|
||||
<ReactResizeDetector handleWidth handleHeight onResize={this._onResize} />
|
||||
<div id="carouselExampleIndicators" className="carousel slide"
|
||||
ref="slides">
|
||||
<ol className="carousel-indicators">
|
||||
<li data-target="#carouselExampleIndicators" data-slide-to="0" className="active"></li>
|
||||
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
|
||||
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
|
||||
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
|
||||
</ol>
|
||||
<div className="carousel-inner" role="listbox">
|
||||
|
||||
<div className="carousel-item carousel-item-2">
|
||||
<div className="slide-2-icon"></div>
|
||||
<div className="carousel-caption">
|
||||
<h3><i className="fa fa-dot-circle-o" aria-hidden="true"></i>Elige un radio de vigilancia</h3>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="carousel-item carousel-item-1 active">
|
||||
<div className="slide-1-icon"></div>
|
||||
<div className="carousel-caption">
|
||||
<h3><i className="fa fa-map-pointer" aria-hidden="true"></i>Elige un lugar</h3>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="carousel-item carousel-item-3">
|
||||
<div className="slide-3-icon"></div>
|
||||
<div className="carousel-caption">
|
||||
<h3><i className="fa fa-podcast" aria-hidden="true"></i>Recibe alertas de fuegos en esa zona</h3>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="carousel-item carousel-item-2">
|
||||
<div className="slide-2-icon"></div>
|
||||
<div className="carousel-caption">
|
||||
<h3><i className="fa fa-dot-circle-o" aria-hidden="true"></i>Elige un radio de vigilancia</h3>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="carousel-item carousel-item-4">
|
||||
<div className="slide-4-icon"></div>
|
||||
<div className="carousel-caption">
|
||||
<h3><i className="fa fa-bell-o" aria-hidden="true"></i>Alerta cuando hay un fuego</h3>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
|
||||
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span className="sr-only">Previous</span>
|
||||
</a>
|
||||
<a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
|
||||
<span className="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span className="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
<div className="carousel-item carousel-item-3">
|
||||
<div className="slide-3-icon"></div>
|
||||
<div className="carousel-caption">
|
||||
<h3><i className="fa fa-podcast" aria-hidden="true"></i>Recibe alertas de fuegos en esa zona</h3>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="py-5">
|
||||
<div className="container">
|
||||
<div className="scale__container--js">
|
||||
<h1 id="tcefh1" className="scale--js">{this.props.t('AppName')}</h1>
|
||||
</div>
|
||||
<p>Siempre alerta a los fuegos en nuestro vecindario</p>
|
||||
<Link className="participe-btn btn btn-lg btn-warning" role="button" to="/signup">{this.props.t('Participa')}</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="download text-center bg-image-full" id="download">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-8 mx-auto">
|
||||
<h2 className="section-heading">Colaboración masiva contra los incendios</h2>
|
||||
<p><Trans>Imágenes capturadas por los satélites de la NASA muestran el humo de grandes incendios que se extienden sobre el Océano Pacífico. La actividad del fuego está delineada en rojo.</Trans></p>
|
||||
<div className="badges">
|
||||
<a className="badge-link" href="#"><img src="img/google-play-badge.svg" alt=""/></a>
|
||||
<a className="badge-link" href="#"><img src="img/app-store-badge.svg" alt=""/></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="features" id="features">
|
||||
<div className="container">
|
||||
<div className="section-heading text-center">
|
||||
<h2><Trans>Somos muchos ojos</Trans></h2>
|
||||
<p className="text-muted"><Trans>Usamos diferentes fuentes de datos para notificarte de fuegos activos en tus zonas de interés</Trans></p>
|
||||
<hr/>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-4 my-auto">
|
||||
<div className="device-container">
|
||||
<div className="device-mockup iphone6_plus portrait white">
|
||||
<div className="device">
|
||||
<div className="screen">
|
||||
{/* Demo image for screen mockup, you can put an image here, some HTML, an animation, video, or anything else! */}
|
||||
<img src="img/demo-screen-1.jpg" className="img-fluid" alt=""/>
|
||||
</div>
|
||||
<div className="button">
|
||||
{/* You can hook the "home button" to some JavaScript events or just remove it */}
|
||||
</div>
|
||||
<div className="carousel-item carousel-item-4">
|
||||
<div className="slide-4-icon"></div>
|
||||
<div className="carousel-caption">
|
||||
<h3><i className="fa fa-bell-o" aria-hidden="true"></i>Alerta cuando hay un fuego</h3>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
|
||||
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span className="sr-only">Previous</span>
|
||||
</a>
|
||||
<a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
|
||||
<span className="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span className="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="col-lg-8 my-auto">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<a className="feature-link"target="_blank" href="https://t.me/TodosContraElFuego_bot"><div className="feature-item">
|
||||
<i className="fa fa-telegram text-primary"></i>
|
||||
<h3>Telegram</h3>
|
||||
<p className="text-muted"><Trans>Usa nuestro bot de Telegram para estar al tanto de los fuegos en tus área</Trans></p>
|
||||
</div></a>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="feature-item">
|
||||
<i className="icon-envelope-open text-primary"></i>
|
||||
<h3><Trans>Correo electronico</Trans></h3>
|
||||
<p className="text-muted"><Trans>Recibe nuestras notificaciones de fuegos por correo</Trans></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="feature-item">
|
||||
<i className="icon-lock-open text-primary"></i>
|
||||
<h3>Open Source</h3>
|
||||
<p className="text-muted">Since this theme is MIT licensed, you can use it commercially!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="feature-item">
|
||||
<i className="icon-screen-smartphone text-primary"></i>
|
||||
<h3>Device Mockups</h3>
|
||||
<p className="text-muted">Ready to use HTML/CSS device mockups, no Photoshop required!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="cta">
|
||||
<div className="cta-content">
|
||||
</header>
|
||||
<section className="py-5">
|
||||
<div className="container">
|
||||
<FiresMap />
|
||||
<div className="scale__container--js">
|
||||
<h1 id="tcefh1" className="scale--js">{this.props.t('AppName')}</h1>
|
||||
</div>
|
||||
<p>Siempre alerta a los fuegos en nuestro vecindario</p>
|
||||
{/* <Link className="participe-btn btn btn-lg btn-warning" role="button" to="/#platforms">{this.props.t('Participa')}</Link> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="overlay"></div>
|
||||
</section>
|
||||
</section>
|
||||
</Section>
|
||||
|
||||
<section className="contact bg-primary" id="contact">
|
||||
<div className="container">
|
||||
<FireSubscription history={this.props.history} focusInput={false} />
|
||||
</div>
|
||||
</section>
|
||||
<Section className="crowd text-center bg-image-full">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-8 mx-auto">
|
||||
<h2 className="section-heading">Colaboración masiva contra los incendios</h2>
|
||||
<p><Trans>Imágenes capturadas por los satélites de la NASA muestran el humo de grandes incendios que se extienden sobre el Océano Pacífico. La actividad del fuego está delineada en rojo.</Trans></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<a id="join" name="join"></a>
|
||||
<Section className="platf">
|
||||
<div className="container">
|
||||
<div className="section-heading text-center">
|
||||
<h2><Trans>Somos muchos ojos</Trans></h2>
|
||||
<p className="text-muted"><Trans>Usamos diferentes fuentes de datos para notificarte de fuegos activos en tus zonas de interés</Trans></p>
|
||||
<hr/>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-4 my-auto">
|
||||
<div className="device-container">
|
||||
<div className="device-mockup iphone6_plus portrait white">
|
||||
<div className="device">
|
||||
<div className="screen">
|
||||
{/* Demo image for screen mockup, you can put an image here, some HTML, an animation, video, or anything else! */}
|
||||
<img src="img/demo-screen-1.jpg" className="img-fluid" alt=""/>
|
||||
</div>
|
||||
<div className="button">
|
||||
{/* You can hook the "home button" to some JavaScript events or just remove it */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-8 my-auto">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<a className="feature-link"target="_blank" href="https://t.me/TodosContraElFuego_bot"><div className="feature-item">
|
||||
<i className="fa fa-telegram text-primary"></i>
|
||||
<h3>Telegram</h3>
|
||||
<p className="text-muted"><Trans>Usa nuestro bot de Telegram para estar al tanto de los fuegos en tus área</Trans></p>
|
||||
</div></a>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="feature-item">
|
||||
<i className="icon-envelope-open text-primary"></i>
|
||||
<h3><Trans>Correo electronico</Trans></h3>
|
||||
<p className="text-muted"><Trans>Recibe nuestras notificaciones de fuegos por correo</Trans></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="feature-item">
|
||||
<i className="icon-lock-open text-primary"></i>
|
||||
<h3>Open Source</h3>
|
||||
<p className="text-muted">Since this theme is MIT licensed, you can use it commercially!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="feature-item">
|
||||
<i className="icon-screen-smartphone text-primary"></i>
|
||||
<h3>Device Mockups</h3>
|
||||
<p className="text-muted">Ready to use HTML/CSS device mockups, no Photoshop required!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section className="">
|
||||
<div className="container">
|
||||
<FireSubscription history={this.props.history} focusInput={false} />
|
||||
</div>
|
||||
<div className="overlay"></div>
|
||||
</Section>
|
||||
|
||||
<Section className="">
|
||||
<div className="container">
|
||||
<FiresMap />
|
||||
</div>
|
||||
</Section>
|
||||
</SectionsContainer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
(function($) {
|
||||
"use strict"; // Start of use strict
|
||||
|
||||
// Smooth scrolling using jQuery easing
|
||||
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
|
||||
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
|
||||
var target = $(this.hash);
|
||||
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
|
||||
if (target.length) {
|
||||
$('html, body').animate({
|
||||
scrollTop: (target.offset().top - 48)
|
||||
}, 1000, "easeInOutExpo");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Closes responsive menu when a scroll trigger link is clicked
|
||||
$('.js-scroll-trigger').click(function() {
|
||||
$('.navbar-collapse').collapse('hide');
|
||||
});
|
||||
|
||||
// Activate scrollspy to add active class to navbar items on scroll
|
||||
$('body').scrollspy({
|
||||
target: '#mainNav',
|
||||
offset: 54
|
||||
});
|
||||
|
||||
// Collapse Navbar
|
||||
/* var navbarCollapse = function() {
|
||||
* if ($("#mainNav").offset().top > 100) {
|
||||
* $("#mainNav").addClass("navbar-shrink");
|
||||
* } else {
|
||||
* $("#mainNav").removeClass("navbar-shrink");
|
||||
* }
|
||||
* };
|
||||
* // Collapse now if page is not at top
|
||||
* navbarCollapse();
|
||||
* // Collapse the navbar when page is scrolled
|
||||
* $(window).scroll(navbarCollapse); */
|
||||
|
||||
})(jQuery); // End of use strict
|
||||
|
|
@ -12,4 +12,6 @@
|
|||
|
||||
body {
|
||||
background-color: lighten($todos-palette5, 70%);
|
||||
/* for fixed header */
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,156 +46,46 @@ p {
|
|||
line-height: 1.5;
|
||||
margin-bottom: 20px; }
|
||||
|
||||
section {
|
||||
div.section.platf > div.container {
|
||||
padding: 100px 0; }
|
||||
section h2 {
|
||||
div.section h2 {
|
||||
font-size: 50px; }
|
||||
|
||||
#mainNav {
|
||||
border-color: rgba(34, 34, 34, 0.05);
|
||||
background-color: white;
|
||||
-webkit-transition: all .35s;
|
||||
-moz-transition: all .35s;
|
||||
transition: all .35s;
|
||||
font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
|
||||
font-weight: 200;
|
||||
letter-spacing: 1px; }
|
||||
#mainNav .navbar-brand {
|
||||
color: #fdcc52;
|
||||
font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
|
||||
font-weight: 200;
|
||||
letter-spacing: 1px; }
|
||||
#mainNav .navbar-brand:hover, #mainNav .navbar-brand:focus {
|
||||
color: #fcbd20; }
|
||||
#mainNav .navbar-toggler {
|
||||
font-size: 12px;
|
||||
padding: 8px 10px;
|
||||
color: #222222; }
|
||||
#mainNav .navbar-nav > li > a {
|
||||
font-size: 11px;
|
||||
font-family: 'Lato', 'Helvetica', 'Arial', 'sans-serif';
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase; }
|
||||
#mainNav .navbar-nav > li > a.active {
|
||||
color: #fdcc52 !important;
|
||||
background-color: transparent; }
|
||||
#mainNav .navbar-nav > li > a.active:hover {
|
||||
background-color: transparent; }
|
||||
#mainNav .navbar-nav > li > a,
|
||||
#mainNav .navbar-nav > li > a:focus {
|
||||
color: #222222; }
|
||||
#mainNav .navbar-nav > li > a:hover,
|
||||
#mainNav .navbar-nav > li > a:focus:hover {
|
||||
color: #fdcc52; }
|
||||
@media (min-width: 992px) {
|
||||
#mainNav {
|
||||
border-color: transparent;
|
||||
background-color: transparent; }
|
||||
#mainNav .navbar-brand {
|
||||
color: fade(white, 70%); }
|
||||
#mainNav .navbar-brand:hover, #mainNav .navbar-brand:focus {
|
||||
color: white; }
|
||||
#mainNav .navbar-nav > li > a,
|
||||
#mainNav .navbar-nav > li > a:focus {
|
||||
color: rgba(255, 255, 255, 0.7); }
|
||||
#mainNav .navbar-nav > li > a:hover,
|
||||
#mainNav .navbar-nav > li > a:focus:hover {
|
||||
color: white; }
|
||||
#mainNav.navbar-shrink {
|
||||
border-color: rgba(34, 34, 34, 0.1);
|
||||
background-color: white; }
|
||||
#mainNav.navbar-shrink .navbar-brand {
|
||||
color: #222222; }
|
||||
#mainNav.navbar-shrink .navbar-brand:hover, #mainNav.navbar-shrink .navbar-brand:focus {
|
||||
color: #fdcc52; }
|
||||
#mainNav.navbar-shrink .navbar-nav > li > a,
|
||||
#mainNav.navbar-shrink .navbar-nav > li > a:focus {
|
||||
color: #222222; }
|
||||
#mainNav.navbar-shrink .navbar-nav > li > a:hover,
|
||||
#mainNav.navbar-shrink .navbar-nav > li > a:focus:hover {
|
||||
color: #fdcc52; } }
|
||||
|
||||
header.masthead {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 150px;
|
||||
padding-bottom: 100px;
|
||||
color: white;
|
||||
background: url("../img/bg-pattern.png"), #7b4397;
|
||||
background: url("../img/bg-pattern.png"), -webkit-linear-gradient(to left, #7b4397, #dc2430);
|
||||
background: url("../img/bg-pattern.png"), linear-gradient(to left, #7b4397, #dc2430); }
|
||||
header.masthead .header-content {
|
||||
max-width: 500px;
|
||||
margin-bottom: 100px;
|
||||
text-align: center; }
|
||||
header.masthead .header-content h1 {
|
||||
font-size: 30px; }
|
||||
header.masthead .device-container {
|
||||
max-width: 325px;
|
||||
margin-right: auto;
|
||||
margin-left: auto; }
|
||||
header.masthead .device-container .screen img {
|
||||
border-radius: 3px; }
|
||||
@media (min-width: 992px) {
|
||||
header.masthead {
|
||||
height: 100vh;
|
||||
min-height: 775px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0; }
|
||||
header.masthead .header-content {
|
||||
margin-bottom: 0;
|
||||
text-align: left; }
|
||||
header.masthead .header-content h1 {
|
||||
font-size: 50px; }
|
||||
header.masthead .device-container {
|
||||
max-width: 325px; } }
|
||||
|
||||
section.download {
|
||||
div.section.crowd > div.container {
|
||||
position: relative;
|
||||
padding: 150px 0; }
|
||||
section.download h2 {
|
||||
div.section.crowd h2 {
|
||||
font-size: 50px;
|
||||
margin-top: 0; }
|
||||
section.download .badges .badge-link {
|
||||
display: block;
|
||||
margin-bottom: 25px; }
|
||||
section.download .badges .badge-link:last-child {
|
||||
margin-bottom: 0; }
|
||||
section.download .badges .badge-link img {
|
||||
height: 60px; }
|
||||
margin-top: 20px; }
|
||||
@media (min-width: 768px) {
|
||||
section.download .badges .badge-link {
|
||||
display: inline-block;
|
||||
margin-bottom: 0; } }
|
||||
@media (min-width: 768px) {
|
||||
section.download h2 {
|
||||
div.section.crowd h2 {
|
||||
font-size: 70px; } }
|
||||
|
||||
section.features .section-heading {
|
||||
div.section.platf .div.section-heading {
|
||||
margin-bottom: 100px; }
|
||||
section.features .section-heading h2 {
|
||||
div.section.platf .div.section-heading h2 {
|
||||
margin-top: 0; }
|
||||
section.features .section-heading p {
|
||||
div.section.platf .div.section-heading p {
|
||||
margin-bottom: 0; }
|
||||
|
||||
section.features .device-container,
|
||||
section.features .feature-item {
|
||||
div.section.platf .device-container,
|
||||
div.section.platf .feature-item {
|
||||
max-width: 325px;
|
||||
margin: 0 auto; }
|
||||
|
||||
section.features .device-container {
|
||||
div.section.platf .device-container {
|
||||
margin-bottom: 100px; }
|
||||
@media (min-width: 992px) {
|
||||
section.features .device-container {
|
||||
div.section.platf .device-container {
|
||||
margin-bottom: 0; } }
|
||||
|
||||
section.features .feature-item {
|
||||
div.section.platf .feature-item {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
text-align: center; }
|
||||
section.features .feature-item h3 {
|
||||
div.section.platf .feature-item h3 {
|
||||
font-size: 30px; }
|
||||
section.features .feature-item i {
|
||||
div.section.platf .feature-item i {
|
||||
font-size: 80px;
|
||||
display: block;
|
||||
margin-bottom: 15px;
|
||||
|
|
@ -204,7 +94,7 @@ section.features .feature-item i {
|
|||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent; }
|
||||
|
||||
section.cta {
|
||||
div.section.cta {
|
||||
position: relative;
|
||||
padding: 250px 0;
|
||||
background-image: url("../img/bg-cta.jpg");
|
||||
|
|
@ -213,19 +103,19 @@ section.cta {
|
|||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover; }
|
||||
section.cta .cta-content {
|
||||
div.section.cta .cta-content {
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
section.cta .cta-content h2 {
|
||||
div.section.cta .cta-content h2 {
|
||||
font-size: 50px;
|
||||
max-width: 450px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 25px;
|
||||
color: white; }
|
||||
@media (min-width: 768px) {
|
||||
section.cta .cta-content h2 {
|
||||
div.section.cta .cta-content h2 {
|
||||
font-size: 80px; } }
|
||||
section.cta .overlay {
|
||||
div.section.cta .overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -233,16 +123,16 @@ section.cta .overlay {
|
|||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); }
|
||||
|
||||
section.contact {
|
||||
div.section.contact {
|
||||
text-align: center; }
|
||||
section.contact h2 {
|
||||
div.section.contact h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 25px; }
|
||||
section.contact h2 i {
|
||||
div.section.contact h2 i {
|
||||
color: #dd4b39; }
|
||||
section.contact ul.list-social {
|
||||
div.section.contact ul.list-social {
|
||||
margin-bottom: 0; }
|
||||
section.contact ul.list-social li a {
|
||||
div.section.contact ul.list-social li a {
|
||||
font-size: 40px;
|
||||
line-height: 80px;
|
||||
display: block;
|
||||
|
|
@ -250,17 +140,17 @@ section.contact ul.list-social li a {
|
|||
height: 80px;
|
||||
color: white;
|
||||
border-radius: 100%; }
|
||||
section.contact ul.list-social li.social-twitter a {
|
||||
div.section.contact ul.list-social li.social-twitter a {
|
||||
background-color: #1da1f2; }
|
||||
section.contact ul.list-social li.social-twitter a:hover {
|
||||
div.section.contact ul.list-social li.social-twitter a:hover {
|
||||
background-color: #0d95e8; }
|
||||
section.contact ul.list-social li.social-facebook a {
|
||||
div.section.contact ul.list-social li.social-facebook a {
|
||||
background-color: #3b5998; }
|
||||
section.contact ul.list-social li.social-facebook a:hover {
|
||||
div.section.contact ul.list-social li.social-facebook a:hover {
|
||||
background-color: #344e86; }
|
||||
section.contact ul.list-social li.social-google-plus a {
|
||||
div.section.contact ul.list-social li.social-google-plus a {
|
||||
background-color: #dd4b39; }
|
||||
section.contact ul.list-social li.social-google-plus a:hover {
|
||||
div.section.contact ul.list-social li.social-google-plus a:hover {
|
||||
background-color: #d73925; }
|
||||
|
||||
.bg-primary {
|
||||
|
|
|
|||
57
package-lock.json
generated
57
package-lock.json
generated
|
|
@ -7342,6 +7342,11 @@
|
|||
"resolved": "https://registry.npmjs.org/leaflet-graphicscale/-/leaflet-graphicscale-0.0.2.tgz",
|
||||
"integrity": "sha1-q2INKJ6acETC9RB8g74XhDrsUwM="
|
||||
},
|
||||
"leaflet-sleep": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/leaflet-sleep/-/leaflet-sleep-0.5.1.tgz",
|
||||
"integrity": "sha1-kfhDPzjtu2uKm3jT0E7HOW6fYPY="
|
||||
},
|
||||
"leven": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/leven/-/leven-2.1.0.tgz",
|
||||
|
|
@ -9856,6 +9861,50 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"react-fullpage": {
|
||||
"version": "0.1.18",
|
||||
"resolved": "https://registry.npmjs.org/react-fullpage/-/react-fullpage-0.1.18.tgz",
|
||||
"integrity": "sha512-/pIl16rwWygUHzo7qKoQeNmtmBR37RLxaI3IlAyl0nK0ZiqmeqrH4tvlPbf/YO7kti9WfuiQcFEeoDLZ484NlQ==",
|
||||
"requires": {
|
||||
"react": "15.3.2",
|
||||
"react-dom": "15.3.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"js-tokens": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
|
||||
"integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
|
||||
},
|
||||
"loose-envify": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz",
|
||||
"integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=",
|
||||
"requires": {
|
||||
"js-tokens": "3.0.2"
|
||||
}
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
|
||||
},
|
||||
"react": {
|
||||
"version": "15.3.2",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-15.3.2.tgz",
|
||||
"integrity": "sha1-p7zNL+6K8SawMX4iLCjR1UUo0J4=",
|
||||
"requires": {
|
||||
"fbjs": "0.8.16",
|
||||
"loose-envify": "1.3.1",
|
||||
"object-assign": "4.1.1"
|
||||
}
|
||||
},
|
||||
"react-dom": {
|
||||
"version": "15.3.2",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.3.2.tgz",
|
||||
"integrity": "sha1-xGsKpTgNe4OOelnEp77/LtMVUx8="
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-i18next": {
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-7.1.1.tgz",
|
||||
|
|
@ -10035,6 +10084,14 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"react-router-hash-link": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router-hash-link/-/react-router-hash-link-1.1.1.tgz",
|
||||
"integrity": "sha1-c4DMeogJJD2UOFkkr1LcnSyfuqE=",
|
||||
"requires": {
|
||||
"prop-types": "15.6.0"
|
||||
}
|
||||
},
|
||||
"react-transition-group": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.2.1.tgz",
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
"leaflet": "^1.2.0",
|
||||
"leaflet-geodesy": "^0.2.1",
|
||||
"leaflet-graphicscale": "0.0.2",
|
||||
"leaflet-sleep": "^0.5.1",
|
||||
"lodash": "^4.17.4",
|
||||
"loms.perlin": "^1.0.1",
|
||||
"maxmind": "^2.3.0",
|
||||
|
|
@ -45,6 +46,7 @@
|
|||
"react-addons-pure-render-mixin": "^15.6.2",
|
||||
"react-bootstrap": "^0.31.5",
|
||||
"react-dom": "^16.0.0",
|
||||
"react-fullpage": "^0.1.18",
|
||||
"react-i18next": "^7.1.1",
|
||||
"react-leaflet": "^1.7.7",
|
||||
"react-leaflet-control": "^1.4.0",
|
||||
|
|
@ -52,6 +54,7 @@
|
|||
"react-resize-detector": "^1.1.0",
|
||||
"react-router-bootstrap": "^0.24.4",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-router-hash-link": "^1.1.1",
|
||||
"reactstrap": "^5.0.0-alpha.3",
|
||||
"simpl-schema": "^0.3.2",
|
||||
"simple-line-icons": "^2.4.1"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue