juni/junisaber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

some site copy

Browse Source
This commit is contained in:
Kevin Ngo
2018-10-02 05:34:09 -07:00
parent 738a90d688
commit a02a3dfa6d
2 changed files with 191 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
about/index.html
View File

@@ -1,134 +1,133 @@
<!DOCTYPE html>
<html>
<head>
<title>Super Saber</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
<title>Super Saber</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Beat Saber clone in WebVR by Supermedium">
<meta name="keywords" content="vr, webvr, beat, saber, aframe, play, game">
<meta name="og:title" content="Super Saber">
<meta name="og:image" content="https://supermedium.com/supersaber/assets/hero.jpg">
<meta name="og:description" content="Beat Saber clone in WebVR by Supermedium">
<meta property="og:url" content="https://supermedium.com/supersaber/">
<meta name="description" content="Beat Saber clone in WebVR by Supermedium">
<meta name="keywords" content="vr, webvr, beat, saber, aframe, play, game">
<meta name="og:title" content="Super Saber">
<meta name="og:image" content="https://supermedium.com/supersaber/assets/hero.jpg">
<meta name="og:description" content="Beat Saber clone in WebVR by Supermedium">
<meta property="og:url" content="https://supermedium.com/supersaber/">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="https://supermedium.com/supersaber">
<meta name="twitter:creator" content="@supermediumvr">
<meta name="twitter:title" content="Super Saber">
<meta name="twitter:description" content="Beat Saber clone in WebVR by Supermedium">
<meta name="twitter:image" content="https://supermedium.com/supersaber/assets/hero.jpg">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="https://supermedium.com/supersaber">
<meta name="twitter:creator" content="@supermediumvr">
<meta name="twitter:title" content="Super Saber">
<meta name="twitter:description" content="Beat Saber clone in WebVR by Supermedium">
<meta name="twitter:image" content="https://supermedium.com/supersaber/assets/hero.jpg">
<link rel="shortcut icon" href="assets/favicon.png" type="image/x-icon">
<link rel="shortcut icon" href="assets/favicon.png" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Teko:400,700" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Teko:400,700" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link rel="preload" href="assets/grid.jpg" as="image">
<link rel="preload" href="assets/sslogo.png" as="image">
<link rel="preload" href="assets/steamhover.png" as="image">
<link rel="preload" href="assets/oculushover.png" as="image">
<script type="text/javascript">
var lb;
function setupLb(){
lb = document.getElementById('lightbox');
var sshots = document.querySelectorAll('.screenshots>img');
for (var i = 0; i < sshots.length; i++){
sshots[i].addEventListener('click', showImg);
}
}
function showImg(ev){
lb.querySelector('img').src = ev.target.src;
lb.classList.add('opened');
}
function closeLb(){
lb.classList.remove('opened')
}
</script>
</head>
<body onload="setupLb()">
<div class="laser"></div>
<div id="lightbox" onclick="closeLb()"><img src=""></div>
<div id="all">
<img src="assets/supermedium-logo.png" class="imgfill headerglow">
<img src="assets/sslogo.png" class="imgfill">
<div id="video">
<img src="assets/sshot2.jpg">
</div>
<section>
<h1>
<span class="cyan">Now on </span><span class="pink"><img src="assets/supermedium.png" class="supermedium-h1"></span> <span class="pink">The&nbsp;Virtual&nbsp;Reality&nbsp;Browser</span>
</h1>
<div class="storebuttons">
<a href="https://www.oculus.com/experiences/rift/1629560483789871/"></a>
<a href="https://store.steampowered.com/app/803010/Supermedium__Virtual_Reality_Browser/"></a>
</div>
</section>
<section>
<p id="intro">
<img src="assets/sslogosmall.png">is a lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur et libero id interdum. Aenean id mauris cursus, fermentum lorem nec, congue nisi. Suspendisse semper vitae nisi a interdum. In finibus magna mi. Pellentesque sit amet diam dolor. Sed in venenatis magna.
</p>
<div class="screenshots">
<img src="assets/sshot1.jpg">
<img src="assets/sshot2.jpg">
<img src="assets/sshot3.jpg">
</div>
</section>
<section class="short">
<div id="features">
<div>
<h3 class="cyanglow">ONE COOL FEATURE</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<link rel="preload" href="assets/grid.jpg" as="image">
<link rel="preload" href="assets/sslogo.png" as="image">
<link rel="preload" href="assets/steamhover.png" as="image">
<link rel="preload" href="assets/oculushover.png" as="image">
</head>
<body>
<div class="laser"></div>
<div id="lightbox" onclick="closeLb()"><img src=""></div>
<div id="all">
<img src="assets/supermedium-logo.png" class="imgfill headerglow">
<img src="assets/sslogo.png" class="imgfill">
<div id="video">
<img src="assets/sshot2.jpg">
</div>
<div>
<h3 class="pinkglow">+2000 SONGS</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div>
<h3 class="cyanglow">JUST PLAY</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
<div class="screenshots">
<img src="assets/sshot4.jpg">
<img src="assets/sshot5.jpg">
<img src="assets/sshot6.jpg">
</div>
</section>
<section>
<h1>
<span class="cyan">Play now for free on </span><span class="pink"><img src="assets/supermedium.png" class="supermedium-h1"></span> <span class="pink">The&nbsp;Virtual&nbsp;Reality&nbsp;Browser</span>
</h1>
<section class="short">
<h2>How to Play</h2>
<ul>
<li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p></li>
<li><p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<li><p>Duis aute irure dolor in reprehenderit in voluptate velit esse proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></li>
</ul>
</section>
<div class="storebuttons">
<a href="https://www.oculus.com/experiences/rift/1629560483789871/"></a>
<a href="https://store.steampowered.com/app/803010/Supermedium__Virtual_Reality_Browser/"></a>
</div>
</section>
<section>
<h2 class="other">Other VR Games from Supermedium</h2>
<div class="screenshots">
<a href="http://supermedium.com/" title="Sound Boxing"><img src="assets/game1.jpg"></a>
<a href="https://supermedium.github.io/supersays/src/" title="Super Says"><img src="assets/game2.jpg"></a>
<a href="https://supermedium.com/blog/oasis" title="Gunters of Oasis"><img src="assets/game3.jpg"></a>
<section>
<p id="intro">
<img src="assets/sslogosmall.png">lets you search and play community-created Beat Saber songs from Beat Saver. You can play it for free via Supermedium where it loads in seconds, and you don't need to install any mods!</p>
<div class="screenshots">
<img src="assets/sshot1.jpg">
<img src="assets/sshot2.jpg">
<img src="assets/sshot3.jpg">
</div>
</section>
<section class="short">
<div id="features">
<div>
<h3 class="cyanglow">SLICE TO THE BEAT</h3>
<p>Just like in Beat Saber, swing your light sabers to the beat.</p>
</div>
<div>
<h3 class="pinkglow">+2500 SONGS</h3>
<p>Play from over 2500 community songs sourced from beatsaver.com!</p>
</div>
<div>
<h3 class="cyanglow">PLAY FOR FREE</h3>
<p>Super Saber instantly loads from start to finish in just seconds, no installs!</p>
</div>
</div>
<div class="screenshots">
<img src="assets/sshot4.jpg">
<img src="assets/sshot5.jpg">
<img src="assets/sshot6.jpg">
</div>
</section>
<section class="short">
<h2>How to Play</h2>
<ul>
<li><p>Have an HTC Vive or Oculus Rift</p></li>
<li><p>Install Supermedium from Steam or Oculus Store</p>
<li><p>Navigate to Super Saber from Supermedium</p></li>
</ul>
</section>
<section>
<h2 class="other">Other VR Games from Supermedium</h2>
<div class="screenshots">
<a href="http://supermedium.com/" title="Sound Boxing"><img src="assets/game1.jpg"></a>
<a href="https://supermedium.github.io/supersays/src/" title="Super Says"><img src="assets/game2.jpg"></a>
<a href="https://supermedium.com/blog/oasis" title="Gunters of Oasis"><img src="assets/game3.jpg"></a>
</div>
</section>
<footer>
<img src="assets/supermedium-logo.png" class="imgfill">
<div class="storebuttons">
<a href="https://www.oculus.com/experiences/rift/1629560483789871/"></a>
<a href="https://store.steampowered.com/app/803010/Supermedium__Virtual_Reality_Browser/"></a>
</div>
<p>
<br>
<b>Super Saber</b> is shamelessly based on <b>Beat Saber</b>, an original game from by the awesome team at <a href="http://www.hyperbolicmagnetism.com/">Hyperbolic Magnetism</a></p>
</footer>
</div>
</section>
<footer>
<img src="assets/supermedium-logo.png" class="imgfill">
<div class="storebuttons">
<a href="https://www.oculus.com/experiences/rift/1629560483789871/"></a>
<a href="https://store.steampowered.com/app/803010/Supermedium__Virtual_Reality_Browser/"></a>
</div>
<p>
<br>
<b>Beat Saber</b> is an original game by <a href="http://www.hyperbolicmagnetism.com/">Hyperbolic Magnetism</a>, and <b>Super Saber</b> is a clone made by fans in WebVR</p>
</footer>
</div>
</body>
</html>
<script type="text/javascript">
var lb;
function setupLb () {
lb = document.getElementById('lightbox');
const sshots = document.querySelectorAll('.screenshots>img');
for (let i = 0; i < sshots.length; i++){
sshots[i].addEventListener('click', showImg);
}
}
function showImg (ev) {
lb.querySelector('img').src = ev.target.src;
lb.classList.add('opened');
}
function closeLb () {
lb.classList.remove('opened')
}
setupLb();
</script>
</body>
</html>

