[Release] Flyff Enterpage

xsrf · 07/10/2015, 11:06

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:

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)

- DK · 07/10/2015, 11:14

Sieht echt nice aus

Code Mässig auch top

Ordentliche Enterpage ^^ Vielleicht finde ich dafür irgendwann mal platz

-Venom' · 07/10/2015, 13:22

Ich würde dir empfehlen den Server Status etwas weiter nach unten zulegen.
Oder komplett anders zu gestalten.

xsrf · 07/10/2015, 14:44

Ja da hast du Recht, allerdings habe ich dafür aktuell keinen Ansatz. Werde es demnächst nocheinmal prüfen und verbessern, falls du einen Asatz hast so poste es bitte

Bin sehr unkreativ was das Design betrifft.

Michi · 07/10/2015, 15:21

Quote:

Originally Posted by .ACE.

Sieht echt nice aus Code Mässig auch top Ordentliche Enterpage ^^ Vielleicht finde ich dafür irgendwann mal platz

Ich verstehe nicht genau was daran jetzt nice aussieht?
Beim Code gebe ich dir aber Recht dieser sieht ganz "gut" aus.

Ich bin ein wenig enttäuscht.
Hätte jetzt den OP **** erwartet bei den Kommentaren, aber was will man bei Arma eig. erwarten.
Die Icons passen nicht zu Flyff benutz andere oder gestallte es komplett neu.

Nichts gegen dich AMAZEN, aber das ist bis jetzt deine schlechteste Arbeit.

Gruß
'Dude'

xTwiLightx · 07/10/2015, 15:36

An sich ganz nett, aber ich finde ich Positionierung und die Farbmischung vom Serverstatus verdammt schlecht (grau auf einem dunklen rot?).

Wie wäre es z.B. mit einem fixed Footer oder einer fixed Navigation, wo der Serverstatus reingepackt wird (und dann etwa das selbe Style aufweist wie die Buttons)?

Zudem hat der Backlink kein Style spendiert bekommen und hängt da unten links vom Serverstatus wie ein Schluck Wasser.

Marc~ · 07/10/2015, 17:43

Also ich würde die Page nur als Base nehmen, da ich allgemein Enterpages relativ sinnlos finde.
Sie würde sich eher als eine Statusseite bei einer Serverwartung eignen, da momentan/überhaupt keine Registermöglichkeit gegeben ist und außerdem diese nur als Informationsseite fungiert. (deinem Code nach)

Das Design ist gewöhnungsbedürftig, jedoch nicht schlecht. Ich rate dir die Farben abzustimmen und von deinem 2D Designstyle wegzukommen, am passendsten für Flyff finde ich persönlich einen Mix aus 2D/3D Elementen, denn hierbei bringt man den Mangastyle des Spiels besser rüber.

xsrf · 07/10/2015, 18:42

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.

-Venom' · 07/10/2015, 22:17

Quote:

Originally Posted by AMAZEN

Ja da hast du Recht, allerdings habe ich dafür aktuell keinen Ansatz. Werde es demnächst nocheinmal prüfen und verbessern, falls du einen Asatz hast so poste es bitte Bin sehr unkreativ was das Design betrifft.

Spoiler

Hier mal ein Beispiel für ein Footer mit Status.
Soll nur ein anreizt sein. ( Footer waren bei Photoshop 4Min Arbeit. Mit Pausen und Gammeln )

xsrf · 07/11/2015, 09:57

Werde mal sehen was sich machen lässt.

NoVision · 07/11/2015, 11:27

An sich ist die Idee des Designs ne nette Sache, aber die Programmierung dahinter ist.. na ja, sagen wir auch mal ganz nett. :P
Ist nicht böse gemeint oder so, aber es wurde auf 3 wichtige Aspekte der Programmierung vergessen... Redundanz, Relation und referenzielle Integrität... aber für eine Enterpage hast du das echt schön gemacht, danke.

Grüße

~~'Mope'~~ · 07/12/2015, 18:49

danke für das release
sieht ganz nett aus und wers braucht kann es usen.

Flogolo · 07/15/2015, 22:13

kein plan obs gewollt ist oder nicht, aber der link is tot

xsrf · 07/17/2015, 14:21

Der Footer ist keine Glanzleistung und den würde ich in 1 Minute in CSS /HTML hinbekommen, dazu bräuchte ich kein Photoshop. Du nutzt anscheinend mein Pivo Flyff Design als Base. (Zumindest erkenne ich den Background und die 3 Kreise wieder - Struktur) Ist auch alles okay wenn es dir gefällt warum sollst du es nicht machen.

Bei dem Release geht es immernoch eine Enterpage die mit HTML/CSS Kenntnissen ganz leicht mit einem eigenen Design versehen werden kann und NICHT UM DAS DESIGN.

Wer das immernoch nicht verstanden hat tut mir wirklich leid.