mirror of
https://github.com/openzim/zimit.git
synced 2025-09-26 14:23:11 -04:00
Replace material design by bootstrap.
It's visually more pleasant :)
This commit is contained in:
Alexis Métaireau
parent
6d7affc01b
commit
8ce39f00f9
1
app/assets/alertify.css
Normal file
1
app/assets/alertify.css
Normal file
@ -0,0 +1 @@
|
||||
.alertify-logs>*{padding:12px 24px;color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.2);border-radius:1px}.alertify-logs>*,.alertify-logs>.default{background:rgba(0,0,0,.8)}.alertify-logs>.error{background:rgba(244,67,54,.8)}.alertify-logs>.success{background:rgba(76,175,80,.9)}.alertify{position:fixed;background-color:rgba(0,0,0,.3);left:0;right:0;top:0;bottom:0;width:100%;height:100%;z-index:1}.alertify.hide{opacity:0;pointer-events:none}.alertify,.alertify.show{box-sizing:border-box;transition:all .33s cubic-bezier(.25,.8,.25,1)}.alertify,.alertify *{box-sizing:border-box}.alertify .dialog{padding:12px}.alertify .alert,.alertify .dialog{width:100%;margin:0 auto;position:relative;top:50%;transform:translateY(-50%)}.alertify .alert>*,.alertify .dialog>*{width:400px;max-width:95%;margin:0 auto;text-align:center;padding:12px;background:#fff;box-shadow:0 2px 4px -1px rgba(0,0,0,.14),0 4px 5px 0 rgba(0,0,0,.098),0 1px 10px 0 rgba(0,0,0,.084)}.alertify .alert .msg,.alertify .dialog .msg{padding:12px;margin-bottom:12px;margin:0;text-align:left}.alertify .alert input:not(.form-control),.alertify .dialog input:not(.form-control){margin-bottom:15px;width:100%;font-size:100%;padding:12px}.alertify .alert input:not(.form-control):focus,.alertify .dialog input:not(.form-control):focus{outline-offset:-2px}.alertify .alert nav,.alertify .dialog nav{text-align:right}.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button),.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button){background:transparent;box-sizing:border-box;color:rgba(0,0,0,.87);position:relative;outline:0;border:0;display:inline-block;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center;padding:0 6px;margin:6px 8px;line-height:36px;min-height:36px;white-space:nowrap;min-width:88px;text-align:center;text-transform:uppercase;font-size:14px;text-decoration:none;cursor:pointer;border:1px solid transparent;border-radius:2px}.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):active,.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):hover,.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):active,.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):hover{background-color:rgba(0,0,0,.05)}.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):focus,.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):focus{border:1px solid rgba(0,0,0,.1)}.alertify .alert nav button.btn,.alertify .dialog nav button.btn{margin:6px 4px}.alertify-logs{position:fixed;z-index:1}.alertify-logs.bottom,.alertify-logs:not(.top){bottom:16px}.alertify-logs.left,.alertify-logs:not(.right){left:16px}.alertify-logs.left>*,.alertify-logs:not(.right)>*{float:left;transform:translateZ(0);height:auto}.alertify-logs.left>.show,.alertify-logs:not(.right)>.show{left:0}.alertify-logs.left>*,.alertify-logs.left>.hide,.alertify-logs:not(.right)>*,.alertify-logs:not(.right)>.hide{left:-110%}.alertify-logs.right{right:16px}.alertify-logs.right>*{float:right;transform:translateZ(0)}.alertify-logs.right>.show{right:0;opacity:1}.alertify-logs.right>*,.alertify-logs.right>.hide{right:-110%;opacity:0}.alertify-logs.top{top:0}.alertify-logs>*{box-sizing:border-box;transition:all .4s cubic-bezier(.25,.8,.25,1);position:relative;clear:both;backface-visibility:hidden;perspective:1000;max-height:0;margin:0;padding:0;overflow:hidden;opacity:0;pointer-events:none}.alertify-logs>.show{margin-top:12px;opacity:1;max-height:1000px;padding:12px;pointer-events:auto}
|
||||
1
app/assets/alertify.js
Normal file
1
app/assets/alertify.js
Normal file
File diff suppressed because one or more lines are too long
7523
app/assets/bootstrap.css
vendored
Normal file
7523
app/assets/bootstrap.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
135
app/index.html
135
app/index.html
@ -2,9 +2,8 @@
|
||||
|
||||
<head>
|
||||
</head>
|
||||
<link rel="stylesheet" href="./material.min.css">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link rel="stylesheet" href="./assets/bootstrap.css">
|
||||
<link rel="stylesheet" href="./assets/alertify.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
@ -12,107 +11,61 @@
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<body>
|
||||
<!-- Always shows a header, even in smaller screens. -->
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||
<header class="mdl-layout__header">
|
||||
<div class="mdl-layout__header-row">
|
||||
<span class="mdl-layout-title">Zim It! — A zim file creator</span>
|
||||
<div class="navbar navbar-default navbar-static-top">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="#">Zim it!</a>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mdl-layout__content">
|
||||
<div class="page-content">
|
||||
|
||||
<div class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a href="http://www.openzim.org/wiki/Mission">Our values</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<form action="#" id="zimcreator" onSubmit="submitForm()">
|
||||
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
|
||||
<div class="mdl-tabs__tab-bar">
|
||||
<a href="#general-panel" class="mdl-tabs__tab is-active">General</a>
|
||||
<a href="#advanced-panel" class="mdl-tabs__tab">Advanced options</a>
|
||||
<div class="form-group field field-object">
|
||||
<fieldset>
|
||||
<div class="form-group field field-string">
|
||||
<label class="control-label" for="url">Website URL</label>
|
||||
<input id="url" label="Website URL" placeholder="https://google.com" class="form-control" type="url">
|
||||
</div>
|
||||
<div class="form-group field field-string">
|
||||
<label class="control-label" for="url">Zim Title</label>
|
||||
<input id="title" label="Website URL" placeholder="A great website" class="form-control" type="text">
|
||||
</div>
|
||||
<div class="form-group field field-string">
|
||||
<label class="control-label" for="url">Enter an email to be notified when this is finished</label>
|
||||
<input id="email" label="Email" placeholder="john@doe.com" class="form-control" type="email">
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="mdl-tabs__panel is-active" id="general-panel">
|
||||
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="url" id="url">
|
||||
<label class="mdl-textfield__label" for="website-url">Website URL</label>
|
||||
</div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="text" id="title">
|
||||
<label class="mdl-textfield__label" for="zim-title">Zim title</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="email" id="email">
|
||||
<label class="mdl-textfield__label" for="email">Enter an email to be notified</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mdl-tabs__panel" id="advanced-panel">
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<textarea class="mdl-textfield__input" type="text" id="description"></textarea>
|
||||
<label class="mdl-textfield__label" for="language">Long description of the content</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="email" id="author">
|
||||
<label class="mdl-textfield__label" for="email">Email of the author of the website</label>
|
||||
</div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="text" id="language">
|
||||
<label class="mdl-textfield__label" for="language">Language</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="string" id="welcome">
|
||||
<label class="mdl-textfield__label" for="welcome" placeholder="index.html">File to use as the welcome page</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-grid">
|
||||
<p class="mdl-cell mdl-cell--10-col" style="margin-bottom:40px">This is a <a href="http://www.openzim.org/wiki/OpenZIM">Zim</a> creator. Enter the <em>url</em> of the website you want ton turn in a zim file, a <em>title</em> and the <em>language</em> and click on <em>Create zim File</em>. <br>If
|
||||
needed, you can also add a description, the name of the origanl author
|
||||
of the content and your email if you want to be notified when the zim is
|
||||
ready. Enjoy !</p>
|
||||
<div data-upgraded=",MaterialTextfield" class="mdl-textfield mdl-js-textfield mdl-cell mdl-cell--10-col">
|
||||
<button data-upgraded=",MaterialButton,MaterialRipple" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Create zim file<span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<button type="submit" class="btn btn-info">Create the Zim file!</button>
|
||||
</p>
|
||||
</form>
|
||||
</main>
|
||||
<div id="snackbar" class="mdl-js-snackbar mdl-snackbar">
|
||||
<div class="mdl-snackbar__text"></div>
|
||||
<button class="mdl-snackbar__action" type="button"></button>
|
||||
<p>
|
||||
This is a <a href="http://www.openzim.org/wiki/OpenZIM">Zim</a> creator. Enter the <em>url</em> of the website you want ton turn in a zim file, a <em>title</em> and the <em>language</em> and click on <em>Create zim File</em>
|
||||
</p>
|
||||
<p>
|
||||
If needed, you can also add a description, the name of the origanl author
|
||||
of the content and your email if you want to be notified when the zim is
|
||||
ready. Enjoy !
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./material.min.js"></script>
|
||||
<script src="./assets/alertify.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
function getField(field) {
|
||||
return document.forms['zimcreator'].elements[field].value;
|
||||
}
|
||||
|
||||
function informUser(message) {
|
||||
document.querySelector('#snackbar').MaterialSnackbar.showSnackbar({
|
||||
message: message,
|
||||
timeout: 2000,
|
||||
});
|
||||
}
|
||||
|
||||
function submitForm() {
|
||||
var content = {
|
||||
url: getField('url'),
|
||||
title: getField('title'),
|
||||
email: getField('email'),
|
||||
description: getField('description'),
|
||||
author: getField('author'),
|
||||
language: getField('language'),
|
||||
welcome: getField('welcome'),
|
||||
}
|
||||
fetch("/website", {
|
||||
method: "POST",
|
||||
@ -120,13 +73,13 @@ function submitForm() {
|
||||
headers: {'Content-Type': 'application/json'}
|
||||
}).then(function (result) {
|
||||
if (result.status >= 400) {
|
||||
informUser("The server wasn't able to start the job, lplease check your inputs.");
|
||||
alertify.error("The server wasn't able to start the job, please check your inputs.");
|
||||
} else {
|
||||
informUser("The job has been submitted! You'll receive an email when it's finished.");
|
||||
alertify.success("The job has been submitted! You'll receive an email when it's finished.");
|
||||
}
|
||||
})
|
||||
.catch(function (error) {
|
||||
informUser("The server wasn't able to start the job!");
|
||||
alertify.error("Sorry, we weren't able to join the server. This is usually due to connectivity issues.");
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
9
app/material.min.css
vendored
9
app/material.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
10
app/material.min.js
vendored
10
app/material.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,4 +0,0 @@
|
||||
.mdl-tabs__panel {
|
||||
padding: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user