Added experimental pages for the new design.

This commit is contained in:
Beanow 2015-02-08 18:25:21 +01:00
parent 1febb1a414
commit 154f33ca86
36 changed files with 922 additions and 13 deletions

BIN
assets/fonts/Lato-Black.ttf Normal file

Binary file not shown.

Binary file not shown.

BIN
assets/fonts/Lato-Bold.ttf Normal file

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
assets/fonts/Lato-Heavy.ttf Normal file

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
assets/fonts/Lato-Light.ttf Normal file

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
assets/fonts/Lato-Thin.ttf Normal file

Binary file not shown.

Binary file not shown.

220
assets/style.css Normal file
View File

@ -0,0 +1,220 @@
@font-face {
font-family: "LatoHairline";
src: url("fonts/Lato-Hairline.ttf") format("truetype");
}
@font-face {
font-family: "LatoLight";
src: url("fonts/Lato-Light.ttf") format("truetype");
}
*{
box-sizing:border-box;
}
html,body{
margin:0;
padding:0;
}
html{
font-family:'LatoLight', 'Lato', sans-serif;
font-weight:300;
font-size:100%;
}
a{
text-decoration:none;
color:inherit;
}
#top-bar{
background:#f5f5f5;
padding:8px 14px;
height:55px;
text-align:center;
position:relative;
font-weight:300;
}
#top-bar .header{
position:absolute;
top:14px;
left:14px;
display:inline-block;
font-size:16px;
font-weight:300;
line-height:0.9em;
background:url('/images/friendica.svg') top left no-repeat;
background-size:14px;
padding-left:18px;
margin:0;
}
#top-bar .search-form{
margin:0 20px;
display:inline-block;
}
#top-bar .search-wrapper{
background:#fff;
}
nav#links{
position:absolute;
top:0;
right:14px;
line-height:55px;
}
nav#links a{
display:inline-block;
margin:0 4px;
padding:0 5px;
}
.sub-menu-outer{
background:#eee;
line-height:45px;
height:45px;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}
.sub-menu-outer .sub-menu-inner{
width:500px;
margin:auto;
}
.sub-menu-inner .option{
padding:9px 6px;
margin:0 5px;
}
.sub-menu-inner .option.active{
border-bottom:2px solid #f00;
}
.search-results,
.homepage-wrapper{
width:500px;
margin:auto;
text-align:center;
}
.search-results{
margin-bottom:25px;
}
.homepage-wrapper{
margin:120px auto;
}
.homepage-wrapper .header{
font-size:68px;
font-family:'LatoHairline', 'Lato', sans-serif;
font-weight:100;
line-height:0.9em;
background:url('/images/friendica.svg') top left no-repeat;
background-size:61px;
margin-left:40px;
}
.homepage-wrapper .about{
text-align:justify;
line-height:1.5em;
color:#555;
}
.homepage-wrapper .profiles{
margin-top:3em;
}
.profile{
display:table;
width:100%;
text-decoration:none;
color:#000;
padding:2px;
outline:none;
}
.profile.selected,
.profile:focus,
.profile:hover{
padding:1px;
border:1px solid #ccc;
}
.profile .profile-photo,
.profile .profile-info{
display:table-cell;
vertical-align:top;
text-align:left;
}
.profile .profile-photo{
margin:8px;
border-radius:15px;
border:1px solid #ddd;
}
.profile .profile-info{
padding:8px;
width:100%;
}
.profile .profile-info strong{
font-weight:600;
}
.profile .profile-info .fa{
line-height:1.1em;
color:#999;
}
.profile .profile-info .url{
font-size:80%;
margin-bottom:3px;
color:#555;
}
.search-wrapper{
position:relative;
display:inline-block;
width:500px;
background:#f5f5f5;
border:1px solid #ddd;
border-radius:8px;
height:38px;
line-height:22px;
}
.search-wrapper .search-field{
line-height:22px;
display:block;
border:none;
outline:none;
background:none;
padding:8px 12px;
padding-right:117px;
width:100%;
}
.search-wrapper .reset{
position:absolute;
top:0;
right:65px;
height:25px;
width:25px;
margin:6px;
padding:0;
line-height:1;
font-size:12px;
color:#555;
background:#eee;
border:1px solid #ddd;
border-radius:20px;
font-family:'FontAwesome';
font-weight:100;
}
.search-wrapper .search{
border:none;
border-left:1px solid #ddd;
color:#555;
background:#eee;
position:absolute;
top:0;
right:0;
height:36px;
width:65px;
border-radius:0 8px 8px 0;
}

185
images/friendica.svg Normal file
View File

