Fixed some bugs and changed to SCSS (half complete)

This commit is contained in:
aggelosQQ 2017-01-02 19:22:45 +02:00
parent a9cd63ecc3
commit 065d16eeb2
11 changed files with 1036 additions and 286 deletions

View file

@ -1,294 +1,307 @@
.brand-logo,
* {
margin: 0;
padding: 0; }
body {
font-family: 'Raleway', sans-serif;
}
font-weight: 100;
color: #fff;
background: #222 url(../images/cover-1.png) center no-repeat fixed;
background-size: cover; }
#rules-title,
.button {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
z-index: 100
}
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
z-index: 100;
padding: 10px 55px;
background: rgba(255, 255, 255, 0.1);
color: #c8c8c8; }
#rules-title:hover,
.button:hover {
background: rgba(200, 200, 200, 0.2); }
#rules-title {
border-radius: 0px; }
.admins ul,
.cover-1,
.cover-2,
.cover-3 .section-title,
.rank {
text-align: center
}
* {
margin: 0;
padding: 0
}
body {
color: #fff;
background: url(../images/cover-1.png) center no-repeat fixed #222;
background-size: cover
}
text-align: center; }
.brand-logo {
margin-top: 5px;
margin-bottom: 5px
}
margin-bottom: 5px; }
.button-collapse {
margin-top: 5px;
margin-bottom: 10px
}
margin-bottom: 10px; }
.cover-1 {
font-size: 1.5em;
color: rgba(255, 255, 255, .4);
height: 100vh
}
color: rgba(255, 255, 255, 0.4);
height: 100vh; }
.cover-1 a,
.cover-1 h3 {
margin-top: 23%
}
.button {
padding: 15px 55px;
background: rgba(255, 255, 255, .1);
border-radius: 5px;
color: #c8c8c8;
transition: all .2s ease-in-out
}
.button:hover {
background: rgba(200, 200, 200, .2)
}
margin-top: 23%; }
.cover-2 {
background: url(../images/cover-2.png) center fixed;
background-size: cover;
height: auto;
padding-bottom: 40px
}
padding-bottom: 40px; }
.rule {
z-index: 100;
display: none;
padding: 30px
}
padding: 30px; }
#rules-title,
.admins > ul > a {
padding: 10px;
display: inline-block
}
display: inline-block; }
#rules-title {
font-size: 2.2em;
background: rgba(230, 230, 230, .1);
background: rgba(230, 230, 230, 0.1);
cursor: pointer;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
transition: all .2s ease-in-out
}
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease; }
#rules-title:hover {
background: rgba(210, 210, 210, 0.2); }
.admins > ul > a,
i.rules-icon {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out
}
#rules-title:hover {
background: rgba(210, 210, 210, .2)
}
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease; }
i.rules-icon {
position: relative;
float: right;
color: rgba(150, 150, 150, .3);
transition: all .2s ease-in-out
}
color: rgba(150, 150, 150, 0.3);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease; }
i.rules-icon:hover {
color: rgba(150, 150, 150, 1)
}
color: #969696; }
.cover-2 h2,
.cover-2 p {
width: 75%;
margin: 0 auto
}
margin: 0 auto; }
.cover-2 p {
font-size: 1.2em;
height: auto
}
height: auto; }
.section-title {
font-size: 4em;
color: rgba(255, 255, 255, .9);
z-index: 100
}
color: rgba(255, 255, 255, 0.9);
z-index: 100; }
.cover-3 {
background: url(../images/cover-3.png) no-repeat fixed;
background-size: cover
}
background-size: cover; }
.admins > ul > a {
margin: 5px;
background: rgba(0, 0, 0, .3);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
background: rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
border-radius: 150px;
z-index: 200;
}
z-index: 200; }
.admins > ul > a:hover {
background: rgba(100, 100, 100, .3);
transform: translateY(-4px);
}
background: rgba(100, 100, 100, 0.3);
transform: translateY(-4px); }
.admins ul {
z-index: 101
}
z-index: 101; }
.admins a li {
color: rgba(255, 255, 255, .5);
color: rgba(255, 255, 255, 0.5);
font-size: 1.2em;
z-index: 102
}
z-index: 102; }
.rank {
font-size: 2em;
z-index: 103
}
z-index: 103; }
.rest > li > a,
.useful a {
padding: 10px;
z-index: 100;
text-align: center;
}
text-align: center; }
.cover-1,
.cover-2,
.cover-3 {
border-bottom: 1px solid rgba(255, 255, 255, .2)
}
border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.rest > li > a {
font-size: 1.5em;
color: rgba(255, 255, 255, .6);
color: rgba(255, 255, 255, 0.6);
border-radius: 50px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out
}
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease; }
.rest > li > a:hover {
background: rgba(255, 255, 255, .2);
color: #fff
}
background: rgba(255, 255, 255, 0.2);
color: #fff; }
.rest > li {
margin-top: 50px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out
}
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease; }
.rest > li:hover {
transform: translateX(5px)
}
transform: translateX(5px); }
.useful a {
display: inline-block;
font-size: 1.2em;
color: rgba(255, 255, 255, .6);
border: 2px solid rgba(255, 255, 255, .6);
color: rgba(255, 255, 255, 0.6);
border: 2px solid rgba(255, 255, 255, 0.6);
margin-right: 10px;
border-radius: 50px;
width: 200px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
margin-bottom: 10px
}
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
margin-bottom: 10px; }
.useful > a > li > i {
font-size: 2em;
margin-bottom: 10px
}
margin-bottom: 10px; }
.useful a:hover {
background: rgba(255, 255, 255, .2);
background: rgba(255, 255, 255, 0.2);
color: #fff;
transform: translateY(-5px)
}
transform: translateY(-5px); }
#note {
text-align: center;
color: #ccc;
border-radius: 150px;
padding: 15px;
z-index: 1
}
z-index: 1; }
#note h5 {
margin-bottom: -20px
}
margin-bottom: -20px; }
#note a {
color: #c8c8c8;
font-weight: 700
}
font-weight: 700; }
.nav-wrapper {
background: rgba(0, 0, 0, .3)
}
background: rgba(0, 0, 0, 0.3); }
.cover-2 a {
font-size: 1.3em;
color: rgba(255, 255, 255, .3)
}
color: rgba(255, 255, 255, 0.3); }
.head-icon {
width: 20px;
height: 20px;
float: left;
margin-right: 5px;
border-radius: 50%
}
border-radius: 50%; }
small {
font-size: 0.9em; }
.modal {
background: rgba(0, 0, 0, .5);
color: #ccc
}
background: rgba(0, 0, 0, 0.5);
color: #ccc; }
.modal a {
color: #c8c8c8
}
color: #c8c8c8; }
.modal ul {
display: inline-block;
}
display: inline-block; }
.modal li {
display: inline-block;
/* word-wrap: break-word;*/
padding:5px 10px;
padding: 10px;
margin: 4px;
background: rgba(150, 150, 150, .2);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
border-radius: 150px;
}
background: rgba(150, 150, 150, 0.3);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
border-radius: 150px; }
.modal li:hover {
background: rgba(200, 200, 200, .3);
}
background: rgba(200, 200, 200, 0.3); }
.modal h4 {
margin-bottom: 38px
}
margin-bottom: 38px; }
.modal > .modal-footer {
background: rgba(50, 50, 50, .6)
}
background: rgba(50, 50, 50, 0.6); }
.waves-effect.waves-brown .waves-ripple {
background-color: rgba(230, 230, 230, .3)
}
background-color: rgba(230, 230, 230, 0.3); }
.typed-cursor {
display: none; }
@media only screen and (max-width: 768px) {
.cover-2 h2,
.cover-2 p {
width: 100%
}
width: 100%; }
.online-part {
padding: 25% .7%
}
padding: 25% 0.7%; }
.rule {
padding: 15px
}
padding: 15px; }
.admins > ul > a {
display: block;
border-radius: 0
}
border-radius: 0; }
.head-icon {
width: 20px;
height: 20px;
margin-right: 0;
float: left;
border-radius: 50%
}
border-radius: 50%; }
.modal li {
display: block;
width:95%;
}
}
width: 95%; } }
/*# sourceMappingURL=main.css.map */

