flexx_live/index.html at master · flexxui/flexx_live · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
<head>
    <title>Flexx</title>
    <meta charset="utf-8">
    <link rel="icon" href="flexx.ico" type="image/x-icon">
</head>
<body>

<style>
body {
    font-family: "Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
    background: #f3f3f3;
    color: #fff;
    font-weight: normal;
}
p {
    line-height: 140%;
}

.body {
    box-sizing: border-box;
    margin: 0.5em 0;
    padding: 0; /*1em 2em;*/
    width: 100%;
    position: absolute;
    max-width: 800px;
    left: calc(50% - 400px);
    /*box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.5);*/
}
@media screen and (max-width:  1000px) { /* some browser dont trigger for smaller numbers */
    .body {
        position: static;
        max-width: none;
        margin:0;
    }
}
a:link, a:visited, a:active {
    color: #48C;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

hr {
    height: 1px;
    background: #ccc;
    border: 0px solid #ccc;
}

.head {
    padding: 1em;
}

.head img {
    text-align:right;
    width: 150px;
    height: 150px;
    margin-left: calc(50% - 75px);
}

.head .title {
    clear: both;
    font-size: 300%;
    font-weight: bold;
    color: #444;
}
.head .subtitle {
    font-size: 200%;
    color: #444;

}

.content {
    margin: 0;
    color: #222;
    line-height: 140%;
}

.footer {
    padding-top: 1em;
    color: #777;
    font-size: 90%;
}
code {
    font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace;
    font-size: 90%;
    color: #000;
    background: #fff;
    padding: 1px 5px;
    white-space: nowrap;
    border: solid 1px #e1e4e5;
}

</style>

<div class='body'>

<div class='head'>
    <img src='flexx.png'><br />
    <span class='title'>Flexx</span><br />
    <span class='subtitle'>Write modern apps for desktop and web<br />in pure Python</span>
</div>

<div class='content'>
<hr>

<p>
Flexx is a pure Python toolkit for creating graphical user interfaces (GUI's), that uses web technology for its rendering. Apps are written purely in Python; Flexx' transpiler generates the necessary JavaScript on the fly.
</p>
<p>
You can use Flexx to create (cross platform) desktop applications, web applications, and (if designed well) export an app to a standalone HTML document. It also works in the Jupyter notebook.
</p>
<p>
The docs are on <a href='http://flexx.readthedocs.org'>Readthedocs</a>,
the code is on <a href='http://github.com/flexxui/flexx'>Github</a>.
</p>

<hr>
<h2> Live demo apps </h2>

The demo servers are currenly down.

<hr>
<h2> Apps uploaded by users </h2>

<p>
Apps can be run locally, exported to standalond HTML. An experimental feature
allows publishing (static) apps to this website.
</p>
<p>
List of currently exported apps:
</p>

STATIC_APP_LIST

<hr>
</div>

<div class='footer'>© Copyright 2018, Almar Klein -
the text on this page is licensed under <a href='https://creativecommons.org/licenses/by/4.0/'>CC BY 4.0</a>
</div>

</div>

</body>
</html>