254 lines
7.9 KiB
HTML
254 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
|
|
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
|
|
rel="stylesheet">
|
|
<title>Screen Recorder</title>
|
|
<style>
|
|
body {
|
|
width: 300px;
|
|
height: 340px;
|
|
font-family: Poppins, sans-serif;
|
|
background: #251f38;
|
|
--gap: 5em;
|
|
--line: 1px;
|
|
--color: rgba(255, 255, 255, 0.1);
|
|
color: white;
|
|
background-image:
|
|
linear-gradient(-90deg,
|
|
transparent calc(var(--gap) - var(--line)),
|
|
var(--color) calc(var(--gap) - var(--line) + 1px),
|
|
var(--color) var(--gap)),
|
|
linear-gradient(0deg,
|
|
transparent calc(var(--gap) - var(--line)),
|
|
var(--color) calc(var(--gap) - var(--line) + 1px),
|
|
var(--color) var(--gap));
|
|
background-size: var(--gap) var(--gap);
|
|
background-color: #5d3fbd;
|
|
}
|
|
|
|
.mode-selector {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.mode-button {
|
|
border: none;
|
|
color: white;
|
|
text-align: center;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 10px;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
flex: 1;
|
|
}
|
|
|
|
.mode-button:hover {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.mode-button.active {
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.avatar-upload {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 15px;
|
|
margin-bottom: 20px;
|
|
animation: fadeIn 0.3s ease;
|
|
}
|
|
|
|
.avatar-preview {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 3px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.avatar-preview:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.avatar-preview img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.upload-btn {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border: none;
|
|
color: white;
|
|
padding: 8px 15px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.upload-btn:hover {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.record-options {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 25px;
|
|
justify-content: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
|
|
.record-btn {
|
|
border: none;
|
|
color: white;
|
|
text-align: center;
|
|
border-radius: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 15px;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
.record-btn:hover {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.record-btn p {
|
|
margin: 5px 0 0 0;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.quality-select {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
color: white;
|
|
border: 1.5px solid rgb(255, 255, 255);
|
|
font-family: Poppins;
|
|
padding: 8px 15px;
|
|
border-radius: 5px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.quality-select option {
|
|
color: black;
|
|
font-size: 0.75rem;
|
|
padding: 8px 2px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.icon-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div>
|
|
<h1 style="font-weight: 500; margin-bottom:20px; text-align: center;">BUBBLE CAM</h1>
|
|
|
|
<!-- Camera/Avatar Mode Selector -->
|
|
<div class="mode-selector">
|
|
<button id="camera-mode" class="mode-button active">
|
|
<i class="fas fa-camera fa-lg"></i>
|
|
<p>Camera</p>
|
|
</button>
|
|
<button id="avatar-mode" class="mode-button">
|
|
<i class="fas fa-user-circle fa-lg"></i>
|
|
<p>Avatar</p>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Avatar Upload Section -->
|
|
<div id="avatar-section" class="avatar-upload">
|
|
<div class="avatar-preview">
|
|
<img id="avatar-img" src="avatar.png" alt="Avatar">
|
|
</div>
|
|
<!-- Make the file input directly visible -->
|
|
<label for="avatar-input" class="upload-btn">
|
|
<i class="fas fa-upload"></i>
|
|
Upload Avatar
|
|
</label>
|
|
<input type="file" id="avatar-input" accept="image/*" style="position: absolute; opacity: 0; width: 0; height: 0;">
|
|
</div>
|
|
|
|
<!-- Recording Options -->
|
|
<div class="record-options">
|
|
<div class="record-option">
|
|
<button id="tab" class="record-btn">
|
|
<div class="icon-container">
|
|
<i id="tab-icon" class="fa-regular fa-window-maximize fa-xl"></i>
|
|
</div>
|
|
<p>Window Tab</p>
|
|
</button>
|
|
</div>
|
|
<div class="record-option">
|
|
<button id="screen" class="record-btn">
|
|
<div class="icon-container">
|
|
<i id="screen-icon" class="fa-solid fa-display fa-xl"></i>
|
|
</div>
|
|
<p>Screen</p>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="options" style="display: flex; justify-content: center;">
|
|
<select id="quality" class="quality-select" required>
|
|
<option value="high" selected>High (1080p, 60fps)</option>
|
|
<option value="medium">Medium (720p, 30fps)</option>
|
|
<option value="low">Low (480p, 30fps)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="popup.js"></script>
|
|
<script>
|
|
document.getElementById('upload-avatar-btn').addEventListener('click', function() {
|
|
document.getElementById('avatar-input').click();
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |