mirror of
https://github.com/PeWu/topola-viewer.git
synced 2025-12-23 18:50:04 +00:00
Added logo and background image to the intro screen
This commit is contained in:
Przemek Wiech
parent
f6489a934d
commit
76880c2d41
@ -48,10 +48,22 @@ div.ui.errorPopup.message {
|
||||
}
|
||||
|
||||
div.ui.card.intro {
|
||||
width: 600px;
|
||||
width: 770px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.version {
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
|
||||
.backgroundImage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(topola.jpg);
|
||||
background-size: cover;
|
||||
background-position: 0% 20%;
|
||||
position: fixed;
|
||||
z-index: -100;
|
||||
filter: blur(8px) opacity(30%);
|
||||
-webkit-filter: blur(8px) opacity(30%);
|
||||
}
|
||||
|
||||
232
src/intro.tsx
232
src/intro.tsx
@ -1,6 +1,7 @@
|
||||
import * as queryString from 'query-string';
|
||||
import * as React from 'react';
|
||||
import {Card} from 'semantic-ui-react';
|
||||
import logo from './topola.jpg';
|
||||
import {Card, Grid, Image} from 'semantic-ui-react';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
import {Link} from 'react-router-dom';
|
||||
|
||||
@ -22,111 +23,128 @@ function formatBuildDate(dateString: string) {
|
||||
/** The intro page. */
|
||||
export function Intro() {
|
||||
return (
|
||||
<Card className="intro">
|
||||
<Card.Content>
|
||||
<Card.Header>
|
||||
<FormattedMessage
|
||||
id="intro.title"
|
||||
defaultMessage="Topola Genealogy Viewer"
|
||||
/>
|
||||
</Card.Header>
|
||||
</Card.Content>
|
||||
<Card.Content>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="intro.description"
|
||||
defaultMessage={
|
||||
'Topola Genealogy is a genealogy tree viewer that lets you' +
|
||||
' browse the structure of the family.'
|
||||
}
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="intro.instructions"
|
||||
defaultMessage={
|
||||
'Use the LOAD FROM URL or LOAD FROM FILE buttons above to load' +
|
||||
' a GEDCOM file. You can export a GEDCOM file from most of the' +
|
||||
' existing genealogy programs and web sites.'
|
||||
}
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="intro.examples"
|
||||
defaultMessage={
|
||||
'Here are some examples from the web that you can view:'
|
||||
}
|
||||
/>
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<GedcomLink
|
||||
url="http://genpol.com/module-Downloads-prep_hand_out-lid-32.html"
|
||||
text="Karol Wojtyła"
|
||||
/>{' '}
|
||||
(<FormattedMessage id="intro.from" defaultMessage="from" />{' '}
|
||||
<a href="http://genpol.com/module-Downloads-display-lid-32.html">
|
||||
GENPOL
|
||||
</a>
|
||||
)
|
||||
</li>
|
||||
<li>
|
||||
<GedcomLink
|
||||
url="https://webtreeprint.com/tp_downloader.php?path=famous_gedcoms/shakespeare.ged"
|
||||
text="Shakespeare"
|
||||
/>{' '}
|
||||
(<FormattedMessage id="intro.from" defaultMessage="from" />{' '}
|
||||
<a href="https://webtreeprint.com/tp_famous_gedcoms.php">
|
||||
webtreeprint.com
|
||||
</a>
|
||||
)
|
||||
</li>
|
||||
<li>
|
||||
<GedcomLink
|
||||
url="http://genealogyoflife.com/tng/gedcom/HarryPotter.ged"
|
||||
text="Harry Potter"
|
||||
/>{' '}
|
||||
(<FormattedMessage id="intro.from" defaultMessage="from" />{' '}
|
||||
<a href="http://famousfamilytrees.blogspot.com/">
|
||||
Famous Family Trees
|
||||
</a>
|
||||
)
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
<b>
|
||||
<FormattedMessage id="intro.privacy" defaultMessage="Privacy" />
|
||||
</b>
|
||||
:
|
||||
<FormattedMessage
|
||||
id="intro.privacy_note"
|
||||
defaultMessage={
|
||||
'When using the "load from file" option, this site does not' +
|
||||
' send your data anywhere and files loaded from disk do not' +
|
||||
' leave your computer. When using "load from URL", data is' +
|
||||
' passed through the {link} service to deal with an issue with' +
|
||||
' cross-site file loading in the browser (CORS).'
|
||||
}
|
||||
values={{
|
||||
link: (
|
||||
<a href="https://cors-anywhere.herokuapp.com/">cors-anywhere</a>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<p className="ui right aligned version">
|
||||
version: {formatBuildDate(process.env.REACT_APP_GIT_TIME!)} (
|
||||
<a
|
||||
href={`https://github.com/PeWu/topola-viewer/commit/${
|
||||
process.env.REACT_APP_GIT_SHA
|
||||
}`}
|
||||
>
|
||||
{process.env.REACT_APP_GIT_SHA}
|
||||
</a>
|
||||
)
|
||||
</p>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
<div id="content">
|
||||
<div className="backgroundImage" />
|
||||
<Card className="intro">
|
||||
<Card.Content>
|
||||
<Card.Header>
|
||||
<FormattedMessage
|
||||
id="intro.title"
|
||||
defaultMessage="Topola Genealogy Viewer"
|
||||
/>
|
||||
</Card.Header>
|
||||
</Card.Content>
|
||||
<Card.Content>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column width={5}>
|
||||
<Image src={logo} alt="Topola logo" />
|
||||
</Grid.Column>
|
||||
<Grid.Column width={11}>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="intro.description"
|
||||
defaultMessage={
|
||||
'Topola Genealogy is a genealogy tree viewer that lets you' +
|
||||
' browse the structure of the family.'
|
||||
}
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="intro.instructions"
|
||||
defaultMessage={
|
||||
'Use the LOAD FROM URL or LOAD FROM FILE buttons above to load' +
|
||||
' a GEDCOM file. You can export a GEDCOM file from most of the' +
|
||||
' existing genealogy programs and web sites.'
|
||||
}
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="intro.examples"
|
||||
defaultMessage={
|
||||
'Here are some examples from the web that you can view:'
|
||||
}
|
||||
/>
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<GedcomLink
|
||||
url="http://genpol.com/module-Downloads-prep_hand_out-lid-32.html"
|
||||
text="Karol Wojtyła"
|
||||
/>{' '}
|
||||
(<FormattedMessage id="intro.from" defaultMessage="from" />{' '}
|
||||
<a href="http://genpol.com/module-Downloads-display-lid-32.html">
|
||||
GENPOL
|
||||
</a>
|
||||
)
|
||||
</li>
|
||||
<li>
|
||||
<GedcomLink
|
||||
url="https://webtreeprint.com/tp_downloader.php?path=famous_gedcoms/shakespeare.ged"
|
||||
text="Shakespeare"
|
||||
/>{' '}
|
||||
(<FormattedMessage id="intro.from" defaultMessage="from" />{' '}
|
||||
<a href="https://webtreeprint.com/tp_famous_gedcoms.php">
|
||||
webtreeprint.com
|
||||
</a>
|
||||
)
|
||||
</li>
|
||||
<li>
|
||||
<GedcomLink
|
||||
url="http://genealogyoflife.com/tng/gedcom/HarryPotter.ged"
|
||||
text="Harry Potter"
|
||||
/>{' '}
|
||||
(<FormattedMessage id="intro.from" defaultMessage="from" />{' '}
|
||||
<a href="http://famousfamilytrees.blogspot.com/">
|
||||
Famous Family Trees
|
||||
</a>
|
||||
)
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
<b>
|
||||
<FormattedMessage
|
||||
id="intro.privacy"
|
||||
defaultMessage="Privacy"
|
||||
/>
|
||||
</b>
|
||||
{': '}
|
||||
<FormattedMessage
|
||||
id="intro.privacy_note"
|
||||
defaultMessage={
|
||||
'When using the "load from file" option, this site does not' +
|
||||
' send your data anywhere and files loaded from disk do not' +
|
||||
' leave your computer. When using "load from URL", data is' +
|
||||
' passed through the {link} service to deal with an issue with' +
|
||||
' cross-site file loading in the browser (CORS).'
|
||||
}
|
||||
values={{
|
||||
link: (
|
||||
<a href="https://cors-anywhere.herokuapp.com/">
|
||||
cors-anywhere
|
||||
</a>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<p className="ui right aligned version">
|
||||
version: {formatBuildDate(process.env.REACT_APP_GIT_TIME!)} (
|
||||
<a
|
||||
href={`https://github.com/PeWu/topola-viewer/commit/${
|
||||
process.env.REACT_APP_GIT_SHA
|
||||
}`}
|
||||
>
|
||||
{process.env.REACT_APP_GIT_SHA}
|
||||
</a>
|
||||
)
|
||||
</p>
|
||||
</Grid.Column>{' '}
|
||||
</Grid.Row>{' '}
|
||||
</Grid>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
BIN
src/topola.jpg
Normal file
BIN
src/topola.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Loading…
x
Reference in New Issue
Block a user