[Release] Flyff Enterpage

Da mir heute morgen ziemlich langeweilig war, entwarf ich eine Flyff Enterpage. Ich werde diese definitiv noch erweitern, allerdings brauche ich daf�r Vorschl�ge von eurer Seite. Was w�rdet ihr gerne auf der Enterpage haben?

Systeme k�nnen im Nachhinein auch direkt in der Config.php aktiviert bzw. deaktiviert werden.

Das Design ist ganz leicht anpassbar da der PHP Code strikt vom HTML Code getrennt ist.

Hier ver�ffentliche ich nun die Version 1 der Enterpage.

Konstruktive Kritik ist gern' gesehen, allerdings bitte ich darum den Code nicht in die Bewertung mit einzubeziehen da dieser nichts Besonderes ist und die Datenbankabfragen von xBlubbs stammen. Der Sinn dieses Release ist es den Servern eine Seite zu bieten die mit ein wenig HTML/CSS Kenntnissen die sich JEDER aneignen kann, eine sch�ne Enterpage zugestalten. Ich hasse es, dass jeder immer den gleichen Rotz nutzt, denn irgendwann ist es ausgelutscht. Hier habt ihr die M�glichkeit zumindest eure Enterpage nach eigenen W�nschen zu gestalten und sogar an der Entwicklung teilzuhaben. Ich m�chte keine direkten Design Bewertungen sondern eher etwas wie: "Die Box XY sollte eher in die obere Linke Ecke zwischen Box CD und Box EF. Eventuell k�nnte man auch noch System WZ hinzuf�gen und Funktione JK in der und der Form nocheinmal �berarbeiten." Ja... das w�re Kritik mit der ich was anfangen kann.

Preview: [Only registered and activated users can see links. Click Here To Register...]

Updates:

Code:

+ Serverstatus anzeige dynamisch (Gibt Anzeigen automatisch aus nachdem ein neuer Channel hinzugef�gt wurde.)
+ Serverstatus anzeige

Features:

Rates
Online Player
Server Peak
Server Time
Easy to add new designs
Serveronline (Channel) View

Open Source + Updates:

Spoiler

Themes

Spoiler

StrandedPasta (Example)

Spoiler

Overview.php

PHP Code:


			
<div id="grid">

            

    <img src="Theme/<?php echo $config['theme_array'][$config['active_theme']]; ?>/Image/Logo.png" class="spacer" title="<?php echo $config['web_title']; ?>">

    

    <div id="pagelink">

        <ul>

            <li class="left yellow-link"><a href="<?php echo $config['first_link_href']; ?>"><?php echo $config['first_link_colored']; ?><br><font color="white"><?php echo $config['first_link_white']; ?></font></a></li>

            <li class="left orange-link"><a href="<?php echo $config['second_link_href']; ?>"><?php echo $config['second_link_colored']; ?><br><font color="white"><?php echo $config['second_link_white']; ?></font></a></li>

            <li class="left yellow-link"><a href="<?php echo $config['third_link_href']; ?>"><?php echo $config['third_link_colored']; ?><br><font color="white"><?php echo $config['third_link_white']; ?></font></a></li>

        </ul>

    </div>

    <div class="clear"></div>

    <div class="info-bar-length clear">

        <div class="info-bar left">

            <img src="Theme/<?php echo $config['theme_array'][$config['active_theme']]; ?>/Image/Exp.png" title="Erfahrung">

            <h1>Erfahrung: <font color="#158cfc">x<?php echo$config['exp_rate']; ?></font></h1>

        </div>

        <div class="info-bar  left min-spacer">

            <img src="Theme/<?php echo $config['theme_array'][$config['active_theme']]; ?>/Image/Drop.png" title="Droprate">

            <h1>Droprate: <font color="#158cfc">x<?php echo$config['drop_rate']; ?></font></h1>

        </div>

        <div class="info-bar  left">

            <img src="Theme/<?php echo $config['theme_array'][$config['active_theme']]; ?>/Image/Penya.png" title="Penyarate">

            <h1>Penyarate: <font color="#158cfc">x<?php echo$config['penya_rate']; ?></font></h1>

        </div>

    </div>

    

    <div class="info-bar-length clear">

        <div class="info-bar left">

            <img src="Theme/<?php echo $config['theme_array'][$config['active_theme']]; ?>/Image/Count.png" title="Onlinespieler">

            <h1>Online Spieler: <font color="#158cfc"><?php echo$config['user_count']; ?></font></h1>

        </div>

        <div class="info-bar  left min-spacer">

            <img src="Theme/<?php echo $config['theme_array'][$config['active_theme']]; ?>/Image/Peak.png" title="Erfahrung">

            <h1>Serverpeak: <font color="#158cfc"><?php echo$config['server_peak']; ?></font></h1>

        </div>

        <div class="info-bar  left">

            <img src="Theme/<?php echo $config['theme_array'][$config['active_theme']]; ?>/Image/Time.png" title="Erfahrung">

            <h1>Servertime: <font color="#158cfc"><?php echo$config['server_time']; ?> Uhr</font></h1>

        </div>

    </div>

    

