365 Self Portraits - Capture Your Journey
About this app
Join the 365 Self Portrait challenge! Upload your photos with themes, track your progress, and connect with others.
365 Self Portraits - Capture Your Journey 365 Self Portrait Challenge Log In Select Gender Male Female Other Log In Upload Your Self Portrait Upload
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>365 Self Portraits - Capture Your Journey</title>
<meta name="description" content="Join the 365 Self Portrait challenge! Upload your photos with themes, track your progress, and connect with others.">
<meta name="keywords" content="self portrait, photography, art, themes, personal growth, challenge">
<!-- Libraries -->
<!-- jQuery (3.6.0) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS (5.3.3) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Bootstrap JS (5.3.3) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous">
<!-- Font Awesome (6.6.0) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
const selfPortraits = [];
let user = {};
// Function to upload a photo
const uploadPhoto = () => {
const theme = document.getElementById('theme').value;
const fileInput = document.getElementById('file-input');
const file = fileInput.files[0];
if (file && theme) {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
selfPortraits.push({ theme, imgSrc: reader.result });
renderGallery();
fileInput.value = "";
document.getElementById('theme').value = "";
}
} else {
alert("Please enter a theme and select a picture.");
}
};
// Function to render the uploaded portraits
const renderGallery = () => {
const gallery = document.getElementById('gallery');
gallery.innerHTML = "";
selfPortraits.forEach((portrait, index) => {
gallery.innerHTML += `
<div class="col-4 mb-3">
<div class="card">
<img src="${portrait.imgSrc}" class="card-img-top" alt="Self Portrait ${index + 1}">
<div class="card-body">
<h5 class="card-title">${portrait.theme}</h5>
</div>
</div>
</div>`;
});
};
// Function to handle user login
const loginUser = () => {
const fullName = document.getElementById('fullName').value;
const password = document.getElementById('password').value;
const gender = document.getElementById('gender').value;
if (fullName && password) {
user = { fullName, password, gender };
document.getElementById('login-section').style.display = "none";
document.getElementById('upload-section').style.display = "block";
} else {
alert("Please complete all fields!");
}
};
// Event Listener for Upload Button
document.getElementById('upload-btn').addEventListener('click', uploadPhoto);
document.getElementById('login-btn').addEventListener('click', loginUser);
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
/* App CSS Goes Here */
body {
background-color: #f0f9ff;
color: #333;
}
#main-container {
padding: 40px 20px;
}
.gallery {
margin-top: 20px;
}
.card {
transition: transform 0.2s;
}
.card:hover {
transform: scale(1.05);
}
.login-btn {
background: linear-gradient(45deg, #6A82FB, #FC5C7D);
color: white;
border: none;
}
.upload-btn {
background: linear-gradient(45deg, #ff9300, #ff0072);
color: white;
border: none;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1 class="text-center">365 Self Portrait Challenge</h1>
<div id="login-section" class="text-center mb-4">
<h2>Log In</h2>
<input type="text" id="fullName" placeholder="Full Name" class="form-control mb-2">
<input type="password" id="password" placeholder="Password" class="form-control mb-2">
<select id="gender" class="form-select mb-2">
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<button id="login-btn" class="btn login-btn">Log In</button>
</div>
<div id="upload-section" style="display:none;">
<h2 class="text-center">Upload Your Self Portrait</h2>
<input type="file" id="file-input" accept="image/*" class="form-control mb-2">
<input type="text" id="theme" placeholder="Theme of Your Self Portrait" class="form-control mb-2">
<button id="upload-btn" class="btn upload-btn">Upload</button>
</div>
<div id="gallery" class="row gallery"></div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!