From 5ce0b4f3c9a0386e19c84900518a491eb7f26d8d Mon Sep 17 00:00:00 2001 From: Zoltan Ortutay Date: Mon, 10 Nov 2025 16:40:09 +0100 Subject: [PATCH] Creating a new look for JS reference app --- .../samples/common/style/demo-style.css | 677 ++++++++++++++++++ .../common/style/sinch_logomark_black.png | Bin 0 -> 5735 bytes javascript/samples/index.html | 224 +++--- javascript/samples/numbercall/index.html | 295 ++++---- javascript/samples/sipcall/index.html | 167 +++-- javascript/samples/videocall/index.html | 264 ++++--- javascript/samples/voicecall/index.html | 253 ++++--- 7 files changed, 1394 insertions(+), 486 deletions(-) create mode 100644 javascript/samples/common/style/demo-style.css create mode 100644 javascript/samples/common/style/sinch_logomark_black.png diff --git a/javascript/samples/common/style/demo-style.css b/javascript/samples/common/style/demo-style.css new file mode 100644 index 0000000..35427c6 --- /dev/null +++ b/javascript/samples/common/style/demo-style.css @@ -0,0 +1,677 @@ +/* Demo Design Styles - Modern Sinch Interface */ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + background: #DCEDE1; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 40px 20px; + position: relative; +} + +/* Decorative Stars */ +.decorative-stars { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + pointer-events: none; + z-index: 1; +} + +.star { + position: absolute; + font-size: 32px; + color: #FFBE3C; + opacity: 0.8; + text-shadow: 0 0 8px rgba(255, 190, 60, 0.4); +} + +.star1 { top: 15%; left: 12%; font-size: 24px; } +.star2 { top: 25%; left: 8%; font-size: 18px; } +.star3 { top: 60%; left: 10%; font-size: 28px; } +.star4 { top: 20%; right: 10%; font-size: 36px; } +.star5 { top: 45%; right: 8%; font-size: 32px; } +.star6 { bottom: 20%; right: 12%; font-size: 24px; } + +@keyframes float { + 0%, 100% { transform: translateY(0px) rotate(0deg); } + 50% { transform: translateY(-8px) rotate(5deg); } +} + +/* Container */ +.container { + max-width: 580px; + width: 100%; + position: relative; + z-index: 2; +} + +/* Browser Window */ +.browser-window { + background: #37474F; + border-radius: 16px 16px 0 0; + padding: 16px 24px; + display: flex; + align-items: center; + gap: 8px; +} + +.browser-dot { + width: 12px; + height: 12px; + border-radius: 50%; +} + +.dot-red { background: #EF5858; } +.dot-yellow { background: #FFBE3C; } +.dot-green { background: #059688; } + +/* Browser Content */ +.browser-content { + background: white; + border-radius: 0 0 16px 16px; + padding: 48px 40px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); +} + +/* Logo Section */ +.logo-section { + text-align: center; + margin-bottom: 32px; +} + +.logo-icon { + width: 120px; + height: auto; + margin: 0 auto; +} + +/* Token Input Form */ +.token-input { + width: 100%; +} + +/* Form Section */ +.form-section { + margin-top: 32px; + width: 100%; +} + +.form-group { + position: relative; + margin-bottom: 20px; + background: #F5F5F5; + border-radius: 12px; + padding: 4px; + width: 100%; +} + +.form-group-inner { + display: flex; + align-items: center; + gap: 12px; + padding: 16px; + width: 100%; +} + +.form-label { + color: #059688; + font-size: 14px; + font-weight: 600; + min-width: 120px; + flex-shrink: 0; +} + +.form-control, +.form-input { + flex: 1; + border: none; + background: transparent; + font-size: 14px; + outline: none; + padding: 4px; + color: #37474F; + min-width: 0; + width: 100%; +} + +.form-control::placeholder, +.form-input::placeholder { + color: #999; +} + +.form-input-wrapper { + flex: 1; + display: flex; + align-items: center; + gap: 12px; + min-width: 0; + width: 100%; +} + +.form-input-wrapper .material-symbols-outlined { + flex-shrink: 0; + font-size: 20px; + color: #059688; + cursor: pointer; +} + +.form-icons { + display: flex; + gap: 8px; + align-items: center; + flex-shrink: 0; +} + +.icon-button { + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + color: #059688; + background: none; + border: none; + padding: 0; + flex-shrink: 0; +} + +.material-icons { + font-size: 20px; + color: #059688; +} + +.material-symbols-outlined { + font-size: 20px; + color: #059688; +} + +/* Button Group */ +.button-group { + display: flex; + gap: 8px; + margin-top: 32px; + flex-wrap: nowrap; + justify-content: center; +} + +.demo-button, +.btn-small { + background: #059688; + color: white; + border: none; + border-radius: 12px; + padding: 16px 12px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 6px; + cursor: pointer; + transition: all 0.3s ease; + min-width: 70px; + flex: 1; + max-width: 120px; + font-weight: 600; + font-size: 10px; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.demo-button:hover, +.btn-small:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(5, 150, 136, 0.3); +} + +.demo-button:disabled, +.btn-small:disabled { + opacity: 0.5; + cursor: not-allowed; + transform: none; +} + +.button-icon { + font-size: 28px; + color: white; +} + +/* Instruction Text */ +.instruction-text { + text-align: center; + margin-top: 40px; + color: #37474F; + font-size: 18px; + line-height: 1.6; + font-weight: 500; +} + +/* Status Section */ +.status { + background: #FFBE3C; + color: #37474F; + padding: 12px 20px; + border-radius: 12px; + font-size: 14px; + font-weight: 600; + text-align: center; + margin: 20px 0; +} + +#statusheader { + font-weight: 600; +} + +.status.connected { + background: #059688; + color: white; +} + +/* Collapsible Instructions - Override Materialize */ +.collapsible { + border: none !important; + margin: 0 0 20px 0 !important; + box-shadow: none !important; +} + +.collapsible-header { + background: #37474F !important; + color: white !important; + padding: 12px 16px !important; + border-radius: 12px !important; + cursor: pointer; + display: flex !important; + align-items: center; + gap: 8px; + transition: all 0.3s ease; + border-bottom: none !important; + min-height: auto !important; +} + +.collapsible-header:hover { + background: #455A64 !important; +} + +.collapsible-header .material-icons { + color: white !important; + transition: transform 0.3s ease; + margin-right: 0 !important; +} + +.collapsible-header .header_l1 { + color: white !important; +} + +.collapsible.active .collapsible-header, +.collapsible li.active .collapsible-header { + border-radius: 12px 12px 0 0 !important; +} + +.collapsible.active .collapsible-header .material-icons, +.collapsible li.active .collapsible-header .material-icons { + transform: rotate(180deg); +} + +.collapsible-body { + background: white !important; + padding: 0 !important; + border-radius: 0 0 12px 12px; + max-height: 0 !important; + overflow: hidden !important; + transition: max-height 0.3s ease, padding 0.3s ease !important; + display: block !important; + border-bottom: none !important; +} + +.collapsible.active .collapsible-body, +.collapsible li.active .collapsible-body { + padding: 20px !important; + max-height: 1000px !important; +} + +.collection { + border: none; + margin: 0; +} + +.collection-item { + border: none; + padding: 12px 0; + border-bottom: 1px solid #F5F5F5; +} + +.collection-item:last-child { + border-bottom: none; +} + +.collection-item.avatar { + padding-left: 50px; + position: relative; +} + +.collection-item .material-icons.circle { + position: absolute; + left: 0; + top: 12px; + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + font-size: 20px; + color: white; +} + +.collection-item .material-icons.circle.red { + background: #EF5858; +} + +.collection-item .material-icons.circle.orange { + background: #FFBE3C; +} + +.collection-item .material-icons.circle.green { + background: #059688; +} + +.header_l1 { + font-weight: 700; + font-size: 16px; + color: #37474F; + display: block; + margin-bottom: 4px; +} + +.collection-item p { + color: #666; + font-size: 14px; + line-height: 1.5; + margin: 8px 0 0 0; +} + +/* Input Fields */ +.input-field { + margin-bottom: 16px; + margin-left: 0px; + position: relative; +} + +.input-field input[type="text"], +.input-field input[type="password"] { + width: calc(100% - 2.8rem); + padding: 12px 16px; + border: none; + background: #F5F5F5; + border-radius: 12px; + font-size: 14px; + color: #37474F; + margin-left: 0px; +} + +.input-field input[type="text"]:focus, +.input-field input[type="password"]:focus { + outline: 2px solid #059688; +} + +.input-field .prefix { + position: absolute; + right: 12px; + top: 50%; + transform: translateY(-50%); + cursor: pointer; + color: #059688; +} + +.cursor-pointer { + cursor: pointer; +} + +/* Select Dropdowns - Use Materialize styling */ +.input-field select { + display: none; +} + +.select-wrapper input.select-dropdown { + background: #F5F5F5; + border: none; + border-radius: 12px; + padding: 12px 16px; + font-size: 14px; + color: #37474F; + margin-bottom: 12px; + height: auto; +} + +.select-wrapper input.select-dropdown:focus { + border-bottom: none; + box-shadow: none; + outline: 2px solid #059688; +} + +.select-wrapper .caret { + fill: #059688; +} + +.dropdown-content li > a, +.dropdown-content li > span { + color: #37474F; +} + +.dropdown-content li:hover, +.dropdown-content li.active { + background-color: #DCEDE1; +} + +.dropdown-content li > a:hover, +.dropdown-content li > span:hover { + background-color: #DCEDE1; +} + +.dropdown-content li.selected { + background-color: #F5F5F5; +} + +/* Video Container */ +.videos-container { + width: 100%; + max-width: 100%; + height: auto; + max-height: 400px; + background-color: #37474F; + overflow: hidden; + position: relative; + margin: 20px 0; + border-radius: 12px; + display: none; +} + +video { + width: 100%; + height: auto; + display: block; +} + +#outgoing-video { + width: 30%; + max-width: 150px; + position: absolute; + top: 10px; + right: 10px; + z-index: 10; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + border-radius: 8px; +} + +/* Dialer Container */ +.dialer-container { + display: none; + grid-template-columns: auto auto auto; + grid-gap: 10px; + padding: 20px 0; + margin-top: 20px; +} + +.dialer-container > div { + text-align: center; +} + +.dialer-container .btn-small { + width: 100%; + min-width: 60px; + padding: 16px; + font-size: 18px; + font-weight: 600; +} + +.btn-dialer { + background: #059688 !important; +} + +/* Call Control */ +.callcontrol, +#callcontrol { + margin-top: 20px; +} + +fieldset { + border: none; + padding: 0; +} + +/* Notification Container */ +.notification-container { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + flex-direction: column; + gap: 10px; + z-index: 1000; +} + +.notification { + background: rgba(0, 0, 0, 0.8); + color: white; + padding: 12px 20px; + border-radius: 12px; + font-size: 14px; + box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2); + opacity: 1; + transition: opacity 0.3s ease-in-out; +} + +.notification-success { + background: #059688; +} + +.notification-error { + background: #EF5858; +} + +/* Error Container */ +.error-container { + background: #EF5858; + color: white; + padding: 16px 20px; + border-radius: 12px; + margin: 20px 0; + display: none; +} + +/* Footer */ +.footer { + position: fixed; + bottom: 5px; + left: 50%; + transform: translateX(-50%); + font-size: 12px; + color: #37474F; + text-align: center; + z-index: 1; +} + +/* Chip for status */ +.chip { + display: inline-flex; + align-items: center; + gap: 8px; + background: white; + padding: 6px 12px; + border-radius: 20px; + font-size: 13px; + color: #37474F; + margin-left: 12px; +} + +.chip img { + width: 24px; + height: 24px; + border-radius: 50%; +} + +/* Utility Classes */ +.hidden { + display: none !important; +} + +.text-center { + text-align: center; +} + +/* Responsive Design */ +@media (max-width: 600px) { + body { + padding: 20px 10px; + } + + .browser-content { + padding: 32px 20px; + } + + .form-label { + min-width: 80px; + font-size: 12px; + } + + .form-group-inner { + padding: 12px; + gap: 8px; + } + + .button-group { + gap: 6px; + } + + .demo-button, + .btn-small { + min-width: 60px; + padding: 12px 8px; + font-size: 9px; + gap: 4px; + } + + .button-icon { + font-size: 24px; + } + + .instruction-text { + font-size: 16px; + } + + .star { + font-size: 20px !important; + } +} diff --git a/javascript/samples/common/style/sinch_logomark_black.png b/javascript/samples/common/style/sinch_logomark_black.png new file mode 100644 index 0000000000000000000000000000000000000000..1ba6accf2f2539ee89eff25d9d1d55ee2e16eaaf GIT binary patch literal 5735 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 X`X>;f124HGG2nF8&A$2!;y?cd8z_g` literal 0 HcmV?d00001 diff --git a/javascript/samples/index.html b/javascript/samples/index.html index f8e1d86..2366296 100755 --- a/javascript/samples/index.html +++ b/javascript/samples/index.html @@ -11,109 +11,149 @@ sizes="180x180" href="./common/style/favicon-180x180.png" /> - - - + -
- Sinch +
+
✦
+
✦
+
✦
+
✦
+
✦
+
✦
- -
-
-
-
-
-
- - visibility -
-
- - visibility -
- +
+
+
+
+
+ +
+
+ Sinch - - - - - +
+ + + +
+
+
+
+
+
Application key
+
+ + visibility +
+
+
+ +
+
+
Application secret
+
+ + visibility +
+
+
+ +
+
+
Username
+
+ +
+
+
+
+ +
+ + + + +
+
+
-
+ +

+ Get your access credentials
by signing up for the Sinch Build + Dashboard +

+ + diff --git a/javascript/samples/numbercall/index.html b/javascript/samples/numbercall/index.html index 219bf93..59ebde5 100644 --- a/javascript/samples/numbercall/index.html +++ b/javascript/samples/numbercall/index.html @@ -1,4 +1,5 @@ - + + @@ -9,7 +10,10 @@ type="image/png" href="../common/style/favicon-32x32.png" /> - + + - -
- Sinch +
+
✦
+
✦
+
✦
+
✦
+
✦
+
✦
-
    -
  • -
    - menuIn-app to phone (PSTN) calling demo -
    -
    -
      -
    • - phone - Step One -

      - Enter a telephone number in - E164 - format -

      - -
      • -
    -
    -
    • -
-
- Sinch client is not started -
-
-
-
- -
-
- -
-
-
- Start a Sinch Client -
-
- input - + +
+
+
+
+
+
+ +
+
+ + Sinch + +
+ +
    +
  • +
    + menuIn-app to phone (PSTN) calling demo
    - -
-
-
-
-
- phone - +
+
    +
  • + phone + Step One +

    + Enter a telephone number in + E164 + format +

    +
    • +
-
-
-
-
-
- -
-
- -
-
- + + + +
+ Sinch client is not started +
+ +
+
+ +
+
+ +
+
+
+ Start a Sinch Client +
+
+ input + +
+ +
+
+
+
+
+ phone + +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
+
@@ -158,10 +183,32 @@ -
- Sinch -
-
    -
  • -
    - menuIn-app to SIP calling demo -
    -
    -
      -
    • - phone - Step One -

      - Enter your SIP endpoint in - E164 format -

      -
      • -
    -
    -
    • -
-
- Sinch client is not started +
+
✦
+
✦
+
✦
+
✦
+
✦
+
✦
-
-
-
- + +
+
+
+
+
+
+ +
+
+ + Sinch +
-
- + +
    +
  • +
    + menuIn-app to SIP calling demo +
    +
    +
      +
    • + phone + Step One +

      + Enter your SIP endpoint in + E164 format +

      +
      • +
    +
    +
    • +
+ +
+ Sinch client is not started
-
-
+ +
+
- phone - +
-
- -
- -
+
+ +
+
+
+
+ phone + +
+
+ +
+ + +
+
+