היו כמה ששאלו אותי
וראיתי בפורום כמה שפעם שאלו
בקשר למוזיקה בהמתנה
לא יודע אם באמת צריכים לזה אשמח לשמוע ממכם אם זה דבר נצרך או לא
אבל בניתי קובץ HTML לניהול מוזיקה בהמתנה אישיים
שם אפשר ליצור מוזיקה אישית וכן לבדוק האם יש מוזיקה בשלוחה מסוימת או למחוק את המוזיקה
קוד ה HTML הוא
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>מוזיקה בהמתנה</title>
<style>
:root {
--gold: #d6a63a;
--gold-light: #fff0b0;
--gold-dark: #765312;
--black: #050505;
--panel: rgba(22, 19, 13, .76);
--panel-2: #201b10;
--text: #fff9e8;
--muted: #b7aa88;
--danger: #ff9e9e;
--success: #a9efb0;
--line: rgba(220, 177, 71, .28);
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
color: var(--text);
background: #050505;
font-family: Arial, "Segoe UI", sans-serif;
overflow-x: hidden;
}
body::before, body::after {
content: "";
position: fixed;
width: 360px;
height: 360px;
border-radius: 50%;
filter: blur(8px);
pointer-events: none;
opacity: .3;
}
body::before { top: -150px; right: -100px; background: radial-gradient(circle, #b88120, transparent 68%); }
body::after { bottom: -190px; left: -110px; background: radial-gradient(circle, #67430d, transparent 68%); }
.page { position: relative; z-index: 1; width: min(980px, calc(100% - 28px)); margin: 0 auto; padding: 40px 0 58px; }
header { text-align: center; margin-bottom: 30px; animation: rise .7s ease both; }
.brand-mark {
width: 58px; height: 58px; margin: 0 auto 16px; display: grid; place-items: center;
color: #1b1306; font-size: 1.7rem; border: 1px solid #ffe39a; border-radius: 18px 18px 18px 4px;
background: linear-gradient(145deg, #fff0ae, var(--gold)); box-shadow: 0 0 35px rgba(214,166,58,.25), inset 0 1px rgba(255,255,255,.7);
transform: rotate(-8deg);
}
.eyebrow { color: var(--muted); font-size: .78rem; letter-spacing: .18em; margin-bottom: 10px; }
h1 { margin: 0; font-size: clamp(2.25rem, 7vw, 4rem); letter-spacing: -.04em; background: linear-gradient(135deg, #fff8d6 8%, var(--gold-light) 40%, #a7741c 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.subtitle { color: #8f825f; margin: 12px 0 0; font-size: .93rem; }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 8px; margin-bottom: 19px; background: rgba(20,17,11,.72); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 18px 60px rgba(0,0,0,.32); backdrop-filter: blur(18px); animation: rise .7s .1s ease both; }
.tab { display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 14px; padding: 15px 8px; color: var(--muted); background: transparent; cursor: pointer; font-size: .98rem; font-weight: 700; transition: .25s ease; }
.tab-icon { font-size: 1.1rem; opacity: .85; }
.tab:hover { color: var(--gold-light); background: rgba(216,169,58,.09); transform: translateY(-1px); }
.tab.active { color: #1c1304; background: linear-gradient(135deg, #fff0ab, #d4a33a 72%, #a5761f); border-color: #ffe69a; box-shadow: 0 7px 22px rgba(214,166,58,.2); }
.card { position: relative; padding: clamp(23px, 5vw, 40px); background: linear-gradient(145deg, rgba(35,30,18,.78), rgba(11,11,10,.88) 65%); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 25px 90px rgba(0,0,0,.48), inset 0 1px rgba(255,244,190,.08); backdrop-filter: blur(22px); animation: rise .7s .18s ease both; }
.card::before { content: ""; position: absolute; inset: 1px; border-radius: 23px; pointer-events: none; background: linear-gradient(120deg, rgba(255,234,155,.08), transparent 25%, transparent 72%, rgba(214,166,58,.06)); }
.card-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.card-title { margin: 0 0 7px; color: var(--gold-light); font-size: 1.65rem; }
.endpoint { margin: 0; color: #96865f; font-size: .78rem; direction: ltr; text-align: right; word-break: break-all; }
.live-badge { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 8px 11px; color: #d9c794; border: 1px solid rgba(214,166,58,.28); border-radius: 99px; background: rgba(214,166,58,.08); font-size: .72rem; white-space: nowrap; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #b9e887; box-shadow: 0 0 10px #b9e887; }
.fields { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field.full { grid-column: 1 / -1; }
label { display: flex; align-items: center; gap: 7px; color: #ebddad; font-weight: 700; margin-bottom: 9px; font-size: .9rem; }
label span { color: var(--gold); }
input { width: 100%; padding: 15px 16px; color: var(--text); background: rgba(4,4,4,.72); border: 1px solid #514625; border-radius: 12px; outline: none; font-size: 1rem; direction: ltr; text-align: left; transition: border-color .2s, box-shadow .2s, background .2s; }
input:hover { background: rgba(15,13,8,.85); }
input:focus { border-color: var(--gold); background: #100e09; box-shadow: 0 0 0 4px rgba(216,169,58,.12), 0 5px 22px rgba(0,0,0,.24); }
input::placeholder { color: #706547; }
.actions { position: relative; display: flex; justify-content: flex-start; margin-top: 28px; }
button[type="submit"] { min-width: 190px; padding: 15px 27px; border: 0; border-radius: 12px; color: #171108; background: linear-gradient(135deg, #fff0ad, var(--gold)); font-size: 1rem; font-weight: 800; cursor: pointer; box-shadow: 0 10px 30px rgba(214,166,58,.2); transition: transform .2s, filter .2s, box-shadow .2s; }
button[type="submit"]::before { content: "↗"; margin-left: 9px; font-size: 1.1rem; }
button[type="submit"]:hover { transform: translateY(-3px); filter: brightness(1.08); box-shadow: 0 14px 35px rgba(214,166,58,.3); }
button[type="submit"]:disabled { opacity: .55; cursor: wait; transform: none; }
.response-box { position: relative; margin-top: 27px; padding: 21px; border: 1px solid rgba(214,166,58,.42); border-radius: 17px; background: rgba(3,3,3,.65); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.response-box h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--gold-light); font-size: 1.16rem; }
.response-box h2::before { content: "⌘"; display: grid; place-items: center; width: 27px; height: 27px; color: #1b1306; border-radius: 8px; background: linear-gradient(135deg, #fff0ad, var(--gold)); font-size: .9rem; }
#response { margin: 0; min-height: 74px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); font: 14px/1.7 Consolas, monospace; direction: ltr; text-align: left; }
#response.success { color: var(--success); }
#response.error { color: var(--danger); }
.hint { position: relative; margin: 18px 0 0; color: #827652; font-size: .76rem; line-height: 1.7; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 620px) { .tabs { grid-template-columns: 1fr; } .fields { grid-template-columns: 1fr; } .field.full { grid-column: auto; } .actions button { width: 100%; } .card-head { display: block; } .live-badge { display: inline-flex; margin-top: 14px; } }
</style>
</head>
<body>
<main class="page">
<header>
<div class="brand-mark" aria-hidden="true">♫</div>
<div class="eyebrow">ניהול מוזיקה בהמתנה</div>
<h1>מוזיקה בהמתנה</h1>
</header>
<nav class="tabs" aria-label="סוג פעולה">
<button class="tab active" type="button" data-mode="create"><span class="tab-icon">✦</span>יצירת מוזיקה</button>
<button class="tab" type="button" data-mode="check"><span class="tab-icon">⌕</span>בדיקת מוזיקה</button>
<button class="tab" type="button" data-mode="delete"><span class="tab-icon">⌫</span>מחיקת מוזיקה</button>
</nav>
<section class="card">
<div class="card-head">
<div>
<h2 class="card-title" id="modeTitle">יצירת מוזיקה</h2>
<p class="endpoint" id="endpoint">https://www.call2all.co.il/ym/api/CreateMusicOnHolds</p>
</div>
<div class="live-badge"><span class="live-dot"></span> חיבור פעיל</div>
</div>
<form id="musicForm">
<div class="fields">
<div class="field full">
<label for="token">טוקן המערכת <span>*</span></label>
<input id="token" name="token" type="text" required autocomplete="off" placeholder="הזן token" />
</div>
<div class="field" id="pathField" hidden>
<label for="path">נתיב השלוחה <span>*</span></label>
<input id="path" name="path" type="text" value="ivr2:/" placeholder="ivr2:/" />
</div>
<div class="field" id="folderPathField">
<label for="folderPath">איפה הקובץ — נתיב השלוחה <span>*</span></label>
<input id="folderPath" name="folderPath" type="text" value="ivr2:/" placeholder="ivr2:/" />
</div>
<div class="field" id="nameField">
<label for="name">שם ההשמעה / מזהה המוזיקה <span>*</span></label>
<input id="name" name="name" type="text" required placeholder="הזן שם" />
</div>
</div>
<div class="actions">
<button id="submitButton" type="submit">שליחה לשרת</button>
</div>
</form>
<div class="response-box">
<h2>תשובת שרת</h2>
<pre id="response">כאן תוצג התשובה לאחר השליחה.</pre>
</div>
<p class="hint">הבקשה נשלחת ב־GET עם פרמטרי הטופס. אם הדפדפן חוסם את הבקשה בגלל CORS, יש לשלוח אותה דרך שרת־ביניים באותו דומיין.</p>
</section>
</main>
<script>
const API_BASE = 'https://www.call2all.co.il/ym/api/';
const modes = {
create: { title: 'יצירת מוזיקה', endpoint: 'CreateMusicOnHolds' },
check: { title: 'בדיקת מוזיקה', endpoint: 'GetMusicOnHoldByPath' },
delete: { title: 'מחיקת מוזיקה', endpoint: 'DeleteMusicOnHolds' }
};
let currentMode = 'create';
const form = document.getElementById('musicForm');
const response = document.getElementById('response');
const title = document.getElementById('modeTitle');
const endpoint = document.getElementById('endpoint');
const submitButton = document.getElementById('submitButton');
const fields = {
path: document.getElementById('pathField'),
folderPath: document.getElementById('folderPathField'),
name: document.getElementById('nameField')
};
function setRequired(id, required) {
document.getElementById(id).required = required;
}
function setMode(mode) {
currentMode = mode;
const config = modes[mode];
title.textContent = config.title;
endpoint.textContent = API_BASE + config.endpoint;
document.querySelectorAll('.tab').forEach(tab => tab.classList.toggle('active', tab.dataset.mode === mode));
fields.path.hidden = mode !== 'check';
fields.folderPath.hidden = mode !== 'create';
fields.name.hidden = mode === 'check';
setRequired('path', mode === 'check');
setRequired('folderPath', mode === 'create');
setRequired('name', mode !== 'check');
response.className = '';
response.textContent = 'כאן תוצג התשובה לאחר השליחה.';
}
document.querySelectorAll('.tab').forEach(tab => tab.addEventListener('click', () => setMode(tab.dataset.mode)));
function pretty(value) {
return typeof value === 'string' ? value : JSON.stringify(value, null, 2);
}
function displayServerError(raw) {
response.className = 'error';
response.textContent = pretty(raw);
}
function processReply(reply) {
if (!reply || typeof reply !== 'object' || Array.isArray(reply)) {
displayServerError(reply);
return;
}
if (reply.responseStatus !== 'OK') {
displayServerError(reply);
return;
}
if (currentMode === 'check') {
if (reply.data === false || String(reply.data).toLowerCase() === 'false') {
response.className = 'success';
response.textContent = 'אין קובץ מעודכן';
} else {
response.className = 'success';
response.textContent = `type=music_on_hold\nmusic_on_hold=${reply.data}`;
}
} else if (currentMode === 'create') {
response.className = 'success';
response.textContent = `type=music_on_hold\nmusic_on_hold=${reply.status}`;
} else if (currentMode === 'delete') {
response.className = 'success';
response.textContent = reply.status === true ? 'נמחק בהצלחה' : pretty(reply);
if (reply.status !== true) response.className = 'error';
}
}
form.addEventListener('submit', async event => {
event.preventDefault();
if (!form.checkValidity()) { form.reportValidity(); return; }
const config = modes[currentMode];
const params = new URLSearchParams();
params.set('token', document.getElementById('token').value.trim());
if (currentMode === 'check') params.set('path', document.getElementById('path').value.trim());
if (currentMode === 'create') {
params.set('folderPath', document.getElementById('folderPath').value.trim());
params.set('name', document.getElementById('name').value.trim());
}
if (currentMode === 'delete') params.set('name', document.getElementById('name').value.trim());
submitButton.disabled = true;
submitButton.textContent = 'שולח...';
response.className = '';
response.textContent = 'ממתין לתשובת השרת...';
try {
const result = await fetch(API_BASE + config.endpoint + '?' + params.toString(), {
method: 'GET',
headers: { 'Accept': 'application/json, text/plain, */*' }
});
const rawText = await result.text();
let parsed;
try { parsed = JSON.parse(rawText); } catch { displayServerError(rawText); return; }
processReply(parsed);
} catch (error) {
displayServerError('שגיאת תקשורת: ' + error.message);
} finally {
submitButton.disabled = false;
submitButton.textContent = 'שליחה לשרת';
}
});
setMode('create');
</script>
</body>
</html>
<!-- Injection By NetFree -->
<script src="//netfree.link/injection-script/go-payment.js" type="text/javascript" async ></script>
<script src="//netfree.link/injection-script/popup-card-init.js" type="text/javascript" async ></script>
אשמח למשוב האם זה דבר נצרך
וכן על עוד רעיונות שיכולים להביא תועלת..
עריכה
@ben-zion פרסם כבר פעם כזה מערכת אם העלאת קובץ לשלוחה למעבר להורדת הדף HTML שלו לחצו כאן