regluit/frontend/templates/home.html

246 lines
12 KiB
HTML
Executable File
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

{% extends "base.html" %}
{% block extra_css %}
<link type="text/css" rel="stylesheet" href="/static/css/landingpage.css" />
<link type="text/css" rel="stylesheet" href="/static/css/book_panel.css" />
{% endblock %}
{% block base_js %}
<script src="/static/js/jquery-1.6.3.min.js"></script>
<!-- expands/collapses the learn more section -->
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.user-block-hide').hide();
$j('.user-block1 a').click(
function() {
$j(this).toggleClass("active");
$j(".user-block-hide").slideToggle(300);
$j("a.readon").toggleClass("down");
}
);
});
</script>
<!-- toggle to panelview state instead of listview default -->
<script type="application/x-javascript">
jQuery(document).ready(function($) {
$('.listview').addClass("panelview").removeClass("listview");
});
</script>
<script type="text/javascript" src="/static/js/greenpanel.js"></script>
<script src="/static/js/slides.min.jquery.js"></script>
<script>
var $j = jQuery.noConflict();
$j(function(){
$j('#js-slideshow').slides({
preload: true,
preloadImage: '/static/images/landingpage/loading.gif',
hoverPause: true,
generateNextPrev: true,
next: 'next',
prev: 'prev',
pagination: true,
generatePagination: false,
slideSpeed: 600,
autoHeight: true
});
});
</script>
<script type="text/javascript" src="/static/js/watermark_init.js"></script>
<script type="text/javascript" src="/static/js/watermark_change.js"></script>
<script type="text/javascript" src="/static/js/expand.js"></script>
{% endblock %}
{% block topsection %}
<div id="js-topsection">
<div class="js-main">
<div class="js-topnews">
<div class="user-block">
<div class="user-block1">
<div class="block-inner">
<div class="block-intro-text">With your help we raise money to buy book rights. The <span class="typo">unglued</span> books are free to download, here.</div>
<a class="my-setting readon"><span>Learn more</span></a>
</div>
</div>
<div class="user-block2">
<div class="block-inner">
<label class="title">Spread the Word</label>
<a href="https://www.facebook.com/sharer/sharer.php?src=bm&u=http://{{ request.META.HTTP_HOST }}{{ request.path }}"><img src="/static/images/supporter_icons/facebook_square.png" alt="Facebook" title="Facebook" /></a>
<a href="https://twitter.com/share"><img src="/static/images/supporter_icons/twitter_square.png" alt="tweeter" title="Twitter" /></a>
</div>
</div>
</div>
<div class="user-block-hide">
<div class="quicktour"><span class="highlight">We all have books we love so much, we'd like to give them to the world.</span> We want to share them, but also reward their creators. With digital books, it can be hard to do both.</div>
<div class="movingrightalong"></div>
<div class="quicktour"><span class="highlight">Unglue.it offers a win-win solution: Crowdfunding.</span> We run pledge campaigns for books; you chip in. When, together, we've reached the goal, we'll reward the book's creators and issue an unglued ebook.</div>
<div class="movingrightalong"></div>
<div class="quicktour last"><a href="https://creativecommons.org/">Creative Commons</a> licensing means everyone, everywhere can read and share the unglued book — freely and legally. <span class="highlight">You've given your favorite book to the world.</span></div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div id="expandable">
<div id="js-rightcol2">
<div id="js-rightcol-padd2">
<div class="jsmodule">
<div id="collapser">X</div>
<h3 class="module-title">Start Ungluing Now!</h3>
<div class="jsmod-content">
<form action='/accounts/register/' method='post'>{% csrf_token %}
<div class="user-name">
<label>Username</label>
<input id="id_username" type="text" class="required" name="username" maxlength="30" size="30" />
</div>
<div class="email">
<label>Email</label>
<input id="id_email" type="text" class="required" name="email" maxlength="75" size="30" />
</div>
<div class="password">
<label>Password</label>
<input id="id_password1" type="password" class="required" name="password1" size="30" />
</div>
<div class="password">
<label>Password (again):</label>
<input id="id_password2" type="password" class="required" name="password2" size="30" />
</div>
<div class="button">
<input type="submit" class="signup" value="sign up" />
</div>
</form>
<div class="google_signup">
<a href="/socialauth/login/google?next=http://{{ request.get_host }}{{ next }}"><img src="{{ STATIC_URL }}images/auth/google_32_noborder.png"></a><div>Or: <a href="/socialauth/login/google?next=http://{{ request.get_host }}{{ next }}">Sign Up With Google</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="main-container" class="main-container-fl">
<div class="js-main">
<div id="js-maincol-fl">
<div id="js-main-container">
<div class="js-main-container-inner">
<div id="js-maincontainer-content" class="have-content-right-module">
<div class="content-right-module">
<h3>How does it work?</h3>
</div>
<div style="clear:right;">
<div class="item-content">
<h2 class="page-heading">Give books to the world.</h2>
</div>
<div class="jsmod-content">
<img src="/static/images/landingpage/icon-group.png" alt="How does it work?" title="How does it work?" height="269" width="268" />
</div>
</div>
</div>
<div id="js-maincontainer-bot-block">
<div id="js-search">
<label>What book would you give to the world? </label>
<form action="{% url search %}" method="get">
<input type="text" id="watermark" onfocus="imgfocus()" onblur="imgblur(0)" size="25" class="inputbox" name="q" value="{{ q }}">
<input type="submit" class="greenbutton" value="Search">
</form>
</div>
</div>
<div id="js-maincontainer-faq">
<div class="js-maincontainer-faq-inner">
Questions? Read our <a href="/stub/tour">FAQs</a> or take the <a href="/stub/tour">Tour</a>
</div>
</div>
</div>
</div>
<div id="js-rightcol">
<div class="js-rightcol-padd">
<div class="jsmodule">
<h3 class="module-title">Start Ungluing Now!</h3>
<div class="jsmod-content">
<form action='/accounts/register/' method='post'>{% csrf_token %}
<div class="user-name">
<label>Username</label>
<input id="id_username" type="text" class="required" name="username" maxlength="30" size="30" />
</div>
<div class="email">
<label>Email</label>
<input id="id_email" type="text" class="required" name="email" maxlength="75" size="30" />
</div>
<div class="password">
<label>Password</label>
<input id="id_password1" type="password" class="required" name="password1" size="30" />
</div>
<div class="password">
<label>Password (again):</label>
<input id="id_password2" type="password" class="required" name="password2" size="30" />
</div>
<div class="button">
<input type="submit" class="signup" value="sign up" />
</div>
<div class="google_signup">
<a href="/socialauth/login/google?next=http://{{ request.get_host }}{{ next }}"><img src="{{ STATIC_URL }}images/auth/google_32_noborder.png"></a><div>Or: <a href="/socialauth/login/google?next=http://{{ request.get_host }}{{ next }}">Sign Up With Google</a></div>
</div>
</div>
</div>
<div class="jsmodule">
<h3 class="module-title">Who's ungluing what</h3>
<div class="jsmod-content">
<ul class="ungluingwhat">
{% for event in events %}
<li>
<div class="user-avatar"><a href="{% url supporter event.wishlist.user.username %}"><img src="{% if event.wishlist.user.picurl %}{{ event.wishlist.user.picurl}}{% else %}/static/images/landingpage/user-avatar.png{% endif %}" width="43" height="43" title="{{event.wishlist.user.username}}" alt="{{event.wishlist.user.username}} avatar" /></a></div>
<div class="user-book-info">
<p class="user-book-info"><a href="{% url supporter event.wishlist.user.username %}">{{event.wishlist.user.username}}</a> is Wishing For</p>
<a class="user-book-name" href="{% url work event.work.id %}">{{ event.work.title }}</a>
</div>
<div class="user-book-thumb"><a class="user-book-name" href="{% url work event.work.id %}"><img src="{{ event.work.cover_image_thumbnail }}" width="29" height="43" title="{{ event.work.title }}" alt="Very Long Book Title" /></a></div>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="js-slide">
<div class="js-main">
<div class="jsmodule">
<h3><span>Top ungluing campaigns</span></h3>
<div class="jsmod-content">
<div id="js-slideshow">
<div class="slides_container">
<div class="slide-page slide-page1">
{% for work in works %}
<div class="spacer">
{% include "book_panel.html" %}
</div>
{% endfor %}
</div>
<div class="slide-page slide-page2">
{% for work in works2 %}
<div class="spacer">
{% include "book_panel.html" %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}