- 제출된 URL:
- https://www.cosplayhi.fun/register
- 보고서 완료:
링크 · 0개 결과
페이지에서 식별된 외부 링크
JavaScript 변수 · 3개 결과
페이지의 창 개체에 로드된 전역 JavaScript 변수는 함수 외부에서 선언된 변수로, 현재 범위 내에서 코드의 어느 부분에서나 액세스할 수 있습니다
| 이름 | 유형 |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
콘솔 로그 메시지 · 2개 결과
웹 콘솔에 기록된 메시지
| 유형 | 카테고리 | 로그 |
|---|---|---|
| verbose | dom |
|
| verbose | dom |
|
HTML
페이지의 원시 HTML 본문
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CosplayHi - Register</title>
<!-- Website Icon -->
<link rel="icon" href="./images/cosplayhi-logo-no-text.png" type="image/png">
<!-- External CSS -->
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/auth.css">
<!-- Remix Icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.2.0/remixicon.min.css" integrity="sha512-MqL4+Io386IOPMKKyplKII0pVW5e+kb+PI/I3N87G3fHIfrgNNsRpzIXEi+0MQC0sR9xZNqZqCYVcC61fL5+Vg==" crossorigin="anonymous" referrerpolicy="no-referrer">
<!-- Facebook Link Thumbnail -->
<meta property="og:title" content="CosplayHi - Connect with Cosplayers">
<meta property="og:description" content="A platform for cosplayers to find mutuals and be easily discovered by others.">
<meta property="og:image" content="https://cosplayhi.fun/images/cosplayhi-post-thumbnail.png">
<meta property="og:url" content="https://cosplayhi.fun">
<meta property="og:type" content="website">
</head>
<body>
<nav>
<a href="./">
<img class="logo" src="./images/cosplayhi-cropped-logo.png" alt="CosplayHi logo">
</a>
<ul class="right">
<a href="./events" class=""><i class="ri-calendar-2-line"></i> <span>Events</span></a>
<li><a class="sign-in" href="./sign-in">Sign in</a></li>
<li><a class="register" href="./register">Register</a></li>
</ul>
<li id="menu-icon"><i class="ri-menu-line"></i></li>
</nav>
<div class="container">
<h2>Register</h2>
<form id="register-form" method="POST" enctype="multipart/form-data">
<h3>Profile Image</h3>
<input type="file" name="profile_image" id="profile-image" accept="image/*">
<p id="profile-image-err" class="auth-status"></p>
<div id="profile-image-preview">
<div class="details">
<h3 class="cosplayer-name"></h3>
<p class="character"></p>
<p class="source"></p>
</div>
</div>
<h3>Character Portrayed</h3>
<input type="text" name="character" id="character" placeholder="Enter character (don't worry this can be changed later)">
<p id="character-err" class="auth-status"></p>
<h3>Source of Character</h3>
<input type="text" name="source" id="source" placeholder="Enter source (e.g., One Piece, Naruto, League of Legends, etc.)">
<p id="source-err" class="auth-status"></p>
<h3>Cosplayer Name</h3>
<input type="text" name="cosplayer_name" id="cosplayer-name" placeholder="Enter cosplayer name">
<p id="cosplayer-name-err" class="auth-status"></p>
<h3>Birthdate</h3>
<input type="date" name="birthdate" id="birthdate">
<p id="birthdate-err" class="auth-status"></p>
<h3>Email</h3>
<input type="email" name="email" id="email" placeholder="Enter email">
<p id="email-err" class="auth-status"></p>
<h3>Username</h3>
<input type="text" name="username" id="username" placeholder="Enter username">
<p id="username-err" class="auth-status"></p>
<h3>Password</h3>
<input type="password" name="password" id="password" placeholder="Enter password">
<p id="password-err" class="auth-status"></p>
<h3>Confirm Password</h3>
<input type="password" name="confirm_password" id="confirm-password" placeholder="Enter confirm password">
<p id="confirm-password-err" class="auth-status"></p>
<div class="agree">
<input type="checkbox" name="terms" id="terms">
<label for="terms">I agree to the <a href="./terms-of-service" target="_blank">Terms of Service</a> and <a href="./privacy-policy" target="_blank">Privacy Policy</a></label>
</div>
<p id="terms-err" class="auth-status"></p>
<div id="loader">
<div class="spinner"></div>
</div>
<input id="register" type="submit" name="register" value="Register">
</form>
</div>
<script>
// REGISTER FORM
document.querySelector('#register-form').addEventListener('submit', (e) => {
e.preventDefault();
document.querySelector('#loader').style.display = 'block';
document.querySelector('#register').disabled = true;
const formData = new FormData(e.target);
document.querySelector('#loader').style.display = 'block';
document.querySelector('#register').disabled = true;
fetch('./api/handle-register', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
document.querySelector('#loader').style.display = 'none';
document.querySelector('#register').disabled = false;
console.log(data);
if (data.success) {
window.location.href = data.url;
}
document.querySelector('#profile-image-err').innerHTML = data.errors?.profile_image_err || '';
document.querySelector('#character-err').innerHTML = data.errors?.character_err || '';
document.querySelector('#source-err').innerHTML = data.errors?.source_err || '';
document.querySelector('#cosplayer-name-err').innerHTML = data.errors?.cosplayer_name_err || '';
document.querySelector('#birthdate-err').innerHTML = data.errors?.birthdate_err || '';
document.querySelector('#email-err').innerHTML = data.errors?.email_err || '';
document.querySelector('#username-err').innerHTML = data.errors?.username_err || '';
document.querySelector('#password-err').innerHTML = data.errors?.password_err || '';
document.querySelector('#confirm-password-err').innerHTML = data.errors?.confirm_password_err || '';
document.querySelector('#terms-err').innerHTML = data.errors?.terms_err || '';
})
.catch(error => console.error('Error:', error));
});
// PREVIEW IMAGE WITH STYLED TEXT
document.querySelector('#profile-image').addEventListener('change', (e) => {
const file = e.target.files[0];
const profileImagePreview = document.querySelector('#profile-image-preview');
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = (e) => {
profileImagePreview.style.backgroundImage = `url('${e.target.result}')`;
profileImagePreview.style.display = 'block';
};
reader.readAsDataURL(file);
} else {
profileImagePreview.style.display = 'none';
}
});
document.querySelector('#character').addEventListener('input', (e) => {
document.querySelector('.details .character').innerHTML = e.target.value;
});
document.querySelector('#source').addEventListener('input', (e) => {
document.querySelector('.details .source').innerHTML = e.target.value;
});
document.querySelector('#cosplayer-name').addEventListener('input', (e) => {
document.querySelector('.details .cosplayer-name').innerHTML = e.target.value;
});
</script>
<script src="./js/script.js" defer=""></script>
</body></html>