@ -0,0 +1,185 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="100"
height="100"
id="svg2">
<defs
id="defs4">
<linearGradient
id="highlightgradient">
<stop
id="stop3833"
style="stop-color:#ffffff;stop-opacity:0.74374998"
offset="0" />
<stop
id="stop3829"
style="stop-color:#ffffff;stop-opacity:0"
offset="1" />
</linearGradient>
<linearGradient
id="shadowgradient">
<stop
id="stop3833-5"
style="stop-color:#000000;stop-opacity:0.5"
offset="0" />
<stop
id="stop3829-9"
style="stop-color:#818080;stop-opacity:0"
offset="1" />
</linearGradient>
<linearGradient
x1="44.948269"
y1="0"
x2="54.103466"
y2="46.797421"
id="linearGradient4011"
xlink:href="#highlightgradient"
gradientUnits="userSpaceOnUse"
gradientTransform="scale(1,0.54545455)" />
<linearGradient
x1="52.016712"
y1="96"
x2="42.867535"
y2="41.837971"
id="linearGradient4021"
xlink:href="#shadowgradient"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1,0,0,0.5,0,48)" />
<filter
x="-0.029999999"
y="-0.12"
width="1.0599999"
height="1.24"
color-interpolation-filters="sRGB"
id="filter4055">
<feGaussianBlur
id="feGaussianBlur4057"
stdDeviation="1.2" />
</filter>
<filter
x="-0.029877551"
y="-0.122"
width="1.0597551"
height="1.244"
color-interpolation-filters="sRGB"
id="filter4059">
<feGaussianBlur
id="feGaussianBlur4061"
stdDeviation="1.22" />
</filter>
</defs>
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(0,-952.3622)"
id="layer1"
style="display:inline">
<path
d="m 18,954.3622 c -8.9908981,0.0431 -16,7.05218 -16,16 0,0 0,41.4991 0,64 0,9.1201 7.0091019,16 16,16 l 16,0 0,-26 32,0 -0.08398,-23.9316 -31.91602,0.1679 0,-20.2363 32,0 0,-26 c 0,0 -40,0 -48,0 z"
id="rect2993"
style="fill:#ffc019;fill-opacity:1;stroke:none" />
<path
d="m 82,1050.3622 c 8.990898,0 16.086165,-6.966 16,-16 0,0 0,-41.4991 0,-64 0.07767,-9.01639 -7.067354,-16 -16,-16 l -16,0 0,26 -32,0 0,22 32,0 0,22 -32,0 0,26 c 0,0 32,0 48,0 z"
id="rect2993-6"
style="fill:#1872a2;fill-opacity:1;stroke:none" />
</g>
<g
transform="translate(0,4)"
id="g3997"
style="display:inline">
<path
d="m 66,-2 0,26 -32,0 0,22 m 32,0 0,22 -32,0 0,26"
id="path3999"
style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<rect
width="96"
height="96"
rx="16"
ry="16"
x="2"
y="-2"
id="rect4001"
style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
</g>
<g
transform="translate(0,4)"
id="layer3"
style="display:none">
<path
d="m 64,0 0,26 -32,0 0,22 32,0 0,22 -32,0 0,26"
id="path3926"
style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<rect
width="96"
height="96"
rx="16"
ry="16"
x="0"
y="0"
id="rect3928"
style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
</g>
<g
transform="translate(0,4)"
id="layer2"
style="display:inline">
<rect
width="96"
height="48.04369"
rx="15.214664"
ry="15.215644"
x="2"
y="-2"
id="rect3823"
style="fill:url(#linearGradient3930);fill-opacity:1;stroke:none" />
<rect
width="96"
height="47.86721"
rx="15.214664"
ry="15.159752"
x="2"
y="-94"
transform="scale(1,-1)"
id="rect3823-8"
style="fill:url(#linearGradient3904);fill-opacity:1;stroke:none" />
<rect
width="98"
height="24"
rx="15.214664"
ry="8.2994423"
x="0"
y="0"
transform="matrix(1.0296115,0,0,1.1963836,-0.901924,-6.713207)"
id="rect4003"
style="fill:url(#linearGradient4011);fill-opacity:1;stroke:none;filter:url(#filter4059)" />
<rect
width="96"
height="24"
rx="14.008356"
ry="12"
x="0"
y="72"
transform="matrix(0.9768331,0,0,0.91974646,3.1649641,6.098115)"
id="rect4013"
style="opacity:0.5674603;fill:url(#linearGradient4021);fill-opacity:1;stroke:none;filter:url(#filter4055)" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 5.4 KiB

View File

