Commit c5319f30 authored by kaiyou's avatar kaiyou

Improve the overall look

parent dbe7c327
......@@ -7,3 +7,7 @@ pre {
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
input.snippet {
font-family: monospace;
}
......@@ -10,4 +10,8 @@ $(document).ready(function() {
}, 100);
});
$("input.snippet").click(function() {
this.select();
})
});
......@@ -10,11 +10,8 @@
</head>
<body>
<nav class="blue" role="navigation">
<div class="nav-wrapper container"><a href="/" class="brand-logo">{{ config["SITE_NAME"] }}</a>
<ul class="right">
<li><a href="{{ config["SOURCE_URL"] }}">Source code</a></li>
<li><a href="{{ config["HELP_URL"] }}">Help</a></li>
</ul>
<div class="nav-wrapper container">
<i class="material-icons left">image</i><a href="/" class="brand-logo">{{ config["SITE_NAME"] }}</a>
</div>
</nav>
......@@ -24,7 +21,10 @@
<footer class="page-footer blue">
<div class="footer-copyright">
<div class="container">
Made with love using Flask
Built with <i class="material-icons tiny">favorite</i> using <a class="white-text" href="http://flask.pocoo.org/">Flask</a>,
<a class="white-text" href="http://materializecss.com/">Materialize</a> and
<a class="white-text" href="http://gulpjs.com/">Gulp</a>
<span class="right"><i class="material-icons tiny">call_split</i> on <a class="white-text" href="https://github.com/kaiyou/tedimg">Github</a>.</a>
</div>
</div>
</footer>
......
......@@ -4,18 +4,18 @@
<h1 class="header center orange-text">Upload your image!</h1>
<form method="post" id="upload" action="/upload" enctype="multipart/form-data">
<div class="file-field input-field">
<div class="btn light-blue">
<span>File</span>
<div>
<i class="material-icons left small">publish</i>
<input type="file" name="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Upload your image">
<input class="file-path validate" type="text" placeholder="Select your file">
</div>
</div>
<div class="input-field">
<i class="material-icons prefix">public</i>
<input id="icon_prefix" type="text" class="validate" name="url" placeholder="Or paste your url">
<input id="icon_prefix" type="text" class="validate" name="url" placeholder="Or paste your URL">
</div>
</form>
{% endblock %}
......@@ -3,8 +3,8 @@
{% block banner_content %}
<h1 class="header center orange-text">Upload successful!</h1>
<div class="row center">
<a href="{{ image }}" class="btn-large waves-effect waves-light light-blue">Direct link</a>
<a href="{{ thumb }}" class="btn-large waves-effect waves-light light-blue">Thumbnail</a>
<a href="{{ image }}" class="btn-large blue">Direct link</a>
<a href="{{ thumb }}" class="btn-large blue">Thumbnail</a>
</div>
<div class="row center">
<img src="{{ thumb }}">
......@@ -14,17 +14,43 @@
{% block section_content %}
<div class="row">
<div class="col s12 m4">
<h5 class="center">HTML</h5>
<pre>&lt;a href="{{ image }}"&gt;&lt;img src="{{ thumb }}"&gt;&lt;/a&gt;</pre>
<div class="col s6">
<h5 class="center">Full size</h5>
<div class="input-field">
<i class="material-icons prefix">image</i>
<input class="snippet" type=text value="{{ image }}">
</div>
<div class="input-field">
<i class="material-icons prefix">code</i>
<input class="snippet" type=text value="&lt;img src=&quot;{{ image }}&quot;&gt;">
</div>
<div class="input-field">
<i class="material-icons prefix">chat</i>
<input class="snippet" type=text value="[img]{{ image }}[/img]">
</div>
<div class="input-field">
<i class="material-icons prefix">subject</i>
<input class="snippet" type=text value="![Image]({{ image }})">
</div>
</div>
<div class="col s12 m4">
<h5 class="center">Markdown</h5>
<pre>[![Image]({{ thumb }})]({{ image }})</pre>
</div>
<div class="col s12 m4">
<h5 class="center">BBCode</h5>
<pre>[url={{ image }}][img]{{ thumb }}[/img][/url]</pre>
<div class="col s6">
<h5 class="center">Thumbnail</h5>
<div class="input-field">
<i class="material-icons prefix">image</i>
<input class="snippet" type=text value="{{ thumb }}">
</div>
<div class="input-field">
<i class="material-icons prefix">code</i>
<input class="snippet" type=text value="&lt;a href=&quot;{{ image }}&quot;&gt;&lt;img src=&quot;{{ thumb }}&quot;&gt;&lt;/a&gt;">
</div>
<div class="input-field">
<i class="material-icons prefix">chat</i>
<input class="snippet" type=text value="[url={{ image }}][img]{{ thumb }}[/img][/url]">
</div>
<div class="input-field">
<i class="material-icons prefix">subject</i>
<input class="snippet" type=text value="[![Image]({{ thumb }})]({{ image }})">
</div>
</div>
</div>
{% endblock %}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment