comunes/todos-contra-el-fuego-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Gkey improved. New pages. Home improved based in startbootstrap

Browse source
This commit is contained in:
vjrj 2017-12-10 03:32:12 +01:00
parent 6497278755
commit b6b8f893e3
19 changed files with 782 additions and 269 deletions
Download patch file Download diff file Expand all files Collapse all files

123
imports/ui/pages/Index/Index.js
View file

@ -1,11 +1,13 @@
import React, {Component} from 'react';
import { Button } from 'react-bootstrap';
import { translate } from 'react-i18next';
import { translate, Trans } from 'react-i18next';
import {render} from 'react-dom';
import { Link } from 'react-router-dom';
// https://www.npmjs.com/package/react-resize-detector
import ReactResizeDetector from 'react-resize-detector';
import FiresMap from '../FiresMap/FiresMap';
import FireSubscription from '/imports/ui/pages/FireSubscription/FireSubscription';
import './new-age.js';
import './Index.scss';
import './Index-custom.scss';
@ -121,6 +123,125 @@ class Index extends Component {
</div>
</section>
<section className="download bg-primary text-center" id="download">
<div className="container">
<div className="row">
<div className="col-md-8 mx-auto">
<h2 className="section-heading">Discover what all the buzz is about!</h2>
<p>Our app is available on any mobile device! Download now to get started!</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>Unlimited Features, Unlimited Fun</h2>
<p className="text-muted">Check out what you can do with this app theme!</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">
<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</Trans></p>
</div>
</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">
<div className="container">
<h2>Stop waiting.<br/>Start building.</h2>
<a href="#contact" className="btn btn-outline btn-xl js-scroll-trigger">Let's Get Started!</a>
</div>
</div>
<div className="overlay"></div>
</section>
<section className="contact bg-primary" id="contact">
<div className="container">
<h2>We
<i className="fa fa-heart"></i>
new friends!</h2>
<ul className="list-inline list-social">
<li className="list-inline-item social-twitter">
<a href="#">
<i className="fa fa-twitter"></i>
</a>
</li>
{/* <li className="list-inline-item social-facebook">
<a href="#">
<i className="fa fa-facebook"></i>
</a>
</li>
<li className="list-inline-item social-google-plus">
<a href="#">
<i className="fa fa-google-plus"></i>
</a>
</li> */}
</ul>
</div>
</section>
<section className="py-5">
<div className="container">
<FireSubscription history={this.props.history} />
</div>
</section>
<section className="py-5">
<div className="container">
<FiresMap />

42
imports/ui/pages/Index/new-age.js Normal file
View file

@ -0,0 +1,42 @@
(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