Spaces:
Running
on
Zero
Running
on
Zero
css = """ | |
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'); | |
/* Outer container */ | |
.main { | |
display: flex; | |
justify-content: center; | |
align-items: flex-start; | |
width: 100%; | |
max-width: 1200px; | |
margin: 0 auto; | |
padding: 10px; | |
# background: linear-gradient(to right, #6a11cb, #2575fc); | |
# animation: diffusionArtAnimation 10s infinite alternate; | |
} | |
@keyframes diffusionArtAnimation { | |
0% { | |
background: linear-gradient(135deg, #ff9a9e, #fad0c4); | |
} | |
20% { | |
background: linear-gradient(135deg, #a1c4fd, #c2e9fb); | |
} | |
40% { | |
background: linear-gradient(135deg, #fbc2eb, #a6c1ee); | |
} | |
60% { | |
background: linear-gradient(135deg, #ffecd2, #fcb69f); | |
} | |
80% { | |
background: linear-gradient(135deg, #cfd9df, #e2ebf0); | |
} | |
100% { | |
background: linear-gradient(135deg, #ff9a9e, #fad0c4); | |
} | |
} | |
#main_row{ | |
justify-content: center; | |
} | |
/* Hide class */ | |
.svelte-p4aq0j { | |
display: none; | |
} | |
.wrap.svelte-p4aq0j.svelte-p4aq0j { | |
display: none; | |
} | |
#download_sketch { | |
display: none; | |
} | |
#download_output { | |
display: none; | |
} | |
#column_input, #column_output { | |
width: 100%; | |
max-width: 500px; | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
padding: 10px; | |
} | |
#tools_header, #input_header, #output_header, #process_header { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
width: 100%; | |
max-width: 400px; | |
font-size: 1.2em; | |
color: #333; | |
text-shadow: 1px 1px 2px #000; | |
} | |
#nn { | |
width: 100px; | |
height: 100px; | |
} | |
#column_process { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
height: 600px; | |
} | |
#output_image, #input_image { | |
border-radius: 10px; | |
border: 5px solid #fff; | |
width: 100%; | |
max-width: 500px; | |
height: 500px; | |
box-sizing: border-box; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
background: rgba(255, 255, 255, 0.1); | |
animation: zoomInOut 5s infinite alternate; | |
} | |
@keyframes zoomInOut { | |
0% { | |
transform: scale(1); | |
} | |
50% { | |
transform: scale(1.05); | |
} | |
100% { | |
transform: scale(1); | |
} | |
} | |
#output_image > img { | |
border: 5px solid #fff; | |
border-radius: 10px; | |
width: 100%; | |
height: 100%; | |
box-sizing: border-box; | |
} | |
#input_image > div.image-container.svelte-p3y7hu > div.wrap.svelte-yigbas > canvas:nth-child(1) { | |
border: 5px solid #fff; | |
border-radius: 10px; | |
width: 100%; | |
height: 100%; | |
box-sizing: border-box; | |
} | |
/* Responsive styles */ | |
@media (max-width: 768px) { | |
.main { | |
flex-direction: column; | |
width: 100%; | |
} | |
#column_input, #column_output { | |
width: 100%; | |
max-width: 100%; | |
padding: 10px 0; | |
} | |
#tools_header, #input_header, #output_header, #process_header { | |
width: 100%; | |
} | |
#column_process { | |
height: auto; | |
} | |
#output_image, #input_image { | |
max-width: 100%; | |
height: auto; | |
} | |
} | |
@media (max-width: 480px) { | |
#nn { | |
width: 80px; | |
height: 80px; | |
} | |
#tools_header, #input_header, #output_header, #process_header { | |
max-width: 100%; | |
font-size: 14px; | |
} | |
#column_input, #column_output { | |
max-width: 100%; | |
padding: 10px; | |
} | |
} | |
#title-container { | |
text-align: center; | |
padding: 2rem 0; | |
} | |
#title { | |
font-size: var(--title-font-size); | |
color: #333; | |
font-family: 'Helvetica Neue', sans-serif; | |
text-transform: uppercase; | |
background: transparent; | |
} | |
#title span { | |
background: linear-gradient(45deg, #4EACEF, #28b485); | |
background-clip: text; | |
color: transparent; | |
} | |
""" | |
scripts = """ | |
async () => { | |
globalThis.theSketchDownloadFunction = () => { | |
console.log("test") | |
var link = document.createElement("a"); | |
dataUri = document.getElementById('download_sketch').href | |
link.setAttribute("href", dataUri) | |
link.setAttribute("download", "sketch.png") | |
document.body.appendChild(link); // Required for Firefox | |
link.click(); | |
document.body.removeChild(link); // Clean up | |
// also call the output download function | |
theOutputDownloadFunction(); | |
return false | |
} | |
} | |
""" |