Skip to content

B
Backend Server
Commit be1809f8 authored by SpinShare's avatar SpinShare
Browse files
Options

added new client download page

parent c11ac0b3
Hide whitespace changes
Inline Side-by-side
Showing with 325 additions and 78 deletions
public/assets/css/client.css
View file @ be1809f8
.section-client {
display: flex;
justify-content: center;
align-items: center;
.section-client header {
background: rgba(0, 0, 0, 0.3);
padding: 50px;
}
.box {
width: 800px;
height: 400px;
display: grid;
grid-template-columns: 4fr 6fr;
background: rgba(255, 255, 255, 0.1);
border-radius: 6px;
padding-top: 150px;
padding-bottom: 25px;
background: linear-gradient(135deg, #fd2f85, #7a34ec);
position: relative;
text-align: center;
overflow: hidden;
}
.box .text {
.section-client header .title {
font-size: 32px;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 15px;
font-family: 'Oswald', sans-serif;
position: relative;
z-index: 2;
}
.section-client header .illustration {
position: absolute;
top: 20px;
margin: 0 auto;
margin-left: -240px;
width: 500px;
opacity: 0.3;
}
.section-client .description {
max-width: 700px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
margin: 0 auto;
margin-top: 50px;
padding: 25px;
line-height: 1.5em;
}
.section-client .downloads {
max-width: 700px;
margin: 0 auto;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr 1fr;
grid-gap: 15px;
margin-top: 25px;
}
.box .text .title {
letter-spacing: 0.25em;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
.section-client .downloads .download-button {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
border-radius: 4px;
color: inherit;
text-decoration: none;
transition: 0.2s ease-in-out transform;
display: grid;
grid-template-rows: 100px auto auto;
}
.box .text p {
margin: 0px;
line-height: 1.5em;
.section-client .downloads .download-button .icon {
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
}
.section-client .downloads .download-button .platform {
text-align: center;
font-size: 18px;
}
.box .text .actions .notice {
.section-client .downloads .download-button .details {
text-align: center;
opacity: 0.6;
margin-top: 15px;
font-size: 10px;
margin-top: 2px;
margin-bottom: 25px;
}
.box .illustration {
background: linear-gradient(135deg, #fd2f85, #7a34ec);
display: flex;
padding: 25px;
.section-client .downloads .download-button.download-button-disabled {
opacity: 0.3;
}
.section-client .downloads .download-button:not(.download-button-disabled):hover {
transform: scale(1.05);
}
.section-client .screenshots {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 15px;
max-width: 700px;
margin: 0 auto;
margin-top: 25px;
margin-bottom: 50px;
}
.section-client .screenshots img {
width: 100%;
transition: 0.2s ease-in-out transform;
cursor: pointer;
}
.section-client .screenshots img:hover {
transform: scale(1.1);
}
.section-client .lightbox {
position: fixed;
z-index: 100;
display: none;
justify-content: center;
align-items: center;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
cursor: pointer;
}
.section-client .lightbox.active {
display: flex;
animation-name: lightboxDim;
animation-duration: 0.15s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
.section-client .lightbox.active img {
animation-name: lightboxEntrance;
animation-duration: 0.2s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
.box .illustration img {
.section-client .lightbox img {
max-width: 80%;
max-height: 80%;
}
@keyframes lightboxDim {
from {
background: rgba(0, 0, 0, 0);
}
to {
background: rgba(0, 0, 0, 0.6);
}
}
@keyframes lightboxEntrance {
from {
transform: translate(0px, 80px);
}
to {
transform: translate(0px, 0px);
}
}
public/assets/css/client.less
View file @ be1809f8
.section-client {
display: flex;
justify-content: center;
align-items: center;
padding: 50px;
}
.box {
width: 800px;
height: 400px;
display: grid;
grid-template-columns: 4fr 6fr;
background: rgba(255,255,255,0.1);
border-radius: 6px;
overflow: hidden;
& .text {
padding: 25px;
display: grid;
grid-template-rows: auto 1fr auto;
grid-gap: 15px;
& header {
background: rgba(0,0,0,0.3);
padding: 50px;
padding-top: 150px;
padding-bottom: 25px;
background: linear-gradient(135deg, #fd2f85, #7a34ec);
position: relative;
text-align: center;
overflow: hidden;
& .title {
letter-spacing: 0.25em;
font-size: 14px;
font-weight: bold;
font-size: 32px;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 15px;
font-family: 'Oswald', sans-serif;
position: relative;
z-index: 2;
}
& p {
margin: 0px;
line-height: 1.5em;
& .illustration {
position: absolute;
top: 20px;
margin: 0 auto;
margin-left: -240px;
width: 500px;
opacity: 0.3;
}
& .actions {
& .notice {
}
& .description {
max-width: 700px;
background: rgba(255,255,255,0.1);
border-radius: 4px;
margin: 0 auto;
margin-top: 50px;
padding: 25px;
line-height: 1.5em;
}
& .downloads {
max-width: 700px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 15px;
margin-top: 25px;
& .download-button {
background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
border-radius: 4px;
color: inherit;
text-decoration: none;
transition: 0.2s ease-in-out transform;
display: grid;
grid-template-rows: 100px auto auto;
& .icon {
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
}
& .platform {
text-align: center;
font-size: 18px;
}
& .details {
text-align: center;
opacity: 0.6;
margin-top: 15px;
font-size: 10px;
margin-top: 2px;
margin-bottom: 25px;
}
&.download-button-disabled {
opacity: 0.3;
}
&:not(.download-button-disabled):hover {
transform: scale(1.05);
}
}
}
& .illustration {
background: linear-gradient(135deg, #fd2f85, #7a34ec);
display: flex;
padding: 25px;
& .screenshots {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 15px;
max-width: 700px;
margin: 0 auto;
margin-top: 25px;
margin-bottom: 50px;
& img {
width: 100%;
transition: 0.2s ease-in-out transform;
cursor: pointer;
&:hover {
transform: scale(1.1);
}
}
}
& .lightbox {
position: fixed;
z-index: 100;
display: none;
justify-content: center;
align-items: center;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
cursor: pointer;
&.active {
display: flex;
animation-name: lightboxDim;
animation-duration: 0.15s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
& img {
animation-name: lightboxEntrance;
animation-duration: 0.2s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
}
& img {
max-width: 80%;
max-height: 80%;
}
}
}
@keyframes lightboxDim {
from {
background: rgba(0,0,0,0.0);
}
to {
background: rgba(0,0,0,0.6);
}
}
@keyframes lightboxEntrance {
from {
transform: translate(0px, 80px);
}
to {
transform: translate(0px, 0px);
}
}
\ No newline at end of file
src/Controller/IndexController.php
View file @ be1809f8
......@@ -73,8 +73,8 @@ class IndexController extends AbstractController
$getLatestWindows = $em->getRepository(ClientRelease::class)->findOneBy(array('platform' => 'win32'), array('majorVersion' => 'DESC', 'minorVersion' => 'DESC', 'patchVersion' => 'DESC'));
$getLatestMac = $em->getRepository(ClientRelease::class)->findOneBy(array('platform' => 'darwin'), array('majorVersion' => 'DESC', 'minorVersion' => 'DESC', 'patchVersion' => 'DESC'));
$data['latestWindows'] = $getLatestWindows->getFileReference();
$data['latestMac'] = $getLatestMac->getFileReference();
$data['latestWindows'] = $getLatestWindows;
$data['latestMac'] = $getLatestMac;
return $this->render('index/client.html.twig', $data);
}
......
templates/base.html.twig
View file @ be1809f8
......@@ -25,7 +25,7 @@
<nav>
<a class="item {% if app.request.attributes.get('_route') == 'index.index' %}active{% endif %}" href="{{ path('index.index') }}" title="Home"><i class="mdi mdi-home-outline"></i></a>
<a class="item {% if app.request.attributes.get('_route') == 'search.index' %}active{% endif %}" href="{{ path('search.index') }}" title="Search"><i class="mdi mdi-magnify"></i></a>
<a class="item {% if app.request.attributes.get('_route') == 'index.client' %}active{% endif %}" href="{{ path('index.client') }}" title="Download Client"><i class="mdi mdi-microsoft-windows"></i></a>
<a class="item {% if app.request.attributes.get('_route') == 'index.client' %}active{% endif %}" href="{{ path('index.client') }}" title="Download Client"><i class="mdi mdi-desktop-tower-monitor"></i></a>
<a class="item {% if app.request.attributes.get('_route') == 'index.support' %}active{% endif %}" href="{{ path('index.support') }}" title="Support"><i class="mdi mdi-hand-heart"></i></a>
<a class="item {% if app.request.attributes.get('_route') == 'index.legal' %}active{% endif %}" href="{{ path('index.legal') }}" title="Legal"><i class="mdi mdi-gavel"></i></a>
</nav>
......
templates/index/client.html.twig
View file @ be1809f8
......@@ -4,23 +4,80 @@
{% block content %}
<section class="section-client">
<div class="box">
<div class="text">
<div class="title">Download</div>
<p>Download the SpinSha.re client to easily install new songs from your drive or Spinsha.re itself!<br /><br />From downloading to extracting, our client installs custom songs for Spin Rhythm XD with just a click!</p>
<div class="actions">
<a href="{{ asset('uploads/client/' ~ latestWindows) }}" class="button">Windows</a>
<a href="{{ asset('uploads/client/' ~ latestMac) }}" class="button">Mac</a>
<div class="notice">Supported: Windows</div>
<header>
<div class="title">SpinShare Client Download</div>
<img src="{{ asset('assets/img/illustration-download.svg') }}" alt="Download Client Illustration" class="illustration" />
</header>
<div class="description">
Tired of maintaining your Spin Rhythm XD customs library? Download the SpinShare client to easily install new songs from your drive or Spinshare itself! From downloading to extracting, our client installs custom songs for Spin Rhythm XD with just a click!
</div>
<div class="downloads">
{% if latestWindows != null %}
<a href="{{ asset('uploads/client/' ~ latestWindows.fileReference) }}" class="download-button">
<div class="icon">
<i class="mdi mdi-microsoft-windows"></i>
</div>
<div class="platform">Windows</div>
<div class="details">Version {{ latestWindows.majorVersion }}.{{ latestWindows.minorVersion }}.{{ latestWindows.patchVersion }}</div>
</a>
{% else %}
<div class="download-button download-button-disabled">
<div class="icon">
<i class="mdi mdi-microsoft-windows"></i>
</div>
<div class="platform">Windows</div>
<div class="details">Unavailable</div>
</div>
</div>
<div class="illustration">
<img src="{{ asset('assets/img/illustration-download.svg') }}" alt="Download Client Illustration" />
</div>
{% endif %}
{% if latestMac != null %}
<a href="{{ asset('uploads/client/' ~ latestMac.fileReference) }}" class="download-button">
<div class="icon">
<i class="mdi mdi-apple-finder"></i>
</div>
<div class="platform">Mac OS X</div>
<div class="details">Version {{ latestMac.majorVersion }}.{{ latestMac.minorVersion }}.{{ latestMac.patchVersion }}</div>
</a>
{% else %}
<div class="download-button download-button-disabled">
<div class="icon">
<i class="mdi mdi-apple-finder"></i>
</div>
<div class="platform">Mac OS X</div>
<div class="details">Unavailable</div>
</div>
{% endif %}
</div>
<div class="screenshots">
<img src="{{ asset('assets/img/clientScreenshots/frontpage.png') }}" onclick="OpenInLightbox(this)" />
<img src="{{ asset('assets/img/clientScreenshots/detail.png') }}" onclick="OpenInLightbox(this)" />
<img src="{{ asset('assets/img/clientScreenshots/library.png') }}" onclick="OpenInLightbox(this)" />
<img src="{{ asset('assets/img/clientScreenshots/newsongs.png') }}" onclick="OpenInLightbox(this)" />
</div>
<div class="lightbox" onclick="CloseLightbox()">
</div>
</section>
{% endblock %}
{% block scripts %}
<script>
let DOMlightbox = document.querySelector(".lightbox");
function OpenInLightbox(DOMelement) {
DOMlightbox.innerHTML = "";
DOMlightbox.appendChild(DOMelement.cloneNode(true));
DOMlightbox.classList.add("active");
}
function CloseLightbox() {
DOMlightbox.innerHTML = "";
DOMlightbox.classList.remove("active");
}
</script>
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ asset('assets/css/client.css?v=' ~ date().timestamp) }}" />
{% endblock %}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment