Orbbec Gemini 330 Series Documentation

Overview

About Orbbec Gemini 330 series
Quickstarts

Gemini 335Le Quick Start

Gemini 335Lg Quick Start

Gemini 330 Series Quick Start Guide

Explore camera functions in Orbbec Viewer

Build your first camera application

Build your first camera viewer application
Code samples & wrappers

C

C Sample Hello Orbbec
Useful Links
Orbbec SDK on Github

eva test

Update on 2025-06-10 09:50:19

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产品选择器 - 多选下拉美化</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}

.container {
width: 100%;
max-width: 800px;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
overflow: hidden;
}

header {
background: linear-gradient(to right, #1a2a6c, #2a4b9c);
color: white;
padding: 25px 30px;
text-align: center;
}

h1 {
font-size: 2.2rem;
margin-bottom: 8px;
}

.subtitle {
font-weight: 300;
opacity: 0.9;
font-size: 1.1rem;
}

.content {
padding: 30px;
}

.select-area {
background: #f0f5ff;
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
border: 1px solid #d0ddf0;
}

.select-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.select-title {
font-size: 1.5rem;
color: #1a2a6c;
font-weight: 600;
}

.search-box {
position: relative;
width: 300px;
}

.search-box input {
width: 100%;
padding: 12px 20px 12px 45px;
border-radius: 30px;
border: 1px solid #c0ccd9;
font-size: 1rem;
background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-box i {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: #6c7a8f;
}

.options-container {
max-height: 300px;
overflow-y: auto;
background: white;
border-radius: 10px;
padding: 15px;
border: 1px solid #d0ddf0;
}

.option-group {
margin-bottom: 20px;
}

.group-title {
font-weight: 600;
color: #2a4b9c;
padding: 8px 0;
margin-bottom: 10px;
border-bottom: 1px solid #e0e8f5;
font-size: 1.1rem;
}

.option-item {
display: flex;
align-items: center;
padding: 12px 15px;
border-radius: 8px;
margin-bottom: 8px;
transition: all 0.3s ease;
cursor: pointer;
}

.option-item:hover {
background: #e6f0ff;
}

.option-item.selected {
background: #d4e3ff;
border-left: 4px solid #1a2a6c;
}

.option-item input {
margin-right: 15px;
width: 20px;
height: 20px;
cursor: pointer;
}

.option-item label {
font-size: 1.1rem;
color: #2c3e50;
cursor: pointer;
flex-grow: 1;
}

.actions {
display: flex;
justify-content: space-between;
margin-top: 20px;
}

.counter {
color: #2a4b9c;
font-weight: 500;
display: flex;
align-items: center;
}

.counter i {
margin-right: 10px;
font-size: 1.2rem;
}

.btn {
padding: 12px 30px;
border-radius: 30px;
border: none;
font-size: 1.05rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}

.btn-primary {
background: linear-gradient(to right, #1a2a6c, #2a4b9c);
color: white;
box-shadow: 0 4px 15px rgba(26, 42, 108, 0.3);
}

.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(26, 42, 108, 0.4);
}

.btn-reset {
background: #f0f5ff;
color: #1a2a6c;
border: 1px solid #c0ccd9;
margin-right: 15px;
}

.btn-reset:hover {
background: #e0e8f5;
}

.result-area {
background: #f8faff;
border-radius: 12px;
padding: 25px;
border: 1px solid #d0ddf0;
}

.result-title {
font-size: 1.3rem;
color: #1a2a6c;
margin-bottom: 20px;
display: flex;
align-items: center;
}

.result-title i {
margin-right: 10px;
font-size: 1.5rem;
}

.selected-items {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.selected-item {
background: #d4e3ff;
padding: 10px 20px;
border-radius: 30px;
font-size: 0.95rem;
color: #1a2a6c;
display: flex;
align-items: center;
}

.selected-item i {
margin-left: 8px;
cursor: pointer;
opacity: 0.7;
transition: all 0.2s;
}

.selected-item i:hover {
opacity: 1;
color: #c0392b;
}

.empty-message {
color: #6c7a8f;
font-style: italic;
}

/* 滚动条样式 */
.options-container::-webkit-scrollbar {
width: 8px;
}

.options-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}

.options-container::-webkit-scrollbar-thumb {
background: #a0b0d0;
border-radius: 4px;
}

.options-container::-webkit-scrollbar-thumb:hover {
background: #7a8db0;
}

footer {
text-align: center;
padding: 20px;
color: rgba(255, 255, 255, 0.8);
background: rgba(0, 0, 0, 0.2);
margin-top: 20px;
border-radius: 0 0 20px 20px;
}

@media (max-width: 768px) {
.select-header {
flex-direction: column;
align-items: flex-start;
}

.search-box {
width: 100%;
margin-top: 15px;
}

.actions {
flex-direction: column;
gap: 15px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>产品选择器</h1>
<p class="subtitle">选择您感兴趣的产品（可多选）</p>
</header>

<div class="content">
<div class="select-area">
<div class="select-header">
<div class="select-title">选择产品型号</div>
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" id="search" placeholder="搜索产品...">
</div>
</div>

<div class="options-container" id="optionsContainer">
<div class="option-group">
<div class="group-title">Gemini 系列</div>
<div class="option-item">
<input type="checkbox" id="opt1" value="Gemini 435Le">
<label for="opt1">Gemini 435Le</label>
</div>
<div class="option-item">
<input type="checkbox" id="opt2" value="Gemini 335">
<label for="opt2">Gemini 335</label>
</div>
<div class="option-item">
<input type="checkbox" id="opt3" value="Gemini 335L">
<label for="opt3">Gemini 335L</label>
</div>
<div class="option-item">
<input type="checkbox" id="opt4" value="Gemini 336">
<label for="opt4">Gemini 336</label>
</div>
<div class="option-item">
<input type="checkbox" id="opt5" value="Gemini 336L">
<label for="opt5">Gemini 336L</label>
</div>
<div class="option-item">
<input type="checkbox" id="opt6" value="Gemini 335Lg">
<label for="opt6">Gemini 335Lg</label>
</div>
<div class="option-item">
<input type="checkbox" id="opt7" value="Gemini 335Le">
<label for="opt7">Gemini 335Le</label>
</div>
<div class="option-item">
<input type="checkbox" id="opt8" value="Gemini 2">
<label for="opt8">Gemini 2</label>
</div>
<div class="option-item">
<input type="checkbox" id="opt9" value="Gemini 2L">
<label for="opt9">Gemini 2L</label>
</div>
<div class="option-item">
<input type="checkbox" id="opt10" value="Gemini 2XL">
<label for="opt10">Gemini 2XL</label>
</div>
</div>

<div class="option-group">
<div class="group-title">其他产品系列</div>
<div class="option-item">
<input type="checkbox" id="opt11" value="Astra 2">
<label for="opt11">Astra 2</label>
</div>
<div class="option-item">
<input type="checkbox" id="opt12" value="Astra Mini Pro">
<label for="opt12">Astra Mini Pro</label>
</div>
<div class="option-item">
<input type="checkbox" id="opt13" value="Femto Bolt">
<label for="opt13">Femto Bolt</label>
</div>
<div class="option-item">
<input type="checkbox" id="opt14" value="Femto Mega">
<label for="opt14">Femto Mega</label>
</div>
<div class="option-item">
<input type="checkbox" id="opt15" value="Femto Mega I">
<label for="opt15">Femto Mega I</label>
</div>
<div class="option-item">
<input type="checkbox" id="opt16" value="Persee N1">
<label for="opt16">Persee N1</label>
</div>
<div class="option-item">
<input type="checkbox" id="opt17" value="Persee 2">
<label for="opt17">Persee 2</label>
</div>
<div class="option-item">
<input type="checkbox" id="opt18" value="Pulsar SL450">
<label for="opt18">Pulsar SL450</label>
</div>
<div class="option-item">
<input type="checkbox" id="opt19" value="MS200k">
<label for="opt19">MS200k</label>
</div>
<div class="option-item">
<input type="checkbox" id="opt20" value="Sync Hub">
<label for="opt20">Sync Hub</label>
</div>
<div class="option-item">
<input type="checkbox" id="opt21" value="Zora P1">
<label for="opt21">Zora P1</label>
</div>
</div>

<div class="option-group">
<div class="group-title">服务选项</div>
<div class="option-item">
<input type="checkbox" id="opt22" value="ODM/OEM Service">
<label for="opt22">ODM/OEM Service</label>
</div>
<div class="option-item">
<input type="checkbox" id="opt23" value="Not Listed">
<label for="opt23">Not Listed</label>
</div>
</div>
</div>

<div class="actions">
<div class="counter">
<i class="fas fa-check-circle"></i>
<span id="selectedCount">0</span> 个产品已选中
</div>
<div>
<button class="btn btn-reset" id="resetBtn">重置选择</button>
<button class="btn btn-primary" id="submitBtn">提交选择</button>
</div>
</div>
</div>

<div class="result-area">
<div class="result-title">
<i class="fas fa-list-check"></i>
已选产品
</div>
<div class="selected-items" id="selectedItems">
<div class="empty-message">尚未选择任何产品</div>
</div>
</div>
</div>

<footer>
<p>© 2023 产品选择系统 | 多选下拉美化方案</p>
</footer>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const selectedItemsContainer = document.getElementById('selectedItems');
const selectedCount = document.getElementById('selectedCount');
const searchInput = document.getElementById('search');
const resetBtn = document.getElementById('resetBtn');
const submitBtn = document.getElementById('submitBtn');
const optionItems = document.querySelectorAll('.option-item');

// 更新已选产品列表
function updateSelectedItems() {
const selected = [];
checkboxes.forEach(checkbox => {
if (checkbox.checked) {
selected.push(checkbox.value);
}
});

selectedCount.textContent = selected.length;

if (selected.length === 0) {
selectedItemsContainer.innerHTML = '<div class="empty-message">尚未选择任何产品</div>';
return;
}

selectedItemsContainer.innerHTML = '';
selected.forEach(item => {
const elem = document.createElement('div');
elem.className = 'selected-item';
elem.innerHTML = `
${item}
<i class="fas fa-times remove-item"></i>
`;
selectedItemsContainer.appendChild(elem);

// 添加移除事件
elem.querySelector('.remove-item').addEventListener('click', function() {
const checkbox = document.querySelector(`input[value="${item}"]`);
if (checkbox) {
checkbox.checked = false;
updateSelectedItems();
updateItemStyle(checkbox.closest('.option-item'));
}
});
});
}

// 更新选项样式
function updateItemStyle(item) {
const checkbox = item.querySelector('input');
if (checkbox.checked) {
item.classList.add('selected');
} else {
item.classList.remove('selected');
}
}

// 初始化事件监听
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
updateItemStyle(this.closest('.option-item'));
updateSelectedItems();
});
});

// 搜索功能
searchInput.addEventListener('input', function() {
const searchTerm = this.value.toLowerCase();

optionItems.forEach(item => {
const text = item.querySelector('label').textContent.toLowerCase();
if (text.includes(searchTerm)) {
item.style.display = 'flex';
} else {
item.style.display = 'none';
}
});
});

// 重置按钮
resetBtn.addEventListener('click', function() {
checkboxes.forEach(checkbox => {
checkbox.checked = false;
updateItemStyle(checkbox.closest('.option-item'));
});
updateSelectedItems();
searchInput.value = '';
optionItems.forEach(item => item.style.display = 'flex');
});

// 提交按钮
submitBtn.addEventListener('click', function() {
const selected = [];
checkboxes.forEach(checkbox => {
if (checkbox.checked) {
selected.push(checkbox.value);
}
});

if (selected.length === 0) {
alert('请至少选择一个产品！');
return;
}

alert(`已成功选择 ${selected.length} 个产品！\n\n${selected.join('\n')}`);
});

// 初始化
updateSelectedItems();
});
</script>
</body>
</html>

Edit Link

Tips

Add

Questions or
Feedback?

Feedback

Your feedback matters! Share your thoughts on this page, report errors, or let us know how we can improve to better support your needs. If applicable, please include the specific sentence or section to help us identify and address the issue.

Overview

Quickstarts

Code samples & wrappers

C

Useful Links

eva test

ON THIS PAGE

Edit Link

Name：

alias：

Link Address：

Link Type：

Tips

Are you sure you want to delete it?

Add

Name：

Link Address：

Add

Name：

Link Address：

Questions or
Feedback?

Feedback

Stay Updated

Be the first to learn about our new products and updates.

Overview

Quickstarts

Code samples & wrappers

C

Useful Links

eva test

ON THIS PAGE

Edit Link

Name：

alias：

Link Address：

Link Type：

Tips

Are you sure you want to delete it?

Add

Name：

Link Address：

Add

Name：

Link Address：

Questions or Feedback?

Feedback

Stay Updated

Be the first to learn about our new products and updates.

Questions or
Feedback?