@ -1,14 +1,17 @@
<?php
if(! function_exists('home_init')) {
function home_init(&$a) {
$r = q("SELECT * FROM `user` WHERE 1 LIMIT 1");
if(count($r))
goaway( $a->get_baseurl() . "/profile/" . $r[0]['nickname'] );
else
goaway( $a->get_baseurl() . "/register" );
use Friendica\Directory\Rendering\View;
use Friendica\Directory\Helper\Profile as ProfileHelper;
if(! function_exists('home_content')) {
function home_content(&$a) {
$profiles = q("SELECT * FROM profile WHERE comm=1 AND LENGTH(pdesc)>0 ORDER BY RAND() LIMIT 3");
$view = new View('homepage', 'minimal');
$view->addHelper('photoUrl', ProfileHelper::get('photoUrl'));
$view->output(array(
'profiles' => $profiles
));
}}

View File

@ -1,8 +1,11 @@
<?php
use \DateTime;
require_once('datetime.php');
function photo_init(&$a) {
switch($a->argc) {
case 2:
$photo = $a->argv[1];
@ -23,9 +26,27 @@ function photo_init(&$a) {
if(x($data) === false || (! strlen($data))) {
$data = file_get_contents('images/default-profile-sm.jpg');
}
header("Content-type: image/jpeg");
//Enable async process from here.
session_write_close();
//Try and cache our result.
$etag = md5($data);
header('Etag: '.$etag);
header('Expires: ' . datetime_convert('UTC','UTC', 'now + 1 week', 'D, d M Y H:i:s' . ' GMT'));
header("Cache-Control: max-age=".intval(7*24*3600));
if(function_exists('header_remove')) {
header_remove('Pragma');
header_remove('pragma');
}
if (isset($_SERVER['HTTP_IF_NONE_MATCH']) && $_SERVER['HTTP_IF_NONE_MATCH'] == $etag) {
header('HTTP/1.1 304 Not Modified');
exit;
}
header("Content-type: image/jpeg");
echo $data;
exit;
}

93
mod/search.php Normal file
View File

@ -0,0 +1,93 @@
<?php
use Friendica\Directory\Rendering\View;
use Friendica\Directory\Helper\Search as SearchHelper;
use Friendica\Directory\Helper\Profile as ProfileHelper;
function search_content(&$a) {
//Filters
$community = null;
$filter = null;
if($a->argc >= 2){
$filter = $a->argv[1];
switch($filter){
case 'forums':
$community = 1;
break;
case 'people':
$community = 0;
break;
default:
$community = null;
$filter = null;
break;
}
}
$alpha = false;
if(x($_GET, 'alpha') == 1)
$alpha = true;
//Query
$search = ((x($_GET,'query')) ? notags(trim($_GET['query'])) : '');
if(empty($search)){
goaway('/home');
}
if($search)
$alpha = true;
//Run our query.
if($search)
$search = dbesc($search . '*');
$sql_extra = ((strlen($search)) ? " AND MATCH (`name`, `pdesc`, `homepage`, `locality`, `region`, `country-name`, `gender`, `marital`, `tags` )
AGAINST ('$search' IN BOOLEAN MODE) " : "");
if(!is_null($community))
$sql_extra .= " and comm=".intval($community)." ";
$sql_extra = str_replace('%','%%',$sql_extra);
$total = 0;
$r = q("SELECT COUNT(*) AS `total` FROM `profile` WHERE `censored` = 0 $sql_extra ");
if(count($r)){
$total = $r[0]['total'];
$a->set_pager_total($r[0]['total']);
}
if($alpha)
$order = " order by name asc ";
else
$order = " order by updated desc, id desc ";
$r = q("SELECT * FROM `profile` WHERE `censored` = 0 $sql_extra $order LIMIT %d , %d ",
intval($a->pager['start']),
intval($a->pager['itemspage'])
);
//Show results.
$view = new View('search');
$view->addHelper('paginate', function()use($a){return paginate($a);});
$view->addHelper('photoUrl', ProfileHelper::get('photoUrl'));
$view->addHelper('filterAllUrl', SearchHelper::get('filterAllUrl'));
$view->addHelper('filterPeopleUrl', SearchHelper::get('filterPeopleUrl'));
$view->addHelper('filterForumsUrl', SearchHelper::get('filterForumsUrl'));
$view->output(array(
'total' => number_format($total),
'results' => $r,
'filter' => $filter,
'query' => x($_GET,'query') ? $_GET['query'] : ''
));
}

47
src/Helper/BaseHelper.php Normal file
View File

@ -0,0 +1,47 @@
<?php namespace Friendica\Directory\Helper;
use \OutOfBoundsException;
use \ReflectionMethod;
/**
* Provides easy access to common helpers, to add them to your views.
*/
abstract class BaseHelper
{
public static function get($name)
{
$helper = new static();
return $helper->{$name};
}
/**
* A reference to the global App.
* @var \App
*/
protected $app;
public function __construct()
{
global $a;
$this->app = $a;
}
//Provides access to a wrapper for your helper functions.
public function __get($name)
{
if(!method_exists($this, $name)){
throw new OutOfBoundsException("Helper method '$name' does not exist on ".get_class($this));
}
$helper = $this;
$method = new ReflectionMethod($this, $name);
return function()use($method, $helper){
$arguments = func_get_args();
return $method->invokeArgs($helper, $arguments);
};
}
}

16
src/Helper/Profile.php Normal file
View File

@ -0,0 +1,16 @@
<?php namespace Friendica\Directory\Helper;
use \BadMethodCallException;
/**
* Provides easy access to common helpers, to add them to your views.
*/
class Profile extends BaseHelper
{
public function photoUrl($profileId)
{
return $this->app->get_baseurl() . '/photo/' . $profileId;
}
}

26
src/Helper/Search.php Normal file
View File

@ -0,0 +1,26 @@
<?php namespace Friendica\Directory\Helper;
use \BadMethodCallException;
/**
* Provides easy access to common helpers, to add them to your views.
*/
class Search extends BaseHelper
{
public function filterAllUrl($query)
{
return $this->app->get_baseurl() . '/search?query=' . urlencode($query);
}
public function filterPeopleUrl($query)
{
return $this->app->get_baseurl() . '/search/people?query=' . urlencode($query);
}
public function filterForumsUrl($query)
{
return $this->app->get_baseurl() . '/search/forums?query=' . urlencode($query);
}
}

109
src/Rendering/View.php Normal file
View File

@ -0,0 +1,109 @@
<?php namespace Friendica\Directory\Rendering;
use \Closure;
/**
* This class with insert data in a two-step view.
*/
class View
{
#TODO: Replace this with better code.
public static function getViewPath($name)
{
return dirname(__DIR__).'/templates/view/'.$name.'.php';
}
public static function getLayoutPath($name)
{
return dirname(__DIR__).'/templates/layout/'.$name.'.php';
}
protected $layout;
protected $view;
protected $helpers;
public function getHelpers(){
return $this->helpers;
}
public function addHelper($name, Closure $helper)
{
$this->helpers[$name] = $helper;
}
public function getView(){
return $this->view;
}
public function setView($value){
$this->view = $value;
}
public function getLayout(){
return $this->layout;
}
public function setLayout($value){
$this->layout = $value;
}
public function __construct($view=null, $layout="default")
{
$this->view = $view;
$this->layout = $layout;
$this->helpers = array();
}
public function render(array $data=array())
{
//First the outer view.
$view = self::getViewPath($this->view);
$viewContent = $this->encapsulatedRequire($view, $data);
//Then the layout, including the view as $content.
$data['content'] = $viewContent;
$layout = self::getLayoutPath($this->layout);
return $this->encapsulatedRequire($layout, $data);
}
public function output(array $data=array())
{
header("Content-type: text/html; charset=utf-8");
echo $this->render($data);
exit;
}
public function encapsulatedRequire($filename, array $data=null)
{
//This will provide our variables on the global scope.
$call = function($__FILE__, $__VARS__){
extract($__VARS__, EXTR_SKIP);
require $__FILE__;
};
//Use our current data as fallback.
if(!is_array($data)){
$data = $this->currentData;
}
//This will add the helper class to $this.
$helpers = new ViewHelpers($this, $data);
$call = $call->bindTo($helpers, get_class($helpers));
//Run and return the value.
ob_start();
$call($filename, $data);
return ob_get_clean();
}
}

View File

@ -0,0 +1,59 @@
<?php namespace Friendica\Directory\Rendering;
use \BadMethodCallException;
/**
* This provides functions in a view to do things like including new views.
*/
class ViewHelpers
{
protected $view;
protected $contextData;
public function __construct(View $view, array $contextData)
{
$this->view = $view;
$this->contextData = $contextData;
}
public function view($name, array $overrides=null)
{
$data = $this->contextData;
if(is_array($overrides)){
$data = array_merge($data, $overrides);
}
return $this->view->encapsulatedRequire(View::getViewPath($name), $data);
}
public function layout($name, array $overrides=null)
{
$data = $this->contextData;
if(is_array($overrides)){
$data = array_merge($data, $overrides);
}
return $this->view->encapsulatedRequire(View::getLayoutPath($name), $data);
}
public function __call($name, $arguments)
{
$helpers = $this->view->getHelpers();
if(array_key_exists($name, $helpers)){
return call_user_func_array($helpers[$name], $arguments);
}
throw new BadMethodCallException("Helper method '$name' does not exist or is not added.");
}
}

View File

@ -0,0 +1,4 @@
<nav id="links">
<a href="/stats">Stats</a>
<a href="/help">Help</a>
</nav>

View File

@ -0,0 +1,7 @@
<form action="/search" method="get" class="search-form">
<div class="search-wrapper">
<input class="search-field" type="text" name="query" placeholder="<?php echo $query ? $query : 'Search your friends'; ?>" tabindex="1" autofocus />
<input class="reset" type="reset" value="&#xf00d;" tabindex="3" />
<input class="search" type="submit" value="Search" tabindex="2" />
</div>
</form>

View File

@ -0,0 +1,13 @@
<header id="top-bar">
<a href="/home">
<h1 class="header">
Friendica &nbsp; &nbsp;<br>&nbsp; &nbsp; Directory
</h1>
</a>
<?php echo $this->layout('_searcher'); ?>
<?php echo $this->layout('_navigation'); ?>
</header>

View File

@ -0,0 +1,5 @@
<?php
echo $this->layout('minimal', array(
'topBar' => $this->layout('_topBar')
));

View File

@ -0,0 +1,20 @@
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="search" type="application/opensearchdescription+xml" title="Friendica Directory" href="/opensearch" />
<title>Friendica Directory</title>
<link rel="shortcut icon" href="/images/friendica-32.png" />
<link rel="apple-touch-icon" href="/images/friendica-128.png"/>
<link href="//fonts.googleapis.com/css?family=Lato:100,300" rel="stylesheet" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="/assets/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php if(isset($topBar)) echo $topBar; ?>
<?php echo $content; ?>
</body>
</html>

View File

@ -0,0 +1,23 @@
<a class="profile" href="<?php echo $profile['homepage']; ?>" target="_blank">
<img class="profile-photo" src="<?php echo $this->photoUrl($profile['id']); ?>" />
<div class="profile-info">
<strong class="name"><?php echo $profile['name']; ?></strong>
<div class="url"><?php echo $profile['homepage']; ?></div>
<div class="description"><?php echo $profile['pdesc']; ?></div>
<div class="location">
<?php
$parts = array();
if(!empty($profile['locality'])) $parts[] = $profile['locality'];
if(!empty($profile['country-name'])) $parts[] = $profile['country-name'];
?>
<?php if (count($parts)): ?>
<i class="fa fa-globe"></i>
<?php echo implode(', ', $parts); ?>
<?php endif ?>
</div>
</div>
</a>

View File

@ -0,0 +1,26 @@
<?php echo $this->layout('_navigation'); ?>
<div class="homepage-wrapper">
<h1 class="header">
Friendica &nbsp; &nbsp;<br>&nbsp; &nbsp; Directory
</h1>
<?php echo $this->layout('_searcher'); ?>
<p class="about">
Friendica is a decentralized social network.
And this is a directory to find people on this network.
Vivamus condimentum tempor pellentesque. Phasellus turpis nulla, lacinia vitae quam in,
cursus semper est. Ut lobortis ex quis sodales porta. Nam rhoncus tortor lobortis auctor
efficitur. Ut ac ullamcorper lorem.
</p>
<div class="profiles">
<h3>Random groups</h3>
<?php foreach ($profiles as $profile)
echo $this->view('_profile', array('profile'=>$profile));
?>
</div>
</div>

View File

@ -0,0 +1,32 @@
<div class="sub-menu-outer">
<div class="sub-menu-inner search-options">
<a class="option <?php echo $filter === null ? 'active' : '' ?>" href="<?php echo $this->filterAllUrl($query); ?>">All</a>
<a class="option <?php echo $filter == 'people' ? 'active' : '' ?>" href="<?php echo $this->filterPeopleUrl($query); ?>">People</a>
<a class="option <?php echo $filter == 'forums' ? 'active' : '' ?>" href="<?php echo $this->filterForumsUrl($query); ?>">Forums</a>
</div>
</div>
<div class="search-results">
<div class="profiles">
<?php if (count($results)): ?>
<h3>Results for "<?php echo $query; ?>" (<?php echo $total; ?>)</h3>
<?php
foreach ($results as $profile)
echo $this->view('_profile', array('profile'=>$profile));
echo $this->paginate();
?>
<?php else: ?>
<h3>There were no results</h3>
<?php endif ?>
</div>
</div>