From 0bab2aebda6df0f4f39419a29fe945b299407d7b Mon Sep 17 00:00:00 2001
From: Daniel <Daniel@Daniel-PC.speedport.ip>
Date: Thu, 17 Apr 2014 00:11:18 +0200
Subject: [PATCH] achievements design

---
 views/html/achievements/index.tpl | 69 ++++++++++++++++++++++++++-----
 www/css/desktop.css               | 24 +++++++++++
 2 files changed, 83 insertions(+), 10 deletions(-)

diff --git a/views/html/achievements/index.tpl b/views/html/achievements/index.tpl
index fdaf2d7c..cee00f82 100644
--- a/views/html/achievements/index.tpl
+++ b/views/html/achievements/index.tpl
@@ -4,28 +4,77 @@
 </div>
 <?php endif ?>
 <h1><a href="<?=$linker->link(array('seminaries',$seminary['url']))?>"><?=$seminary['title']?></a></h1>
-<h2><?=_('Achievements')?></h2>
+<h2><i class="fa fa-trophy fa-fw"></i><?=_('Achievements')?></h2>
 
-<ul>
+<div class="cf">
+	<section class="rare">
+		<h3>Die seltensten Errungenschaften</h3>
+		<ol>
+			<li class="cf">
+				<img src="http://legende-von-zyren.de/img/achieve/36b.jpg" />
+				<p class="fwb">Des Königs neue Kleider</p>
+				<p><small>wurde erst 5 mal gefunden</small></p>
+			</li>
+			<li class="cf">
+				<img src="http://legende-von-zyren.de/img/achieve/1b.jpg" />
+				<p class="fwb">Sein oder Sterben</p>
+				<p><small>wurde erst 7 mal gefunden</small></p>
+			</li>
+			<li class="cf">
+				<img src="http://legende-von-zyren.de/img/achieve/35b.jpg" />
+				<p class="fwb">Hungersnot? Ohne mich.</p>
+				<p><small>wurde erst 9 mal gefunden</small></p>
+			</li>
+		</ol>
+	</section>
+
+	<section class="rare hunter">
+	<h3>Die erfolgreichsten Sammler</h3>
+		<ol>
+			<li class="cf">
+				<img src="http://zyren.inf-d.de/media/seminary/Die-Legende-von-Zyren/Mensch01-Portrait" />
+				<p class="fwb">VHS</p>
+				<p><small>hat 15 Errungenschaften gefunden</small></p>
+			</li>
+			<li class="cf">
+				<img src="http://zyren.inf-d.de/media/seminary/Die-Legende-von-Zyren/Mensch01-Portrait" />
+				<p class="fwb">Betamax</p>
+				<p><small>hat 14 Errungenschaften gefunden</small></p>
+			</li>
+			<li class="cf">
+				<img src="http://zyren.inf-d.de/media/seminary/Die-Legende-von-Zyren/Mensch01-Portrait" />
+				<p class="fwb">Laserdisc</p>
+				<p><small>hat 12 Errungenschaften gefunden</small></p>
+			</li>
+		</ol>
+	</section>
+</div>
+
+<h3>Persönlicher Fortschritt: 75%</h3>
+<p><b>12. Platz:</b> Du hast bislang 13 von insgesamt 75 Errungenschaften erreicht.</p>
+<ul class="achmnts">
+	<li class="cf">
+		<img src="http://legende-von-zyren.de/img/achieve/36b.jpg" />
+		<p class="fwb">Freigeschaltetes Achievement<span class="unlcked">erreicht am 17.06.104</span></p>
+		<p class="desc">Das Bild ist entsprechend farbig, ein eventueller Fortschrittsbalken mit 100% soll entfallen.</p>
+	</li>
 	<?php foreach($achievements as &$achievement) : ?>
-	<li>
+	<li class="cf">
 		<?php if(!is_null($achievement[$achievement['media_index']])) : ?>
 		<img src="<?=$linker->link(array('media','achievement',$seminary['url'],$achievement['url']))?>" />
 		<?php endif ?>
-		<h3><?=(!$achievement['hidden']) ? $achievement['title'] : _('Secret Achievement')?></h3>
+		<p class="fwb"><?=(!$achievement['hidden']) ? $achievement['title'] : _('Secret Achievement')?><span class="unlcked">erreicht am 17.06.104</span></p>
 		<?php if(!$achievement['hidden']) : ?>
-		<?=\hhu\z\Utils::t($achievement['description'])?>
+		<p class="desc"><?=\hhu\z\Utils::t($achievement['description'])?></p>
 		<?php else : ?>
-		<?=_('Continue playing to unlock this secret Achievement')?>
+		<p class="desc"><?=_('Continue playing to unlock this secret Achievement')?></p>
 		<?php endif ?>
-		<br />
-		
 		<?php if(array_key_exists('characterProgress', $achievement)) : ?>
-		<div class="cf">
+		<div class="prgrss cf">
 			<div class="xpbar">
 				<span style="width:<?=round($achievement['characterProgress']*100)?>%"></span>
 			</div>
-			<p class="xpnumeric"><?=round($achievement['characterProgress']*100)?> %</p>
+			<p class="xpnumeric"><?=round($achievement['characterProgress']*100)?>%</p>
 		</div>
 		<?php endif ?>
 	</li>
diff --git a/www/css/desktop.css b/www/css/desktop.css
index 89a656d9..9226aa06 100644
--- a/www/css/desktop.css
+++ b/www/css/desktop.css
@@ -181,6 +181,23 @@ input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;bo
 .gquests .xp{display:block}
 
 
+/** Achievements **/
+
+.rare ol{margin-bottom:40px}
+.rare li{margin-bottom:15px}
+.rare img{float:left;width:45px;height:45px;margin:4px 10px 0 0;border-radius:3px}
+.rare p{margin:0}
+
+.achmnts li{background:#fff;margin-bottom:10px;padding:15px;border-radius:3px}
+.achmnts img{width:55px;height:55px;float:left;margin-right:15px;border-radius:3px}
+.achmnts p{margin:0 0 4px}
+.achmnts .unlcked{margin-top:3px;font-size:.875em;font-weight:normal;display:block}
+.achmnts .desc{font-size:.875em;padding-top:10px}
+.achmnts .prgrss{margin-top:15px}
+.achmnts .xpbar{margin:8px 0 0 0;width:80%}
+.achmnts .xpnumeric{margin:0}
+
+
 /** Quest Types **/
 
 .crossword table{width:100%;max-width:800px;border-spacing:2px;border-collapse:separate}
@@ -216,6 +233,8 @@ input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;bo
 .gchars li{width:32%;margin-right:5px}
 .gchars li:nth-child(even){float:left}
 
+.achmnts .xpbar{width:89%}
+
 .opponent .hero{max-width:200px}
 }
 
@@ -231,6 +250,11 @@ input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;bo
 .gquests .date{display:inline;margin-right:15px}
 .gquests .xp{float:right}
 
+.rare,.hunter{float:left;width:49%}
+.hunter{float:right}
+.achmnts .desc{padding-top:0}
+.achmnts .unlcked{font-size:.75em;float:right;margin:-6px -4px 0 0;color:#878787}
+
 .bossfight li{float:left;width:44%}
 .bossfight li:nth-child(even){float:right}
 .bossfight input,.bossfight p{text-align:center}