gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-07-27 04:20:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

website: Reformat Step 2 illustration as a realistic vertical extension popup mockup in the Sync tab

Browse Source
This commit is contained in:
KoalaDev
2026-07-03 11:32:51 +02:00
parent ab6356c5ad
commit cb6d7eb98c
2 changed files with 54 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/style.css
+28
View File
@@ -4128,3 +4128,31 @@ header[id] {
left: 100%;
transition: left 0.8s ease-in-out;
}
/* Step 2 mockup control panel styles */
.popup-mock-controls {
display: flex;
gap: 8px;
margin-top: 4px;
width: 100%;
}
.popup-mock-btn {
flex: 1;
text-align: center;
padding: 6px;
border-radius: 6px;
font-size: 0.62rem;
font-weight: 700;
color: white;
cursor: default;
opacity: 0.75;
}
.popup-mock-btn.play {
background: #22c55e;
}
.popup-mock-btn.pause {
background: #ef4444;
}
website/template.html
+26 -33
View File
@@ -1095,45 +1095,38 @@
</div>
<!-- Custom Step 2 Illustration -->
<div class="step-illustration-1" data-reveal>
<div class="illus-browser-container">
<div class="illus-browser-header">
<div class="illus-browser-dots">
<span class="illus-browser-dot"></span>
<span class="illus-browser-dot"></span>
<span class="illus-browser-dot"></span>
<div class="illus-popup-card">
<div class="illus-popup-header">
<div class="illus-popup-brand">
<img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="14" height="14">
<span>KoalaSync</span>
</div>
<div class="illus-browser-address-bar">
<span class="url-protocol">https://</span>youtube.com/watch?v=5xkoala
<div class="illus-popup-version mockup-version">{{VERSION}}</div>
</div>
<div class="illus-popup-tabs">
<div class="illus-popup-tab">
<span>{{STEP_2_ILLUS_ROOM}}</span>
</div>
<div class="illus-browser-toolbar">
<div class="illus-extension-btn active">
<img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="KoalaSync Extension" width="14" height="14">
</div>
<div class="illus-popup-tab active">
<span>{{STEP_2_ILLUS_SYNC}}</span>
</div>
<div class="illus-popup-tab">
<span>{{STEP_2_ILLUS_SETTINGS}}</span>
</div>
</div>
<div class="illus-browser-content">
<div class="illus-video-player-mock">
<div class="video-mock-play-button">▶</div>
<div class="video-mock-timeline">
<div class="video-mock-timeline-fill"></div>
<div class="illus-popup-body">
<div class="popup-form-group">
<label class="popup-form-label">{{LABEL_SELECT_VIDEO}}</label>
<div class="popup-select-wrapper">
<select class="popup-select-mock" disabled>
<option class="demo-title-text-ep1">Stranger Things - S4E1</option>
</select>
<div class="popup-cursor-pointer">👆</div>
</div>
</div>
<!-- Floating Extension Dropdown Popup (aligned below toolbar icon) -->
<div class="illus-extension-popup drop-down">
<div class="popup-title">
<img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="12" height="12">
<span>KoalaSync</span>
</div>
<div class="popup-form-group">
<label class="popup-form-label">{{LABEL_SELECT_VIDEO}}</label>
<div class="popup-select-wrapper">
<select class="popup-select-mock" disabled>
<option class="demo-title-text-ep1">Stranger Things - S4E1</option>
</select>
<div class="popup-cursor-pointer">👆</div>
</div>
</div>
<div class="popup-mock-controls">
<div class="popup-mock-btn play">▶ Play</div>
<div class="popup-mock-btn pause">⏸ Pause</div>
</div>
</div>
</div>