edgware/edgware/templates/article_frontend.html
ashok sukumaran 6a08812aff issue text
2011-05-14 20:36:59 +01:00

224 lines
5.9 KiB
HTML

{% load alter_size %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Edgwareroad.org {{article.title}}</title>
<link rel="stylesheet" type="text/css" href="/static/css/colorbox.css" />
<link rel="stylesheet" type="text/css" href="/static/css/fonts.css" />
<link rel="stylesheet" type="text/css" href="/static/css/jquery.tooltip.css" />
<link href="/static/css/articleDemo.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.style1 {font-size: 16px}
body, html {
font-size: {{ "14px"|make_really_big:m }};
margin: 0px;
padding: 0px;
}
p {
padding: 0px;
margin: 0px;
}
.canvas {
position: relative;
height: {{height}}
width: {{width}}
}
.box {
position: absolute;
}
.page {
clear:left;
font-family: Helvetica, sans-serif;
font-size: 14px;
width: {{width}}px;
height: {{height}}px;
/*
border-left:1px #CC6600 dotted;
border-bottom: #CC6600 1px dotted;
*/
margin-left: 25px;
margin-top: 10px;
margin-bottom: 20px;
padding: 0px;
position: relative;
/* background-color: #FFFFFF; */
}
{% for p in pages %}
#page{{p.id}} {
}
{% for t in p.textBoxes %}
#textbox{{p.id}}{{t.id}} {
{% for prop, value in t.css.items %}
{{prop}}: {{ value|make_really_big:m }};
{% endfor %}
}
{% endfor %}
{% for i in p.imageBoxes %}
#imagebox{{p.id}}{{i.id}} {
{% for prop, value in i.css.items %}
{{prop}}: {{ value|make_really_big:m }};
{% endfor %}
}
#imagebox{{p.id}}{{i.id}} img {
height: {{ i.css.height|make_really_big:m }};
width: {{ i.css.width|make_really_big:m }}
}
{% endfor %}
{% endfor %}
</style>
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/jquery.colorbox.js"></script>
<script type="text/javascript" src="/static/js/jquery.srt.js"></script>
<script type="text/javascript" src="/static/js/jquery.tooltip.js"></script>
<!-- <script type="text/javascript" src="/static/js/swfobject.js"></script> -->
<script type="text/javascript" src="/static/js/articleMockup.js"></script>
</head>
<body>
<div class="hiddenDivs">
<div id="videoWrap">
<video id="padmaVideo" data-base="/static/mockup/video/" src="" controls>Sorry, you currently need Firefox 3.5 to view this.</video>
<div id="srtWrap">
<div class="srtContainer">
<div class="srtTitle">Transcript:</div>
<div class="srt Transcript" data-srt="" data-video="padmaVideo">
</div>
<div class="toggleButton icon" title="Switch to Description">-></div>
</div>
<div class="srtContainer" style="display: none;">
<div class="srtTitle">Description:</div>
<div class="srt Description" data-video="padmaVideo" data-srt="">
</div>
<div class="toggleButton icon" title="Switch to Transcript">&lt;-</div>
</div>
</div>
</div>
</div>
<div class="hiddenDivs">
<div id="audioWrap">
<audio id="padmaAudio" data-base="/static/mockup/audio/" src="" controls>Sorry, you currently need Firefox 3.5 to view this.</audio>
<div id="srtWrap2">
<div class="audioSrt">
<div class="srtTitle"><span style="font-family:Verdana, Arial, Helvetica, sans-serif">Transcript:</span></div>
<div class="srt Transcript" data-srt="" data-video="padmaAudio">
</div>
<!-- <div class="toggleButton icon" title="Switch to Description">-></div> -->
</div>
<!--
<div class="srtContainer" style="display: none;">
<div class="srtTitle">Description:</div>
<div class="srt Description" data-video="padmaAudio" data-srt="">
</div>
<div class="toggleButton icon" title="Switch to Transcript">&lt;-</div>
</div>
-->
</div>
</div>
</div>
<div class="big" id="1">
<div id="lefttitle"><img src="/static/images/titlecard1.png" width="332" height="108" />
</div>
<div id="navcontaineren" class="english">
<ul id="navlisten">
<li id="active"><a href="http://edgwareroad.org/mockup/home" id="current">home</a></li>
<li><a href=""> contact </a></li>
<li><a href="">about</a> </li>
<li><a href="" target="_blank"> events</a>
</ul>
</div>
<div id="navcontainerar" class="arabic">
<ul id="navlistar">
<li id="active"><a href="http://edgwareroad.org/mockup/home" id="current">بيت</a></li>
<li><a href=""> احتكاك</a></li>
<li><a href="">حوالي</a> </li>
<li><a href="" target="_blank">أحداث</a>
</ul>
</div>
<div id="righttitle" class="english"> Vol. 0, July 2011</div>
<div id="righttitle1" class="arabic">ادجوار رود ، المجلد 1 يناير 2011</div>
<div id="languageBtn"><span class="arabicBtn">االقائمة العربية</span> <span class="englishBtn">English Menu</span></div>
</div>
{% autoescape off %}
{% for p in pages %}
<div class="page" id="page{{p.id}}">
{% for t in p.textBoxes %}
<div id="textbox{{p.id}}{{t.id}}" class="box textBox">
{{t.html|parse_html:m}}
</div>
{% endfor %}
{% for i in p.imageBoxes %}
<div id="imagebox{{p.id}}{{i.id}}" class="box imageBox">
<img src="{{i.resource.resized}}" />
</div>
{% endfor %}
</div>
{% endfor %}
{% endautoescape %}
<p>&nbsp;</p>
<div id="contents">
<div class="english">
<p>Contents:<br />
{% for a_b in articles_before %}
<a href="../../{{a_b.product.id}}/{{a_b.order}}/">{{a_b.order}}</a>. {{a_b.title}}<br />
{% endfor %}
{{article.order}}. {{article.title}}
</div>
<div class="arabic">
<p>متلامس:<br />
<br />
</div>
<div id="scrollDots">
</div>
<div class="english">
<p>
{% for a_a in articles_after %}
<a href="../../{{a_a.product.id}}/{{a_a.order}}/">{{a_a.order}}</a>. {{a_a.title}}<br />
{% endfor %}
</p>
</div>
<div class="arabic">
</div>
</p>
</div>
</body>
</html>