Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Landing Page - Make Requested Changes #1473

Merged
merged 6 commits into from
Nov 18, 2022
Merged

Landing Page - Make Requested Changes #1473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c315e9e
👌 IMPROVE: Create a functional landing page.
ApoorvaKashyap Oct 7, 2022
fada5bf
Merge branch 'develop' into develop
ApoorvaKashyap Oct 13, 2022
587158d
Added Translate & Fixed CSS Formatting
rdhoge Nov 13, 2022
0407871
Update landing.html
rdhoge Nov 13, 2022
cc4c421
Update Landing.html
rdhoge Nov 13, 2022
4f5046f
Merge branch 'develop' into develop
rdhoge Nov 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
329 changes: 169 additions & 160 deletions project/core/templates/landing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,172 +1,181 @@
{% extends "base.html" %}
{% load static %}
{% load i18n %}
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>

<!-- Landing Page -->
{% block extra_css %}
<link type="text/css" rel="stylesheet/less" href="{% static "less/landing.less" %}"/>
{% endblock extra_css %}

{% block backbone_template %}
<script id="landing-template" type="text/template">
<header>
<div class="landing-bg valign-wrapper full-height">
<div class="container landing-title">
<div class="row">
<div class="landing-title-text">{% trans 'Discuss Problems' %}</div>
<div class="landing-title-text">{% trans 'Discover Solutions' %}</div>
<div class="landing-title-text">{% trans 'Enact Change' %}</div>
<div class="landing-title-subtext">{% trans 'Building a Better Democracy for the Internet Age' %}</div>
</div>
<div class="row">
<div class="col s8 m6">
<div class="row">
<div class="col s12 m6">
<a href="login" class="btn-large waves-effect dark-blue-background landing-title-button">{% trans 'Join CiviWiki' %}</a>
</div>
<div class="col s12 m6">
<a href="#learnmore" class="btn-large waves-effect landing-title-button border-button">{% trans 'Learn More' %}</a>
</div>
</div>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Welcome to CiviWiki</title>
<meta name="description" content="Building a Better Democracy for the Internet Age">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-TileColor" content="#fcffff">
<!-- Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="./static/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" href="./static/favicon/favicon-32x32.png" sizes="32x32">
<link rel="shortcut icon" href="./static/favicon/favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Stylesheets -->
<link rel="stylesheet" href="./static/less/landing.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,600,700" rel="stylesheet">
</head>

<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header class="clearfix">
<div class="container">
<div class="header-left">
<h1>
<a href="/">
<img src="./static/img/logo-civiwiki-tree-white.svg" alt="CiviWiki Logo" class="brand-logo">
CiviWiki
</a>
</h1>
</div>
<div class="header-right">
<label for="open">
<span class="hidden-desktop"></span>
</label>
<input type="checkbox" name="" id="open">
<nav>
<a href="/howitworks/" class="nav-items">How OpenCiviWiki Works</a>
<a href="/about/" class="nav-items">About Us</a>
<a href="/support_us/" class="nav-items">Support Us</a>
<a href="/login/" class="">
<button class="ripple">Login/SignUp</button>
</a>
</nav>
</div>
</div>
</div>
</header>
<main>
<div class="landing-content">
<div class="white" id="learnmore">
<div class="introduction full-height valign-wrapper">
<div class="container section center content-1 valign">
<div class="row">
<div class="white cushion">
<div class="container section">
<h3 class="content-1-title bold">{% trans 'CiviWiki is a non-profit community working to develop a democratic engagement web system' %} .</h3>
<div class="accent-line"></div>
<p class="content-1-text section"> {% trans 'At CiviWiki we believe democracy works best when citizens are educated on issues and participate in the democratic process.' %}
<p class="content-1-text section">We are a non-profit, non-partisan, community; working to build an open-source platform where citizens discuss the problems they face, discover solutions, and enact change.</p>
</p>
</div>
</div>
</div>
</header>
<main>
<div class="landing">
<h2 class="landing-msg anim-typewriter">
<span>Discuss Problems.</span>
&nbsp;&nbsp;
<span>Discover Solutions.</span>
&nbsp;&nbsp;
<span>Enact Change.</span>
</h2>
<h2 class="landing-msg anim-typewriter">Building Democracy for a Better Age.</h2>
<div class="landing-msg btn-container">
<a href="/login/">
<button class="ripple">JOIN CIVIWIKI</button>
</a>
<a href="/support_us/">
<button class="ripple">LEARN MORE</button>
</a>
</div>
</div>
<div class="video full-height valign-wrapper">
<div class="container section valign">
<h4 class="section center white-text">{% trans 'Check out our short video describing CiviWiki' %} ...</h4>
<p class="center"></p>
<div class="videoWrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ll4VZv4a8bE" frameborder="0" allowfullscreen></iframe>
</div>
<div class="grey-text text-darken-3 center">{% trans 'Video made by' %} <a class="grey-text text-darken-1" href="https://sheldonanim.com/" target="_blank">Jon Sheldon</a></div>
</div>
<div class="msg-1">
<h1 class="title">
{% translate "CiviWiki is a non-profit community working to develop a democratic engagement web system." %}
</h1><br><br>
<p class="subtitle">
{% blocktranslate %}
At CiviWiki we believe democracy works best when citizens are educated on issues and participate in the
democratic process.
We are a non-profit, non-partisan, community; working to build an open-source platform where citizens
discuss the problems they face, discover solutions, and enact change.
{% endblocktranslate %}
</p>
</div><br><br><br>
<div class="video">
<p class="video-text">
{% translate "Check out our short video describing CiviWiki..." %}
</p>
<iframe width="640" height="480" src="https://www.youtube.com/embed/Ll4VZv4a8bE" frameborder="0"
allowfullscreen></iframe>
<p class="small-text">{% translate "Video made by" %}
<a class="body-link" href="https://sheldonanim.com/" target="_blank">Jon Sheldon</a>
</p>
</div>

