|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Ghibli Style Converter</title> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
:root { |
|
--ghibli-blue: #68A7D3; |
|
--ghibli-green: #7FB881; |
|
--ghibli-yellow: #F9DD69; |
|
--ghibli-brown: #9B6A4A; |
|
--ghibli-pink: #FE9A9A; |
|
} |
|
|
|
* { |
|
margin: 0; |
|
padding: 0; |
|
box-sizing: border-box; |
|
font-family: 'Courier New', monospace; |
|
} |
|
|
|
body { |
|
background-color: #f5f5f5; |
|
background-image: |
|
linear-gradient(45deg, transparent 20%, rgba(104, 167, 211, 0.1) 20%), |
|
linear-gradient(-45deg, transparent 20%, rgba(123, 184, 125, 0.1) 20%); |
|
background-size: 40px 40px; |
|
min-height: 100vh; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
padding: 2rem; |
|
} |
|
|
|
header { |
|
text-align: center; |
|
margin-bottom: 2rem; |
|
position: relative; |
|
} |
|
|
|
h1 { |
|
color: var(--ghibli-brown); |
|
font-size: 2.5rem; |
|
margin-bottom: 0.5rem; |
|
text-shadow: 2px 2px 0px rgba(0,0,0,0.1); |
|
position: relative; |
|
display: inline-block; |
|
} |
|
|
|
h1::after { |
|
content: ""; |
|
position: absolute; |
|
bottom: -10px; |
|
left: 0; |
|
width: 100%; |
|
height: 4px; |
|
background: linear-gradient(90deg, var(--ghibli-blue), var(--ghibli-green), var(--ghibli-yellow), var(--ghibli-pink)); |
|
border-radius: 2px; |
|
} |
|
|
|
.subtitle { |
|
color: var(--ghibli-green); |
|
font-style: italic; |
|
font-size: 1.2rem; |
|
} |
|
|
|
.main-container { |
|
background-color: rgba(255, 255, 255, 0.9); |
|
border-radius: 20px; |
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); |
|
padding: 2rem; |
|
width: 100%; |
|
max-width: 900px; |
|
position: relative; |
|
overflow: hidden; |
|
border: 2px solid var(--ghibli-blue); |
|
} |
|
|
|
.main-container::before { |
|
content: ""; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 15px; |
|
background: linear-gradient(90deg, var(--ghibli-blue), var(--ghibli-green), var(--ghibli-yellow), var(--ghibli-pink)); |
|
} |
|
|
|
.converter-box { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
gap: 2rem; |
|
} |
|
|
|
.image-upload { |
|
width: 100%; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
} |
|
|
|
.upload-area { |
|
width: 300px; |
|
height: 300px; |
|
border: 3px dashed var(--ghibli-blue); |
|
border-radius: 15px; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
align-items: center; |
|
cursor: pointer; |
|
transition: all 0.3s ease; |
|
background-color: rgba(104, 167, 211, 0.1); |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.upload-area:hover { |
|
background-color: rgba(104, 167, 211, 0.2); |
|
transform: translateY(-5px); |
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
|
} |
|
|
|
.upload-icon { |
|
font-size: 4rem; |
|
color: var(--ghibli-blue); |
|
margin-bottom: 1rem; |
|
} |
|
|
|
.upload-text { |
|
color: var(--ghibli-brown); |
|
font-size: 1.1rem; |
|
text-align: center; |
|
padding: 0 1rem; |
|
} |
|
|
|
#file-input { |
|
display: none; |
|
} |
|
|
|
.preview-container { |
|
display: flex; |
|
flex-wrap: wrap; |
|
justify-content: center; |
|
gap: 2rem; |
|
width: 100%; |
|
margin-top: 1rem; |
|
} |
|
|
|
.preview-box { |
|
flex: 1; |
|
min-width: 250px; |
|
max-width: 350px; |
|
text-align: center; |
|
} |
|
|
|
.preview-title { |
|
color: var(--ghibli-brown); |
|
margin-bottom: 0.5rem; |
|
font-weight: bold; |
|
font-size: 1.2rem; |
|
} |
|
|
|
.preview-image { |
|
width: 100%; |
|
height: 250px; |
|
object-fit: contain; |
|
border: 2px solid var(--ghibli-brown); |
|
border-radius: 10px; |
|
background-color: #f9f6f2; |
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
|
} |
|
|
|
.controls { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
gap: 1.5rem; |
|
width: 100%; |
|
} |
|
|
|
.style-options { |
|
display: flex; |
|
flex-wrap: wrap; |
|
justify-content: center; |
|
gap: 1rem; |
|
width: 100%; |
|
} |
|
|
|
.style-option { |
|
padding: 0.8rem 1.5rem; |
|
border-radius: 50px; |
|
background-color: var(--ghibli-green); |
|
color: white; |
|
border: none; |
|
cursor: pointer; |
|
transition: all 0.3s ease; |
|
font-weight: bold; |
|
box-shadow: 0 3px 5px rgba(0,0,0,0.2); |
|
display: flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
} |
|
|
|
.style-option:hover { |
|
transform: translateY(-3px); |
|
box-shadow: 0 5px 10px rgba(0,0,0,0.2); |
|
} |
|
|
|
.style-option.active { |
|
background-color: var(--ghibli-blue); |
|
transform: scale(1.05); |
|
} |
|
|
|
.style-option i { |
|
font-size: 1.1rem; |
|
} |
|
|
|
.convert-btn { |
|
padding: 1rem 2rem; |
|
border-radius: 50px; |
|
background-color: var(--ghibli-pink); |
|
color: white; |
|
border: none; |
|
cursor: pointer; |
|
font-size: 1.1rem; |
|
font-weight: bold; |
|
transition: all 0.3s ease; |
|
box-shadow: 0 5px 15px rgba(0,0,0,0.2); |
|
display: flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
} |
|
|
|
.convert-btn:hover { |
|
background-color: #fe7a7a; |
|
transform: translateY(-5px); |
|
box-shadow: 0 10px 20px rgba(0,0,0,0.2); |
|
} |
|
|
|
.convert-btn i { |
|
font-size: 1.2rem; |
|
animation: pulse 1.5s infinite; |
|
} |
|
|
|
@keyframes pulse { |
|
0% { transform: scale(1); } |
|
50% { transform: scale(1.2); } |
|
100% { transform: scale(1); } |
|
} |
|
|
|
.download-btn { |
|
padding: 1rem 2rem; |
|
border-radius: 50px; |
|
background-color: var(--ghibli-yellow); |
|
color: #8a6d3b; |
|
border: none; |
|
cursor: pointer; |
|
font-size: 1.1rem; |
|
font-weight: bold; |
|
transition: all 0.3s ease; |
|
box-shadow: 0 5px 15px rgba(0,0,0,0.2); |
|
display: flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
display: none; |
|
} |
|
|
|
.download-btn:hover { |
|
background-color: #f8d247; |
|
transform: translateY(-5px); |
|
box-shadow: 0 10px 20px rgba(0,0,0,0.2); |
|
} |
|
|
|
.loading { |
|
display: none; |
|
flex-direction: column; |
|
align-items: center; |
|
gap: 1rem; |
|
margin: 1rem 0; |
|
} |
|
|
|
.loading-spinner { |
|
width: 50px; |
|
height: 50px; |
|
border: 5px solid rgba(104, 167, 211, 0.2); |
|
border-radius: 50%; |
|
border-top-color: var(--ghibli-blue); |
|
animation: spin 1s ease-in-out infinite; |
|
} |
|
|
|
@keyframes spin { |
|
to { transform: rotate(360deg); } |
|
} |
|
|
|
.loading-text { |
|
color: var(--ghibli-brown); |
|
font-style: italic; |
|
} |
|
|
|
.soot-sprite { |
|
position: absolute; |
|
width: 30px; |
|
height: 30px; |
|
background-color: #333; |
|
border-radius: 50%; |
|
opacity: 0.7; |
|
animation: float 6s ease-in-out infinite; |
|
z-index: -1; |
|
} |
|
|
|
@keyframes float { |
|
0% { transform: translateY(0) rotate(0deg); } |
|
50% { transform: translateY(-20px) rotate(5deg); } |
|
100% { transform: translateY(0) rotate(0deg); } |
|
} |
|
|
|
footer { |
|
margin-top: 2rem; |
|
text-align: center; |
|
color: var(--ghibli-brown); |
|
font-size: 0.9rem; |
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
.preview-container { |
|
flex-direction: column; |
|
align-items: center; |
|
} |
|
|
|
.preview-box { |
|
max-width: 100%; |
|
} |
|
|
|
h1 { |
|
font-size: 2rem; |
|
} |
|
|
|
.subtitle { |
|
font-size: 1rem; |
|
} |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<header> |
|
<h1>Ghibli Style Converter</h1> |
|
<p class="subtitle">Transform your photos into Studio Ghibli magical artwork</p> |
|
</header> |
|
|
|
<main class="main-container"> |
|
<div class="converter-box"> |
|
<div class="image-upload"> |
|
<input type="file" id="file-input" accept="image/*"> |
|
<div class="upload-area" id="upload-area"> |
|
<i class="fas fa-cloud-upload-alt upload-icon"></i> |
|
<p class="upload-text">Click to upload an image or drag and drop</p> |
|
</div> |
|
</div> |
|
|
|
<div class="preview-container"> |
|
<div class="preview-box"> |
|
<h3 class="preview-title">Original Image</h3> |
|
<img id="original-preview" class="preview-image" src="data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='250' viewBox='0 0 300 250'%3E%3Crect width='300' height='250' fill='%23f9f6f2'/%3E%3Ctext x='150' y='125' font-family='Arial' font-size='14' fill='%239B6A4A' text-anchor='middle'%3EUPLOAD AN IMAGE TO BEGIN%3C/text%3E%3C/svg%3E" alt="Original Preview"> |
|
</div> |
|
<div class="preview-box"> |
|
<h3 class="preview-title">Ghibli Style</h3> |
|
<img id="ghibli-preview" class="preview-image" src="data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='250' viewBox='0 0 300 250'%3E%3Crect width='300' height='250' fill='%23f9f6f2'/%3E%3Ctext x='150' y='125' font-family='Arial' font-size='14' fill='%239B6A4A' text-anchor='middle'%3EPROCESSED IMAGE WILL APPEAR HERE%3C/text%3E%3C/svg%3E" alt="Ghibli Preview"> |
|
</div> |
|
</div> |
|
|
|
<div class="controls"> |
|
<div class="style-options"> |
|
<button class="style-option |
|
</html> |
