add styles

This commit is contained in:
spezi 2016-09-20 23:14:24 +02:00 committed by Florian Festi
parent 83f0c813dd
commit b4f9eca80b
2 changed files with 376 additions and 4 deletions

View File

@ -8,6 +8,9 @@ import os
import threading
import time
css = (open('self.css').read())
# Python 2 vs Python 3 compat
try:
from urllib.parse import unquote_plus
@ -100,9 +103,43 @@ class BServer:
return row % input
def args2html(self, name, box, action=""):
result = ["""<html><head><title>Boxes - """, name, """</title></head>
result = ["""<html><head><title>Boxes - """, name, """</title>
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" type="text/css" />
<style>
""", css, """
</style>
</head>
<body>
<h1>""", name, """</h1>
<div class="container" style="background-color: #FFF8EA;">
<div style="width: 70%; float: left;">
<h1>Boxes.py</h1>
<p>
A Python based generator for laser cut boxes and other things.
</p>
<p>It features both finished parametrized generators as well as a Python API
for writing your own scripts. It features finger and (flat) dovetail joints,
flex cuts, holes and slots for screws and more high level functions.
</p>
</div>
<div style="width: 30%; float: left;">
<img alt="self-Logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Gray_shaded_3D_cube.svg/2000px-Gray_shaded_3D_cube.svg.png" width="300px" >
</div>
<div>
<div class="clear"></div>
<hr />
<div style="width: 100%; float: left;">
<h2 style="font-size: 1em; margin: 0px; "> <a href="/">generators</a></h2><h2 style="margin: 0px 0px 0px 20px;" > <span style="margin-right: 10px;"> >> <span>""", name, """</h2>
<p>""", box.__doc__ or "", """</p>
<form action="%s" method="GET" target="_blank">
<table>
@ -116,15 +153,66 @@ class BServer:
result.append("""</table>
<p><button name="render" value="1">Generate</button></p>
</form>
</div>
<!--
<div style="width: 5%; float: left;"></div>
<div style="width: 35%; float: left;">
<img alt="sample" src="examples/box.svg" width="300px" >
<span id="sicherheitshinweise">hier kommt dann der AJAX-Inhalt</span>
</div>
-->
<div class="clear"></div>
<hr />
</div>
</div>
<div class="footer container">
<ul>
<li><a href="https://github.com/florianfesti/boxes">Get Source at GitHub</a></li>
<li><a href="http://florianfesti.github.io/boxes/html/index.html">Documentation and API Description</a></li>
<li><a href="https://hackaday.io/project/10649-boxespy">Hackaday.io Project Page</a></li>
</ul>
</div>
</body>
</html>
""")
return (s.encode("utf-8") for s in result)
def menu(self):
result = ["""<html>
<head><title>Boxes.py</title></head>
<head><title>Boxes.py</title>
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" type="text/css" />
<style>
""", css, """
</style>
<script>
function change(img_link){
var img = img_link.firstChild.innerHTML;
//alert(img);
document.getElementById("sample").src= "examples/" + img + ".svg";
}
function changeback(img_link){
document.getElementById("sample").src= "examples/" + img + ".svg";
}
</script>
</head>
<body>
<div class="container" style="background-color: #FFF8EA;">
<div style="width: 70%; float: left;">
<h1>Boxes.py</h1>
<p>
A Python based generator for laser cut boxes and other things.
@ -133,6 +221,18 @@ A Python based generator for laser cut boxes and other things.
for writing your own scripts. It features finger and (flat) dovetail joints,
flex cuts, holes and slots for screws and more high level functions.
</p>
</div>
<div style="width: 30%; float: left;">
<img alt="self-Logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Gray_shaded_3D_cube.svg/2000px-Gray_shaded_3D_cube.svg.png" width="300px" >
</div>
<div>
<div class="clear"></div>
<hr />
<div style="width: 100%; float: left;">
<p>These are the available generators:</p>
<ul>
""" ]
@ -146,10 +246,36 @@ flex cuts, holes and slots for screws and more high level functions.
result.append(""" <li><a href="%s">%s</a>%s</li>""" % (
name, name, docs))
result.append("""</ul>
</div>
<!--
<div style="width: 5%; float: left;"></div>
<div style="width: 55%; float: left;">
<img id="sample" src="examples/box.svg" alt="Sample Image" />
</div>
-->
<div class="clear"></div>
<hr />
</div>
</div>
<div class="footer container">
<ul>
<li><a href="https://github.com/florianfesti/boxes">Get Source at GitHub</a></li>
<li><a href="http://florianfesti.github.io/boxes/html/index.html">Documentation and API Description</a></li>
<li><a href="https://hackaday.io/project/10649-boxespy">Hackaday.io Project Page</a></li>
</ul>
</div>
</body>
</html>
""")
@ -177,7 +303,8 @@ flex cuts, holes and slots for screws and more high level functions.
if not box:
start_response(status, headers)
return self.menu()
args = ["--"+arg for arg in environ['QUERY_STRING'].split("&")]
if "--render=1" not in args:
start_response(status, headers)
@ -223,3 +350,5 @@ if __name__=="__main__":
httpd.serve_forever()
else:
application = BServer().serve

243
scripts/self.css Normal file
View File

@ -0,0 +1,243 @@
@import 'https://fonts.googleapis.com/css?family=Amatic+SC|Bungee+Shade|Luckiest+Guy';
html,
button,
input,
select,
textarea {
color: #222;
}
html {
font-size: 1em;
line-height: 1.4;
}
li {
color: #666;
list-style-type: none;
}
a {
text-decoration: none;
color: #333;
}
body {min-width: 996px;}
h1 {
font-family: 'Amatic SC', cursive;
font-family: 'Luckiest Guy', cursive;
font-family: 'Bungee Shade', cursive;
font-size: 3em;
}
h2 {
font-family: 'Bungee Shade', cursive;
font-family: 'Amatic SC', cursive;
font-family: 'Luckiest Guy', cursive;
font-size: 2.5em;
}
/* Container */
.container {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding: 10px;
width: 996px;
-webkit-border-radius: 30px 30px 0 30px;
border-radius: 30px 30px 0 30px;
-webkit-box-shadow: 0 0 5px 0 #333333;
box-shadow: 0 0 5px 0 #333333;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
audio,
canvas,
img,
video {
vertical-align: middle;
}
/*
* Clear after each row
*/
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.footer {
-webkit-box-shadow: none;
box-shadow: none;
text-align: center;
margin-top: 0px;
}
.footer ul {
margin-top: 0px;
}
.footer ul li {
list-style-type: circle;
display: inline-block;
font-size: 0.9em;
}
.footer ul li a {
color: #999;
margin-right: 10px;
}
ul {
padding-left: 5px;
}
ul li {
padding: 5px 5px 5px 10px;
}
ul li:hover {
background-color: #333;
color: #eee;
-webkit-border-radius: 10px 10px 0 10px;
border-radius: 10px 10px 0 10px;
}
ul li:hover a {
color: #bbb;
}
ul li span {
display: none;
font-size: 1.8em;
font-weight: bold;
color: #333;
margin-left: 10px;
}
ul li:hover span {
display: inline-block;
}
input[type=range] {
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 1px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000;
background: #332816;
border-radius: 1px;
border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000;
border: 1px solid #332816;
height: 15px;
width: 15px;
border-radius: 15px;
background: #6E572F;
cursor: pointer;
-webkit-appearance: none;
margin-top: -7.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #332816;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 1px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000;
background: #332816;
border-radius: 1px;
border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000;
border: 1px solid #332816;
height: 15px;
width: 15px;
border-radius: 15px;
background: #6E572F;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 1px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #332816;
border: 0px solid #000000;
border-radius: 2px;
box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
background: #332816;
border: 0px solid #000000;
border-radius: 2px;
box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000;
border: 1px solid #332816;
height: 15px;
width: 15px;
border-radius: 15px;
background: #6E572F;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #332816;
}
input[type=range]:focus::-ms-fill-upper {
background: #332816;
}