Commit c5319f30 authored by kaiyou's avatar kaiyou

Improve the overall look

parent dbe7c327
...@@ -7,3 +7,7 @@ pre { ...@@ -7,3 +7,7 @@ pre {
white-space: -o-pre-wrap; /* Opera 7 */ white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */ word-wrap: break-word; /* Internet Explorer 5.5+ */
} }
input.snippet {
font-family: monospace;
}
...@@ -10,4 +10,8 @@ $(document).ready(function() { ...@@ -10,4 +10,8 @@ $(document).ready(function() {
}, 100); }, 100);
}); });
$("input.snippet").click(function() {
this.select();
})
}); });
...@@ -10,11 +10,8 @@ ...@@ -10,11 +10,8 @@
</head> </head>
<body> <body>
<nav class="blue" role="navigation"> <nav class="blue" role="navigation">
<div class="nav-wrapper container"><a href="/" class="brand-logo">{{ config["SITE_NAME"] }}</a> <div class="nav-wrapper container">
<ul class="right"> <i class="material-icons left">image</i><a href="/" class="brand-logo">{{ config["SITE_NAME"] }}</a>
<li><a href="{{ config["SOURCE_URL"] }}">Source code</a></li>
<li><a href="{{ config["HELP_URL"] }}">Help</a></li>
</ul>
</div> </div>
</nav> </nav>
...@@ -24,7 +21,10 @@ ...@@ -24,7 +21,10 @@
<footer class="page-footer blue"> <footer class="page-footer blue">
<div class="footer-copyright"> <div class="footer-copyright">
<div class="container"> <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>
</div> </div>
</footer> </footer>
......
...@@ -4,18 +4,18 @@ ...@@ -4,18 +4,18 @@
<h1 class="header center orange-text">Upload your image!</h1> <h1 class="header center orange-text">Upload your image!</h1>
<form method="post" id="upload" action="/upload" enctype="multipart/form-data"> <form method="post" id="upload" action="/upload" enctype="multipart/form-data">
<div class="file-field input-field"> <div class="file-field input-field">
<div class="btn light-blue"> <div>
<span>File</span> <i class="material-icons left small">publish</i>
<input type="file" name="file"> <input type="file" name="file">
</div> </div>
<div class="file-path-wrapper"> <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> </div>
<div class="input-field"> <div class="input-field">
<i class="material-icons prefix">public</i> <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> </div>
</form> </form>
{% endblock %} {% endblock %}
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
{% block banner_content %} {% block banner_content %}
<h1 class="header center orange-text">Upload successful!</h1> <h1 class="header center orange-text">Upload successful!</h1>
<div class="row center"> <div class="row center">
<a href="{{ image }}" class="btn-large waves-effect waves-light light-blue">Direct link</a> <a href="{{ image }}" class="btn-large blue">Direct link</a>
<a href="{{ thumb }}" class="btn-large waves-effect waves-light light-blue">Thumbnail</a> <a href="{{ thumb }}" class="btn-large blue">Thumbnail</a>
</div> </div>
<div class="row center"> <div class="row center">
<img src="{{ thumb }}"> <img src="{{ thumb }}">
...@@ -14,17 +14,43 @@ ...@@ -14,17 +14,43 @@
{% block section_content %} {% block section_content %}
<div class="row"> <div class="row">
<div class="col s12 m4"> <div class="col s6">
<h5 class="center">HTML</h5> <h5 class="center">Full size</h5>
<pre>&lt;a href="{{ image }}"&gt;&lt;img src="{{ thumb }}"&gt;&lt;/a&gt;</pre> <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>
<div class="col s12 m4"> <div class="col s6">
<h5 class="center">Markdown</h5> <h5 class="center">Thumbnail</h5>
<pre>[![Image]({{ thumb }})]({{ image }})</pre> <div class="input-field">
</div> <i class="material-icons prefix">image</i>
<div class="col s12 m4"> <input class="snippet" type=text value="{{ thumb }}">
<h5 class="center">BBCode</h5> </div>
<pre>[url={{ image }}][img]{{ thumb }}[/img][/url]</pre> <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>
</div> </div>
{% endblock %} {% 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