bengrabau
/
Instant-Quote
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added 3CX logo, centered call type icons

Browse Source
master
Ben Grabau 3 years ago
parent 2fbe6cd54a
commit 2876a74e3f
4 changed files with 483 additions and 231 deletions
Show Stats Download Patch File Download Diff File

224
3cx_logo.svg
Unescape Escape View File

@ -0,0 +1,224 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 79 79">
<style type="text/css">
.st4{fill:#FFFFFF;}
.st6{clip-path:url(#SVGID_4_);fill:#FFFFFF;}
.st7{clip-path:url(#SVGID_4_);fill:#1A94D1;}
.st8{fill:#161616;}
.st9{fill:#373737;}
.st14{fill:#878787;}
.st20{fill:#B9B79E;}
</style>
<g>
<polygon class="st8" points="0.057943,30.9176426 7.5080872,27.1239777 7.5080872,30.8447838 "/>
<polygon class="st8" points="78.9420547,30.9905014 71.4919128,27.1968365 71.4919128,30.9176426 "/>
<polygon class="st8" points="78.9420547,46.9178658 71.4919128,50.7115288 71.4919128,46.9907227 "/>
<polygon class="st8" points="0.057943,46.845005 7.5080872,50.6386719 7.5080872,46.9178658 "/>
<g>
<g id="stamp_45_">
<g>
<path class="st9" d="M39.1980286,4.663588c-19.236927,0-34.8355255,15.5954723-34.8355255,34.8370476
c0,19.2384529,15.5985966,34.8358421,34.8355255,34.8358421c19.2402992,0,34.8370438-15.5973892,34.8370438-34.8358421
C74.0350723,20.2590599,58.4383278,4.663588,39.1980286,4.663588z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="3.698921" y1="39.5" x2="74.6985931" y2="39.5">
<stop offset="0" style="stop-color:#817C80"/>
<stop offset="1" style="stop-color:#060505"/>
</linearGradient>
<path style="fill:url(#SVGID_2_);" d="M39.1980286,4.663588c19.2402992,0,34.8370438,15.5954723,34.8370438,34.8370476
c0,19.2384529-15.5967445,34.8358421-34.8370438,34.8358421c-19.236927,0-34.8355255-15.5973892-34.8355255-34.8358421
C4.362505,20.2590599,19.9611015,4.663588,39.1980286,4.663588 M39.1980286,4.0000038
c-19.5746193,0-35.4991074,15.9251251-35.4991074,35.5006332C3.698921,59.0749359,19.6234093,75,39.1980286,75
c19.5748672,0,35.5005646-15.9250641,35.5005646-35.4993629C74.6985931,19.9251289,58.7728958,4.0000038,39.1980286,4.0000038
L39.1980286,4.0000038z"/>
</g>
</g>
</g>
<g>
<defs>
<rect id="SVGID_27_" x="15.1628151" y="11.1289606" transform="matrix(0.9999837 -0.0057114 0.0057114 0.9999837 -0.1125263 0.2188353)" width="46.1928825" height="17.3650131"/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_27_" style="overflow:visible;"/>
</clipPath>
<path class="st7" d="M24.8293648,18.6365833c0.3309612-0.0273094,0.6397991-0.1023216,0.9254341-0.225256
c0.2861595-0.1229362,0.5209045-0.3002853,0.7042103-0.5309658c0.183073-0.231432,0.2738609-0.538662,0.2716713-0.9218845
c-0.0032845-0.5750141-0.1962471-1.0143747-0.5797176-1.3193874c-0.3829765-0.3045254-0.8224983-0.4553547-1.3179131-0.4525251
c-0.6868782,0.0039225-1.2040939,0.2332344-1.5506668,0.6873713c-0.34762,0.4541416-0.5124035,1.0257587-0.4958344,1.713089
l-2.5872326,0.0147781c0.0217209-0.6875496,0.1425152-1.3159142,0.3617973-1.8834848
c0.2198105-0.5671158,0.5295677-1.0546188,0.9293118-1.4622822c0.3989544-0.4076576,0.8787937-0.7231703,1.4382877-0.9486609
c0.5594654-0.224966,1.1839294-0.339386,1.8723488-0.343318c0.5352783-0.0030575,1.07131,0.0737123,1.6074982,0.2298536
c0.5367794,0.1563988,1.0189819,0.3926802,1.4483128,0.7088966c0.4290676,0.3162184,0.7786713,0.7025661,1.0488205,1.1603231
c0.2701454,0.4571991,0.4076633,0.9851255,0.4110832,1.5837564c0.0037136,0.6502895-0.148901,1.2246208-0.4567928,1.723547
c-0.3081856,0.4989586-0.7721596,0.8390808-1.3924084,1.0208912l0.0002193,0.038393
c0.7374516,0.1616077,1.3169937,0.5150642,1.7397404,1.0609837c0.4222221,0.5458908,0.6352882,1.2010441,0.6396542,1.9654903
c0.0040054,0.7013569-0.1295471,1.3267155-0.4008217,1.8765659c-0.2714996,0.5501156-0.6353016,1.0104427-1.0925007,1.3833504
c-0.4568825,0.3718567-0.9849892,0.6556416-1.5838089,0.8497772c-0.5985584,0.1939068-1.2233372,0.2936192-1.8733654,0.2973309
c-0.7529812,0.0043011-1.43894-0.1003742-2.0594101-0.313261c-0.6199875-0.2141361-1.1484241-0.5269699-1.5843983-0.9400463
c-0.4364643-0.41255-0.7737751-0.9174538-1.0132427-1.5154896c-0.2398949-0.597805-0.3551941-1.2848015-0.3466606-2.0617695
l2.5872993-0.0147762c0.0144863,0.3567162,0.0739174,0.6968956,0.1784992,1.021059
c0.1040878,0.3241673,0.2529316,0.6037922,0.4459705,0.8382187c0.1931362,0.2343941,0.4335346,0.4214764,0.7222023,0.5599003
c0.2884026,0.1380005,0.6308155,0.2059822,1.0267792,0.203722c0.6136341-0.0035057,1.1306152-0.1936378,1.550087-0.5709152
c0.4199963-0.3772469,0.6278992-0.8898182,0.624197-1.5380764c-0.0029068-0.5088444-0.1068649-0.8960724-0.3112831-1.161684
c-0.2049809-0.2661018-0.4601135-0.4579487-0.7667561-0.5774994c-0.3066368-0.1187992-0.6417122-0.1867905-1.0046997-0.2035522
c-0.3632526-0.017252-0.710434-0.0251961-1.0409832-0.0233078l-0.0109882-1.9238091
C24.1861,18.6656761,24.4981403,18.6638947,24.8293648,18.6365833"/>
<path class="st6" d="M37.6777229,14.6251659c1.5131035-0.0086422,3.0151939,0.5949259,4.1209373,1.6561909l0.2951241,0.2829151
l-0.0131149-2.2963848l-0.0737991-0.0512056c-1.2625732-0.8747625-2.651783-1.2953024-4.2470055-1.286191
c-4.0826187,0.0233173-7.3862457,3.1674232-7.3643074,7.0086861c0.0216141,3.7842999,3.3606758,6.8439484,7.4432907,6.820631
c1.4899445-0.0085087,2.9917793-0.4819889,4.2300186-1.3328705l0.0752411-0.0520229l-0.0130768-2.289278l-0.2899055,0.2753162
c-1.1313782,1.0753193-2.6140213,1.6966877-4.0668869,1.7049847c-2.9583359,0.0168972-5.4712715-2.3595543-5.4874344-5.1894512
C32.2706451,17.0468521,34.7392349,14.6419487,37.6777229,14.6251659"/>
<polygon style="clip-path:url(#SVGID_4_);fill:#1795D2;" points="42.1210213,17.1998806 42.1515045,22.5372162
44.4706688,19.7441025 "/>
<polygon class="st6" points="56.3140106,26.5629845 50.7817078,19.8842869 56.2364807,13.1606588 53.3226624,13.1773005
49.3218079,18.1210785 45.2650032,13.2233219 42.3514442,13.2399626 47.8826294,19.9008446 42.4267464,26.6423016
45.3118057,26.6258221 49.3420143,21.6589813 53.4292145,26.5794601 "/>
<path class="st6" d="M56.6765404,25.8043079c-0.0023842-0.417551,0.3287544-0.7524605,0.750103-0.7548676
c0.4214821-0.0024071,0.7563248,0.3286991,0.758709,0.7462502c0.0023842,0.4175835-0.3286514,0.752491-0.7501373,0.7548981
C57.0138664,26.5529957,56.6789284,26.2218914,56.6765404,25.8043079 M58.0698509,25.7963505
c-0.0020218-0.3541012-0.2980804-0.6334419-0.6425476-0.6314735c-0.3444405,0.0019665-0.637352,0.2846699-0.6353302,0.6387711
c0.0020256,0.3541336,0.2981453,0.6334724,0.6425819,0.631506C57.779026,26.4331875,58.0718727,26.1504841,58.0698509,25.7963505
M57.7911835,26.2041073l-0.1384621,0.0007896l-0.2485619-0.3777847l-0.1384964,0.0007896l0.0021667,0.3791943
l-0.1155701,0.0006599l-0.0046921-0.8217716l0.3580666-0.0020447c0.1480942-0.000845,0.2926826,0.0385876,0.2936935,0.2157364
c0.0009232,0.1615906-0.1123009,0.2220192-0.2584724,0.2266541L57.7911835,26.2041073z M57.4034996,25.7116756
c0.1019402-0.0005817,0.2810936,0.0175915,0.2803497-0.1132393c-0.0004845-0.0846767-0.1122055-0.0994682-0.2006798-0.0989628
l-0.2193756,0.0012531l0.0012093,0.2117405L57.4034996,25.7116756z"/>
</g>
<g>
<path class="st4" d="M17.8808594,56.7353516l-0.9033203-2.3085938h-2.9091797l-0.8935547,2.3085938h-0.8535156
l2.8691406-7.2871094h0.7099609l2.8544922,7.2871094H17.8808594z M16.7138672,53.6679688l-0.84375-2.2490234
c-0.1083984-0.2841797-0.2216797-0.6337891-0.3369141-1.046875c-0.0732422,0.3173828-0.1777344,0.6660156-0.3134766,1.046875
l-0.8535156,2.2490234H16.7138672z"/>
<path class="st4" d="M25.5458984,53.0371094c0,1.1982422-0.3251953,2.1142578-0.9755859,2.7480469
s-1.5859375,0.9501953-2.8076172,0.9501953h-2.0097656v-7.2568359h2.2236328c1.1279297,0,2.0048828,0.3125,2.6308594,0.9375
C25.2324219,51.0419922,25.5458984,51.9150391,25.5458984,53.0371094z M24.6523438,53.0673828
c0-0.9462891-0.2382812-1.6601562-0.7128906-2.1396484s-1.1806641-0.7197266-2.1171875-0.7197266h-1.2255859v5.7978516h1.0273438
c1.0058594,0,1.7617188-0.2470703,2.2685547-0.7421875C24.3984375,54.7685547,24.6523438,54.0371094,24.6523438,53.0673828z"/>
<path class="st4" d="M31.3085938,49.4785156h0.9082031l-2.6162109,7.2568359h-0.8339844l-2.6005859-7.2568359h0.8935547
l1.6679688,4.6953125c0.1914062,0.5400391,0.34375,1.0644531,0.4560547,1.5732422
c0.1191406-0.5351562,0.2753906-1.0703125,0.4667969-1.6025391L31.3085938,49.4785156z"/>
<path class="st4" d="M37.7763672,56.7353516l-0.9033203-2.3085938h-2.9091797l-0.8935547,2.3085938h-0.8535156
l2.8691406-7.2871094h0.7099609l2.8544922,7.2871094H37.7763672z M36.609375,53.6679688l-0.84375-2.2490234
c-0.1083984-0.2841797-0.2216797-0.6337891-0.3369141-1.046875c-0.0732422,0.3173828-0.1777344,0.6660156-0.3134766,1.046875
l-0.8535156,2.2490234H36.609375z"/>
<path class="st4" d="M45.3164062,56.7353516h-0.9628906l-3.9658203-6.0908203h-0.0400391
c0.0537109,0.7148438,0.0800781,1.3701172,0.0800781,1.9658203v4.125h-0.7792969v-7.2568359h0.953125l3.9560547,6.0654297
h0.0390625c-0.0058594-0.0888672-0.0214844-0.3759766-0.0439453-0.8613281
c-0.0234375-0.484375-0.0322266-0.8310547-0.0253906-1.0400391v-4.1640625h0.7890625V56.7353516z"/>
<path class="st4" d="M50.4199219,50.1289062c-0.7978516,0-1.4277344,0.2646484-1.8886719,0.7958984
c-0.4619141,0.53125-0.6933594,1.2587891-0.6933594,2.1816406c0,0.9501953,0.2226562,1.6835938,0.6679688,2.2021484
c0.4453125,0.5175781,1.0800781,0.7763672,1.9033203,0.7763672c0.5068359,0,1.0839844-0.0908203,1.7324219-0.2724609v0.7392578
c-0.5029297,0.1884766-1.1230469,0.2832031-1.8613281,0.2832031c-1.0683594,0-1.8935547-0.3242188-2.4746094-0.9736328
c-0.5800781-0.6484375-0.8710938-1.5703125-0.8710938-2.7646484c0-0.7480469,0.1396484-1.4033203,0.4199219-1.9658203
c0.2792969-0.5625,0.6835938-0.9960938,1.2109375-1.2998047c0.5283203-0.3046875,1.1494141-0.4570312,1.8642578-0.4570312
c0.7607422,0,1.4257812,0.1386719,1.9951172,0.4169922l-0.3574219,0.7246094
C51.5185547,50.2578125,50.96875,50.1289062,50.4199219,50.1289062z"/>
<path class="st4" d="M57.7705078,56.7353516h-4.0449219v-7.2568359h4.0449219v0.7490234h-3.2011719v2.3378906h3.0078125v0.7451172
h-3.0078125v2.6699219h3.2011719V56.7353516z"/>
<path class="st4" d="M65.1728516,53.0371094c0,1.1982422-0.3251953,2.1142578-0.9755859,2.7480469
s-1.5859375,0.9501953-2.8076172,0.9501953h-2.0097656v-7.2568359h2.2236328c1.1279297,0,2.0048828,0.3125,2.6308594,0.9375
C64.859375,51.0419922,65.1728516,51.9150391,65.1728516,53.0371094z M64.2792969,53.0673828
c0-0.9462891-0.2382812-1.6601562-0.7128906-2.1396484s-1.1806641-0.7197266-2.1171875-0.7197266h-1.2255859v5.7978516h1.0273438
c1.0058594,0,1.7617188-0.2470703,2.2685547-0.7421875C64.0253906,54.7685547,64.2792969,54.0371094,64.2792969,53.0673828z"/>
</g>
<g>
<path class="st14" d="M23.1582031,59.5820312c-0.6376953,0-1.1416016,0.2119141-1.5107422,0.6367188
c-0.3701172,0.4248047-0.5546875,1.0068359-0.5546875,1.7451172c0,0.7607422,0.1787109,1.3476562,0.5341797,1.7617188
c0.3564453,0.4140625,0.8642578,0.6210938,1.5234375,0.6210938c0.4052734,0,0.8671875-0.0722656,1.3857422-0.2177734v0.5917969
c-0.4023438,0.1503906-0.8984375,0.2255859-1.4892578,0.2255859c-0.8554688,0-1.5146484-0.2587891-1.9794922-0.7783203
c-0.4648438-0.5185547-0.6972656-1.2558594-0.6972656-2.2119141c0-0.5976562,0.1123047-1.1220703,0.3359375-1.5722656
s0.546875-0.796875,0.96875-1.0400391c0.421875-0.2441406,0.9189453-0.3652344,1.4912109-0.3652344
c0.609375,0,1.140625,0.1103516,1.5966797,0.3330078l-0.2861328,0.5800781
C24.0371094,59.6845703,23.5976562,59.5820312,23.1582031,59.5820312z"/>
<path class="st14" d="M29.0390625,64.8671875h-3.2363281v-5.8056641h3.2363281v0.5996094h-2.5605469V61.53125h2.40625v0.5957031
h-2.40625v2.1367188h2.5605469V64.8671875z"/>
<path class="st14" d="M31.0019531,62.453125v2.4140625h-0.6757812v-5.8056641h1.5927734
c0.7119141,0,1.2382812,0.1367188,1.578125,0.4091797c0.3408203,0.2724609,0.5107422,0.6826172,0.5107422,1.2304688
c0,0.7685547-0.3896484,1.2871094-1.1679688,1.5566406l1.5771484,2.609375h-0.7988281l-1.4052734-2.4140625H31.0019531z
M31.0019531,61.8730469h0.9248047c0.4765625,0,0.8261719-0.0947266,1.0488281-0.2841797
c0.2216797-0.1894531,0.3330078-0.4726562,0.3330078-0.8515625c0-0.3837891-0.1132812-0.6601562-0.3388672-0.8300781
c-0.2265625-0.1689453-0.5898438-0.2539062-1.0908203-0.2539062h-0.8769531V61.8730469z"/>
<path class="st14" d="M37.140625,64.8671875h-0.6748047v-5.2060547h-1.8388672v-0.5996094h4.3525391v0.5996094H37.140625
V64.8671875z"/>
<path class="st14" d="M39.8525391,64.8671875v-5.8056641h0.6757812v5.8056641H39.8525391z"/>
<path class="st14" d="M42.7958984,64.8671875h-0.6757812v-5.8056641h3.2363281v0.5996094h-2.5605469v2.1240234h2.40625v0.5996094
h-2.40625V64.8671875z"/>
<path class="st14" d="M46.3173828,64.8671875v-5.8056641h0.6757812v5.8056641H46.3173828z"/>
<path class="st14" d="M51.8212891,64.8671875h-3.2363281v-5.8056641h3.2363281v0.5996094h-2.5605469V61.53125h2.40625v0.5957031
h-2.40625v2.1367188h2.5605469V64.8671875z"/>
<path class="st14" d="M57.7431641,61.9091797c0,0.9580078-0.2607422,1.6904297-0.7802734,2.1972656
c-0.5205078,0.5068359-1.2685547,0.7607422-2.2460938,0.7607422h-1.6083984v-5.8056641h1.7792969
c0.9033203,0,1.6044922,0.25,2.1044922,0.75C57.4931641,60.3125,57.7431641,61.0117188,57.7431641,61.9091797z
M57.0283203,61.9326172c0-0.7568359-0.1904297-1.328125-0.5703125-1.7119141s-0.9443359-0.5751953-1.6933594-0.5751953
h-0.9804688v4.6376953h0.8212891c0.8046875,0,1.4101562-0.1972656,1.8154297-0.59375
C56.8261719,63.2939453,57.0283203,62.7080078,57.0283203,61.9326172z"/>
</g>
<rect x="0.057943" y="30.9176426" class="st20" width="78.8841171" height="15.9646425"/>
<g>
<rect x="0.057943" y="30.8447838" class="st4" width="78.8841171" height="0.6700756"/>
<rect x="0.057943" y="46.2110214" class="st4" width="78.8841171" height="0.6712629"/>
</g>
<g id="text_47_">
<g>
<g>
<path class="st9" d="M12.3105469,40.6621094c0,0.6298828-0.1845703,1.1289062-0.5546875,1.4960938
c-0.3701172,0.3691406-0.8623047,0.5527344-1.4755859,0.5527344c-0.7373047,0-1.3027344-0.1015625-1.6962891-0.3046875
v-0.5263672c0.4345703,0.2304688,0.9892578,0.3457031,1.6630859,0.3457031c0.4951172,0,0.8876953-0.1416016,1.1787109-0.4248047
c0.2900391-0.2841797,0.4345703-0.65625,0.4345703-1.1171875c0-0.2851562-0.0478516-0.5214844-0.1435547-0.7094727
c-0.0966797-0.1875-0.2539062-0.3588867-0.4707031-0.5136719c-0.2177734-0.1542969-0.5371094-0.3212891-0.9580078-0.5
c-0.6162109-0.2651367-1.0419922-0.5512695-1.2773438-0.8588867c-0.234375-0.3081055-0.3525391-0.7182617-0.3525391-1.2304688
c0-0.5639648,0.1767578-1.0239258,0.5302734-1.3798828s0.8085938-0.5341797,1.3642578-0.5341797
c0.5664062,0,1.0986328,0.1342773,1.5966797,0.4023438l-0.1523438,0.4541016
c-0.5009766-0.2612305-0.9794922-0.3920898-1.4365234-0.3920898c-0.4453125,0-0.8007812,0.1289062-1.0644531,0.387207
c-0.2636719,0.2578125-0.3964844,0.6083984-0.3964844,1.0522461c0,0.2783203,0.0410156,0.5073242,0.1220703,0.6860352
s0.2138672,0.3398438,0.3984375,0.4824219s0.5009766,0.3139648,0.9492188,0.5131836
c0.4707031,0.203125,0.8232422,0.3999023,1.0605469,0.5908203c0.2363281,0.1904297,0.4091797,0.4072266,0.5175781,0.6499023
C12.2558594,40.0253906,12.3105469,40.3183594,12.3105469,40.6621094z"/>
<path class="st9" d="M13.5859375,42.6074219v-7.5419922h0.4208984v7.5419922H13.5859375z"/>
<path class="st9" d="M15.7158203,42.6074219v-7.5419922h0.4208984v7.046875h2.8759766v0.4951172H15.7158203z"/>
<path class="st9" d="M23.6181641,35.0654297h0.4580078l-2.2578125,7.5419922h-0.3710938l-2.2490234-7.5419922h0.4501953
l1.5185547,5.1328125c0.2304688,0.7744141,0.3867188,1.3544922,0.4658203,1.7431641
c0.0556641-0.2578125,0.1640625-0.6582031,0.3261719-1.2011719L23.6181641,35.0654297z"/>
<path class="st9" d="M28.2275391,42.6074219h-3.296875v-7.5419922h3.296875v0.4848633h-2.8759766v2.8530273h2.7148438v0.4848633
h-2.7148438v3.2348633h2.8759766V42.6074219z"/>
<path class="st9" d="M30.0146484,39.3212891v3.2861328H29.59375v-7.5419922h1.4355469
c0.7490234,0,1.3017578,0.1728516,1.6591797,0.5185547s0.5371094,0.8657227,0.5371094,1.5605469
c0,0.5053711-0.1074219,0.9321289-0.3203125,1.2792969s-0.5371094,0.5966797-0.9716797,0.7480469l1.6386719,3.4355469
h-0.5039062l-1.5556641-3.2861328H30.0146484z M30.0146484,38.8671875h1.1513672
c0.5087891,0,0.9033203-0.1416016,1.1845703-0.425293c0.2802734-0.2836914,0.4208984-0.7026367,0.4208984-1.2563477
c0-0.5742188-0.1376953-0.9921875-0.4130859-1.253418s-0.7236328-0.3920898-1.3457031-0.3920898h-0.9980469V38.8671875z"/>
<path class="st9" d="M40.4433594,37.2319336c0,0.7294922-0.1982422,1.2880859-0.5947266,1.6767578
s-0.9570312,0.5830078-1.6835938,0.5830078h-0.9326172v3.1157227h-0.4208984v-7.5419922h1.4775391
C39.7246094,35.0654297,40.4433594,35.7875977,40.4433594,37.2319336z M37.2324219,39.0375977h0.8291016
c0.6796875,0,1.1708984-0.1401367,1.4736328-0.4204102s0.4541016-0.7348633,0.4541016-1.3642578
c0-0.5810547-0.1435547-1.012207-0.4296875-1.2924805s-0.7285156-0.4204102-1.3291016-0.4204102h-0.9980469V39.0375977z"/>
<path class="st9" d="M44.6611328,39.9458008h-2.4511719l-0.8417969,2.6616211h-0.4667969l2.4267578-7.5727539h0.2685547
l2.3769531,7.5727539h-0.4746094L44.6611328,39.9458008z M42.3623047,39.4711914h2.1582031l-0.8212891-2.71875
c-0.0683594-0.2133789-0.1513672-0.5087891-0.2470703-0.887207c-0.0742188,0.3300781-0.15625,0.6293945-0.2441406,0.8974609
L42.3623047,39.4711914z"/>
<path class="st9" d="M47.2490234,39.3212891v3.2861328H46.828125v-7.5419922h1.4355469
c0.7490234,0,1.3017578,0.1728516,1.6591797,0.5185547s0.5371094,0.8657227,0.5371094,1.5605469
c0,0.5053711-0.1074219,0.9321289-0.3203125,1.2792969s-0.5371094,0.5966797-0.9716797,0.7480469l1.6386719,3.4355469
h-0.5039062l-1.5556641-3.2861328H47.2490234z M47.2490234,38.8671875h1.1513672
c0.5087891,0,0.9033203-0.1416016,1.1845703-0.425293c0.2802734-0.2836914,0.4208984-0.7026367,0.4208984-1.2563477
c0-0.5742188-0.1376953-0.9921875-0.4130859-1.253418s-0.7236328-0.3920898-1.3457031-0.3920898h-0.9980469V38.8671875z"/>
<path class="st9" d="M53.4228516,42.6074219h-0.4248047v-7.046875h-1.9609375v-0.4951172h4.3457031v0.4951172h-1.9599609
V42.6074219z"/>
<path class="st9" d="M60.6650391,42.6074219h-0.4248047l-3.5742188-6.6958008h-0.0332031
c0.0332031,0.7978516,0.0498047,1.3999023,0.0498047,1.8056641v4.8901367h-0.4042969v-7.5419922h0.4208984l3.5693359,6.6855469
h0.0253906c-0.0253906-0.6191406-0.0371094-1.2070312-0.0371094-1.7641602v-4.9213867h0.4082031V42.6074219z"/>
<path class="st9" d="M65.6708984,42.6074219h-3.296875v-7.5419922h3.296875v0.4848633h-2.8759766v2.8530273h2.7148438v0.4848633
h-2.7148438v3.2348633h2.8759766V42.6074219z"/>
<path class="st9" d="M67.4580078,39.3212891v3.2861328h-0.4208984v-7.5419922h1.4355469
c0.7490234,0,1.3017578,0.1728516,1.6591797,0.5185547s0.5371094,0.8657227,0.5371094,1.5605469
c0,0.5053711-0.1074219,0.9321289-0.3203125,1.2792969s-0.5371094,0.5966797-0.9716797,0.7480469l1.6386719,3.4355469
h-0.5039062l-1.5556641-3.2861328H67.4580078z M67.4580078,38.8671875h1.1513672
c0.5087891,0,0.9033203-0.1416016,1.1845703-0.425293c0.2802734-0.2836914,0.4208984-0.7026367,0.4208984-1.2563477
c0-0.5742188-0.1376953-0.9921875-0.4130859-1.253418s-0.7236328-0.3920898-1.3457031-0.3920898h-0.9980469V38.8671875z"/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

227
index.html
Unescape Escape View File

@ -1,235 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.2/dist/semantic.min.js"
integrity="sha256-k89McqiQeAeH3zwEUu8tOiKsHSYgZ4cvxaYhPtPOg34=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.2/dist/semantic.min.css"
integrity="sha256-ot9Eohfi9t3iQkCNQKYTu9O9kjKx5iJ5hkQ0u1xZLik=" crossorigin="anonymous">
</head>
<body>
<div class="ui container">
<form class="ui form">
<h4 class="ui dividing header">Instant Quote</h4>
<div class="field">
<label>Name</label>
<div class="two fields">
<div class="field">
<input type="text" name="shipping[first-name]" placeholder="First Name">
</div>
<div class="field">
<input type="text" name="shipping[last-name]" placeholder="Last Name">
</div>
</div>
</div>
<div class="field">
<label>Service Address</label>
<div class="fields">
<div class="twelve wide field">
<input type="text" name="shipping[address]" placeholder="Street Address">
</div>
<div class="four wide field">
<input type="text" name="shipping[address-2]" placeholder="Apt #">
</div>
</div>
</div>
<div class="two fields">
<div class="ten wide field">
<label>State</label>
<select class="ui fluid dropdown">
<option value="">State</option>
<option value="ACT">Australian Capital Territory</option>
<option value="NSW">New South Wales</option>
<option value="NT">Northern Territory</option>
<option value="QLD">Queensland</option>
<option value="SA">South Australia</option>
<option value="TAS">Tasmania</option>
<option value="VIC" selected="selected">Victoria</option>
<option value="WA">Western Australia</option>
</select>
</div>
<div class="six wide field">
<label>Postcode</label>
<input type="text" name="shipping[postcode]" placeholder="3000">
</div>
</div>
<h4 class="ui dividing header">Usage information</h4>
<div class="ui cards">
<label>What kind of calls do you handle?</label><br><br>
<div class="ui card">
<div class="image">
<i class="massive angle double down icon"></i>
</div>
<div class="content">
<a class="header">Receieve</a>
<div class="description">
We mostly receieve calls, with few outbound calls
</div>
</div>
</div>
<div class="ui card">
<div class="image">
<i class="massive balance scale icon"></i>
</div>
<div class="content">
<a class="header">Balanced</a>
<div class="description">
We have a good balance of inbound and outbound calls
</div>
</div>
</div>
<div class="ui card">
<div class="image">
<i class="massive angle double up icon"></i>
</div>
<div class="content">
<a class="header">Make</a>
<div class="description">
We mostly make outbound calls
</div>
</div>
</div>
</div>
<br><br>
<div class="ui cards">
<div class="ui card">
<div class="image">
<i class="massive headset icon"></i>
</div>
<div class="content">
<a class="header">Receieve</a>
<div class="description">
We mostly receieve calls, with few outbound calls
</div>
</div>
</div>
<div class="ui card">
<div class="image">
<i class="massive balance scale icon"></i>
</div>
<div class="content">
<a class="header">Balanced</a>
<div class="description">
We have a good balance of inbound and outbound calls
</div>
</div>
</div>
<div class="ui card">
<div class="image">
<i class="massive angle double up icon"></i>
</div>
<div class="content">
<a class="header">Make</a>
<div class="description">
We mostly make outbound calls
</div>
</div>
</div>
</div>
<br><br>
<div class="field">
<label>How many staff do you have?</label>
<div class="ui labeled ticked slider" id="interpretedlabel"></div>
<script>
var labels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10+'];
$('#interpretedlabel')
.slider({
min: 1, max: 10,
interpretLabel: function (value) {
return labels[value];
}
})
;
</script>
</div>
<div class="fields">
<div class="seven wide field">
<label>Card Number</label>
<input type="text" name="card[number]" maxlength="16" placeholder="Card #">
</div>
<div class="three wide field">
<label>CVC</label>
<input type="text" name="card[cvc]" maxlength="3" placeholder="CVC">
</div>
<div class="six wide field">
<label>Expiration</label>
<div class="fields">
<div class="eight wide field">
<select class="ui fluid search dropdown" name="card[expire-month]">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div class="field">
<input type="text" name="card[expire-year]" maxlength="4" placeholder="Year">
</div>
</div>
</div>
</div>
<h4 class="ui dividing header">Receipt</h4>
<div class="field">
<label>Send Receipt To:</label>
<div class="ui fluid multiple search selection dropdown">
<input type="hidden" name="receipt">
<i class="dropdown icon"></i>
<div class="default text">Saved Contacts</div>
<div class="menu">
<div class="item" data-value="jenny" data-text="Jenny">
<img class="ui mini avatar image" src="/images/avatar/small/jenny.jpg">
Jenny Hess
</div>
<div class="item" data-value="elliot" data-text="Elliot">
<img class="ui mini avatar image" src="/images/avatar/small/elliot.jpg">
Elliot Fu
</div>
<div class="item" data-value="stevie" data-text="Stevie">
<img class="ui mini avatar image" src="/images/avatar/small/stevie.jpg">
Stevie Feliciano
</div>
<div class="item" data-value="christian" data-text="Christian">
<img class="ui mini avatar image" src="/images/avatar/small/christian.jpg">
Christian
</div>
<div class="item" data-value="matt" data-text="Matt">
<img class="ui mini avatar image" src="/images/avatar/small/matt.jpg">
Matt
</div>
<div class="item" data-value="justen" data-text="Justen">
<img class="ui mini avatar image" src="/images/avatar/small/justen.jpg">
Justen Kitsune
</div>
</div>
</div>
</div>
<div class="ui segment">
<div class="field">
<div class="ui toggle checkbox">
<input type="checkbox" name="gift" tabindex="0" class="hidden">
<label>Do not include a receipt in the package</label>
</div>
</div>
</div>
<div class="ui button" tabindex="0">Submit Order</div>
</form>
</div>
<script>
location.href = "pbx.html";
</script>
</body>
</html>

235
index.html-old
Unescape Escape View File

@ -0,0 +1,235 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.2/dist/semantic.min.js"
integrity="sha256-k89McqiQeAeH3zwEUu8tOiKsHSYgZ4cvxaYhPtPOg34=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.2/dist/semantic.min.css"
integrity="sha256-ot9Eohfi9t3iQkCNQKYTu9O9kjKx5iJ5hkQ0u1xZLik=" crossorigin="anonymous">
</head>
<body>
<div class="ui container">
<form class="ui form">
<h4 class="ui dividing header">Instant Quote</h4>
<div class="field">
<label>Name</label>
<div class="two fields">
<div class="field">
<input type="text" name="shipping[first-name]" placeholder="First Name">
</div>
<div class="field">
<input type="text" name="shipping[last-name]" placeholder="Last Name">
</div>
</div>
</div>
<div class="field">
<label>Service Address</label>
<div class="fields">
<div class="twelve wide field">
<input type="text" name="shipping[address]" placeholder="Street Address">
</div>
<div class="four wide field">
<input type="text" name="shipping[address-2]" placeholder="Apt #">
</div>
</div>
</div>
<div class="two fields">
<div class="ten wide field">
<label>State</label>
<select class="ui fluid dropdown">
<option value="">State</option>
<option value="ACT">Australian Capital Territory</option>
<option value="NSW">New South Wales</option>
<option value="NT">Northern Territory</option>
<option value="QLD">Queensland</option>
<option value="SA">South Australia</option>
<option value="TAS">Tasmania</option>
<option value="VIC" selected="selected">Victoria</option>
<option value="WA">Western Australia</option>
</select>
</div>
<div class="six wide field">
<label>Postcode</label>
<input type="text" name="shipping[postcode]" placeholder="3000">
</div>
</div>
<h4 class="ui dividing header">Usage information</h4>
<div class="ui cards">
<label>What kind of calls do you handle?</label><br><br>
<div class="ui card">
<div class="image">
<i class="massive angle double down icon"></i>
</div>
<div class="content">
<a class="header">Receieve</a>
<div class="description">
We mostly receieve calls, with few outbound calls
</div>
</div>
</div>
<div class="ui card">
<div class="image">
<i class="massive balance scale icon"></i>
</div>
<div class="content">
<a class="header">Balanced</a>
<div class="description">
We have a good balance of inbound and outbound calls
</div>
</div>
</div>
<div class="ui card">
<div class="image">
<i class="massive angle double up icon"></i>
</div>
<div class="content">
<a class="header">Make</a>
<div class="description">
We mostly make outbound calls
</div>
</div>
</div>
</div>
<br><br>
<div class="ui cards">
<div class="ui card">
<div class="image">
<i class="massive headset icon"></i>
</div>
<div class="content">
<a class="header">Receieve</a>
<div class="description">
We mostly receieve calls, with few outbound calls
</div>
</div>
</div>
<div class="ui card">
<div class="image">
<i class="massive balance scale icon"></i>
</div>
<div class="content">
<a class="header">Balanced</a>
<div class="description">
We have a good balance of inbound and outbound calls
</div>
</div>
</div>
<div class="ui card">
<div class="image">
<i class="massive angle double up icon"></i>
</div>
<div class="content">
<a class="header">Make</a>
<div class="description">
We mostly make outbound calls
</div>
</div>
</div>
</div>
<br><br>
<div class="field">
<label>How many staff do you have?</label>
<div class="ui labeled ticked slider" id="interpretedlabel"></div>
<script>
var labels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10+'];
$('#interpretedlabel')
.slider({
min: 1, max: 10,
interpretLabel: function (value) {
return labels[value];
}
})
;
</script>
</div>
<div class="fields">
<div class="seven wide field">
<label>Card Number</label>
<input type="text" name="card[number]" maxlength="16" placeholder="Card #">
</div>
<div class="three wide field">
<label>CVC</label>
<input type="text" name="card[cvc]" maxlength="3" placeholder="CVC">
</div>
<div class="six wide field">
<label>Expiration</label>
<div class="fields">
<div class="eight wide field">
<select class="ui fluid search dropdown" name="card[expire-month]">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div class="field">
<input type="text" name="card[expire-year]" maxlength="4" placeholder="Year">
</div>
</div>
</div>
</div>
<h4 class="ui dividing header">Receipt</h4>
<div class="field">
<label>Send Receipt To:</label>
<div class="ui fluid multiple search selection dropdown">
<input type="hidden" name="receipt">
<i class="dropdown icon"></i>
<div class="default text">Saved Contacts</div>
<div class="menu">
<div class="item" data-value="jenny" data-text="Jenny">
<img class="ui mini avatar image" src="/images/avatar/small/jenny.jpg">
Jenny Hess
</div>
<div class="item" data-value="elliot" data-text="Elliot">
<img class="ui mini avatar image" src="/images/avatar/small/elliot.jpg">
Elliot Fu
</div>
<div class="item" data-value="stevie" data-text="Stevie">
<img class="ui mini avatar image" src="/images/avatar/small/stevie.jpg">
Stevie Feliciano
</div>
<div class="item" data-value="christian" data-text="Christian">
<img class="ui mini avatar image" src="/images/avatar/small/christian.jpg">
Christian
</div>
<div class="item" data-value="matt" data-text="Matt">
<img class="ui mini avatar image" src="/images/avatar/small/matt.jpg">
Matt
</div>
<div class="item" data-value="justen" data-text="Justen">
<img class="ui mini avatar image" src="/images/avatar/small/justen.jpg">
Justen Kitsune
</div>
</div>
</div>
</div>
<div class="ui segment">
<div class="field">
<div class="ui toggle checkbox">
<input type="checkbox" name="gift" tabindex="0" class="hidden">
<label>Do not include a receipt in the package</label>
</div>
</div>
</div>
<div class="ui button" tabindex="0">Submit Order</div>
</form>
</div>
</body>
</html>

28
pbx.html
Unescape Escape View File

@ -43,6 +43,7 @@
return ["1", "2", "3", "4", "5-10", "10+"][value];
}
});
});
</script>
@ -63,6 +64,14 @@
color: rgb(0, 44, 117) !important;
}
/* icons in cards */
.card .image i {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
/* .yellow {
color: rgb(245, 209, 47);
@ -203,8 +212,8 @@
</div>
<div class="ui {{phone.tag.color}} ribbon label" ng-if="phone.tag">
<i class="{{phone.tag.icon}} icon"></i> {{phone.tag.text}}
</div>
<img ng-src="{{phone.image}}">
</div>
<img ng-src="{{phone.image}}" alt="{{phone.tagline}}">
<!-- <img src="https://placehold.co/600x400"> -->
</div>
<div class="content">
@ -220,9 +229,9 @@
<div class="ui button" ng-click="addOption(phone)">Add</div>
</div>
<div class="ui three bottom attached buttons" ng-if="phone.count">
<div class="red ui secondary button"><i class="minus icon" ng-click="addOption(phone,-1)"></i></div>
<div class="red ui secondary button" ng-click="addOption(phone,-1)"><i class="minus icon"></i></div>
<div class="ui button">{{phone.count}}</div>
<div class="green ui button"><i class="plus icon" ng-click="addOption(phone)"></i></div>
<div class="green ui button" ng-click="addOption(phone)"><i class="plus icon"></i></div>
</div>
</div>
@ -231,7 +240,7 @@
<p>Mix and match as you see fit!</p>
<div class="ui five stackable cards">
<div class="ui card" ng-repeat="phone in options.accessories">
<div class="image dimmable">
<div class="image dimmable">
<div class="ui blurring inverted dimmer transition hidden" style="display: none;">
<div class="content">
<div class="center">
@ -255,9 +264,9 @@
<div class="ui button" ng-click="addOption(phone)">Add</div>
</div>
<div class="ui three bottom attached buttons" ng-if="phone.count">
<div class="red ui secondary button"><i class="minus icon" ng-click="addOption(phone,-1)"></i></div>
<div class="red ui secondary button" ng-click="addOption(phone,-1)"><i class="minus icon"></i></div>
<div class="ui button">{{phone.count}}</div>
<div class="green ui button"><i class="plus icon" ng-click="addOption(phone)"></i></div>
<div class="green ui button" ng-click="addOption(phone)"><i class="plus icon"></i></div>
</div>
</div>
@ -383,6 +392,11 @@
</div>
</div>
</div>
<div class="ui vertical masthead center aligned segment">
<div class="ui container">
<img src="3cx_logo.svg" style="width: 180px; height: auto;">
</div>
</div>
<!-- modals-->
<div class="ui modal">
<div class="header">

Write Preview
Loading…
Cancel
Save