7
css/main.css.map Normal file
View file

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "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",
"sources": ["../scss/main.scss","../scss/_mixins.scss"],
"names": [],
"file": "main.css"
}

View file

@ -1 +1 @@
#note a,a{color:#c8c8c8}#note,.admins,.page-title,.rank{text-align:center}.brand-logo,h2{font-family: 'Raleway', sans-serif;}*{margin:0;padding:0}body{margin-bottom:50px;background:url(../images/staff-bg.png) center fixed #222;color:#ccc}.nav-wrapper{background:rgba(0,0,0,.2)}.admins{width:85%;margin:0 auto;background:rgba(100,100,100,.1);padding:15px;border-radius:10px}.admins li{display:inline-block;padding:10px;background:rgba(100,100,100,.2);margin:5px;border-radius:50px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.admins li:hover{background:rgba(100,100,100,.5)}h2{font-size:1.5em}#note h5{margin-bottom:-15px}#note a{font-weight:700}.page-title{font-size:3.8em;font-weight:300}.brand-logo{font-size:2em;font-weight:200}@media only screen and (max-width:768px){.admins{width:95%}.admins li{display:block;border-radius:0}}
#note a,a{color:#c8c8c8}#note,.admins,.page-title,.rank{text-align:center}.brand-logo,h2{font-family:'Raleway', sans-serif;}*{margin:0;padding:0}body{margin-bottom:50px;background:url(../images/staff-bg.png) center fixed #222;color:#ccc}.nav-wrapper{background:rgba(0,0,0,.2)}.admins{width:85%;margin:0 auto;background:rgba(100,100,100,.1);padding:15px;border-radius:10px}.admins li{display:inline-block;padding:10px;background:rgba(100,100,100,.2);margin:5px;border-radius:50px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.admins li:hover{background:rgba(100,100,100,.5)}h2{font-size:1.5em}#note h5{margin-bottom:-15px}#note a{font-weight:700}.page-title{font-size:3.8em;font-weight:300}.brand-logo{font-size:2em;font-weight:200} .typed-cursor { display: none; } @media only screen and (max-width:768px){.admins{width:95%}.admins li{display:block;border-radius:0}}

