forked from mirror/pixelfed
317 lines
50 KiB
Vue
317 lines
50 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<section class="container">
|
||
|
|
<div class="row py-5 mb-5">
|
||
|
|
<div class="col-12 col-md-6 d-none d-md-block">
|
||
|
|
<div class="m-4 text-right" style="position: absolute;">
|
||
|
|
<div v-if="!loading" class="marvel-device note8" style="position: absolute;zoom: 0.66;z-index:10;">
|
||
|
|
<div class="inner"></div>
|
||
|
|
<div class="overflow">
|
||
|
|
<div class="shadow"></div>
|
||
|
|
</div>
|
||
|
|
<div class="speaker"></div>
|
||
|
|
<div class="sensors"></div>
|
||
|
|
<div class="more-sensors"></div>
|
||
|
|
<div class="sleep"></div>
|
||
|
|
<div class="volume"></div>
|
||
|
|
<div class="camera"></div>
|
||
|
|
<div class="screen">
|
||
|
|
<img src="/img/landing/android_1.jpg" class="img-fluid">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="marvel-device iphone-x" style="position: absolute;zoom:0.66;z-index: 20;margin: 99px 0 0 151px;">
|
||
|
|
<div class="notch">
|
||
|
|
<div class="camera"></div>
|
||
|
|
<div class="speaker"></div>
|
||
|
|
</div>
|
||
|
|
<div class="top-bar"></div>
|
||
|
|
<div class="sleep"></div>
|
||
|
|
<div class="bottom-bar"></div>
|
||
|
|
<div class="volume"></div>
|
||
|
|
<div class="overflow">
|
||
|
|
<div class="shadow shadow--tr"></div>
|
||
|
|
<div class="shadow shadow--tl"></div>
|
||
|
|
<div class="shadow shadow--br"></div>
|
||
|
|
<div class="shadow shadow--bl"></div>
|
||
|
|
</div>
|
||
|
|
<div class="inner-shadow"></div>
|
||
|
|
<div class="screen">
|
||
|
|
<div id="iosDevice">
|
||
|
|
<img v-if="!loading" src="/img/landing/ios_4.jpg" class="img-fluid">
|
||
|
|
<img v-if="!loading" src="/img/landing/ios_3.jpg" class="img-fluid">
|
||
|
|
<img v-if="!loading" src="/img/landing/ios_2.jpg" class="img-fluid">
|
||
|
|
<img src="/img/landing/ios_1.jpg" class="img-fluid">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 col-md-5 offset-md-1">
|
||
|
|
<div>
|
||
|
|
<div class="card my-4">
|
||
|
|
<div class="card-body px-lg-5">
|
||
|
|
<div class="text-center pt-3">
|
||
|
|
<img src="/img/pixelfed-icon-color.svg">
|
||
|
|
</div>
|
||
|
|
<div class="py-3 text-center">
|
||
|
|
<h3 class="font-weight-bold">Pixelfed</h3>
|
||
|
|
<p class="mb-0 lead">Photo sharing for everyone</p>
|
||
|
|
</div>
|
||
|
|
<div v-if="loading == true" class="text-center" style="min-height: 350px;">
|
||
|
|
<div class="spinner-border" role="status">
|
||
|
|
<span class="sr-only">Loading...</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-if="loading == false">
|
||
|
|
<form v-if="nodeinfo.openRegistrations == true" class="px-1">
|
||
|
|
<div class="form-group row">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<input type="text" class="form-control" v-model="form.name" placeholder="Name" required autofocus>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group row">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<input type="text" class="form-control" v-model="form.username" placeholder="Username" required autocomplete="off">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group row">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<input type="text" class="form-control" v-model="form.email" placeholder="E-Mail Address" requiredautocomplete="off">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group row">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<input type="password" class="form-control" v-model="form.password" placeholder="Password" required autocomplete="off">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group row">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<input type="password" class="form-control" v-model="form.passwordConfirmation" placeholder="Confirm Password" required autocomplete="off">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group row">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<button type="button" v-on:click="register" class="btn btn-primary btn-block py-0 font-weight-bold">
|
||
|
|
Register
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p class="mb-0 font-weight-bold text-lighter small">By signing up, you agree to our <a href="/site/terms" class="text-muted">Terms of Use</a> and <a href="/site/privacy" class="text-muted">Privacy Policy</a>.</p>
|
||
|
|
</form>
|
||
|
|
<div v-else style="min-height: 350px" class="d-flex justify-content-center align-items-center">
|
||
|
|
<div class="text-center">
|
||
|
|
<p class="lead">Registrations are closed.</p>
|
||
|
|
<p class="text-lighter small">You can find a list of other instances on <a href="https://the-federation.info/pixelfed" class="text-muted font-weight-bold">the-federation.info/pixelfed</a> or <a href="https://fediverse.network/pixelfed" class="text-muted font-weight-bold">fediverse.network/pixelfed</a></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-if="loading == false" class="card card-body">
|
||
|
|
<p class="text-center mb-0 font-weight-bold">Have an account? <a href="/login">Log in</a></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
import swal from 'sweetalert';
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
loading: true,
|
||
|
|
nodeinfo: [],
|
||
|
|
form: {
|
||
|
|
name: null,
|
||
|
|
username: null,
|
||
|
|
password: null,
|
||
|
|
passwordConfirmation: null,
|
||
|
|
email: null
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted() {
|
||
|
|
axios.get('/api/nodeinfo/2.0.json')
|
||
|
|
.then(res => {
|
||
|
|
this.loading = false;
|
||
|
|
this.nodeinfo = res.data;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
register() {
|
||
|
|
let form = this.form;
|
||
|
|
event.target.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div>';
|
||
|
|
event.target.setAttribute('disabled', '');
|
||
|
|
if(form.password !== form.passwordConfirmation) {
|
||
|
|
swal('Whoops!', 'The password and password confirmation fields do not match, please confirm your password and try again.', 'error');
|
||
|
|
event.target.innerHTML = 'Register';
|
||
|
|
event.target.removeAttribute('disabled');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
axios.post('/register', {
|
||
|
|
name: form.name,
|
||
|
|
username: form.username,
|
||
|
|
password: form.password,
|
||
|
|
email: form.email,
|
||
|
|
password_confirmation: form.passwordConfirmation
|
||
|
|
}).then(res => {
|
||
|
|
window.location.href = '/';
|
||
|
|
}).catch(err => {
|
||
|
|
event.target.innerHTML = 'Register';
|
||
|
|
event.target.removeAttribute('disabled');
|
||
|
|
console.log(err);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style type="text/css" scoped>
|
||
|
|
.container.slim {
|
||
|
|
width: auto;
|
||
|
|
max-width: 680px;
|
||
|
|
padding: 0 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes iosDeviceCarousel {
|
||
|
|
0% {
|
||
|
|
opacity:1;
|
||
|
|
}
|
||
|
|
17% {
|
||
|
|
opacity:1;
|
||
|
|
}
|
||
|
|
25% {
|
||
|
|
opacity:0;
|
||
|
|
}
|
||
|
|
92% {
|
||
|
|
opacity:0;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
opacity:1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes iosDeviceCarousel {
|
||
|
|
0% {
|
||
|
|
opacity:1;
|
||
|
|
}
|
||
|
|
17% {
|
||
|
|
opacity:1;
|
||
|
|
}
|
||
|
|
25% {
|
||
|
|
opacity:0;
|
||
|
|
}
|
||
|
|
92% {
|
||
|
|
opacity:0;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
opacity:1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-o-keyframes iosDeviceCarousel {
|
||
|
|
0% {
|
||
|
|
opacity:1;
|
||
|
|
}
|
||
|
|
17% {
|
||
|
|
opacity:1;
|
||
|
|
}
|
||
|
|
25% {
|
||
|
|
opacity:0;
|
||
|
|
}
|
||
|
|
92% {
|
||
|
|
opacity:0;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
opacity:1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes iosDeviceCarousel {
|
||
|
|
0% {
|
||
|
|
opacity:1;
|
||
|
|
}
|
||
|
|
17% {
|
||
|
|
opacity:1;
|
||
|
|
}
|
||
|
|
25% {
|
||
|
|
opacity:0;
|
||
|
|
}
|
||
|
|
92% {
|
||
|
|
opacity:0;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
opacity:1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#iosDevice {
|
||
|
|
position:relative;
|
||
|
|
margin:0 auto;
|
||
|
|
}
|
||
|
|
#iosDevice img {
|
||
|
|
position:absolute;
|
||
|
|
left:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#iosDevice img {
|
||
|
|
-webkit-animation-name: iosDeviceCarousel;
|
||
|
|
-webkit-animation-timing-function: ease-in-out;
|
||
|
|
-webkit-animation-iteration-count: infinite;
|
||
|
|
-webkit-animation-duration: 16s;
|
||
|
|
|
||
|
|
-moz-animation-name: iosDeviceCarousel;
|
||
|
|
-moz-animation-timing-function: ease-in-out;
|
||
|
|
-moz-animation-iteration-count: infinite;
|
||
|
|
-moz-animation-duration: 16s;
|
||
|
|
|
||
|
|
-o-animation-name: iosDeviceCarousel;
|
||
|
|
-o-animation-timing-function: ease-in-out;
|
||
|
|
-o-animation-iteration-count: infinite;
|
||
|
|
-o-animation-duration: 16s;
|
||
|
|
|
||
|
|
animation-name: iosDeviceCarousel;
|
||
|
|
animation-timing-function: ease-in-out;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
animation-duration: 16s;
|
||
|
|
}
|
||
|
|
#iosDevice img:nth-of-type(1) {
|
||
|
|
-webkit-animation-delay: 12s;
|
||
|
|
-moz-animation-delay: 12s;
|
||
|
|
-o-animation-delay: 12s;
|
||
|
|
animation-delay: 12s;
|
||
|
|
}
|
||
|
|
#iosDevice img:nth-of-type(2) {
|
||
|
|
-webkit-animation-delay: 8s;
|
||
|
|
-moz-animation-delay: 8s;
|
||
|
|
-o-animation-delay: 8s;
|
||
|
|
animation-delay: 8s;
|
||
|
|
}
|
||
|
|
#iosDevice img:nth-of-type(3) {
|
||
|
|
-webkit-animation-delay: 4s;
|
||
|
|
-moz-animation-delay: 4s;
|
||
|
|
-o-animation-delay: 4s;
|
||
|
|
animation-delay: 4s;
|
||
|
|
}
|
||
|
|
#iosDevice img:nth-of-type(4) {
|
||
|
|
-webkit-animation-delay: 0;
|
||
|
|
-moz-animation-delay: 0;
|
||
|
|
-o-animation-delay: 0;
|
||
|
|
animation-delay: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.marvel-device{display:inline-block;position:relative;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.marvel-device .screen{width:100%;position:relative;height:100%;z-index:3;background:white;overflow:hidden;display:block;border-radius:1px;-webkit-box-shadow:0 0 0 3px #111;box-shadow:0 0 0 3px #111}.marvel-device .top-bar,.marvel-device .bottom-bar{height:3px;background:black;width:100%;display:block}.marvel-device .middle-bar{width:3px;height:4px;top:0px;left:90px;background:black;position:absolute}.marvel-device.iphone8{width:375px;height:667px;padding:105px 24px;background:#d9dbdc;border-radius:56px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2)}.marvel-device.iphone8:before{width:calc(100% - 12px);height:calc(100% - 12px);position:absolute;top:6px;content:'';left:6px;border-radius:50px;background:#f8f8f8;z-index:1}.marvel-device.iphone8:after{width:calc(100% - 16px);height:calc(100% - 16px);position:absolute;top:8px;content:'';left:8px;border-radius:48px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;z-index:2}.marvel-device.iphone8 .home{border-radius:100%;width:68px;height:68px;position:absolute;left:50%;margin-left:-34px;bottom:22px;z-index:3;background:#303233;background:linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%)}.marvel-device.iphone8 .home:before{background:#f8f8f8;position:absolute;content:'';border-radius:100%;width:calc(100% - 8px);height:calc(100% - 8px);top:4px;left:4px}.marvel-device.iphone8 .top-bar{height:14px;background:#bfbfc0;position:absolute;top:68px;left:0}.marvel-device.iphone8 .bottom-bar{height:14px;background:#bfbfc0;position:absolute;bottom:68px;left:0}.marvel-device.iphone8 .sleep{position:absolute;top:190px;right:-4px;width:4px;height:66px;border-radius:0px 2px 2px 0px;background:#d9dbdc}.marvel-device.iphone8 .volume{position:absolute;left:-4px;top:188px;z-index:0;height:66px;width:4px;border-radius:2px 0px 0px 2px;background:#d9dbdc}.marvel-device.iphone8 .volume:before{position:absolute;left:2px;top:-78px;height:40px;width:2px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone8 .volume:after{position:absolute;left:0px;top:82px;height:66px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone8 .camera{background:#3c3d3d;width:12px;height:12px;position:absolute;top:24px;left:50%;margin-left:-6px;border-radius:100%;z-index:3}.marvel-device.iphone8 .sensor{background:#3c3d3d;width:16px;height:16px;position:absolute;top:49px;left:134px;z-index:3;border-radius:100%}.marvel-device.iphone8 .speaker{background:#292728;width:70px;height:6px;position:absolute;top:54px;left:50%;margin-left:-35px;border-radius:6px;z-index:3}.marvel-device.iphone8.gold{background:#f9e7d3}.marvel-device.iphone8.gold .top-bar,.marvel-device.iphone8.gold .bottom-bar{background:white}.marvel-device.iphone8.gold .sleep,.marvel-device.iphone8.gold .volume{background:#f9e7d3}.marvel-device.iphone8.gold .home{background:#cebba9;background:linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%)}.marvel-device.iphone8.black{background:#464646;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7)}.marvel-device.iphone8.black:before{background:#080808}.marvel-device.iphone8.black:after{-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121}.marvel-device.iphone8.black .top-bar,.marvel-device.iphone8.black .bottom-bar{background:#212121}.marvel-device.iphone8.black .volume,.marvel-device.iphone8.black .sleep{background:#464646}.marvel-device.iphone8.black .camera{background:#080808}.marvel-device.iphone8.black .home{background:#080808;background:linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%)}.marvel-device.iphone8.black .home:before{background:#080808}.marvel-device.iphone8.landscape{
|
||
|
|
</style>
|