<div class="why-civiwiki container cushion">
<div class="section">
<h2 class="bold center content-title">{% trans 'Why CiviWiki?' %}</h2>
</div>
<div class="section">
<div class="row">
<div class="col s12 m6 center">
<div class="why">
<h1 class="title">{% translate "Why CiviWiki?" %}</h1>
<table class="why-table">
<tr class="tr-why">
<td><span class="icon">
<i class="large material-icons">group</i>
</div>
<div class="col s12 m6">
<h5 class="content-subtitle">{% trans 'Democratically Contributed Media' %} </h5>
<p class="content-text">
{% trans 'As the name CiviWiki implies, our core content will be contributed by volunteers on our Wiki.'%}
<br>
<br> {% trans 'Our topic format is modular. ' %}
<br>
<br> {% trans 'The structure both allows a community of volunteers to collaborate on a single political issue, and reserves space for dissenting opinions. ' %}
</p>
</div>
</div>

</div>
<div class="section">
<div class="row">
<div class="col s12 m6 push-m6 center">
<i class="large material-icons">web</i>
</div>
<div class="col s12 m6 pull-m6">
<h5 class="content-subtitle">{% trans 'Personalized Policy Feed ' %}</h5>
<p class="content-text">
CiviWiki {% trans "intelligently personalizes users' feed in two meaningful ways. " %}
<br>
<br> {% trans "First, the issues promoted to users' feed will be personalized to the user's expressed interests, and the timeliness of the issue." %}
<br>
<br> {% trans "Second, the structure of the issue topics break policy positions into bite-sized contentions we call Civies. Each Civi is logically related to the rest of the topic. Based on the user's support, opposition, or neutrality to each Civi, CiviWiki promotes different relevant content."%}
</p>
</div>
</div>

</div>
<div class="section">
<div class="row">

<div class="col s12 m6 center">
<i class="large material-icons">location_city</i>
</div>
<div class="col s12 m6">
<h5 class="content-subtitle">{% trans 'Citizen/Representative Engagement' %} </h5>
<p class="content-text">
{% trans "CiviWiki's core goal is to engage citizens and their representatives, with the goal of making government more accountable."%}
<br>
<br> {% trans "First, CiviWiki will organize the user's policy profile and compare it to every political candidate in the user's district. This quick, detailed, comparison will help users make informed votes, and we believe increased voter confidence will increase voter turnout." %}
<br>
<br> {% trans "Second, CiviWiki will collect anonymized user data and forward district-level statistics to representatives. With a critical mass of users, we believe timely district level polling data will influence representatives votes." %}
</span></td>
<td>
<h2 class="subtitle">{% translate "Democratically Contributed Media" %}</h2>
<div class="text">
<p>
{% blocktranslate %}
As the name CiviWiki implies, our core content will be contributed
by volunteers on our Wiki.
Our topic format is modular.
The structure both allows a community of volunteers to collaborate on a
single political issue, and reserves space for dissenting opinions.
{% endblocktranslate %}
</p>
</div>
</td>
</tr>
<tr class="tr-why">
<td><h2 class="subtitle">{% translate "Personalized Policy Feed" %}</h2>
<p>
{% blocktranslate %}
CiviWiki intelligently personalizes users' feed in two meaningful ways.
First, the issues promoted to users' feed will be personalized to the user's
expressed interests, and the timeliness of the issue.
Second, the structure of the issue topics break policy positions into
bite-sized contentions we call Civies. Each Civi is logically related
to the rest of the topic. Based on the user's support, opposition, or
neutrality to each Civi, CiviWiki promotes different relevant content
{% endblocktranslate %}
</p>
</div>

