mirror of
https://github.com/Starlio-app/Starlio-web.git
synced 2024-11-22 00:36:20 +03:00
I wrote the js code to change the image
This commit is contained in:
parent
c300125c94
commit
2478b6907e
2 changed files with 162 additions and 0 deletions
108
static/css/wallpaper.css
Normal file
108
static/css/wallpaper.css
Normal file
|
|
@ -0,0 +1,108 @@
|
||||||
|
body {
|
||||||
|
background: #153E3F;
|
||||||
|
color: white;
|
||||||
|
font-family: 'Roboto', serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 0) {
|
||||||
|
.wallpaper img {
|
||||||
|
width: 90%;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 0 auto 0 auto;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wallpaper h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
font-size: 110%;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
font-size: 125%;
|
||||||
|
line-height: 32px;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wallpaper-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.get-it-on {
|
||||||
|
display: flex;
|
||||||
|
margin: 5% auto 3% auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.get-it-on {
|
||||||
|
display: flex;
|
||||||
|
margin: 5% auto 3% auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
font-size: 150%;
|
||||||
|
line-height: 39px;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
font-size: 125%;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.desc {
|
||||||
|
font-size: 200%;
|
||||||
|
line-height: 45px;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
font-size: 150%;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wallpaper h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 250%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.wallpaper img {
|
||||||
|
width: 40%;
|
||||||
|
border-radius: 8px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wallpaper-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
font-size: 150%;
|
||||||
|
line-height: 36px;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
font-size: 120%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
54
wallapaper.html
Normal file
54
wallapaper.html
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Starlio</title>
|
||||||
|
<link rel="icon" href="/static/image/favicon.png">
|
||||||
|
|
||||||
|
<meta name="author" content="Redume, Murzify">
|
||||||
|
<meta name="description" content="Amazing wallpaper straight from space!">
|
||||||
|
<meta name="keywords" content="nasa, space, wallpaper, auto change wallpaper, starlio">
|
||||||
|
|
||||||
|
<meta name="theme-color" content="#2F3041">
|
||||||
|
|
||||||
|
<meta property="og:title" content="Starlio">
|
||||||
|
<meta property="og:description" content="Amazing wallpaper straight from space!">
|
||||||
|
<meta property="og:image" content="/static/image/favicon.png">
|
||||||
|
<meta property="og:url" content="https://starlio.space">
|
||||||
|
|
||||||
|
<meta property="twitter:title" content="Starlio">
|
||||||
|
<meta property="twitter:description" content="Amazing wallpaper straight from space!">
|
||||||
|
<meta property="twitter:image" content="/static/image/favicon.png">
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://starlio.space/">
|
||||||
|
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="static/css/wallpaper.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="wallpaper">
|
||||||
|
<img alt="Jones-Emberson 1" src="https://apod.nasa.gov/apod/image/2301/RockyArchAurora_Pellegrini_1330.jpg">
|
||||||
|
<div class="wallpaper-text">
|
||||||
|
<div class="wallpaper-desc">
|
||||||
|
<h1>Spiral Aurora over Iceland</h1>
|
||||||
|
<p class="copyright">Image Credit & Copyright: Stefano Pellegrini</p>
|
||||||
|
<p class="desc"> The scene may look like a fantasy, but it's really Iceland. The rock arch is named Gatklettur and located on the island's northwest coast. Some of the larger rocks in the foreground span a meter across. The fog over the rocks is really moving waves averaged over long exposures. The featured image is a composite of several foreground and background shots taken with the same camera and from the same location on the same night last November. The location was picked for its picturesque foreground, but the timing was planned for its colorful background: aurora. The spiral aurora, far behind the arch, was one of the brightest seen in the astrophotographer's life. The coiled pattern was fleeting, though, as auroral patterns waved and danced for hours during the cold night. Far in the background were the unchanging stars, with Earth's rotation causing them to appear to slowly circle the sky's northernmost point near Polaris.</p>
|
||||||
|
</div>
|
||||||
|
<div class="get-it-on">
|
||||||
|
<a href='https://play.google.com/store/apps/details?id=ru.murzify.everynasa'>
|
||||||
|
<img src='static/image/get-it-on-gp.png' alt='Get it on Google Play'>
|
||||||
|
</a>
|
||||||
|
<a href="https://github.com/Starlio-app/Starlio">
|
||||||
|
<img src="static/image/get-it-on-github.png" alt="Get it on Github">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="static/script/wallpaperLoad.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Reference in a new issue