redesign login page
This commit is contained in:
		
							parent
							
								
									56dbe0e4bf
								
							
						
					
					
						commit
						6ce3aa969f
					
				@ -23,19 +23,44 @@
 | 
			
		||||
 @import 'checkbox.css';
 | 
			
		||||
 | 
			
		||||
.login-page {
 | 
			
		||||
    height: auto;
 | 
			
		||||
    background: #303f9f;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.login-logo {
 | 
			
		||||
    color: white;
 | 
			
		||||
    font-weight: bold;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.login-copyright {
 | 
			
		||||
    color: white;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.login-copyright a, .login-copyright a:hover {
 | 
			
		||||
    color: white;
 | 
			
		||||
    font-weight: bold;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.particles-js-canvas-el {
 | 
			
		||||
    position: absolute;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.login-box, .register-box {
 | 
			
		||||
    width: 40%;
 | 
			
		||||
    max-width: 500px;
 | 
			
		||||
    margin: 7% auto;
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    margin: -180px 0 0 -180px;
 | 
			
		||||
    left: 50%;
 | 
			
		||||
    top: 50%;
 | 
			
		||||
    height: 360px;
 | 
			
		||||
    width: 360px;
 | 
			
		||||
    z-index: 100;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@media (max-width:768px) {
 | 
			
		||||
    .login-box, .register-box {
 | 
			
		||||
    .login-box {
 | 
			
		||||
        width: 90%;
 | 
			
		||||
        margin-top: 20px
 | 
			
		||||
        margin-top: 20px;
 | 
			
		||||
        margin: 5%;
 | 
			
		||||
        left: 0;
 | 
			
		||||
        top: 0;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -282,6 +307,7 @@ tr:hover + tr.server-description {
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    bottom: 5px;
 | 
			
		||||
    right: 10px;
 | 
			
		||||
    color: white;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
input.form-autocomplete-stop[readonly] {
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										110
									
								
								public/themes/pterodactyl/vendor/particlesjs/particles.json
									
									
									
									
										vendored
									
									
										Normal file
									
								
							
							
						
						
									
										110
									
								
								public/themes/pterodactyl/vendor/particlesjs/particles.json
									
									
									
									
										vendored
									
									
										Normal file
									
								
							@ -0,0 +1,110 @@
 | 
			
		||||
{
 | 
			
		||||
  "particles": {
 | 
			
		||||
    "number": {
 | 
			
		||||
      "value": 80,
 | 
			
		||||
      "density": {
 | 
			
		||||
        "enable": true,
 | 
			
		||||
        "value_area": 800
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "color": {
 | 
			
		||||
      "value": "#ffffff"
 | 
			
		||||
    },
 | 
			
		||||
    "shape": {
 | 
			
		||||
      "type": "circle",
 | 
			
		||||
      "stroke": {
 | 
			
		||||
        "width": 0,
 | 
			
		||||
        "color": "#000000"
 | 
			
		||||
      },
 | 
			
		||||
      "polygon": {
 | 
			
		||||
        "nb_sides": 5
 | 
			
		||||
      },
 | 
			
		||||
      "image": {
 | 
			
		||||
        "src": "img/github.svg",
 | 
			
		||||
        "width": 100,
 | 
			
		||||
        "height": 100
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "opacity": {
 | 
			
		||||
      "value": 0.40246529723245905,
 | 
			
		||||
      "random": false,
 | 
			
		||||
      "anim": {
 | 
			
		||||
        "enable": false,
 | 
			
		||||
        "speed": 1,
 | 
			
		||||
        "opacity_min": 0.1,
 | 
			
		||||
        "sync": false
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "size": {
 | 
			
		||||
      "value": 1,
 | 
			
		||||
      "random": true,
 | 
			
		||||
      "anim": {
 | 
			
		||||
        "enable": false,
 | 
			
		||||
        "speed": 40,
 | 
			
		||||
        "size_min": 0.1,
 | 
			
		||||
        "sync": false
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "line_linked": {
 | 
			
		||||
      "enable": true,
 | 
			
		||||
      "distance": 150,
 | 
			
		||||
      "color": "#ffffff",
 | 
			
		||||
      "opacity": 0.4,
 | 
			
		||||
      "width": 1
 | 
			
		||||
    },
 | 
			
		||||
    "move": {
 | 
			
		||||
      "enable": true,
 | 
			
		||||
      "speed": 5,
 | 
			
		||||
      "direction": "none",
 | 
			
		||||
      "random": false,
 | 
			
		||||
      "straight": false,
 | 
			
		||||
      "out_mode": "out",
 | 
			
		||||
      "bounce": false,
 | 
			
		||||
      "attract": {
 | 
			
		||||
        "enable": false,
 | 
			
		||||
        "rotateX": 600,
 | 
			
		||||
        "rotateY": 1200
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  "interactivity": {
 | 
			
		||||
    "detect_on": "canvas",
 | 
			
		||||
    "events": {
 | 
			
		||||
      "onhover": {
 | 
			
		||||
        "enable": true,
 | 
			
		||||
        "mode": "repulse"
 | 
			
		||||
      },
 | 
			
		||||
      "onclick": {
 | 
			
		||||
        "enable": false,
 | 
			
		||||
        "mode": "repulse"
 | 
			
		||||
      },
 | 
			
		||||
      "resize": true
 | 
			
		||||
    },
 | 
			
		||||
    "modes": {
 | 
			
		||||
      "grab": {
 | 
			
		||||
        "distance": 400,
 | 
			
		||||
        "line_linked": {
 | 
			
		||||
          "opacity": 1
 | 
			
		||||
        }
 | 
			
		||||
      },
 | 
			
		||||
      "bubble": {
 | 
			
		||||
        "distance": 400,
 | 
			
		||||
        "size": 40,
 | 
			
		||||
        "duration": 2,
 | 
			
		||||
        "opacity": 8,
 | 
			
		||||
        "speed": 3
 | 
			
		||||
      },
 | 
			
		||||
      "repulse": {
 | 
			
		||||
        "distance": 200,
 | 
			
		||||
        "duration": 0.4
 | 
			
		||||
      },
 | 
			
		||||
      "push": {
 | 
			
		||||
        "particles_nb": 4
 | 
			
		||||
      },
 | 
			
		||||
      "remove": {
 | 
			
		||||
        "particles_nb": 2
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  "retina_detect": true
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										9
									
								
								public/themes/pterodactyl/vendor/particlesjs/particles.min.js
									
									
									
									
										vendored
									
									
										Normal file
									
								
							
							
						
						
									
										9
									
								
								public/themes/pterodactyl/vendor/particlesjs/particles.min.js
									
									
									
									
										vendored
									
									
										Normal file
									
								
							
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							@ -47,23 +47,31 @@
 | 
			
		||||
            <![endif]-->
 | 
			
		||||
        @show
 | 
			
		||||
    </head>
 | 
			
		||||
    <body class="hold-transition login-page">
 | 
			
		||||
    <body id="particles-js" class="hold-transition login-page" style="background: #303f9f;">
 | 
			
		||||
        <div class="login-box">
 | 
			
		||||
            <div class="login-logo">
 | 
			
		||||
                {{ Settings::get('company', 'Pterodactyl') }}
 | 
			
		||||
            </div>
 | 
			
		||||
            @yield('content')
 | 
			
		||||
            <p class="small text-muted">
 | 
			
		||||
            <p class="small login-copyright text-center">
 | 
			
		||||
                Copyright © 2015 - {{ date('Y') }} <a href="https://pterodactyl.io/" target="_blank">Pterodactyl Software</a>.<br />
 | 
			
		||||
            </p>
 | 
			
		||||
            <div class="login-corner-info muted small">
 | 
			
		||||
                <strong><i class="fa fa-fw {{ $appIsGit ? 'fa-git-square' : 'fa-code-fork' }}"></i></strong> {{ $appVersion }}<br />
 | 
			
		||||
                <strong><i class="fa fa-fw fa-clock-o"></i></strong> {{ round(microtime(true) - LARAVEL_START, 3) }}s
 | 
			
		||||
            </div>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="login-corner-info small">
 | 
			
		||||
            <strong><i class="fa fa-fw {{ $appIsGit ? 'fa-git-square' : 'fa-code-fork' }}"></i></strong> {{ $appVersion }}<br />
 | 
			
		||||
            <strong><i class="fa fa-fw fa-clock-o"></i></strong> {{ round(microtime(true) - LARAVEL_START, 3) }}s
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
        {!! Theme::js('vendor/jquery/jquery.min.js') !!}
 | 
			
		||||
        {!! Theme::js('vendor/bootstrap/bootstrap.min.js') !!}
 | 
			
		||||
        {!! Theme::js('js/autocomplete.js') !!}
 | 
			
		||||
        {!! Theme::js('vendor/particlesjs/particles.min.js') !!}
 | 
			
		||||
        <script type="text/javascript">
 | 
			
		||||
            /* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
 | 
			
		||||
            $(function () {
 | 
			
		||||
                particlesJS.load('particles-js', '{!! Theme::url('vendor/particlesjs/particles.json') !!}', function() {});
 | 
			
		||||
            })
 | 
			
		||||
        </script>
 | 
			
		||||
 | 
			
		||||
        @if(config('pterodactyl.lang.in_context')) {!! Theme::js('vendor/phraseapp/phraseapp.js') !!} @endif
 | 
			
		||||
    </body>
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user