137
about/style.css
View File

@@ -1,4 +1,4 @@
body{
body {
background: url(assets/grid.jpg);
background-size: 1920px auto;
background-position: center 0px;
@@ -8,7 +8,7 @@ body{
color: white;
line-height: 30px;
}
.laser{
.laser {
position: absolute;
width: 100%;
height: 407px;
@@ -18,7 +18,7 @@ body{
background-size: contain;
z-index: -1;
}
#lightbox{
#lightbox {
cursor: pointer;
position: fixed;
top: 0;
@@ -33,32 +33,32 @@ body{
justify-content: center;
transition: opacity 3s;
}
#lightbox.opened{
#lightbox.opened {
display: flex;
opacity: 1;
}
#lightbox img{
#lightbox img {
width: 100%;
max-width: 1000px;
border: 1px solid #005a83;
box-shadow: 0 0 25px rgba(144, 226, 222, 0.6);
}
#all{
#all {
width: 95%;
min-width: 360px;
max-width: 1000px;
margin: 0 auto;
}
.headerglow{
.headerglow {
background-image: url('assets/supermediumheader.png');
background-repeat: no-repeat;
background-size: contain;
}
.imgfill{
.imgfill {
width: 100%;
max-width: 1000px;
}
#video{
#video {
border: 1px solid #90e2de;
width: 100%;
max-width: 1000px;
@@ -67,42 +67,42 @@ body{
box-shadow: 0 0 40px rgba(144, 226, 222, 0.8);
}
#video img{
#video img {
width: 100%;
height: 100%;
}
b{
b {
color: #fff;
}
a{
a {
color: #4573D3;
}
a:hover{
a:hover {
color: #7EA8FF;
}
h1, h2, h3{
h1, h2, h3 {
font-family: 'Teko', sans-serif;
color: #fff;
margin: 0px 0 40px 0;
}
section{
section {
margin: 120px 0;
}
.short{
.short {
margin-bottom: 9px;
}
.short+section{
.short+section {
margin-top: 70px;
}
a{
a {
text-decoration: none;
}
h1{
h1 {
font-size: 57px;
font-weight: normal;
text-align: center;
}
h2{
h2 {
text-align: center;
font-size: 57px;
background: url('assets/h2.png');
@@ -115,40 +115,40 @@ h2{
margin: 0;
padding-top: 51px;
}
h2.other{
h2.other {
font-size: 50px;
}
.supermedium-h1{
.supermedium-h1 {
width: 400px;
min-width: 55%;
vertical-align: middle;
margin: 20px 0;
}
.cyan{
.cyan {
color: #68e0d3;
}
.pink{
.pink {
color: #ff7abc;
}
.cyanglow{
.cyanglow {
text-shadow: 0 0 12px #68e0d3;
}
.pinkglow{
.pinkglow {
text-shadow: 0 0 12px #ff7abc;
}
.storebuttons{
.storebuttons {
text-align: justify;
display: flex;
justify-content: space-between;
}
footer .storebuttons{
footer .storebuttons {
width: 50%;
margin: 0 auto;
height: 70px;
overflow: hidden;
}
.storebuttons a{
.storebuttons a {
display: inline-block;
width: 470px;
height: 137px;
@@ -157,134 +157,137 @@ footer .storebuttons{
background-repeat: no-repeat;
transition: transform 100ms, background-image 200ms;
}
.storebuttons a:hover{
.storebuttons a:hover {
background-image: url('assets/steamhover.png');
transform: scale(1.02, 1.02);
}
.storebuttons a:first-child{
.storebuttons a:first-child {
background-image: url('assets/oculus.png');
}
.storebuttons a:first-child:hover{
.storebuttons a:first-child:hover {
background-image: url('assets/oculushover.png');
}
#intro img{
#intro img {
width: 160px;
vertical-align: bottom;
}
ul{
ul {
margin: 0;
padding-left: 40px;
list-style: url('assets/bullet.png');
list-style-position: outside;
}
li p{
li p {
vertical-align: middle;
display: inline-block;
height: 50px;
}
#features {
#features {
display: flex;
justify-content: space-between;
}
#features>div{
#features>div {
width: 28%;
float: left;
text-align: center;
}
#features p{
#features p {
margin: 0;
}
footer{
footer {
margin: 100px 0;
font-size: 14px;
color: #aaa;
text-align: center;
}
.screenshots {
.screenshots {
margin-top: 40px;
display: flex;
justify-content: space-between;
}
.screenshots a{
.screenshots a {
width: 30%;
}
.screenshots img{
.screenshots img {
cursor: pointer;
border: 1px solid #005a83;
box-shadow: 0 0 18px rgba(144, 226, 222, 0.3);
width: 100%;
transition: box-shadow 120ms, border-color 120ms, transform 120ms;
}
.screenshots>img{
.screenshots>img {
max-height: 300px;
width: 30%;
}
.screenshots img:hover{
.screenshots img:hover {
box-shadow: 0 0 30px rgba(144, 226, 222, 0.8);
border-color: white;
transform: scale(1.02, 1.02);
}
h1 span{
h1 span {
display: block;
}
@media (max-width: 1070px) {
body, body:before{
@media (max-width: 1070px) {
body, body:before {
background-size: 200% auto;
}
.laser{
.laser {
top: 45vw;
}
section{
section {
margin: 10% 0;
}
#video{
#video {
margin: 5% auto;
}
.storebuttons a {
.storebuttons a {
width: 100%;
}
}
@media (max-width: 750px) {
h2.other{
@media (max-width: 750px) {
h2.other {
line-height: 1em;
padding-top: 90px;
padding-bottom: 10px;
}
footer .storebuttons{
footer .storebuttons {
width: 75%;
}
}
@media (max-width: 700px) {
.screenshots, #features{
@media (max-width: 700px) {
.screenshots, #features {
display: block;
}
.laser{
.laser {
display: none;
}
#features>div{
}
#features>div {
float: none;
width: 100%;
margin: 10% 0;
}
h3{
h3 {
margin-bottom: 3%;
}
.screenshots>img, .screenshots>a{
.screenshots>img, .screenshots>a {
display: block;
width: 100%;
margin: 5% 0;
}
}
@media (max-width: 400px) {
body, body:before{
@media (max-width: 400px) {
body, body:before {
background-size: 800px auto;
background-position: -220px 0px;
}
.laser{
.laser {
top: 80px;
}
}
}
}