</div>
</div>
</div>

</div>
<div class="lastcall cushion">
<div class="container section">
<div class="section">
<h5 class="center text-call">{% trans "See what your voice can bring to your community" %}</h5>
</div>
<div class="section row center">
<a href="login" class="btn btn-large waves-effect waves-light"><span class="dark-grey-text">{% trans "Join CiviWiki" %} </span></a>
</div>
</div>
</div>
<div class="in-development">
<div class="container section center">
<h3 class="center"><i class="small material-icons yellow-text text-darken-2">warning</i> CiviWiki {% trans "is still in" %} <span class="text-highlight">{% trans "development" %}</span>! <i class="small material-icons yellow-text text-darken-2"></i></h3>
<div class="row">
<div class="container section center">
<div class="col s12 m5 center">
<a class="btn btn-large" href="login">{% trans "Register" %}</a>
</div>
<div class="col s12 m2">
<h4 class="center ampersand">&</h4>
</div>
<div class="col s12 m5 center">
<a class="btn btn-large " href="{% url 'support-us' %}">{% trans "Support Us" %}</a>
</div>
</div>
</div>
</td>
<td>
<span class="icon">
<i class="large material-icons">web</i>
</span>
</td>
</tr>
</table><br><br>
</div><br><br><br>
<div class="subtitle center">
<p>{% translate "See what your voice can bring to your community!" %}</p><a href="/login/"><button class="ripple">Join CiviWiki</button></a>
</div><br><br><br><br>
<div class="subtitle center">
<p class="text">{% translate "CiviWiki is still in development!" %}</p>
<a href="/login/">
<button class="ripple">{% translate "Register" %}</button></a>
&
<a href="/support_us/"><button class="ripple">{% translate "Support Us" %}</button></a>
</div>
</div>
</div>
</main>

</script>
{% endblock backbone_template %}

{% block content %}
{% include "static_nav.html" %}
<div id="landing"></div>
{% endblock content %}

{% block extra_js %}
<!-- Backbone Views File -->
<script src="{% static "js/static/landing_view.js" %}" type="text/javascript"></script>
<script type="text/javascript">
var landingView = new cw.LandingView();
</script>
{% endblock extra_js %}
</main>
<footer>
<table class="footer">
<tr>
<th>{% translate "Connect With Us" %}</th>
<th>{% translate "Developers" %}</th>
</tr>
<tr>
<td><a class="body-link" href="http://github.com/CiviWiki/OpenCiviWiki" target="_blank" rel="noopener noreferrer">Github</a></td>
</tr>
<tr>
<td><a class="body-link" href="https://www.facebook.com/CiviWiki/" target="_blank">Facebook</a></td>
<td><a class="body-link" href="https://github.com/CiviWiki/OpenCiviWiki/issues" target="_blank">{% translate "Open Issues" %}</a></td>
</tr>
<tr>
<td><a class="body-link" href="https://twitter.com/civiwiki" target="_blank" rel="noopener noreferrer">Twitter</a></td>
<td><a class="body-link" href="https://waffle.io/CiviWiki/OpenCiviWiki" target="_blank" rel="noopener noreferrer">{% translate "Development Roadmap" %}</a></td>
</tr>
<tr>
<td> </td>
<td><a class="body-link" href="https://riot.im/app/#/room/#CiviWiki:matrix.org" target="_blank" rel="noopener noreferrer">{% translate "Live Chat on Matrix" %}</a></td>
</tr>
</table>
<hr>
<span><a href="/">CiviWiki</a></span>
</footer>
</body>
</html>
Binary file added project/core/templates/static/img/bg.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading