lowrussia
5 years ago
commit
5dff2b0078
4 changed files with 115 additions and 0 deletions
|
After Width: | Height: | Size: 91 KiB |
|
After Width: | Height: | Size: 88 KiB |
@ -0,0 +1,115 @@ |
|||||
|
#!/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)) |
||||
Loading…
Reference in new issue