</div>

<?php getChannelAmount('svr_status clear', $config['channel_status'], $config['svr_channel'], $config['channel_amount']); ?>

Code:

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Roboto', sans-serif;
	background:url('./Image/Background.jpg') top center fixed #fff;
}

.green {
	background:rgba(26, 252, 21, 0.76);
	color:#236722;
}

.red {
	background:rgba(252, 21, 21, 0.76);
	color:#662222;
}

.clear {clear:both;}

#grid {width:1000px; margin:0 auto;}

.left {float:left;}
.right {float:right;}

.spacer {
	margin-left:30%;
	margin-top:25px;
}

.min-spacer {
	margin-left:50px;;
	margin-right:50px;
	margin-top:80px;
}


#pagelink {}
#pagelink ul {}
#pagelink ul li {
	cursor:pointer;
	width:300px;
	height:75px;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	font-size:18px;
	padding-top:25px;
	list-style:none;
	text-align:center;
}

#pagelink .yellow-link {
	border:1px solid #ffde00;
	transition:background 1s;
	-moz-transition:1s;
	-webkit-transition:1s;
}

#pagelink .yellow-link a {
	color:#ffde00;
	transition:color 1s;
	-moz-transition:color 1s;
	-webkit-transition:color 1s;
	text-shadow:0 0px 5px #000;
}

#pagelink .orange-link {
	margin-left:46px;
	margin-right:46px;
	border:1px solid #ff7800;
	transition:background 1s;
	-moz-transition:background 1s;
	-webkit-transition:background 1s;
}

#pagelink .orange-link a {
	color:#ff7800;
	transition:color 1s;
	-moz-transition:color 1s;
	-webkit-transition:color 1s;
	text-shadow:0 0px 5px #fff;
}

#pagelink ul li a {
	font-weight:bold;
	text-decoration:none;
}

#pagelink ul .orange-link:hover {
	border:1px solid rgba(255, 120, 0, 0.76);
	background:rgba(255, 120, 0, 0.76);	
}

#pagelink ul .orange-link:hover > a {
	color:#ffde00;
	text-shadow:none;
}

#pagelink ul .yellow-link:hover > a {
	color:#ff7800;
	text-shadow:none;
}

#pagelink ul .yellow-link:hover {
	border:1px solid rgba(255, 222, 0, 0.76);
	background:rgba(255, 222, 0, 0.76);	
}

.info-bar-length {
	width:1000px;
	margin-top:25px;
}

.info-bar {
	width:300px;
	height:100px;
	background:rgba(255, 255, 255, 1);
	box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.26);
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	transition:background 1s;
	-moz-transition:background 1s;
	-webkit-transition:background 1s;
}

.info-bar img {
	position:relative;
	top:10px;
	left:140px;
}

.info-bar h1 {
	font-size:18px;
	line-height:50px;
	vertical-align:central;
	text-align:center;
	font-weight:300;
	color:#b9b9b9;
}

.info-bar:hover {
	background:rgba(255, 255, 255, 0.56);
	cursor:default;
	box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.26);
}

.svr_status {
	width:100%;;
	padding-left:20%;
	padding-top:15px;
	height:35px;
	margin-top:5px;
}

Downloads

Full Enterpage - Gesamte Enterpage + Standart Theme "StrandedPasta"
Source - Sourcecode der Webseite
Theme - Gesamter Theme Ordner (Layouts)

Genau das ist der Sinn dieses Release. Die, die �berhaupt keine Ahnung haben was sie machen sollen es so benutzen wie es hier ver�ffentlicht wurde. Diejenigen, die aber in der Lage sind ein eigenes Template in HTML/CSS zu schreiben k�nnen sich das hier als sehr gute Grundlage nehmen, da die Logik (PHP) strikt vom View (HTML/CSS) getrennt wurde. Daher kann ganz bequem das Design angepasst werden ohne auch nur einmal den PHP Code zu durchforsten.

Das das Design nicht das Beste, dessen bin ich mir bewusst. Allerdings geht es nur um die Grundlage zur eigenen Enterpage also bitte ich wie oben schon geschrieben nur um Vorschl�ge zur Erweiterung (Funktionen/Systeme) und nicht um Vorschl�ge bez�glich des Design, denn das ist nur um keine Schwarz-Wei�e bzw. No-Layout Seite zu pr�sentieren.