cuchulublog/templates/home.phtml

215 lines
10 KiB
PHTML

<%
from settings import config
base_url=config.application_root
%><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<%block name="metatags">
</%block>
<title>${title}</title>
<meta name="title" content="${lang('cuchulublog', 'cuchulu_com_talking_about', 'Cuchulu.com. Hablando de ingeniería informática.')}">
<meta name="description" content="${lang('cuchulublog', 'cuchulu_com_personal_project', 'Página personal de los proyectos relacionados con Paramecio Framework, Linux, Apache, NGINX, Email servers, selfcloud y más cosas...')}">
<meta name="keywords" content="cloud, linux, apache, nginx, python, php, webserver, selfcloud, mi cloud, ahorrar dinero en servidor">
<meta name="robots" content="index, follow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="Spanish">
<meta name="author" content="Antonio De La Rosa">
<!-- Google Font: Source Sans Pro -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,500,500italic&display=fallback">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,400i,700&display=fallback">
<!-- styles -->
<!--<link href="${make_media_url('css/font-awesome.min.css', 'admin')}" rel="stylesheet" />-->
<link href="${make_media_url('css/bootstrap/bootstrap-reboot.min.css', 'cuchulublog')}" rel="stylesheet" type="text/css"/>
<!--<link href="${make_media_url('css/bootstrap/bootstrap-grid.min.css', 'cuchulublog')}" rel="stylesheet" type="text/css"/>-->
<link href="${make_media_url('css/font-awesome.min.css', 'cuchulublog')}" rel="stylesheet" type="text/css"/>
<link href="${make_media_url('css/layout.css', 'cuchulublog')}" rel="stylesheet" type="text/css"/>
<link rel="icon" type="image/png" href="${make_media_url('images/logo.png', 'cuchulublog')}">
<%block name="header_css">
</%block>
</head>
<body>
<div id="loading" style="position:fixed;top:0px;height:100vh;width:100%;border: solid #f00 0px;display:none;">
<div style="display: flex;padding: 0px;align-items: center;justify-content: center;height:100vh;width:100%;">
<i class="fa fa-refresh fa-spin fa-3x fa-fw" style="position:absolute;top:50%;"></i>
</div>
</div>
<div class="container-top">
<div class="container" style="background: #fbfbfb;border: solid #cbcbcb;border-width: 0px 1px;">
<div class="column_left logo">
<div class="center_flex" style="height:50px;font-size:24px;font-family:Open Sans;background: #253062;color: #fff;">
<a href="/" id="logo_url">Cuchulu.com</a>
<div id="nav_home_mobile">
<a href="#" id="nav_button"><i class="fa fa-bars" aria-hidden="true"><span>Navigator button</span></i></a>
</div>
</div>
</div>
<div class="column_content" id="menu_big">
<div class="right_flex header_nav">
<nav id="nav_home">
<ul>
<li>
<a href="${url_for('.cuchulublog_home')}" id="cuchulu_home"><i class="fa fa-home" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'home', 'Home')}</a>
</li><li>
<a href="${url_for('.cuchulublog_projects')}" id="cuchulu_projects"><i class="fa fa-globe" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'projects', 'Projects')}</a>
</li><li>
<a href="${url_for('.cuchulublog_all_posts')}" id="cuchulu_blog"><i class="fa fa-comments" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'blog', 'Blog')}</a>
</li><li>
<a href="${url_for('.cuchulublog_contact')}" id="cuchulu_contact"><i class="fa fa-envelope-o" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'contact', 'Contact')}</a>
</li><li>
<a href="${url_for('.cuchulublog_about')}" id="cuchulu_about"><i class="fa fa-info" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'about', 'About')}</a>
</li>
</ul>
</nav>
</div>
</div>
<nav id="nav_mobile" style="display:none;">
<ul>
<li>
<a href="${url_for('.cuchulublog_home')}"><i class="fa fa-home" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'home', 'Home')}</a>
</li>
<li>
<a href="${url_for('.cuchulublog_projects')}"><i class="fa fa-globe" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'projects', 'Projects')}</a>
</li>
<li>
<a href="${url_for('.cuchulublog_all_posts')}"><i class="fa fa-comments" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'blog', 'Blog')}</a>
</li>
<li>
<a href="${url_for('.cuchulublog_contact')}"><i class="fa fa-envelope-o" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'contact', 'Contact')}</a>
</li>
<li>
<a href="${url_for('.cuchulublog_about')}"><i class="fa fa-info" aria-hidden="true"></i>&nbsp;&nbsp; ${lang('cuchulublog', 'about', 'About')}</a>
</li>
</ul>
</nav>
<div id="content_home">
<%block name="content">
<div align="center" style="padding-top:40px;">
<img src="${make_media_url('images/logo.png', 'cuchulublog')}" width="75" height="75" alt="Cuchulu logo" />
<h1>${lang('cuchulublog', 'welcome_to_cuchulu', 'Welcome to cuchulu.com!!!')}</h1>
<p>
${lang('cuchulublog', 'cuchulu_is_set_projects', 'Cuchulu.com is a set of projects of Antonio de la Rosa, a coder and Linux sysadmin from Spain.')}
</p>
<p>
${lang('cuchulublog', 'you_can_find_multiple', 'You can find multiple utilities for Linux administration, cloud systems, monitoritation tools and more.')}
</p>
<p>
${lang('cuchulublog', 'of_course_if_you_need', 'Of course, if you need Linux admin services, create an App or other computer enginering services, you can <a href="/contact">contact me</a>.')|n}
</p>
<%include file="mantained_projects.phtml" />
<section id="blog_section">
<h2>${lang('cuchulublog', 'blog_last_posts', 'Blog - Last posts')}</h2>
<article style="display:none;" class="tpl_post">
<header>
<h1 class="blog_post_name">Apple</h1>
<p>${lang('cuchulublog', 'published', 'Published')}: <time pubdate="pubdate" class="date_post">09/10/2009</time></p>
</header>
<div class="content_post">
</div>
<footer>
<!--<p><small>Licencia Creative Commons Reconocimiento-Compartir bajo la misma</small></p>-->
<p><a href="#" class="url_post">${lang('cuchulublog', 'read_more', 'Read more')}</a></p>
</footer>
</article>
<br clear="all" />
</section>
</div>
<!--<div class="column_left" id="nav_column_left">
<nav id="nav_column">
<ul>
<li>Home</li>
</ul>
</nav>
</div>-->
</%block>
</div>
<footer id="footer_page">
&copy; Antonio de la Rosa - <a href="${url_for('.cuchulublog_about')}">About</a>
</footer>
</div>
</div>
<script language="Javascript" src="${make_media_url('js/jquery.min.js', 'admin')}"></script>
<script>
$('a#nav_button').click(function () {
if($('#nav_mobile').css('display')=='none') {
$('#nav_mobile').show();
}
else {
$('#nav_mobile').hide();
}
return false;
});
base_url="${base_url}";
menu={'': '#cuchulu_home','home': '#cuchulu_home', 'projects': '#cuchulu_projects', 'blog': '#cuchulu_blog', 'contact': '#cuchulu_contact', 'about': '#cuchulu_about'};
page=location.pathname.replace(base_url, '')
$(menu[page]).addClass('title_menu');
</script>
<%block name="js_footer">
<script>
<%
from paramecio2.libraries.i18n import I18n
lang_default=I18n.default_lang
%>
var lang_default="${lang_default}";
$.ajax({
url: "${url_for('blog_app.get_last_posts')}",
data: {},
success: function (data) {
for(i in data) {
var tpl=$('.tpl_post').clone().appendTo('#blog_section');
tpl.removeClass('tpl_post');
tpl.attr('id', 'tpl_post_'+data[i].id);
tpl.find('.blog_post_name').html(JSON.parse(data[i].title)[lang_default]);
tpl.find('.content_post').html(JSON.parse(data[i].lead)[lang_default]);
//console.log(data[i].date.replace(' 00:00:00', '').replace(/-/g, '/'));
var date_post=data[i].date.replace(' 00:00:00', '').replace(/-/g, '/');
tpl.find('.date_post').html(date_post);
tpl.find('.url_post').attr('href', '/blog/'+date_post+'/'+data[i].slugify+'/'+data[i].id);
tpl.show();
}
},
dataType: 'json'
});
</script>
</%block>
</body>
</html>