You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
3.2 KiB
115 lines
3.2 KiB
#!/usr/bin/env python3
|
|
# -*- coding: utf-8 -*-
|
|
|
|
import os, random, base64
|
|
|
|
dir ='.'
|
|
extensions = [ '.ras', '.xwd', '.bmp', '.jpe', '.jpg', '.jpeg', '.xpm', '.ief', '.pbm', '.tif', '.gif', '.ppm', '.xbm', '.tiff', '.rgb', '.pgm', '.png', '.pnm']
|
|
|
|
imgs = list()
|
|
for (dirpath, dirnames, filenames) in os.walk(dir):
|
|
imgs += [os.path.join(dirpath, file) for file in filenames if file.endswith(tuple(extensions))]
|
|
|
|
random_img = random.choice(imgs)
|
|
|
|
with open(random_img, 'rb') as img_file:
|
|
random_img_string = base64.b64encode(img_file.read())
|
|
random_img_string = random_img_string.decode('utf-8')
|
|
random_img_string = 'data:image;base64,' + random_img_string
|
|
|
|
print('Content-type: text/html')
|
|
|
|
print('')
|
|
|
|
print('''
|
|
<html>
|
|
<head>
|
|
<style>
|
|
html, body {{
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: #ddd;
|
|
overflow: hidden;
|
|
}}
|
|
|
|
@-webkit-keyframes swirl-in-fwd {{
|
|
0% {{
|
|
-webkit-transform: rotate(-540deg) scale(0);
|
|
transform: rotate(-540deg) scale(0);
|
|
opacity: 0;
|
|
}}
|
|
100% {{
|
|
-webkit-transform: rotate(0) scale(1);
|
|
transform: rotate(0) scale(1);
|
|
opacity: 1;
|
|
}}
|
|
}}
|
|
@keyframes swirl-in-fwd {{
|
|
0% {{
|
|
-webkit-transform: rotate(-540deg) scale(0);
|
|
transform: rotate(-540deg) scale(0);
|
|
opacity: 0;
|
|
}}
|
|
100% {{
|
|
-webkit-transform: rotate(0) scale(1);
|
|
transform: rotate(0) scale(1);
|
|
opacity: 1;
|
|
}}
|
|
}}
|
|
|
|
#title {{
|
|
width: 100%;
|
|
text-align: center;
|
|
top: 5vh;
|
|
position: absolute;
|
|
font-size: 300%;
|
|
font-family: Arial, sans;
|
|
font-weight: bold;
|
|
color: white;
|
|
text-shadow: #FFF 0px 0px 5px, #FFF 0px 0px 10px, #FFF 0px 0px 15px, yellow 0px 0px 20px, yellow 0px 0px 30px, yellow 0px 0px 40px, yellow 0px 0px 50px, yellow 0px 0px 75px;
|
|
}}
|
|
.swirl-in-fwd {{
|
|
-webkit-animation: swirl-in-fwd 0.6s ease-out both;
|
|
animation: swirl-in-fwd 0.6s ease-out both;
|
|
}}
|
|
.img-box {{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100vh;
|
|
}}
|
|
.random-img {{
|
|
max-width:100%;
|
|
max-height: 80vh;
|
|
|
|
-webkit-box-shadow: 5px 5px 25px 0px rgba(0, 0, 0, 0.18);
|
|
-moz-box-shadow: 5px 5px 25px 0px rgba(0, 0, 0, 0.18);
|
|
box-shadow: 5px 5px 25px 0px rgba(0, 0, 0, 0.18);
|
|
}}
|
|
#path {{
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
font-family: Arial, sans;
|
|
text-align: center;
|
|
}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<p id="title">IMAGE ROULETTE</p>
|
|
|
|
<div class="img-box">
|
|
<img class="random-img swirl-in-fwd" src="{0}" />
|
|
</div>
|
|
<p id="path">{1}</p>
|
|
|
|
<script>
|
|
document.addEventListener('keyup', function(e){{
|
|
if(e.keyCode == 13)
|
|
window.location.reload();
|
|
}})
|
|
</script>
|
|
|
|
</body></html>'''.format(random_img_string, random_img))
|
|
|