View file

@ -8,8 +8,8 @@
<meta name="author" content="aggelosQQ, markbyron, DarthSalamon, Madgeek1450, TotalFreedom">
<meta name="keywords" content="TF,minecraft,totalfreedom,free op,server,worldedit,freebuild">
<meta name="description" content="TotalFreedom is the first Free OP Minecraft server, which is up and running since 2010! play.totalfreedom.me">
<link async rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link async rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<link async rel="stylesheet" href="css/component.min.css">
<link async rel="stylesheet" href="css/main.css">
<link async rel="stylesheet" href="css/global.css">
@ -214,8 +214,8 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script src="js/typed.min.js"></script>
<script src="https://use.fontawesome.com/cb2592f0cc.js"></script>
<script src="js/typed.js"></script>
<script src="js/moment.js"></script>
<script src="js/jquery.cookies.js"></script>
<script src="js/main.js"></script>

View file

@ -27,9 +27,9 @@ $(document).ready(function() {
interval);
var refresh = function() {
$.getJSON("http://us.mc-api.net/v3/server/info/play.totalfreedom.me:28965", function(json) {
if (json.online !== true) {
$("#online").html('<span style="color: firebrick; font-weight: bolder;"> Server is Offline</span>');
$.getJSON("https://mcapi.ca/query/play.totalfreedom.me:28965/extensive", function(json) {
if (json.status !== true) {
$("#online").html('<span style="color: firebrick; font-weight: bolder;"> Server is Offline</span><br/><small style="font-size: .5em;">Check out our <a href="status">Associated Servers</a>!</small>');
$(".button").hide();
} else {
$("#online").html('TotalFreedom has <font color="green">' + json.players.online + '</font> players online!<br/>');
@ -42,13 +42,16 @@ $(document).ready(function() {
refresh();
});
$(document).ready(function() {
$('.brand-logo').typed({
strings: ['<small class="hide-on-med-and-down">play.</small>TotalFreedom<small class="hide-on-med-and-down">.me</small>'],
typeSpeed: 30
});
});
$(document).ready(function() {
(new Date).getFullYear();
$("#curYear").text((new Date).getFullYear())
});
@ -113,6 +116,7 @@ $(document).ready(function(){
});
});
$(document).ready(function() {
$("#top").click(function() {
$('html, body').animate({

438
js/typed.js Normal file
View file

@ -0,0 +1,438 @@
// The MIT License (MIT)
// Typed.js | Copyright (c) 2016 Matt Boldt | www.mattboldt.com
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
! function($) {
"use strict";
var Typed = function(el, options) {
// chosen element to manipulate text
this.el = $(el);
// options
this.options = $.extend({}, $.fn.typed.defaults, options);
// attribute to type into
this.isInput = this.el.is('input');
this.attr = this.options.attr;
// show cursor
this.showCursor = this.isInput ? false : this.options.showCursor;
// text content of element
this.elContent = this.attr ? this.el.attr(this.attr) : this.el.text();
// html or plain text
this.contentType = this.options.contentType;
// typing speed
this.typeSpeed = this.options.typeSpeed;
// add a delay before typing starts
this.startDelay = this.options.startDelay;
// backspacing speed
this.backSpeed = this.options.backSpeed;
// amount of time to wait before backspacing
this.backDelay = this.options.backDelay;
// div containing strings
this.stringsElement = this.options.stringsElement;
// input strings of text
this.strings = this.options.strings;
// character number position of current string
this.strPos = 0;
// current array position
this.arrayPos = 0;
// number to stop backspacing on.
// default 0, can change depending on how many chars
// you want to remove at the time
this.stopNum = 0;
// Looping logic
this.loop = this.options.loop;
this.loopCount = this.options.loopCount;
this.curLoop = 0;
// for stopping
this.stop = false;
// custom cursor
this.cursorChar = this.options.cursorChar;
// shuffle the strings
this.shuffle = this.options.shuffle;
// the order of strings
this.sequence = [];
// All systems go!
this.build();
};
Typed.prototype = {
constructor: Typed,
init: function() {
// begin the loop w/ first current string (global self.strings)
// current string will be passed as an argument each time after this
var self = this;
self.timeout = setTimeout(function() {
for (var i=0;i<self.strings.length;++i) self.sequence[i]=i;
// shuffle the array if true
if(self.shuffle) self.sequence = self.shuffleArray(self.sequence);
// Start typing
self.typewrite(self.strings[self.sequence[self.arrayPos]], self.strPos);
}, self.startDelay);
},
build: function() {
var self = this;
// Insert cursor
if (this.showCursor === true) {
this.cursor = $("<span class=\"typed-cursor\">" + this.cursorChar + "</span>");
this.el.after(this.cursor);
}
if (this.stringsElement) {
this.strings = [];
this.stringsElement.hide();
console.log(this.stringsElement.children());
var strings = this.stringsElement.children();
$.each(strings, function(key, value){
self.strings.push($(value).html());
});
}
this.init();
},
// pass current string state to each function, types 1 char per call
typewrite: function(curString, curStrPos) {
// exit when stopped
if (this.stop === true) {
return;
}
// varying values for setTimeout during typing
// can't be global since number changes each time loop is executed
var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;
var self = this;
// ------------- optional ------------- //
// backpaces a certain string faster
// ------------------------------------ //
// if (self.arrayPos == 1){
// self.backDelay = 50;
// }
// else{ self.backDelay = 500; }
// contain typing function in a timeout humanize'd delay
self.timeout = setTimeout(function() {
// check for an escape character before a pause value
// format: \^\d+ .. eg: ^1000 .. should be able to print the ^ too using ^^
// single ^ are removed from string
var charPause = 0;
var substr = curString.substr(curStrPos);
if (substr.charAt(0) === '^') {
var skip = 1; // skip atleast 1
if (/^\^\d+/.test(substr)) {
substr = /\d+/.exec(substr)[0];
skip += substr.length;
charPause = parseInt(substr);
}
// strip out the escape character and pause value so they're not printed
curString = curString.substring(0, curStrPos) + curString.substring(curStrPos + skip);
}
if (self.contentType === 'html') {
// skip over html tags while typing
var curChar = curString.substr(curStrPos).charAt(0)
if (curChar === '<' || curChar === '&') {
var tag = '';
var endTag = '';
if (curChar === '<') {
endTag = '>'
}
else {
endTag = ';'
}
while (curString.substr(curStrPos + 1).charAt(0) !== endTag) {
tag += curString.substr(curStrPos).charAt(0);
curStrPos++;
if (curStrPos + 1 > curString.length) { break; }
}
curStrPos++;
tag += endTag;
}
}
// timeout for any pause after a character
self.timeout = setTimeout(function() {
if (curStrPos === curString.length) {
// fires callback function
self.options.onStringTyped(self.arrayPos);
// is this the final string
if (self.arrayPos === self.strings.length - 1) {
// animation that occurs on the last typed string
self.options.callback();
self.curLoop++;
// quit if we wont loop back
if (self.loop === false || self.curLoop === self.loopCount)
return;
}
self.timeout = setTimeout(function() {
self.backspace(curString, curStrPos);
}, self.backDelay);
} else {
/* call before functions if applicable */
if (curStrPos === 0) {
self.options.preStringTyped(self.arrayPos);
}
// start typing each new char into existing string
// curString: arg, self.el.html: original text inside element
var nextString = curString.substr(0, curStrPos + 1);
if (self.attr) {
self.el.attr(self.attr, nextString);
} else {
if (self.isInput) {
self.el.val(nextString);
} else if (self.contentType === 'html') {
self.el.html(nextString);
} else {
self.el.text(nextString);
}
}
// add characters one by one
curStrPos++;
// loop the function
self.typewrite(curString, curStrPos);
}
// end of character pause
}, charPause);
// humanized value for typing
}, humanize);
},
backspace: function(curString, curStrPos) {
// exit when stopped
if (this.stop === true) {
return;
}
// varying values for setTimeout during typing
// can't be global since number changes each time loop is executed
var humanize = Math.round(Math.random() * (100 - 30)) + this.backSpeed;
var self = this;
self.timeout = setTimeout(function() {
// ----- this part is optional ----- //
// check string array position
// on the first string, only delete one word
// the stopNum actually represents the amount of chars to
// keep in the current string. In my case it's 14.
// if (self.arrayPos == 1){
// self.stopNum = 14;
// }
//every other time, delete the whole typed string
// else{
// self.stopNum = 0;
// }
if (self.contentType === 'html') {
// skip over html tags while backspacing
if (curString.substr(curStrPos).charAt(0) === '>') {
var tag = '';
while (curString.substr(curStrPos - 1).charAt(0) !== '<') {
tag -= curString.substr(curStrPos).charAt(0);
curStrPos--;
if (curStrPos < 0) { break; }
}
curStrPos--;
tag += '<';
}
}
// ----- continue important stuff ----- //
// replace text with base text + typed characters
var nextString = curString.substr(0, curStrPos);
if (self.attr) {
self.el.attr(self.attr, nextString);
} else {
if (self.isInput) {
self.el.val(nextString);
} else if (self.contentType === 'html') {
self.el.html(nextString);
} else {
self.el.text(nextString);
}
}
// if the number (id of character in current string) is
// less than the stop number, keep going
if (curStrPos > self.stopNum) {
// subtract characters one by one
curStrPos--;
// loop the function
self.backspace(curString, curStrPos);
}
// if the stop number has been reached, increase
// array position to next string
else if (curStrPos <= self.stopNum) {
self.arrayPos++;
if (self.arrayPos === self.strings.length) {
self.arrayPos = 0;
// Shuffle sequence again
if(self.shuffle) self.sequence = self.shuffleArray(self.sequence);
self.init();
} else
self.typewrite(self.strings[self.sequence[self.arrayPos]], curStrPos);
}
// humanized value for typing
}, humanize);
},
/**
* Shuffles the numbers in the given array.
* @param {Array} array
* @returns {Array}
*/
shuffleArray: function(array) {
var tmp, current, top = array.length;
if(top) while(--top) {
current = Math.floor(Math.random() * (top + 1));
tmp = array[current];
array[current] = array[top];
array[top] = tmp;
}
return array;
},
// Start & Stop currently not working
// , stop: function() {
// var self = this;
// self.stop = true;
// clearInterval(self.timeout);
// }
// , start: function() {
// var self = this;
// if(self.stop === false)
// return;
// this.stop = false;
// this.init();
// }
// Reset and rebuild the element
reset: function() {
var self = this;
clearInterval(self.timeout);
var id = this.el.attr('id');
this.el.empty();
if (typeof this.cursor !== 'undefined') {
this.cursor.remove();
}
this.strPos = 0;
this.arrayPos = 0;
this.curLoop = 0;
// Send the callback
this.options.resetCallback();
}
};
$.fn.typed = function(option) {
return this.each(function() {
var $this = $(this),
data = $this.data('typed'),
options = typeof option == 'object' && option;
if (data) { data.reset(); }
$this.data('typed', (data = new Typed(this, options)));
if (typeof option == 'string') data[option]();
});
};
$.fn.typed.defaults = {
strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"],
stringsElement: null,
// typing speed
typeSpeed: 0,
// time before typing starts
startDelay: 0,
// backspacing speed
backSpeed: 0,
// shuffle the strings
shuffle: false,
// time before backspacing
backDelay: 500,
// loop
loop: false,
// false = infinite
loopCount: false,
// show cursor
showCursor: true,
// character for cursor
cursorChar: "|",
// attribute to type (null == text)
attr: null,
// either html or text
contentType: 'html',
// call when done callback function
callback: function() {},
// starting callback function before each string
preStringTyped: function() {},
//callback for every typed string
onStringTyped: function() {},
// callback for reset
resetCallback: function() {}
};
}(window.jQuery);

View file

@ -13,7 +13,6 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script src="https://use.fontawesome.com/cb2592f0cc.js"></script>
<script src="../js/typed.min.js"></script>
<script src="../js/main.js"></script>
<script src="assets/js/builders.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet">
@ -63,13 +62,13 @@
<li><img class="responsive-img head-icon" src="https://minotar.net/avatar/xfilez/80.png">xfilez</li>
</a>
<a href="http://totalfreedom.boards.net/user/5537" target="_blank">
<li><img class="responsive-img head-icon" src="https://minotar.net/avatar/CubsWorldChamps/80.png">CubsWorldChamps</li>
<li><img class="responsive-img head-icon" src="https://minotar.net/avatar/adamvandyck/80.png">adamvandyck</li>
</a>
<a href="#" target="_blank">
<li><img class="responsive-img head-icon" src="https://minotar.net/avatar/Fluffasaurus_Rex/80.png">Fluffasaurus_Rex</li>
</a>
<a href="http://totalfreedom.boards.net/user/14724" target="_blank">
<li><img class="responsive-img head-icon" src="https://minotar.net/avatar/MousekatBLI/80.png">MousekatBLI</li>
<li><img class="responsive-img head-icon" src="https://minotar.net/avatar/AcetoneAlligator/80.png">AcetoneAlligator</li>
</a>
<a href="http://totalfreedom.boards.net/user/16464" target="_blank">
<li><img class="responsive-img head-icon" src="https://minotar.net/avatar/Dusty01/80.png">Dusty01</li>
@ -81,7 +80,7 @@
<li><img class="responsive-img head-icon" src="https://minotar.net/avatar/FelixtheTrap/80.png">FelixtheTrap</li>
</a>
<a href="http://totalfreedom.boards.net/user/11618" target="_blank">
<li><img class="responsive-img head-icon" src="https://minotar.net/avatar/iHaveSkills/80.png">iHaveSkills</li>
<li><img class="responsive-img head-icon" src="https://minotar.net/avatar/Exotivity/80.png">Exotivity</li>
</a>
</ul><br>
<hr>

14
scss/_mixins.scss Normal file
View file

@ -0,0 +1,14 @@
@mixin transition($info) {
-webkit-transition: $info;
-moz-transition: $info;
-ms-transition: $info;
-o-transition: $info;
transition: $info;
}
@mixin userselect($info) {
user-select: $info;
-moz-user-select: $info;
-webkit-user-select: $info;
-ms-user-select: $info;
}

273
scss/main.scss Normal file
View file

@ -0,0 +1,273 @@
@import 'mixins';
* {
margin: 0;
padding: 0
}
body {
font-family: 'Raleway', sans-serif;
font-weight:100;
color: #fff;
background: #222 url(../images/cover-1.png) center no-repeat fixed;
background-size: cover
}
#rules-title,
.button {
@include transition(all .2s ease);
z-index: 100;
padding: 10px 55px;
background: rgba(255, 255, 255, .1);
color: #c8c8c8;
&:hover {
background: rgba(200, 200, 200, .2)
}
}
#rules-title {
border-radius: 0px;
}
.admins ul,
.cover-1,
.cover-2,
.cover-3 .section-title,
.rank {
text-align: center
}
.brand-logo {
margin-top: 5px;
margin-bottom: 5px
}
.button-collapse {
margin-top: 5px;
margin-bottom: 10px
}
.cover-1 {
font-size: 1.5em;
color: rgba(255, 255, 255, .4);
height: 100vh
}
.cover-1 a,
.cover-1 h3 {
margin-top: 23%
}
.cover-2 {
background: url(../images/cover-2.png) center fixed;
background-size: cover;
height: auto;
padding-bottom: 40px
}
.rule {
z-index: 100;
display: none;
padding: 30px
}
#rules-title,
.admins>ul>a {
padding: 10px;
display: inline-block
}
#rules-title {
font-size: 2.2em;
background: rgba(230, 230, 230, .1);
cursor: pointer;
@include userselect(none);
@include transition(all .2s ease);
}
#rules-title:hover {
background: rgba(210, 210, 210, .2)
}
.admins>ul>a,
i.rules-icon {
@include transition(all .2s ease);
}
i.rules-icon {
position: relative;
float: right;
color: rgba(150, 150, 150, .3);
@include transition(all .2s ease);
&:hover {
color: rgba(150, 150, 150, 1)
}
}
.cover-2 h2,
.cover-2 p {
width: 75%;
margin: 0 auto
}
.cover-2 p {
font-size: 1.2em;
height: auto
}
.section-title {
font-size: 4em;
color: rgba(255, 255, 255, .9);
z-index: 100
}
.cover-3 {
background: url(../images/cover-3.png) no-repeat fixed;
background-size: cover
}
.admins>ul>a {
margin: 5px;
background: rgba(0, 0, 0, .3);
@include transition(all .2s ease);
border-radius: 150px;
z-index: 200;
}
.admins>ul>a:hover {
background: rgba(100, 100, 100, .3);
transform: translateY(-4px);
}
.admins ul {
z-index: 101
}
.admins a li {
color: rgba(255, 255, 255, .5);
font-size: 1.2em;
z-index: 102
}
.rank {
font-size: 2em;
z-index: 103
}
.rest>li>a,
.useful a {
padding: 10px;
z-index: 100;
text-align: center
}
.cover-1,
.cover-2,
.cover-3 {
border-bottom: 1px solid rgba(255, 255, 255, .2)
}
.rest>li>a {
font-size: 1.5em;
color: rgba(255, 255, 255, .6);
border-radius: 50px;
@include transition(all .2s ease);
}
.rest>li>a:hover {
background: rgba(255, 255, 255, .2);
color: #fff
}
.rest>li {
margin-top: 50px;
@include transition(all .2s ease);
}
.rest>li:hover {
transform: translateX(5px)
}
.useful a {
display: inline-block;
font-size: 1.2em;
color: rgba(255, 255, 255, .6);
border: 2px solid rgba(255, 255, 255, .6);
margin-right: 10px;
border-radius: 50px;
width: 200px;
@include transition(all .2s ease);
margin-bottom: 10px
}
.useful>a>li>i {
font-size: 2em;
margin-bottom: 10px
}
.useful a:hover {
background: rgba(255, 255, 255, .2);
color: #fff;
transform: translateY(-5px)
}
#note {
text-align: center;
color: #ccc;
border-radius: 150px;
padding: 15px;
z-index: 1
}
#note h5 {
margin-bottom: -20px
}
#note a {
color: #c8c8c8;
font-weight: 700
}
.nav-wrapper {
background: rgba(0, 0, 0, .3)
}
.cover-2 a {
font-size: 1.3em;
color: rgba(255, 255, 255, .3)
}
.head-icon {
width: 20px;
height: 20px;
float: left;
margin-right: 5px;
border-radius: 50%
}
small {
font-size:0.9em;
}
.modal {
background: rgba(0, 0, 0, .5);
color: #ccc
}
.modal a {
color: #c8c8c8
}
.modal ul {
display: inline-block;
}
.modal li {
display: inline-block;
/* word-wrap: break-word;*/
padding:10px;
margin:4px;
background: rgba(150, 150, 150, .3);
@include transition(all .2s ease);
border-radius: 150px;
}
.modal li:hover {
background: rgba(200, 200, 200, .3);
}
.modal h4 {
margin-bottom: 38px
}
.modal>.modal-footer {
background: rgba(50, 50, 50, .6)
}
.waves-effect.waves-brown .waves-ripple {
background-color: rgba(230, 230, 230, .3)
}
.typed-cursor { display: none; }
@media only screen and (max-width: 768px) {
.cover-2 h2,
.cover-2 p {
width: 100%
}
.online-part {
padding: 25% .7%
}
.rule {
padding: 15px
}
.admins>ul>a {
display: block;
border-radius: 0
}
.head-icon {
width: 20px;
height: 20px;
margin-right: 0;
float: left;
border-radius: 50%
}
.modal li {
display: block;
width:95%;
}
}

View file

@ -8,13 +8,6 @@
<meta name="author" content="aggelosQQ, markbyron, DarthSalamon, Madgeek1450, TotalFreedom">
<meta name="kewords" content="TF,minecraft,totalfreedom,free op,server,worldedit,freebuild">
<meta name="description" content="TotalFreedom is the first Free OP Minecraft server, which is up and running since 2012! play.totalfreedom.me">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script src="js/moment.js"></script>
<script src="js/jquery.cookies.js"></script>
<script src="js/functions.js"></script>
<script src="js/main.js"></script>
<script src="https://use.fontawesome.com/cb2592f0cc.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<link href="https://fonts.googleapis.com/css?family=Catamaran:200" rel="stylesheet">
<link rel="stylesheet" href="css/component.min.css">
@ -22,27 +15,13 @@
<link rel="stylesheet" href="css/staff.css">
<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon href=”favicon.ico” type=”image/x-icon”>
<script>
// All Json content is loaded respectively into #(item)
var jsonUrl = "http://madgeekonline.com/tfinfo/";
var jsonContent = [
"developers",
"superadmins",
"telnetadmins",
"senioradmins"
];
$(document).ready(function() {
loadJson(jsonUrl, jsonContent);
});
</script>
</head>
<body>
<div id="load_screen" class="load_screen"><div id="loading">Loading TotalFreedom's Staff..<div class="progress"><div class="indeterminate"></div></div><br/><span class="skip">I don't want to wait!</span>
</div></div>
<nav class="transparent z-depth-0" id="menu">
<div class="nav-wrapper z-depth-0">
<a href="#header" class="brand-logo">TotalFreedom <span class="hide-on-med-and-down">Staff</span></small></a>
<a href="#" id="brand-top" class="brand-logo"></a> <a href="#" data-activates="mobile" class="button-collapse"><i class="fa fa-bars"></i></a>
<a href="#" data-activates="mobile" class="button-collapse"><i class="fa fa-bars"></i></a>
<ul class="right hide-on-med-and-down cl-effect-14" id="cl-effect-14">
<li><a href="index.html">Back to Home</a></li>
@ -75,5 +54,29 @@
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script src="js/typed.js"></script>
<script src="js/moment.js"></script>
<script src="js/jquery.cookies.js"></script>
<script src="js/functions.js"></script>
<script src="js/main.js"></script>
<script src="https://use.fontawesome.com/cb2592f0cc.js"></script>
<script>
// All Json content is loaded respectively into #(item)
var jsonUrl = "http://madgeekonline.com/tfinfo/";
var jsonContent = [
"developers",
"superadmins",
"telnetadmins",
"senioradmins"
];
$(document).ready(function() {
loadJson(jsonUrl, jsonContent);
});
</script>
</body>
</html>

View file

@ -1 +0,0 @@
This file is not used for anything.