diff options
| author | ng0 <ng0@n0.is> | 2019-10-22 22:01:31 +0000 |
|---|---|---|
| committer | ng0 <ng0@n0.is> | 2019-10-22 22:01:31 +0000 |
| commit | 0d8e30508bf599079a2120dfc29ecb6f503492ff (patch) | |
| tree | fd7afa7eb5842975f7866b6cf4a93a012923f77d /demo/index.html.j2 | |
| parent | ff0a28284ea7c7fe582e7d869090f6f55a16b58b (diff) | |
| download | landing-0d8e30508bf599079a2120dfc29ecb6f503492ff.tar.gz landing-0d8e30508bf599079a2120dfc29ecb6f503492ff.tar.bz2 landing-0d8e30508bf599079a2120dfc29ecb6f503492ff.zip | |
rewrite style, bootstrap 4.
Diffstat (limited to 'demo/index.html.j2')
| -rw-r--r-- | demo/index.html.j2 | 298 |
1 files changed, 212 insertions, 86 deletions
diff --git a/demo/index.html.j2 b/demo/index.html.j2 index a27b120..67481db 100644 --- a/demo/index.html.j2 +++ b/demo/index.html.j2 @@ -3,6 +3,9 @@ <head profile="http://www.w3.org/2005/10/profile"> <meta charset="utf-8"/> <title>Taler Demo</title> + <!-- Bootstrap core CSS --> + <link href="{{ url('dist/bootstrap.min.css') }}" rel="stylesheet"> + <link rel="stylesheet" type="text/css" href="{{ url('static/web-common/pure.css') }}" /> <link rel="stylesheet" type="text/css" href="{{ url('static/web-common/demo.css') }}" /> <link rel="stylesheet" type="text/css" href="{{ url('static/web-common/taler-fallback.css') }}" id="taler-presence-stylesheet" /> @@ -33,100 +36,223 @@ border-radius: 5px; padding: 0.5em; } + #body_content a:hover { + transition: background-color 0.3s; + background-color: rgba(200, 200, 200, 0.5); + } + #mybody { + color: black; + position: relative; + min-height: 100%; + } + a, + a:link, + a:visited { + text-decoration: underline; + color: black; + } + + nav a, + nav a:link, + nav a:visited { + text-decoration: none; + } + + .navbar-light .navbar-nav .nav-link { + /* 0,0,0,.5 makes it problematic to read, + simply black is less problematic */ + color: rgb(0, 0, 0); + text-decoration: underline; + } + + #body_content a:hover { + transition: background-color 0.3s; + background-color: rgba(200, 200, 200, 0.5); + } </style> + <script src="{{ url('dist/jquery-1.11.1.min.js') }}"></script> + <script src="{{ url('dist/bootstrap.min.js') }}"></script> + <!-- <link href="{{ url('static/navbar.css') }}" rel="stylesheet"> --> + + <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> + <!--[if lt IE 9]> + <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> + <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> + <![endif]--> + </head> - <body> - <div class="demobar"> - <h1><span class="tt adorn-brackets">Taler Demo</span></h1> - <h1><span class="it"><a href="#">Introduction</a></span></h1> - <p>This is the entry point of the Taler demo. Follow the instructions and try Taler with the other pages linked below!</p> - <ul> - <li><a href="{{ intro_url }}">Introduction</a></li> - <li><a href="{{ bank_url }}">Bank</a></li> - <li><a href="{{ merchant_blog_url }}">Essay Shop</a></li> - <li><a href="{{ merchant_donations_url }}">Donations</a></li> - <li><a href="{{ merchant_survey_url }}">Tipping/Survey</a></li> - <li><a href="{{ backoffice_url }}">Back-office</a></li> - </ul> - <p>You can learn more about Taler on our main <a href="https://taler.net">website</a>.</p> - </div> - <section id="main" class="content"> - <article> - <h2>Step 1: Install the Taler wallet</h2> - Install the wallet from the <a href="https://taler.net/wallet-installation.html">installation page</a>. - It only takes one click. - <p class="bluebox taler-installed-hide"> - You don't have a wallet installed yet. + <body id="mybody"> + <nav class="navbar navbar-expand-lg navbar-light"> + <a class="navbar-brand taler_home"><span class="tt adorn-brackets">Taler Demo</span></a> + <!-- <a class="navbar-brand taler_home" href="/en/index.html">Taler</a> --> + <button class="navbar-toggler" + type="button" + data-toggle="collapse" + data-target="#navbarNavAltMarkup" + aria-controls="navbarNavAltMarkup" + aria-expanded="false" + aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> + <div class="navbar-nav mr-auto"> + <a class="nav-link " href="{{ intro_url }}">Introduction</a> + <a class="nav-link " href="{{ bank_url }}">Bank</a> + <a class="nav-link " href="{{ merchant_blog_url }}">Essay Shop</a> + <a class="nav-link " href="{{ merchant_donations_url }}">Donations</a> + <a class="nav-link " href="{{ merchant_survey_url }}">Tipping/Survey</a> + <a class="nav-link " href="{{ backoffice_url }}">Back-office</a> + </div> + </div> + </nav> + <div id="body_content"> + <div class="container"> + <div class="row justify-text-center"> + <div class="col-8"> + <h1>Introduction</h1> + </div> + </div> + <p> + This is the entry point of the Taler demo. Follow the + instructions and try Taler with the other pages linked below! </p> - <p class="greenbox taler-installed-show"> - Congratulations, you have installed the Taler wallet correctly. - You can now proceed with the next steps. + <p> + You can learn more about Taler on our main + <a href="https://taler.net">website</a>. </p> - </article> - <article> - <h2>Step 2: Withdraw coins</h2> - <p> + <div class="row mt-5"></div> + <div class="row mt-5"></div> - Now you can withdraw coins into your wallet by going to our <a href="{{ bank_url }}">bank</a>. + <div class="row"> + <div class="col-md-5"> + <!-- <section id="main" class="content"> --> + <section> + <article> + <h2>Step 1: Install the Taler wallet</h2> + Install the wallet from the + <a href="https://taler.net/wallet-installation.html">installation page</a>. + It only takes one click. + <p class="bluebox taler-installed-hide"> + You don't have a wallet installed yet. + </p> + <p class="greenbox taler-installed-show"> + Congratulations, you have installed the Taler wallet correctly. + You can now proceed with the next steps. + </p> + </article> + </section> + </div> - In this demo you're paying with KUDOS, an imaginary currency. When you - create an account at our bank, you'll get 100 KUDOS for free. - </p> - <p class="graybox"> - We can't check if you were able to complete this step, since websites - can't see the balance in your wallet. Please click on the Taler icon - in your browser to check your balance. - </p> - </article> - - <article> - <h2>Step 3: Pay</h2> - We have two demo merchants where you can spend your coins: - <ul> - <li> - The <a href="{{ merchant_blog_url }}">essay store</a>, where you can pay KUDOS for - individual chapters of Richard Stallman's book "Free Software, Free Society", - which is also available for free at <a href="http://www.fsf.org/">the FSF</a>. - </li> - <li> - The <a href="{{ merchant_donations_url }}">project donation Web site</a>, where - you can show respect to a software project of your choice - by giving them KUDOS. - </li> - </ul> - </article> - <article> - <h2>Step 4: Check money flow</h2> - <ul> - <li> - Check if people who received your Taler payment got eventually - paid by the exchange via a wire transfer; visit the: - <a href="{{ bank_url }}/public-accounts">public accounts page</a> at the bank. - Note that only those account whose owners gave permission are showed - on that page. - </li> - </ul> - </article> - <article> - <h2>Step 5: Merchant? Consult back-office</h2> - <ul> - <li> - If you are a merchant, you can check the <a href="{{ backoffice_url }}">back-office</a> - Web-site to see how your Taler transactions got payed back by bank wire transfers. - </li> - </ul> - </article> - <article> - <h2>Step 6: Reach out to us</h2> - Let us know what you think by <a href="mailto:demo-feedback@taler.net">contacting us</a>. - </article> - <hr /> - <div class="copyright"> - <p>Copyright © 2014—2017 INRIA</p> - <a href="javascript.html" data-jslicense="1" class="jslicenseinfo">JavaScript license information</a> + <div class="col-md-5"> + <section> + <article> + <h2>Step 2: Withdraw coins</h2> + <p> + Now you can withdraw coins into your wallet by going to + our <a href="{{ bank_url }}">bank</a>. + + In this demo you're paying with KUDOS, an imaginary currency. When you + create an account at our bank, you'll get 100 KUDOS for free. + </p> + <p class="graybox"> + We can't check if you were able to complete this step, since websites + can't see the balance in your wallet. Please click on the Taler icon + in your browser to check your balance. + </p> + </article> + </section> + </div> + </div> + + <div class="row mt-5"></div> + + <div class="w-100"></div> + + <div class="row"> + <div class="col-md-5"> + <section> + <article> + <h2>Step 3: Pay</h2> + We have two demo merchants where you can spend your coins: + <ul> + <li> + The <a href="{{ merchant_blog_url }}">essay store</a>, where + you can pay KUDOS for individual chapters of Richard + Stallman's book "Free Software, Free Society", + which is also available for free at the + <a href="http://www.fsf.org/">FSF</a>. + </li> + <li> + The <a href="{{ merchant_donations_url }}">project donation Web site</a>, + where you can show respect to a software project of your + choice by giving them KUDOS. + </li> + </ul> + </article> + </section> + </div> + + <div class="col-md-5"> + <section> + <article> + <h2>Step 4: Check money flow</h2> + <ul> + <li> + Check if people who received your Taler payment got eventually + paid by the exchange via a wire transfer; visit the: + <a href="{{ bank_url }}/public-accounts">public accounts page</a> + at the bank. Note that only those account whose owners gave + permission are showed on that page. + </li> + </ul> + </article> + </section> + </div> + + <div class="row mt-5"></div> + + <div class="w-100"></div> + + <div class="col-md-5"> + <section> + <article> + <h2>Step 5: Merchant? Consult back-office</h2> + <ul> + <li> + If you are a merchant, you can check the + <a href="{{ backoffice_url }}">back-office</a> + Web-site to see how your Taler transactions got payed back + by bank wire transfers. + </li> + </ul> + </article> + </section> + </div> + + <div class="col-md-5"> + <section> + <article> + <h2>Step 6: Reach out to us</h2> + Let us know what you think by + <a href="mailto:demo-feedback@taler.net">contacting us</a>. + </article> + </section> + </div> + </div> </div> - </section> + <footer id="footer"> + <div class="container copyright"> + <hr /> + <div class="text-center mt-5"> + <p> + Copyright © 2014—2019 TALER Systems SA + </p> + <a href="javascript.html" data-jslicense="1" class="jslicenseinfo">JavaScript license information</a> + </div> + </div> + </footer> + </div> </body> </html> |