character profile template with dummy data

This commit is contained in:
Daniel 2014-03-25 19:14:23 +01:00
commit 8e4887b689
2 changed files with 193 additions and 22 deletions

View file

@ -1,25 +1,165 @@
<h2><a href="<?=$linker->link(array('seminaries',$seminary['url']))?>"><?=$seminary['title']?></a></h2>
<h3><?=_('Characters')?></h3>
<h4><?=$character['name']?></h4>
<h1><a href="<?=$linker->link(array('seminaries',$seminary['url']))?>"><?=$seminary['title']?></a></h1>
<h2><i class="fa fa-user fa-fw"></i><?=$character['name']?></h2>
<section>
<p>
XPs: <?=$character['xps']?> (<?=_('Level')?> <?=$character['xplevel']['level']?><?php if(!is_null($character['xplevel']['name'])) : ?>: <?=$character['xplevel']['name']?><?php endif ?>)<br />
<?=_('User')?>: <a href="<?=$linker->link(array('users','user',$user['url']))?>"><?=$user['username']?></a><br />
<?php foreach($characterfields as &$field) : ?>
<?=$field['title']?>: <?=$field['value']?><br />
<?php endforeach ?>
</p>
<section class="cf">
<div class="cinfo">
<div class="cdata">
<div class="xpbar">
<span style="width:85%"></span>
</div>
<p><small>Gesamtfortschritt: 85%</small></p>
</div>
<div class="cdata square">
<p class="value"><?=$character['xplevel']['level']?></p>
<p><small><?=_('Level')?></small></p>
</div>
<div class="cdata square">
<p class="value">500</p>
<p><small>XP</small></p>
</div>
<div class="cdata square blue">
<p class="value">7.</p>
<p><small>Platz</small></p>
</div>
<h2><i class="fa fa-bookmark fa-fw"></i>Belohnungen</h2>
<ul class="crewards">
<li>
<p class="unlocked"><i class="fa fa-check-circle fa-fw"></i>Aktive Beteiligung</p>
</li>
<li>
<p class="unlocked"><i class="fa fa-check-circle fa-fw"></i>+ 0,3 Notenbonus</p>
</li>
<li>
<p><i class="fa fa-lock fa-fw"></i>+ 0,7 Notenbonus <span class="locked">(noch 300 XP)</span></p>
</li>
<li>
<p><i class="fa fa-lock fa-fw"></i>+ 1,0 Notenbonus <span class="locked">(noch 500 XP)</span></p>
</li>
</ul>
</div>
<div class="cportrait">
<img src="http://legende-von-zyren.de/img/avatars/Goblin7.png"><br>
<?php if(!is_null($character['avatar_url'])) : ?>
<img src="<?=$linker->link(array('media','index',$seminary['url'],$character['avatar_url']))?>" alt="<?=$character['avatar_description']?>" />
<?php endif ?>
</div>
</section>
<section>
<h1><?=_('Character Groups')?></h1>
<ul>
<h2><i class="fa fa-users fa-fw"></i><?=_('Character Groups')?></h2>
<ul class="cgroups cf">
<li class="cf">
<img src="http://s1.directupload.net/images/140325/3eqybn4i.png">
<a href="#">Super wilde Arbeits Gruppe [SWAG]</a><p><span>500 XP</span></p>
</li>
<li class="cf">
<img src="http://s1.directupload.net/images/140325/3eqybn4i.png">
<a href="#">Mit Herz und Seele</a><p><span>500 XP</span></p>
</li>
<?php foreach($groups as &$group) : ?>
<li><a href="<?=$linker->link(array('charactergroups','group',$seminary['url'],$group['charactergroupsgroup_url'],$group['url']))?>"><?=$group['name']?></a> (<?=$group['xps']?> XPs)</li>
<?php endforeach ?>
</ul>
</section>
<div class="cf">
<section class="fll48">
<h2><i class="fa fa-trophy fa-fw"></i>Neue Achievements</h2>
<ul class="cranks">
<li>
<a href="#" title="Achievement-Titel"><img src="http://legende-von-zyren.de/img/achieve/1b.jpg"></a>
<p><a href="#">Des Königs neue Quests</a></p>
<p><small>erreicht am: 14.07.2014</small></p>
</li>
<li>
<a href="#" title="Achievement-Titel"><img src="http://legende-von-zyren.de/img/achieve/2b.jpg"></a>
<p><a href="#">Des Königs neue Quests</a></p>
<p><small>erreicht am: 14.07.2014</small></p>
</li>
<li>
<a href="#" title="Achievement-Titel"><img src="http://legende-von-zyren.de/img/achieve/3b.jpg"></a>
<p><a href="#">Des Königs neue Quests</a></p>
<p><small>erreicht am: 14.07.2014</small></p>
</li>
<li>
<a href="#" title="Achievement-Titel"><img src="http://legende-von-zyren.de/img/achieve/4b.jpg"></a>
<p><a href="#">Des Königs neue Quests</a></p>
<p><small>erreicht am: 14.07.2014</small></p>
</li>
<li>
<a href="#" title="Achievement-Titel"><img src="http://legende-von-zyren.de/img/achieve/5b.jpg"></a>
<p><a href="#">Des Königs neue Quests</a></p>
<p><small>erreicht am: 14.07.2014</small></p>
</li>
</ul>
</section>
<section class="flr48">
<h2><i class="fa fa-list fa-fw"></i>Ranking</h2>
<ul class="cranks">
<li>
<a href="#" title="Achievement-Titel"><img src="http://s7.directupload.net/images/140325/e2wdqhqa.png"></a>
<p>7. <a href="#">Anduin</a></p>
<p><small>Level 27 (1500 XP)</small></p>
</li>
<li>
<a href="#" title="Achievement-Titel"><img src="http://s1.directupload.net/images/140325/upv2dg2r.png"></a>
<p>8. <a href="#">Jaina</a></p>
<p><small>Level 26 (1400 XP)</small></p>
</li>
<li>
<a href="#" title="Achievement-Titel"><img src="http://s14.directupload.net/images/140325/x9ny5kgu.png"></a>
<p class="fwb">9. <a href="#">Uther</a></p>
<p><small>Level 25 (1300 XP)</small></p>
</li>
<li>
<a href="#" title="Achievement-Titel"><img src="http://s7.directupload.net/images/140325/e2wdqhqa.png"></a>
<p>10. <a href="#">Lothar</a></p>
<p><small>Level 24 (1200 XP)</small></p>
</li>
<li>
<a href="#" title="Achievement-Titel"><img src="http://s1.directupload.net/images/140325/whre34td.png"></a>
<p>11. <a href="#">Morris</a></p>
<p><small>Level 23 (1100 XP)</small></p>
</li>
</ul>
</section>
</div>
<section>
<h2><i class="fa fa-book fa-fw"></i>Thematischer Fortschritt</h2>
<ul class="ctopics cf">
<li>
<p><small><a href="#">Klassifikation</a> (3/5)</small></p>
<div class="xpbar">
<span style="width:60%"></span>
</div>
</li>
<li>
<p><small><a href="#">Thesauri</a> (1/10)</small></p>
<div class="xpbar">
<span style="width:10%"></span>
</div>
</li>
<li>
<p><small><a href="#">Indexierung</a> (3/5)</small></p>
<div class="xpbar">
<span style="width:20%"></span>
</div>
</li>
<li>
<p><small><a href="#">Recherche</a> (3/5)</small></p>
<div class="xpbar">
<span style="width:80%"></span>
</div>
</li>
<li>
<p><small><a href="#">Folksonomies</a> (3/5)</small></p>
<div class="xpbar">
<span style="width:70%"></span>
</div>
</li>
</ul>
</section>

View file

@ -10,7 +10,7 @@ b,strong,.fwb{font-weight:bold}
dfn,.fsi{font-style:italic}
img{border:0}
h1,h2,h3{color:#103a3e}
h2{font-size:120%}
h2{font-size:120%;margin-top:30px}
h3{font-size:100%}
ul,ol,nav{padding:0;list-style-type:none}
p{margin:0 0 16px;padding:0}
@ -23,7 +23,7 @@ mark{background:#ff0;color:#000}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}
pre{white-space:pre-wrap}
q{quotes:"\201C" "\201D" "\2018" "\2019"}
small{font-size:80%}
small{font-size:87.5%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
@ -73,7 +73,7 @@ menu a,#profile{display:block;padding:15px 0;color:#d9e5e7}
menu a:hover,#profile:hover{color:#fff}
menu .active{color:#fff}
menu .active .fa{color:#bcd75e}
menu .active .fa,.crewards .unlocked .fa{color:#bcd75e}
#profile{float:right}
.circlenote{margin-left:15px;background:#bcd75e;border-radius:0.8em;display:inline-block;color:#0f373c;font-weight:bold;line-height:1.6em;text-align:center;width:1.6em;font-size:.8em}
@ -123,13 +123,44 @@ article{padding:70px 0 30px}
input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;border-color:#d48c4e}
/** Character Profile **/
.cportrait img{width:100%}
.cdata{display:inline-block;background:#fff;border-radius:3px;padding:12px 20px 0 20px;margin-bottom:5px}
.cdata.square{text-align:center;width:10%;padding-top:0}
.cdata.square.blue{background:#5cb6bd;color:#fff}
.cdata .xpbar,.ctopics .xpbar{width:100%}
.cdata .value{font-size:1.5em;margin:0;padding-top:8px}
.crewards li{background:#fff;margin-bottom:5px;padding:15px 15px 1px 15px;border-radius:3px;font-size:.875em}
.crewards li:last{margin-bottom:0}
.crewards li .fa{font-size:1.25em}
.crewards .locked{color:#aca8a1;padding:10px;}
.cgroups img{float:left;border-radius:3px;margin-right:5px;height:35px}
.cgroups p{float:left;0;padding:0 12px;line-height:35px;background:#fff;border-radius:0 3px 3px 0}
.cgroups a{float:left;padding:0 12px;line-height:35px;background:#50a4ab;color:#fff;background:#50a4ab;border-radius:3px 0 0 3px}
.cranks li{clear:both;padding:8px 0 8px 8px;border-radius:3px}
.cranks li:nth-child(odd){background:#fff}
.cranks img{float:left;margin-right:15px;width:50px;height:50px;border-radius:25px}
.cranks p,.ctopics p{margin:0;padding:0}
.ctopics .xpbar{background:#e4e1dd}
.ctopics .xpbar span{background:#50a4ab}
/** Media Queries **/
@media only screen and (min-width:480px){
.questgroups li{width:48%;float:left}
.questgroups li:nth-child(even){float:right}
.questgroups li,.ctopics li,.fll48{width:48%;float:left}
.questgroups li:nth-child(even),.ctopics li:nth-child(even),.flr48{width:48%;float:right}
.xpinfo{display:inline-block;float:left;padding-right:20px}
.xpbar{width:50%}
.cinfo{float:left;width:70%}
.cportrait{float:right;width:25%}
}
@media only screen and (min-width:768px){
@ -144,7 +175,7 @@ menu a{padding:10px 0}
#profile{float:none;margin:30px 0 15px 12px}
#toggle,.toggle{display:none}
.wrap{margin:0 0 0 300px}
article{padding:20px 40px 30px 40px}
article{padding:20px 40px 80px 40px}
.moodpic{margin:-20px -40px}
.breadcrumbs li{display:inline;padding-right:10px}
}