pengjunjie/onlyoffice.github.io
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/onlyoffice.github.io.git synced 2026-02-10 18:05:06 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
master
onlyoffice.github.io/sdkjs-plugins/content/zoom/index.html
Oleg Korshul 61dc63d938 Update jquery version
2025-02-12 22:05:54 +03:00

727 lines
25 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--
(c) Copyright Ascensio System SIA 2020
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Zoom</title>
<script src="vendor/jquery/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="vendor/select2-4.0.13/css/select2.css" />
<script src="vendor/select2-4.0.13/js/select2.js"></script>
<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.js"></script>
<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins-ui.js"></script>
<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">
<script src="scripts/zoom.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
html,
body {
min-height: 100% !important;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
font-family: Arial;
font-size: 11px;
}
.select {
margin-left: 12px;
}
.settings_group {
display: none
}
.cursor_pointer {
cursor: pointer;
}
.legend {
display: flex;
justify-content: start;
}
.arrow {
float: right;
align-self: center;
margin-left: 7px;
}
.button {
cursor: pointer;
}
.input_container {
display: flex;
}
.checkbox {
margin-top: 1px;
margin-left: 5px;
}
.radiobox {
margin-left: 7px;
}
.display-none {
display: none !important;
}
#flex-loader-container {
display: flex;
align-items: center;
justify-content: center;
width: 150px;
height: 50px;
border: none;
background-image: none;
background-color: rgba(68, 68, 68, 0.95);
color: #f1f1f1;
border-radius: 6px;
}
.asc-plugin-loader .asc-loader-image {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+PGNpcmNsZSBjeD0iMTQiIGN5PSIxNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgcj0iMTAuMjUiIHN0cm9rZS1kYXNoYXJyYXk9IjE2MCUsIDQwJSIgLz48L3N2Zz4=) !important;
}
i {
border: solid black;
border-width: 0 1px 1px 0;
display: inline-block;
padding: 2px;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
margin-top: 3px;
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
margin-top: 5px;
}
.reconf-label,
.switch-label,
.label-settings {
border-bottom: 1px dashed #444444;
}
.error_border {
border: 1px solid #D9534F !important;
}
.daterangepicker .drp-calendar.left {
padding: 8px 4px 8px 4px !important;
}
#body > div.daterangepicker.ltr.single.opensright.show-calendar {
color: #333 !important;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
</style>
</head>
<body id="body" style="width: 100%;height: 100%; margin: 0 !important;">
<div id="loader-container" class="asc-plugin-loader display-none">
<div id="flex-loader-container">
<div>
<div class="asc-loader-image">
<div class="asc-loader-title"></div>
</div>
<div class="asc-loader-title"> Loading... </div>
</div>
</div>
</div>
<div id="iframe_join" class="display-none" style="width:100%; height:100%;margin:0;padding:0;"></div>
<div id="iframe_meeting" class="display-none" style="width:100%; height:100%;margin:0;padding:0;"></div>
<div id="create-meeting-container" class="display-none" style="width:100%; height:100%; margin:0;padding:0; display:flex; flex-direction:column; justify-content: space-between; position: relative;">
<div>
<div id="topic">
<div style="margin: 16px 0 4px 0; font-weight: normal !important;">
<label style="margin-left:12px;">Topic</label>
</div>
<input type="text" id="topic-value" class="form-control" placeholder="Enter topic here" style="width: calc(100% - 24px); margin: 0 12px 0 12px; text-align: left;"> </div>
<div style="margin:16px 12px 0px 12px;">
<button id="start-meeting" onсlick="" class="btn-text-default" style="width:100%; height: 30px;">Start meeting</button>
</div>
<div style="margin:16px 12px 0px 12px;">
<button id="schedule-meeting" onсlick="" class="btn-text-default" style="width:100%; height: 30px;">Schedule meeting</button>
</div>
<div id="scheduler-container" style="display:none">
<div id="date">
<div style="margin: 16px 0 4px 0; font-weight: normal !important;">
<label style="margin-left:12px;">Date</label>
</div> <span class="select">
<input id="date-value" style="width:calc(100% - 24px);" class="form-control" type="text" name="date"/>
</span> </div>
<div id="time">
<div style="margin: 16px 0 4px 0; font-weight: normal !important;">
<label style="margin-left:12px;">Time</label>
</div> <span class="select">
<select id="time-hour" class="select_example group" data-id="time-hour">
</select>
</span> <span class="select">
<select id="time-am-pm"class="select_example group" style="float:right; margin-right: 12px;" data-id="time-am-pm">
<option value="am">
AM
</option>
<option value="pm">
PM
</option>
</select>
</span> </div>
<div id="duration">
<div style="margin: 16px 0 4px 0; font-weight: normal !important;">
<label style="margin-left:12px;">Duration</label>
</div>
<div style="display:flex; flex-direction: row; justify-content: space-between;"> <span class="select" style="display:flex; flex-direction: column; width: calc(50% - 20px);">
<div>
<select id="duration-hour" class="select_example duration" data-id="duration-hour">
</select>
</div>
</span> <span class="select" style="display:flex; flex-direction: column; margin-right: 12px; width: calc(50% - 20px);">
<div>
<select id="duration-min" class="select_example duration" style="" data-id="duration-min">
</select>
</div>
</span> </div>
</div>
<div id="settings_wrapper" style="margin-top: 16px;">
<div class="legend">
<div id="adv_settings" class="button">
<label class="label-settings" class="header" style="margin-left: 12px; cursor: pointer;">Advanced settings</label><i class="arrow down"></i></div>
</div>
<div class="settings_group">
<div id="meeting_id" style="display: flex; flex-direction: column;">
<div style="margin: 16px 0 8px 0; font-weight: normal !important;">
<label style="margin-left:12px;">Meeting ID</label>
</div>
<div class="input_container" style="margin-bottom: 8px;">
<label class="radiobox">
<input type="radio" checked="checked" value="false" name="meeting-id" id="auto-meet-id" data-id="auto-meet-id-zoom" class="button__radiobox checked"><span>Generate Automatically</span></label>
</div>
<div class="input_container">
<label class="radiobox">
<input type="radio" name="meeting-id" value="true" id="personal-meet-id" data-id="personal-meet-id-zoom" class="button__radiobox checked"><span>Personal Meeting ID XXX XXX XXXX</span></label>
</div>
</div>
<div id="password_container">
<div style="margin: 16px 0 4px 0; font-weight: normal !important;">
<label style="margin-left:12px;">Password</label>
</div>
<input type="text" id="password" class="form-control" placeholder="Enter meeting password here" style="width: calc(100% - 24px); margin: 0 12px 0 12px; text-align: left;"> </div>
<div id="waiting_room" class="input_container" style="margin-top: 16px;">
<input type="checkbox" style="margin-left: 12px;" class="form-control" checked="checked" id="is-waiting-room" data-id="auto-meet-id-zoom">
<label class="checkbox">Waiting Room</label>
</div>
<div id="timezone_container">
<div style="margin: 16px 0 4px 0; font-weight: normal !important;">
<label style="margin-left:12px;">Timezone</label>
</div> <span class="select">
<select id="timezone" class="select_example" data-id="timezone-zoom">
<option value="Pacific/Midway">
(GMT-11:00) Midway Island, Samoa
</option>
<option value="Pacific/Pago_Pago">
(GMT-11:00) Pago Pago
</option>
<option value="Pacific/Honolulu">
(GMT-10:00) Hawaii
</option>
<option value="America/Anchorage">
(GMT-8:00) Alaska
</option>
<option value="America/Vancouver">
(GMT-7:00) Vancouver
</option>
<option value="America/Los_Angeles">
(GMT-7:00) Pacific Time (US and Canada)
</option>
<option value="America/Tijuana">
(GMT-7:00) Tijuana
</option>
<option value="America/Phoenix">
(GMT-7:00) Arizona
</option>
<option value="America/Mazatlan">
(GMT-7:00) Mazatlan
</option>
<option value="America/Edmonton">
(GMT-6:00) Edmonton
</option>
<option value="America/Denver">
(GMT-6:00) Mountain Time (US and Canada)
</option>
<option value="America/Regina">
(GMT-6:00) Saskatchewan
</option>
<option value="America/Guatemala">
(GMT-6:00) Guatemala
</option>
<option value="America/El_Salvador">
(GMT-6:00) El Salvador
</option>
<option value="America/Managua">
(GMT-6:00) Managua
</option>
<option value="America/Costa_Rica">
(GMT-6:00) Costa Rica
</option>
<option value="America/Tegucigalpa">
(GMT-6:00) Tegucigalpa
</option>
<option value="America/Mexico_City">
(GMT-6:00) Mexico City
</option>
<option value="America/Chicago">
(GMT-5:00) Central Time (US and Canada)
</option>
<option value="America/Winnipeg">
(GMT-5:00) Winnipeg
</option>
<option value="America/Panama">
(GMT-5:00) Panama
</option>
<option value="America/Bogota">
(GMT-5:00) Bogota
</option>
<option value="America/Lima">
(GMT-5:00) Lima
</option>
<option value="America/Montreal">
(GMT-4:00) Montreal
</option>
<option value="America/New_York">
(GMT-4:00) Eastern Time (US and Canada)
</option>
<option value="America/Indianapolis">
(GMT-4:00) Indiana (East)
</option>
<option value="America/Puerto_Rico">
(GMT-4:00) Puerto Rico
</option>
<option value="America/Caracas">
(GMT-4:00) Caracas
</option>
<option value="America/Santiago">
(GMT-3:00) Santiago
</option>
<option value="America/Halifax">
(GMT-3:00) Halifax
</option>
<option value="America/Montevideo">
(GMT-3:00) Montevideo
</option>
<option value="America/Araguaina">
(GMT-3:00) Brasilia
</option>
<option value="America/Argentina/Buenos_Aires">
(GMT-3:00) Buenos Aires, Georgetown
</option>
<option value="America/Sao_Paulo">
(GMT-3:00) Sao Paulo
</option>
<option value="Canada/Atlantic">
(GMT-3:00) Atlantic Time (Canada)
</option>
<option value="America/Godthab">
(GMT-3:00) Greenland
</option>
<option value="America/St_Johns">
(GMT-2:30) Newfoundland and Labrador
</option>
<option value="Atlantic/Cape_Verde">
(GMT-1:00) Cape Verde Islands
</option>
<option value="Atlantic/Azores">
(GMT+0:00) Azores
</option>
<option value="UTC">
(GMT+0:00) Universal Time UTC
</option>
<option value="Etc/Greenwich">
(GMT+0:00) Greenwich Mean Time
</option>
<option value="Atlantic/Reykjavik">
(GMT+0:00) Reykjavik
</option>
<option value="Africa/Nouakchott">
(GMT+0:00) Nouakchott
</option>
<option value="Europe/Dublin">
(GMT+0:00) Dublin
</option>
<option value="Europe/London">
(GMT+0:00) London
</option>
<option value="Europe/Lisbon">
(GMT+0:00) Lisbon
</option>
<option value="Africa/Casablanca">
(GMT+1:00) Casablanca
</option>
<option value="Africa/Bangui">
(GMT+1:00) West Central Africa
</option>
<option value="Africa/Algiers">
(GMT+1:00) Algiers
</option>
<option value="Africa/Tunis">
(GMT+1:00) Tunis
</option>
<option value="Europe/Belgrade">
(GMT+1:00) Belgrade, Bratislava, Ljubljana
</option>
<option value="CET">
(GMT+1:00) Sarajevo, Skopje, Zagreb
</option>
<option value="Europe/Oslo">
(GMT+1:00) Oslo
</option>
<option value="Europe/Copenhagen">
(GMT+1:00) Copenhagen
</option>
<option value="Europe/Brussels">
(GMT+1:00) Brussels
</option>
<option value="Europe/Berlin">
(GMT+1:00) Amsterdam, Berlin, Rome, Stockholm, Vienna
</option>
<option value="Europe/Amsterdam">
(GMT+1:00) Amsterdam
</option>
<option value="Europe/Rome">
(GMT+1:00) Rome
</option>
<option value="Europe/Stockholm">
(GMT+1:00) Stockholm
</option>
<option value="Europe/Vienna">
(GMT+1:00) Vienna
</option>
<option value="Europe/Luxembourg">
(GMT+1:00) Luxembourg
</option>
<option value="Europe/Paris">
(GMT+1:00) Paris
</option>
<option value="Europe/Zurich">
(GMT+1:00) Zurich
</option>
<option value="Europe/Madrid">
(GMT+1:00) Madrid
</option>
<option value="Europe/Warsaw">
(GMT+1:00) Warsaw
</option>
<option value="Europe/Prague">
(GMT+1:00) Prague Bratislava
</option>
<option value="Europe/Budapest">
(GMT+1:00) Budapest
</option>
<option value="Africa/Harare">
(GMT+2:00) Harare, Pretoria
</option>
<option value="Africa/Tripoli">
(GMT+2:00) Tripoli
</option>
<option value="Africa/Cairo">
(GMT+2:00) Cairo
</option>
<option value="Africa/Johannesburg">
(GMT+2:00) Johannesburg
</option>
<option value="Africa/Khartoum">
(GMT+2:00) Khartoum
</option>
<option value="Europe/Helsinki">
(GMT+2:00) Helsinki
</option>
<option value="Europe/Sofia">
(GMT+2:00) Sofia
</option>
<option value="Europe/Athens">
(GMT+2:00) Athens
</option>
<option value="Europe/Bucharest">
(GMT+2:00) Bucharest
</option>
<option value="Europe/Kiev">
(GMT+2:00) Kiev
</option>
<option value="Asia/Nicosia">
(GMT+2:00) Nicosia
</option>
<option value="Asia/Beirut">
(GMT+2:00) Beirut
</option>
<option value="Asia/Damascus">
(GMT+2:00) Damascus
</option>
<option value="Asia/Jerusalem">
(GMT+2:00) Jerusalem
</option>
<option value="Asia/Amman">
(GMT+2:00) Amman
</option>
<option value="Africa/Nairobi">
(GMT+3:00) Nairobi
</option>
<option value="Europe/Istanbul">
(GMT+3:00) Istanbul
</option>
<option value="Europe/Moscow">
(GMT+3:00) Moscow
</option>
<option value="Asia/Baghdad">
(GMT+3:00) Baghdad
</option>
<option value="Asia/Kuwait">
(GMT+3:00) Kuwait
</option>
<option value="Asia/Riyadh">
(GMT+3:00) Riyadh
</option>
<option value="Asia/Bahrain">
(GMT+3:00) Bahrain
</option>
<option value="Asia/Qatar">
(GMT+3:00) Qatar
</option>
<option value="Asia/Aden">
(GMT+3:00) Aden
</option>
<option value="Africa/Djibouti">
(GMT+3:00) Djibouti
</option>
<option value="Africa/Mogadishu">
(GMT+3:00) Mogadishu
</option>
<option value="Asia/Tehran">
(GMT+3:30) Tehran
</option>
<option value="Asia/Dubai">
(GMT+4:00) Dubai
</option>
<option value="Asia/Muscat">
(GMT+4:00) Muscat
</option>
<option value="Asia/Baku">
(GMT+4:00) Baku, Tbilisi, Yerevan
</option>
<option value="Asia/Kabul">
(GMT+4:30) Kabul
</option>
<option value="Asia/Yekaterinburg">
(GMT+5:00) Yekaterinburg
</option>
<option value="Asia/Tashkent">
(GMT+5:00) Islamabad, Karachi, Tashkent
</option>
<option value="Asia/Calcutta">
(GMT+5:30) India
</option>
<option value="Asia/Kolkata">
(GMT+5:30) Mumbai, Kolkata, New Delhi
</option>
<option value="Asia/Kathmandu">
(GMT+5:45) Kathmandu
</option>
<option value="Asia/Almaty">
(GMT+6:00) Almaty
</option>
<option value="Asia/Dacca">
(GMT+6:00) Dacca
</option>
<option value="Asia/Dhaka">
(GMT+6:00) Astana, Dhaka
</option>
<option value="Asia/Novosibirsk">
(GMT+7:00) Novosibirsk
</option>
<option value="Asia/Krasnoyarsk">
(GMT+7:00) Krasnoyarsk
</option>
<option value="Asia/Bangkok">
(GMT+7:00) Bangkok
</option>
<option value="Asia/Saigon">
(GMT+7:00) Vietnam
</option>
<option value="Asia/Jakarta">
(GMT+7:00) Jakarta
</option>
<option value="Asia/Irkutsk">
(GMT+8:00) Irkutsk, Ulaanbaatar
</option>
<option value="Asia/Shanghai">
(GMT+8:00) Beijing, Shanghai
</option>
<option value="Asia/Hong_Kong">
(GMT+8:00) Hong Kong
</option>
<option value="Asia/Taipei">
(GMT+8:00) Taipei
</option>
<option value="Asia/Kuala_Lumpur">
(GMT+8:00) Kuala Lumpur
</option>
<option value="Asia/Singapore">
(GMT+8:00) Singapore
</option>
<option value="Australia/Perth">
(GMT+8:00) Perth
</option>
<option value="Asia/Yakutsk">
(GMT+9:00) Yakutsk
</option>
<option value="Asia/Seoul">
(GMT+9:00) Seoul
</option>
<option value="Asia/Tokyo">
(GMT+9:00) Osaka, Sapporo, Tokyo
</option>
<option value="Australia/Darwin">
(GMT+9:30) Darwin
</option>
<option value="Asia/Vladivostok">
(GMT+10:00) Vladivostok
</option>
<option value="Pacific/Port_Moresby">
(GMT+10:00) Guam, Port Moresby
</option>
<option value="Australia/Brisbane">
(GMT+10:00) Brisbane
</option>
<option value="Australia/Adelaide">
(GMT+10:30) Adelaide
</option>
<option value="Australia/Sydney">
(GMT+11:00) Canberra, Melbourne, Sydney
</option>
<option value="Asia/Magadan">
(GMT+11:00) Magadan
</option>
<option value="SST">
(GMT+11:00) Solomon Islands
</option>
<option value="Australia/Hobart">
(GMT+11:00) Hobart
</option>
<option value="Pacific/Noumea">
(GMT+11:00) New Caledonia
</option>
<option value="Asia/Kamchatka">
(GMT+12:00) Kamchatka
</option>
<option value="Pacific/Fiji">
(GMT+12:00) Fiji Islands, Marshall Islands
</option>
<option value="Pacific/Auckland">
(GMT+13:00) Auckland, Wellington
</option>
<option value="Pacific/Apia">
(GMT+13:00) Independent State of Samoa
</option>
</select>
</span> </div>
<div id="reccurr_conference">
<div style="margin: 16px 0 4px 0; font-weight: normal !important;">
<label style="margin-left:12px;">Recurring conference</label>
</div> <span class="select">
<select id="recurring-conf" class="select_example" data-id="recurring-conf-zoom">
<option value="never">
Never
</option>
<option value="daily">
Daily
</option>
<option value="weekly">
Weekly
</option>
<option value="monthly">
Monthly
</option>
</select>
</span> </div>
<div id="screen_demonstration" style="display: none; flex-direction: column;">
<div style="margin: 16px 0 8px 0; font-weight: normal !important;">
<label style="margin-left:12px;">Screen Demonstration</label>
</div>
<div class="input_container" style="margin-bottom: 8px;">
<label class="radiobox">
<input type="radio" checked="checked" name="screen-share" id="screen-share-for-organizer" data-id="screen-share-for-organizer-zoom" class="button__radiobox checked"><span>Organizer only</span></label>
</div>
<div class="input_container">
<label class="radiobox">
<input type="radio" name="screen-share" id="screen-share-for-all" data-id="screen-share-for-all-zoom" class="button__radiobox checked"><span>All participants</span></label>
</div>
</div>
</div>
</div>
<div style="margin:16px 12px 0px 12px;">
<button id="create_meeting" onсlick="" class="btn-text-default" style="width:100%; height: 30px;">Save</button>
</div>
</div>
</div>
<div style="margin: 16px 0 16px 0;">
<div>
<label id="reconf" class="reconf-label noselect" style="float: right; margin-right: 12px; cursor:pointer;">Reconfigure</label>
</div>
<div>
<label id="switch" class="switch-label noselect" style="margin-left: 12px; cursor:pointer;">Go to Joining meeting</label>
</div>
</div>
</div>
<div id="configState" style="height: 100%; display: flex; flex-direction: column; position: relative;">
<div>
<div style="margin: 12px 12px 0 12px;"> <span class="i18n">To use Zoom plugin, register this editor as a JWT app.</span> <a target="_blank" href="https://github.com/ONLYOFFICE/onlyoffice.github.io/tree/master/sdkjs-plugins/content/zoom#readme" class="link i18n">Learn more here.</a> </div>
<div style="margin: 12px 12px 0 12px;"> In the form, enter any application name and description, accept Terms and Conditions and generate a secret. Enter SDK Key, SDK Secret and JWT token below and save it. </div>
</div>
<div style="display: flex; flex-direction: column; margin: 12px 12px 0 12px;"> <span>Email</span>
<input id="emailField" autocomplete="new-password" class="form-control" data-id="zoom-email-value" type="text" placeholder="Email" /> </div>
<div style="display: flex; flex-direction: column; margin: 12px 12px 0 12px;"> <span>SDK Key</span>
<input id="sdkKeyField" autocomplete="new-password" class="form-control" data-id="zoom-sdk-key" type="text" placeholder="SDK Key" /> </div>
<div style="display: flex; flex-direction: column; margin: 12px 12px 0 12px;"> <span>SDK Secret</span>
<input id="sdkSecretField" autocomplete="new-password" class="form-control" data-id="zoom-sdk-secret" type="password" placeholder="SDK Secret" /> </div>
<div style="display: flex; flex-direction: column; margin: 12px 12px 0 12px;"> <span>JWT Token</span>
<input id="tokenKeyField" autocomplete="new-password" class="form-control" data-id="zoom-jwt-token" type="text" placeholder="JWT Token" /> </div>
<div id="saveConfigBtn" style="margin: 16px 12px 12px 12px;" class="button wide control i18n">
<button class="btn-text-default" style="width:100%; height: 30px;">Save</button>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink