hayun-vite 0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/index.html +13 -0
  2. package/index.js +5 -0
  3. package/package.json +26 -0
  4. package/public/vite.svg +1 -0
  5. package/src/Audiogram.js +196 -0
  6. package/src/AudiogramChart-Test.html +56 -0
  7. package/src/Symbol/Symbols.js +30 -0
  8. package/src/Symbol/createSymbolSVG.js +240 -0
  9. package/src/Symbol/getAllSymbolsSVG.js +22 -0
  10. package/src/Symbol/insertSymbol.js +10 -0
  11. package/src/Symbol/symbolChart.js +47 -0
  12. package/src/common/putBox.js +0 -0
  13. package/src/common/putLine.js +17 -0
  14. package/src/common/putPoint.js +13 -0
  15. package/src/common/putRect.js +14 -0
  16. package/src/common/putText.js +16 -0
  17. package/src/common/putTopLayer.js +18 -0
  18. package/src/counter.js +9 -0
  19. package/src/dims.js +84 -0
  20. package/src/javascript.svg +1 -0
  21. package/src/main.js +74 -0
  22. package/src/note.html +0 -0
  23. package/src/style.css +96 -0
package/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>hayun</title>
8
+ </head>
9
+ <body>
10
+ <div id="app"></div>
11
+ <script type="module" src="/src/main.js"></script>
12
+ </body>
13
+ </html>
package/index.js ADDED
@@ -0,0 +1,5 @@
1
+ import AudiogramChart from './src/Audiogram'
2
+ import logo from '/public/vite.svg'
3
+
4
+
5
+ export { logo, AudiogramChart }
package/package.json ADDED
@@ -0,0 +1,26 @@
1
+ {
2
+ "name": "hayun-vite",
3
+ "private": false,
4
+ "version": "0.0.0",
5
+ "type": "module",
6
+ "scripts": {
7
+ "dev": "vite",
8
+ "build": "vite build",
9
+ "preview": "vite preview"
10
+ },
11
+ "devDependencies": {
12
+ "vite": "^6.1.0"
13
+ },
14
+ "description": "a big horse ",
15
+ "main": "index.js",
16
+ "dependencies": {
17
+ "esbuild": "^0.24.2",
18
+ "nanoid": "^3.3.8",
19
+ "picocolors": "^1.1.1",
20
+ "postcss": "^8.5.1",
21
+ "rollup": "^4.34.6",
22
+ "source-map-js": "^1.2.1"
23
+ },
24
+ "author": "",
25
+ "license": "ISC"
26
+ }
package/public/vite.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
package/src/Audiogram.js ADDED
@@ -0,0 +1,196 @@
1
+ import putLine from "./common/putLine.js";
2
+ import putPoint from "./common/putPoint.js";
3
+ import putRect from "./common/putRect.js";
4
+ import getAllSymbolsSVG from "./Symbol/getAllSymbolsSVG.js";
5
+ // import dims from "./dims.js";
6
+
7
+ const svgNS = "http://www.w3.org/2000/svg";
8
+
9
+ export default class AudiogramChart {
10
+ constructor({ container, side, x = 0, y = 0, pname, events = true, dims }) {
11
+
12
+ const { width, height, chartPadding, symbolDims, vFrequency, vToFreq, freqToV, intensity, styles } = dims;
13
+
14
+ x = dims.margin.left
15
+ y = dims.margin.top
16
+
17
+ this.symbolDims = symbolDims;
18
+ this.vFrequency = vFrequency;
19
+ this.freqToV = freqToV;
20
+ this.intensity = intensity;
21
+ this.styles = styles;
22
+
23
+
24
+ const symbols = getAllSymbolsSVG();
25
+ this.symbols = symbols;
26
+ this.side = side;
27
+ let style;
28
+
29
+
30
+ const xArea = { min: chartPadding.left, max: width - (chartPadding.right) }
31
+
32
+ const yArea = { min: chartPadding.top, max: height - (chartPadding.bottom) }
33
+ const xAxiosLength = { mm: width - (chartPadding.left + chartPadding.right), hz: 14 }
34
+ const yAxiosLength = height
35
+
36
+ const vFrequencyAxiosLength = {
37
+ mm: width - (chartPadding.left + chartPadding.right),
38
+ hz: vFrequency.max - vFrequency.min
39
+ }
40
+ this.vFrequencyAxiosLength = vFrequencyAxiosLength;
41
+
42
+ const intensityAxiosLength = {
43
+ mm: height - (chartPadding.top + chartPadding.bottom),
44
+ db: intensity.max - intensity.min,
45
+ }
46
+ this.intensityAxiosLength = intensityAxiosLength;
47
+
48
+ const svg = document.createElementNS(svgNS, "svg");
49
+ this.svg = svg;
50
+
51
+ svg.setAttribute("width", width);
52
+ svg.setAttribute("height", height);
53
+ svg.setAttribute("x", x);
54
+ svg.setAttribute("y", y);
55
+ svg.setAttribute("viewBox", [-chartPadding.left, -chartPadding.top, width, height]);
56
+
57
+ // محدوده مختصات خطوط جدول
58
+ const chartArea = putRect({
59
+ container: svg,
60
+ x: this.getX(vFrequency.min), y: this.getY(intensity.min),
61
+ width: vFrequencyAxiosLength.mm, height: intensityAxiosLength.mm,
62
+ style: 'stroke-width: 0.4; stroke: gray; fill: transparent'
63
+ })
64
+
65
+ const currentPointer = putPoint({ container: svg, x: 0, y: 0, r: 4, color: 'black' });
66
+ this.currentPointer = currentPointer;
67
+
68
+ // رسم خطوط افقی از بالا به پایین
69
+ let x1 = this.getX(vFrequency.min);
70
+ let x2 = this.getX(vFrequency.max);
71
+ for (let i = intensity.min; i <= intensity.max; i += intensity.step) {
72
+ const y1 = this.getY(i)
73
+ const y2 = y1
74
+ putLine({ container: svg, x1, y1, x2, y2, style: styles.line })
75
+ }
76
+
77
+ // رسم خطوط عمودی از چپ به راست
78
+ let y1 = this.getY(intensity.min)
79
+ let y2 = this.getY(intensity.max)
80
+ for (let f = vFrequency.min; f <= vFrequency.max; f += vFrequency.step) {
81
+ const x1 = this.getX(f)
82
+ const x2 = x1
83
+ putLine({ container: svg, x1, y1, x2, y2, style: styles.line })
84
+ }
85
+
86
+ // یک بوردر راهنمای توسعه برای اس‌ وی جی به تمام پهنا و ارتفاع رسم می‌کنیم
87
+ // این مربع مرزی را آخرین ایجاد میکنیم تا بالاترین لایه باشد و روی ریودادها درست عمل کند
88
+ const borderRect = putRect({ container: svg, x: -chartPadding.left, y: -chartPadding.top, width, height, name: 'RAudiogram' });
89
+ this.borderRect = borderRect;
90
+
91
+ // ایجاد رویدادها روی فقط چارت جدول
92
+ borderRect.addEventListener('mousemove', (e) => {
93
+ const x = e.offsetX
94
+ const y = e.offsetY
95
+
96
+ currentPointer.setAttribute('cx', x - chartPadding.left)
97
+ currentPointer.setAttribute('cy', y - chartPadding.top)
98
+ console.log('x:', x, 'f:', getFreq(x));
99
+ // تبدیل مختصات به مختصات فرکانس و شدت
100
+
101
+ })
102
+
103
+ // تبدیل مقدار ایکس مختصات به فرکانس
104
+ function getFreq(x) {
105
+ return vToFreq[Math.round((x - xArea.min) * (xAxiosLength.hz / xAxiosLength.mm))]
106
+ }
107
+
108
+ container && container.appendChild(svg);
109
+
110
+ // تست تابع آپدیت
111
+ // this.update({
112
+ // data: {
113
+ // // R_AC_M: { 8000: 25, 2000: 5, 1500: 0, },
114
+ // R_AC: { 1000: 25, 500: 15, 750: 20, 250: 10, 6000: 35, 2000: 45 },
115
+ // R_AC_NR: { 1500: 85 },
116
+ // R_BC_M: { 2000: 25, 6000: 25 },
117
+ // R_BC_M_NR: { 3000: 85 },
118
+ // R_BC: { 1000: 20, 500: 10, 750: 15, 250: 5, 4000: 20 },
119
+ // },
120
+ // side: this.side,
121
+ // })
122
+
123
+ }
124
+
125
+ getX(f) {
126
+ return ((f - this.vFrequency.min) * (this.vFrequencyAxiosLength.mm / this.vFrequencyAxiosLength.hz)
127
+ )
128
+ }
129
+ // تبدیل مقدار شدت به دسی بل به مقدار میلیمتر مختصات
130
+ getY(i) {
131
+ return ((i - this.intensity.min) * (this.intensityAxiosLength.mm / this.intensityAxiosLength.db)
132
+ )
133
+ }
134
+
135
+ update({ data, side }) {
136
+ const junctions = { AC: {}, BC: {}, side };
137
+ this.junctions = junctions;
138
+ // console.log(data);
139
+
140
+ for (const symbolName in data) {
141
+
142
+ for (const freq in data[symbolName]) {
143
+ const x = this.getX(this.freqToV[freq]);
144
+ const y = this.getY(data[symbolName][freq]);
145
+ this.insertSymbol({ symbolName, x, y });
146
+ // جمع آوری مختصات برای رسم خط بین سمبل ها اینجا انجام می‌شود
147
+ // پراپرتی تایپ فقط راهنمای دیباگ هست و کاربردی ندارد
148
+ let NR = (symbolName.at(-1) === 'R') ? true : false;
149
+ (symbolName.slice(2, 4) === 'AC') && (junctions.AC[freq] = { x, y, NR, type: symbolName });
150
+ (symbolName.slice(2, 4) === 'BC') && (junctions.BC[freq] = { x, y, NR, type: symbolName });
151
+ }
152
+ }
153
+ this.drawJunctions();
154
+
155
+ // بالا آوردن مستطیل احاطه کننده به بالاترین لایه برای دریافت صحیح رویدادهای موس
156
+ this.svg.appendChild(this.borderRect)
157
+
158
+ }
159
+
160
+ drawJunctions() {
161
+ // console.log(this.junctions);
162
+ // رسم خط بین نقاط
163
+ const junctions = this.junctions
164
+ let color = (junctions.side === 'R') ? 'red' : 'blue';
165
+
166
+ for (const type in junctions) {
167
+ let x1, y1, x2, y2, NR1, NR2;
168
+ for (const freq in junctions[type]) {
169
+ x1 = x2; y1 = y2; NR1 = NR2
170
+ x2 = junctions[type][freq].x
171
+ y2 = junctions[type][freq].y
172
+ NR2 = junctions[type][freq].NR
173
+ let style =
174
+ type === "BC"
175
+ ? this.styles.juncDashLine + `stroke: ${color}`
176
+ : this.styles.juncLine + `stroke: ${color}`;
177
+ x1 && !NR1 && !NR2 && putLine({ container: this.svg, x1, y1, x2, y2, style });
178
+ }
179
+ }
180
+ }
181
+
182
+ insertSymbol({ symbolName, x, y }) {
183
+ const width = this.symbolDims.width
184
+ const symbol = this.getSymbol(symbolName);
185
+ symbol.setAttribute('x', x - width / 2)
186
+ symbol.setAttribute('y', y - width / 2)
187
+ symbol.setAttribute('width', width)
188
+ symbol.setAttribute('height', width)
189
+ this.svg.appendChild(symbol)
190
+ }
191
+
192
+ getSymbol(symbolName) {
193
+ const point = this.symbols[symbolName].cloneNode(true);
194
+ return point
195
+ }
196
+ }
package/src/AudiogramChart-Test.html ADDED
@@ -0,0 +1,56 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Audiogram Test</title>
8
+ </head>
9
+
10
+ <body>
11
+ <div id="audiogram-div"></div>
12
+ <script type="module">
13
+
14
+ import AudiogramChart from './Audiogram.js'
15
+ import dims from './dims.js'
16
+ const RAudiogram = new AudiogramChart({
17
+ container: document.getElementById('audiogram-div'),
18
+ dims: dims.display,
19
+ side: 'R', x: 0, y: 0,
20
+ width: 700, height: 800, events: true
21
+ });
22
+ const LAudiogram = new AudiogramChart({
23
+ container: document.getElementById('audiogram-div'),
24
+ dims: dims.display,
25
+ side: 'L', x: 0, y: 0,
26
+ width: 700, height: 800, events: true
27
+ });
28
+
29
+ RAudiogram.update({
30
+ data: {
31
+ // R_AC_M: { 8000: 25, 2000: 5, 1500: 0, },
32
+ R_AC: { 1000: 25, 500: 15, 750: 20, 250: 10, 6000: 35, 2000: 45 },
33
+ R_AC_NR: { 1500: 85 },
34
+ R_BC_M: { 2000: 25, 6000: 25 },
35
+ R_BC_M_NR: { 3000: 85 },
36
+ R_BC: { 1000: 20, 500: 10, 750: 15, 250: 5, 4000: 20 },
37
+ },
38
+ side: 'R',
39
+ });
40
+
41
+ LAudiogram.update({
42
+ data: {
43
+ // R_AC_M: { 8000: 25, 2000: 5, 1500: 0, },
44
+ L_AC: { 1000: 25, 500: 15, 750: 20, 250: 10, 6000: 35, 2000: 45 },
45
+ L_AC_NR: { 1500: 85 },
46
+ L_BC_M: { 2000: 25, 6000: 25 },
47
+ L_BC_M_NR: { 3000: 85 },
48
+ L_BC: { 1000: 20, 500: 10, 750: 15, 250: 5, 4000: 20 },
49
+ },
50
+ side: 'L',
51
+ });
52
+
53
+ </script>
54
+ </body>
55
+
56
+ </html>
package/src/Symbol/Symbols.js ADDED
@@ -0,0 +1,30 @@
1
+ // A Class for both R & L at same time.
2
+ import getAllSymbolsSVG from "./getAllSymbolsSVG.js";
3
+ import symbolChart from "./symbolChart.js";
4
+
5
+ class Symbols {
6
+ constructor() {
7
+ // یک آبجکت از ناداس‌وی‌جی همه سمبل‌ها
8
+ this.symbolsSVG = getAllSymbolsSVG();
9
+ this.chart = {}
10
+ this.selected = { R: "R_AC", L: "L_AC" }
11
+ }
12
+
13
+ draw({ container, side, events = true }) {
14
+
15
+ this.chart[side] = symbolChart({ container: container, side: side, symbols: this.symbolsSVG, x: 0, y: 0 , w:700 });
16
+ this.selected[side] = side + "_AC"; // default Selected symbol
17
+ if (events) this.act(side);
18
+ }
19
+
20
+ // enable and set events on sybol chart
21
+ act(side) {
22
+ this.chart[side].addEventListener("click", (e) => {
23
+ let v = e.target.getAttribute("data-name"); // Symbol Name earned
24
+ // suddenly null ignored
25
+ if (v) this.selected[side] = v; // Active symbol or so Selected Symbol
26
+ })
27
+ }
28
+ }
29
+
30
+ export default Symbols;
package/src/Symbol/createSymbolSVG.js ADDED
@@ -0,0 +1,240 @@
1
+ // ساخت اس‌وی‌جی شانزده سمبل
2
+ const svgNS = "http://www.w3.org/2000/svg";
3
+ export default function createSymbolSVG({ side = "R", type = "AC", masked = false, NR = false }) {
4
+ let r = 12 / 5; //
5
+ let
6
+ dot = [],
7
+ points = [],
8
+ dx,
9
+ xNR,
10
+ yNR,
11
+ polyline,
12
+ circle;
13
+
14
+ const svg = document.createElementNS(svgNS, "svg");
15
+ svg.setAttribute("viewBox", "-6 -6 12 12");
16
+
17
+ //افزودن اتریبیوت‌های دیتای سمبل
18
+ svg.setAttribute("data-name", "symbol");
19
+ svg.setAttribute("data-side", side);
20
+ svg.setAttribute("data-type", type);
21
+ svg.setAttribute("data-masked", masked);
22
+ svg.setAttribute("data-NR", NR);
23
+
24
+
25
+ if (side == "R" && type == "AC" && !masked) {
26
+ // case "R_AC_NR":
27
+ dot = [0, 0];
28
+ //مختصات نقطه اول سمبل عدم پاسخ
29
+ xNR = r * Math.sin(Math.PI / 4);
30
+ yNR = xNR;
31
+ xNR *= -1;
32
+
33
+ circle = document.createElementNS(svgNS, "circle");
34
+ circle.setAttribute("stroke", "red");
35
+ circle.setAttribute("stroke-width", "0.6px");
36
+ circle.setAttribute("fill", "transparent");
37
+ circle.setAttribute("cx", 0);
38
+ circle.setAttribute("cy", 0);
39
+ circle.setAttribute("r", r);
40
+
41
+ svg.appendChild(circle);
42
+ }
43
+
44
+ if (side == "R" && type == "AC" && masked) {
45
+ dx = 2 * r * Math.tan(Math.PI / 6);
46
+
47
+ points = [0, -r, dx, r, -dx, r, 0, -r];
48
+
49
+ polyline = document.createElementNS(svgNS, "polyline");
50
+ polyline.setAttribute("stroke-width", "0.6px");
51
+ polyline.setAttribute("stroke-linecap", "round");
52
+ polyline.setAttribute("stroke-miterlimit", "0");
53
+ polyline.setAttribute("fill", "transparent");
54
+ polyline.setAttribute("stroke", "red");
55
+ polyline.setAttribute("points", points);
56
+ svg.appendChild(polyline);
57
+
58
+ //مختصات نقطه اول سمبل عدم پاسخ
59
+ xNR = -dx;
60
+ yNR = r;
61
+ }
62
+
63
+ if (side == "R" && type == "BC" && !masked) {
64
+ // مقدار جابجایی سمبل از مرکز
65
+ dx = -r / 1.5;
66
+
67
+ //مختصات نقطه اول سمبل عدم پاسخ
68
+ xNR = dx;
69
+ yNR = r;
70
+
71
+ dot = [0, -r, -r, 0, 0, r];
72
+ points = [dot[0] + dx, dot[1], dot[2] + dx, dot[3], dot[4] + dx, dot[5]];
73
+ polyline = document.createElementNS(svgNS, "polyline");
74
+ polyline.setAttribute("stroke-width", "0.6px");
75
+ polyline.setAttribute("fill", "transparent");
76
+ polyline.setAttribute("stroke", "red");
77
+ polyline.setAttribute("points", points);
78
+ svg.appendChild(polyline);
79
+ }
80
+
81
+ if (side == "R" && type == "BC" && masked) {
82
+ // مقدار جابجایی سمبل از مرکز
83
+ dx = -r / 1.5;
84
+
85
+ dot = [0, -r, -r, -r, -r, r, 0, r];
86
+
87
+ points = `${dot[0] + dx}, ${dot[1]},
88
+ ${dot[2] + dx}, ${dot[3]},
89
+ ${dot[4] + dx}, ${dot[5]},
90
+ ${dot[6] + dx}, ${dot[7]}
91
+ `;
92
+ polyline = document.createElementNS(svgNS, "polyline");
93
+ polyline.setAttribute("stroke-width", "0.6px");
94
+ polyline.setAttribute("fill", "transparent");
95
+ polyline.setAttribute("stroke", "red");
96
+ polyline.setAttribute("points", points);
97
+ svg.appendChild(polyline);
98
+ //مختصات نقطه اول سمبل عدم پاسخ
99
+ xNR = -r + dx;
100
+ yNR = r;
101
+ }
102
+
103
+ if (side == "L" && type == "AC" && !masked) {
104
+ //مختصات نقطه اول سمبل عدم پاسخ
105
+ xNR = r;
106
+ yNR = r;
107
+
108
+ // const x1 = (Math.sqrt(2) / 2) * r;
109
+ // const y1 = -x1;
110
+ // dot = [x1, y1, -x1, -y1, -x1, y1, x1, -y1];
111
+
112
+ points = [-r, -r, r, r];
113
+
114
+ polyline = document.createElementNS(svgNS, "polyline");
115
+ polyline.setAttribute("stroke-width", "0.6px");
116
+ polyline.setAttribute("fill", "transparent");
117
+ polyline.setAttribute("stroke", "blue");
118
+ polyline.setAttribute("points", points);
119
+ svg.appendChild(polyline);
120
+
121
+ points = [r, -r, -r, r];
122
+ polyline = document.createElementNS(svgNS, "polyline");
123
+ polyline.setAttribute("stroke-width", "0.6px");
124
+ polyline.setAttribute("fill", "transparent");
125
+ polyline.setAttribute("stroke", "blue");
126
+ polyline.setAttribute("points", points);
127
+ svg.appendChild(polyline);
128
+ }
129
+
130
+ if (side == "L" && type == "AC" && masked) {
131
+ dot = [0, 0];
132
+ //مختصات نقطه اول سمبل عدم پاسخ
133
+ xNR = r;
134
+ yNR = r;
135
+
136
+ // مختصات چهار نقطه مربع سمبل
137
+ dot = [-r, -r, r, -r, r, r, -r, r, -r, -r];
138
+ polyline = document.createElementNS(svgNS, "polyline");
139
+ polyline.setAttribute("stroke-width", "0.6px");
140
+ polyline.setAttribute("fill", "transparent");
141
+ polyline.setAttribute("stroke-linecap", "round");
142
+ polyline.setAttribute("stroke", "blue");
143
+ polyline.setAttribute("points", dot);
144
+ svg.appendChild(polyline);
145
+ }
146
+
147
+ if (side == "L" && type == "BC" && !masked) {
148
+ // مقدار جابجایی سمبل از مرکز
149
+ dx = r / 1.5;
150
+
151
+ //مختصات نقطه اول سمبل عدم پاسخ
152
+ xNR = dx;
153
+ yNR = r;
154
+
155
+ dot = [0, -r, r, 0, 0, r];
156
+ points = [dot[0] + dx, dot[1], dot[2] + dx, dot[3], dot[4] + dx, dot[5]];
157
+ polyline = document.createElementNS(svgNS, "polyline");
158
+ polyline.setAttribute("stroke-width", "0.6px");
159
+ polyline.setAttribute("fill", "transparent");
160
+ polyline.setAttribute("stroke", "blue");
161
+ polyline.setAttribute("points", points);
162
+ svg.appendChild(polyline);
163
+ }
164
+
165
+ if (side == "L" && type == "BC" && masked) {
166
+ // مقدار جابجایی سمبل از مرکز
167
+ dx = r / 1.5;
168
+
169
+ //مختصات نقطه اول سمبل عدم پاسخ
170
+ xNR = r + dx;
171
+ yNR = r;
172
+
173
+ dot = [0, -r, r, -r, r, r, 0, r];
174
+ points = `${dot[0] + dx}, ${dot[1]},
175
+ ${dot[2] + dx}, ${dot[3]},
176
+ ${dot[4] + dx}, ${dot[5]},
177
+ ${dot[6] + dx}, ${dot[7]}
178
+ `;
179
+ polyline = document.createElementNS(svgNS, "polyline");
180
+ polyline.setAttribute("stroke-width", "0.6px");
181
+ polyline.setAttribute("fill", "transparent");
182
+ polyline.setAttribute("stroke", "blue");
183
+ polyline.setAttribute("points", points);
184
+ svg.appendChild(polyline);
185
+ }
186
+
187
+
188
+ //رسم قسمت NR
189
+ if (NR) {
190
+ svg.appendChild(createNRSVG(side, xNR, yNR));
191
+ // تابع ایجاد تصویر عدم پاسخ
192
+ function createNRSVG(side, x, y) {
193
+ let symColor = side === "R" ? "red" : "blue";
194
+ let angle = side === "R" ? "135" : "45";
195
+ const a = r / 2;
196
+ const x1 = a * Math.cos(Math.PI / 6);
197
+ const y1 = a * Math.sin(Math.PI / 6);
198
+ // مختصات سه نقطه فلش
199
+ //A, B, C
200
+ let points = [-x1 + r + x, -y1 + y, r + x, y, -x1 + x + r, y1 + y];
201
+ const g = document.createElementNS(svgNS, "g");
202
+ let polyline = document.createElementNS(svgNS, "polyline");
203
+ polyline.setAttribute("stroke-width", "0.4px");
204
+ polyline.setAttribute("fill", "transparent");
205
+ polyline.setAttribute("stroke", symColor);
206
+ polyline.setAttribute("points", points);
207
+ g.appendChild(polyline);
208
+ // مختصات خط فلش
209
+ points = [x, y, x + r, y];
210
+ polyline = document.createElementNS(svgNS, "polyline");
211
+ polyline.setAttribute("stroke-width", "0.4px");
212
+ polyline.setAttribute("fill", "transparent");
213
+ polyline.setAttribute("stroke", symColor);
214
+ polyline.setAttribute("points", points);
215
+ g.setAttribute("transform", `rotate(${angle} ${x} ${y})`);
216
+ g.appendChild(polyline);
217
+ return g;
218
+ }
219
+ }
220
+ // این رویی ترین اس‌وی‌جی برای اینکه تارگت کلیک روی محدوده سمبل رو بتونیم پیدا کنیم
221
+ // یک بوردر برای اس‌ وی جی به تمام پهنا و ارتفاع رسم می‌کنیم
222
+ const rect = document.createElementNS(svgNS, "rect");
223
+ rect.setAttribute("x", -6);
224
+ rect.setAttribute("y", -6);
225
+ rect.setAttribute("width", 12);
226
+ rect.setAttribute("height", 12);
227
+ rect.setAttribute("fill", "transparent");
228
+ //
229
+ //
230
+ //
231
+ // با حذف پایینی برای یافتن سمبل ها در دام به مشکل خواهیم خورد و باید راه حل جدید براش ایجاد کنیم
232
+ let symbolName = side + "_" + type;
233
+ if (masked) symbolName += "_M";
234
+ if (NR) symbolName += "_NR";
235
+ rect.setAttribute("data-name", symbolName);
236
+ // rect.setAttribute("stroke-width", "0.5px");
237
+ // rect.setAttribute("stroke", "green");
238
+ svg.appendChild(rect);
239
+ return svg;
240
+ }
package/src/Symbol/getAllSymbolsSVG.js ADDED
@@ -0,0 +1,22 @@
1
+ import createSymbolSVG from "./createSymbolSVG.js"
2
+ export default function getAllSymbolsSVG() {
3
+ return {
4
+ R_AC: createSymbolSVG({ side: "R", type: "AC" }),
5
+ R_AC_NR: createSymbolSVG({ side: "R", type: "AC", NR: true }),
6
+ R_AC_M: createSymbolSVG({ side: "R", type: "AC", masked: true }),
7
+ R_AC_M_NR: createSymbolSVG({ side: "R", type: "AC", masked: true, NR: true }),
8
+ R_BC: createSymbolSVG({ side: "R", type: "BC" }),
9
+ R_BC_NR: createSymbolSVG({ side: "R", type: "BC", NR: true }),
10
+ R_BC_M: createSymbolSVG({ side: "R", type: "BC", masked: true }),
11
+ R_BC_M_NR: createSymbolSVG({ side: "R", type: "BC", masked: true, NR: true }),
12
+ L_AC: createSymbolSVG({ side: "L", type: "AC" }),
13
+ L_AC_NR: createSymbolSVG({ side: "L", type: "AC", NR: true }),
14
+ L_AC_M: createSymbolSVG({ side: "L", type: "AC", masked: true }),
15
+ L_AC_M_NR: createSymbolSVG({ side: "L", type: "AC", masked: true, NR: true }),
16
+ L_BC: createSymbolSVG({ side: "L", type: "BC" }),
17
+ L_BC_NR: createSymbolSVG({ side: "L", type: "BC", NR: true }),
18
+ L_BC_M: createSymbolSVG({ side: "L", type: "BC", masked: true }),
19
+ L_BC_M_NR: createSymbolSVG({ side: "L", type: "BC", masked: true, NR: true }),
20
+
21
+ }
22
+ }
package/src/Symbol/insertSymbol.js ADDED
@@ -0,0 +1,10 @@
1
+ // تابع قرار دادن سمبل انتخاب شده در نقطه مورد نظر
2
+ export default function insertSymbol({ container, symbolNode, x, y, w, h, freq, intens }) {
3
+ symbolNode.setAttribute("x", x - w / 2);
4
+ symbolNode.setAttribute("y", y - h / 2);
5
+ symbolNode.setAttribute("width", w);
6
+ symbolNode.setAttribute("height", h);
7
+ symbolNode.setAttribute("data-freq", freq);
8
+ symbolNode.setAttribute("data-intens", intens);
9
+ container.appendChild(symbolNode);
10
+ }
package/src/Symbol/symbolChart.js ADDED
@@ -0,0 +1,47 @@
1
+ // وارد کردن داده‌های سراسری
2
+ // import { r, svgNS } from "../../globalinfo.js";
3
+ import insertSymbol from "./insertSymbol.js";
4
+ // رسم پنل سمبل ها
5
+ const svgNS = "http://www.w3.org/2000/svg";
6
+
7
+ export default function symbolChart({ container, side = "R", x, y, symbols }) {
8
+
9
+ const w = 240;
10
+ const h = 60;
11
+ const svg = document.createElementNS(svgNS, "svg");
12
+ // svg.setAttribute("id", id);
13
+ svg.setAttribute("width", w);
14
+ svg.setAttribute("height", h);
15
+ svg.setAttribute("viewBox", "-6 -6 48 12");
16
+ svg.setAttribute("style", "border: 1px solid blue; user-select: none;");
17
+
18
+ let dx = 12
19
+ x = 0;
20
+ y = 0;
21
+
22
+ const symbolNames = {
23
+ R: ["R_AC", "R_BC", "R_AC_M", "R_BC_M"],
24
+ L: ["L_AC", "L_BC", "L_AC_M", "L_BC_M"]
25
+ };
26
+ const metadata = side + "SymbolChart";
27
+ // اجرای تابع رسم سمبل در چارت در یک حلقه تکرار
28
+ for (let i = 0; i < 4; i++) {
29
+ const id = `${symbolNames[side][i]}-SymbolChart`;
30
+
31
+ insertSymbol({ container: svg, symbolNode: symbols[symbolNames[side][i]], x: x, y: y, w: 12, h: 12 })
32
+ // insertSymbol({
33
+ // container: svg, metadata: metadata,
34
+ // dataID: id, id: id, class: symbolNames[side][i], symbol: symbolNames[side][i],
35
+ // x: x, y: y, w: 12, h: 12
36
+ // });
37
+ x += dx;
38
+ }
39
+
40
+ container.appendChild(svg);
41
+
42
+ return svg;
43
+ }
44
+
45
+
46
+
47
+
package/src/common/putBox.js ADDED
File without changes
package/src/common/putLine.js ADDED
@@ -0,0 +1,17 @@
1
+ // تابع رسم خط
2
+ const svgNS = "http://www.w3.org/2000/svg";
3
+
4
+ export default function putLine({ container, x1, y1, x2, y2, style = 'stroke: black; stroke-width: 0.5;', name }) {
5
+
6
+ let line = document.createElementNS(svgNS, "line");
7
+ line.setAttribute("x1", x1);
8
+ line.setAttribute("y1", y1);
9
+ line.setAttribute("x2", x2);
10
+ line.setAttribute("y2", y2);
11
+ line.setAttribute("style", style)
12
+ line.setAttribute("data-name", name)
13
+ // line.setAttribute("stroke", "black");
14
+ // line.setAttribute("stroke-width", 0.5);
15
+ container.appendChild(line);
16
+
17
+ }
package/src/common/putPoint.js ADDED
@@ -0,0 +1,13 @@
1
+ const svgNS = "http://www.w3.org/2000/svg";
2
+
3
+ export default function putPoint({ container, x, y, r = 0.1, style = 'color: red; ', color = 'black', fill = 'black' }) {
4
+ let circle = document.createElementNS(svgNS, "circle");
5
+ circle.setAttribute("cx", x);
6
+ circle.setAttribute("cy", y);
7
+ circle.setAttribute("r", r);
8
+ circle.setAttribute("stroke", color);
9
+ circle.setAttribute("fill", fill);
10
+ circle.setAttribute("stroke-width", 0)
11
+ container.appendChild(circle);
12
+ return circle;
13
+ }
package/src/common/putRect.js ADDED
@@ -0,0 +1,14 @@
1
+ const svgNS = "http://www.w3.org/2000/svg";
2
+
3
+ export default function putRect({ container, x, y, width, height, style = 'fill: transparent; stroke: green; stroke-width: 0.5;', name }) {
4
+ let rect = document.createElementNS(svgNS, "rect");
5
+ rect.setAttribute("x", x);
6
+ rect.setAttribute("y", y);
7
+ rect.setAttribute("width", width);
8
+ rect.setAttribute("height", height);
9
+ rect.setAttribute("style", style);
10
+ rect.setAttribute("data-name", name);
11
+ container.appendChild(rect);
12
+ return rect;
13
+
14
+ }
package/src/common/putText.js ADDED
@@ -0,0 +1,16 @@
1
+ const svgNS = "http://www.w3.org/2000/svg";
2
+
3
+ // متن اس‌وی‌جی
4
+ export default function putText({ container, value = '', x, y, id, dx = 0, dy = 0, style, name }) {
5
+ let text = document.createElementNS(svgNS, "text");
6
+ text.setAttribute("data-name", name)
7
+ text.setAttribute("style", style);
8
+ // text.setAttribute("dominant-baseline", "middle"); // تراز عمودی
9
+ // text.setAttribute("fill", color);
10
+ text.setAttribute("x", x + dx);
11
+ text.setAttribute("y", y + dy);
12
+ // آی دی برای تکست ها میذاریم و خط پایین میره داخل تابع آپدیت دیتای اسپیچ
13
+ text.innerHTML = value;
14
+ container.appendChild(text);
15
+ return text;
16
+ }
package/src/common/putTopLayer.js ADDED
@@ -0,0 +1,18 @@
1
+ const svgNS = "http://www.w3.org/2000/svg";
2
+
3
+ // این لایه بالایی برای شناسایی توسط کلیک لیسنر استفاده میشود
4
+ export default function drawTopLayer({ container, dims }) {
5
+ dims.forEach((dim) => {
6
+ // بوردر راهنما
7
+ const rect = document.createElementNS(svgNS, "rect");
8
+ rect.setAttribute("x", dim.x);
9
+ rect.setAttribute("y", dim.y);
10
+ rect.setAttribute("width", dim.width);
11
+ rect.setAttribute("height", dim.height);
12
+ rect.setAttribute("fill", "transparent");
13
+ rect.setAttribute("stroke", "transparent");
14
+ // rect.setAttribute("stroke-width", "1mm");
15
+ rect.setAttribute("data-name", dim.name);
16
+ container.appendChild(rect);
17
+ });
18
+ }
package/src/counter.js ADDED
@@ -0,0 +1,9 @@
1
+ export function setupCounter(element) {
2
+ let counter = 0
3
+ const setCounter = (count) => {
4
+ counter = count
5
+ element.innerHTML = `count is ${counter}`
6
+ }
7
+ element.addEventListener('click', () => setCounter(counter + 1))
8
+ setCounter(0)
9
+ }
package/src/dims.js ADDED
@@ -0,0 +1,84 @@
1
+ // for
2
+ const dims = {
3
+ name: 'Audiogram',
4
+ // پس از اضافه کردن هر آیتم در زیر این تمپلت رو هم آپدیت کنید
5
+ template: {
6
+ margin: { left: 0, top: 0, }, // در کانتینر دیو این عمل نمیکنه. مگر در کانتینر اس وی جی بذاریم
7
+
8
+ width: 700,
9
+ height: 700,
10
+
11
+ chartPadding: { left: 30, top: 45, right: 30, bottom: 10 },
12
+ symbolDims: { width: 55, height: 55 },
13
+ // virtual frequency
14
+ vFrequency: { min: 0, max: 14, step: 1 },
15
+ vToFreq: { 0: 125, 2: 250, 4: 500, 5: 750, 6: 1000, 7: 1500, 8: 2000, 9: 3000, 10: 4000, 11: 6000, 12: 8000, 13: 12000, 14: 16000 },
16
+ freqToV: { 125: 0, 250: 2, 500: 4, 750: 5, 1000: 6, 1500: 7, 2000: 8, 3000: 9, 4000: 10, 6000: 11, 8000: 12, 12000: 13, 16000: 14 },
17
+ intensity: { min: -20, max: 120, step: 10 },
18
+
19
+ styles: {
20
+ line: ``,
21
+ juncDashLine: ``,
22
+ juncLine: ``,
23
+ }
24
+ },
25
+
26
+ display: {
27
+ margin: { left: 0, top: 0, }, // در کانتینر دیو این عمل نمیکنه. مگر در کانتینر اس وی جی بذاریم
28
+
29
+ width: 700,
30
+ height: 700,
31
+
32
+ chartPadding: { left: 30, top: 45, right: 30, bottom: 10 }, // این فاصله خطوط جدول از لبه ها هست
33
+ symbolDims: { width: 55, height: 55 },
34
+ // virtual frequency
35
+ vFrequency: { min: 0, max: 14, step: 1 },
36
+ vToFreq: { 0: 125, 2: 250, 4: 500, 5: 750, 6: 1000, 7: 1500, 8: 2000, 9: 3000, 10: 4000, 11: 6000, 12: 8000, 13: 12000, 14: 16000 },
37
+ freqToV: { 125: 0, 250: 2, 500: 4, 750: 5, 1000: 6, 1500: 7, 2000: 8, 3000: 9, 4000: 10, 6000: 11, 8000: 12, 12000: 13, 16000: 14 },
38
+ intensity: { min: -20, max: 130, step: 10 },
39
+
40
+ styles: {
41
+ line: `stroke: black; stroke-width: 1;`,
42
+ juncDashLine: `stroke-width: 1 ; stroke-opacity: 0.8; stroke-dasharray: 4;`,
43
+ juncLine: `stroke-width: 1; stroke-opacity: 0.8;`,
44
+ }
45
+ },
46
+ rasa: {
47
+ // width: 70.6,
48
+ // height: 70,
49
+ // margin: { left: 17, top: 18.5, },
50
+ chartPadding: { left: 0, top: 0, right: 0, bottom: 0 },
51
+ symbolDims: { width: 8, height: 8 },
52
+ // virtual frequency
53
+ vFrequency: { min: 0, max: 14, step: 1 },
54
+ vToFreq: { 0: 125, 2: 250, 4: 500, 5: 750, 6: 1000, 7: 1500, 8: 2000, 9: 3000, 10: 4000, 11: 6000, 12: 8000, 13: 12000, 14: 16000 },
55
+ freqToV: { 125: 0, 250: 2, 500: 4, 750: 5, 1000: 6, 1500: 7, 2000: 8, 3000: 9, 4000: 10, 6000: 11, 8000: 12, 12000: 13, 16000: 14 },
56
+ intensity: { min: -20, max: 120, step: 10 },
57
+
58
+ styles: {
59
+ line: `stroke: black; stroke-width: 0.1;`,
60
+ juncDashLine: `stroke-width: 0.1 ; stroke-opacity: 0.8; stroke-dasharray: 0.5;`,
61
+ juncLine: `stroke-width: 0.2; stroke-opacity: 0.8;`,
62
+ }
63
+ },
64
+ combo: {
65
+ // width: 50,
66
+ // height: 40,
67
+ // margin: { left: 5, top: 5, right: 5, bottom: 5 },
68
+ chartPadding: { left: 8, top: 8, right: 5, bottom: 3 },
69
+ symbolDims: { width: 8, height: 8 },
70
+ // virtual frequency
71
+ vFrequency: { min: 0, max: 14, step: 1 },
72
+ vToFreq: { 0: 125, 2: 250, 4: 500, 5: 750, 6: 1000, 7: 1500, 8: 2000, 9: 3000, 10: 4000, 11: 6000, 12: 8000, 13: 12000, 14: 16000 },
73
+ freqToV: { 125: 0, 250: 2, 500: 4, 750: 5, 1000: 6, 1500: 7, 2000: 8, 3000: 9, 4000: 10, 6000: 11, 8000: 12, 12000: 13, 16000: 14 },
74
+ intensity: { min: -20, max: 120, step: 10 },
75
+
76
+ styles: {
77
+ line: `stroke: black; stroke-width: 0.1;`,
78
+ juncDashLine: `stroke-width: 0.1 ; stroke-opacity: 0.8; stroke-dasharray: 0.5;`,
79
+ juncLine: `stroke-width: 0.2; stroke-opacity: 0.8;`,
80
+ }
81
+ }
82
+ }
83
+
84
+ export default dims;
package/src/javascript.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>
package/src/main.js ADDED
@@ -0,0 +1,74 @@
1
+ import './style.css'
2
+
3
+ import AudiogramChart from "./Audiogram"
4
+ import dims from './dims.js'
5
+
6
+
7
+ // import javascriptLogo from './javascript.svg'
8
+ // import viteLogo from '/vite.svg'
9
+ // import { setupCounter } from './counter.js'
10
+
11
+ // document.querySelector('#app').innerHTML = `
12
+ // <div>
13
+ // <a href="https://vite.dev" target="_blank">
14
+ // <img src="${viteLogo}" class="logo" alt="Vite logo" />
15
+ // </a>
16
+ // <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
17
+ // <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
18
+ // </a>
19
+ // <h1>Hello Vite!</h1>
20
+ // <div class="card">
21
+ // <button id="counter" type="button"></button>
22
+ // </div>
23
+ // <p class="read-the-docs">
24
+ // Click on the Vite logo to learn more
25
+ // </p>
26
+ // </div>
27
+ // `
28
+
29
+ // setupCounter(document.querySelector('#counter'))
30
+
31
+
32
+ document.querySelector('#app').innerHTML = `
33
+ <p>Mahdi</p>
34
+ <p>Ali Moosavi</p>
35
+ <div id="audiogram-div"></div>
36
+ `
37
+
38
+ const RAudiogram = new AudiogramChart({
39
+ container: document.getElementById('audiogram-div'),
40
+ dims: dims.display,
41
+ side: 'R', x: 0, y: 0,
42
+ width: 700, height: 800, events: true
43
+ })
44
+
45
+ const LAudiogram = new AudiogramChart({
46
+ container: document.getElementById('audiogram-div'),
47
+ dims: dims.display,
48
+ side: 'L', x: 0, y: 0,
49
+ width: 700, height: 800, events: true
50
+ })
51
+
52
+ RAudiogram.update({
53
+ data: {
54
+ // R_AC_M: { 8000: 25, 2000: 5, 1500: 0, },
55
+ R_AC: { 1000: 25, 500: 15, 750: 20, 250: 10, 6000: 35, 2000: 45 },
56
+ R_AC_NR: { 1500: 85 },
57
+ R_BC_M: { 2000: 25, 6000: 25 },
58
+ R_BC_M_NR: { 3000: 85 },
59
+ R_BC: { 1000: 20, 500: 10, 750: 15, 250: 5, 4000: 20 },
60
+ },
61
+ side: 'R',
62
+ })
63
+
64
+ LAudiogram.update({
65
+ data: {
66
+ // R_AC_M: { 8000: 25, 2000: 5, 1500: 0, },
67
+ L_AC: { 1000: 25, 500: 15, 750: 20, 250: 10, 6000: 35, 2000: 45 },
68
+ L_AC_NR: { 1500: 85 },
69
+ L_BC_M: { 2000: 25, 6000: 25 },
70
+ L_BC_M_NR: { 3000: 85 },
71
+ L_BC: { 1000: 20, 500: 10, 750: 15, 250: 5, 4000: 20 },
72
+ },
73
+ side: 'L',
74
+ })
package/src/note.html ADDED
File without changes
package/src/style.css ADDED
@@ -0,0 +1,96 @@
1
+ :root {
2
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3
+ line-height: 1.5;
4
+ font-weight: 400;
5
+
6
+ color-scheme: light dark;
7
+ color: rgba(255, 255, 255, 0.87);
8
+ background-color: #242424;
9
+
10
+ font-synthesis: none;
11
+ text-rendering: optimizeLegibility;
12
+ -webkit-font-smoothing: antialiased;
13
+ -moz-osx-font-smoothing: grayscale;
14
+ }
15
+
16
+ a {
17
+ font-weight: 500;
18
+ color: #646cff;
19
+ text-decoration: inherit;
20
+ }
21
+ a:hover {
22
+ color: #535bf2;
23
+ }
24
+
25
+ body {
26
+ margin: 0;
27
+ display: flex;
28
+ place-items: center;
29
+ min-width: 320px;
30
+ min-height: 100vh;
31
+ }
32
+
33
+ h1 {
34
+ font-size: 3.2em;
35
+ line-height: 1.1;
36
+ }
37
+
38
+ #app {
39
+ max-width: 1280px;
40
+ margin: 0 auto;
41
+ padding: 2rem;
42
+ text-align: center;
43
+ }
44
+
45
+ .logo {
46
+ height: 6em;
47
+ padding: 1.5em;
48
+ will-change: filter;
49
+ transition: filter 300ms;
50
+ }
51
+ .logo:hover {
52
+ filter: drop-shadow(0 0 2em #646cffaa);
53
+ }
54
+ .logo.vanilla:hover {
55
+ filter: drop-shadow(0 0 2em #f7df1eaa);
56
+ }
57
+
58
+ .card {
59
+ padding: 2em;
60
+ }
61
+
62
+ .read-the-docs {
63
+ color: #888;
64
+ }
65
+
66
+ button {
67
+ border-radius: 8px;
68
+ border: 1px solid transparent;
69
+ padding: 0.6em 1.2em;
70
+ font-size: 1em;
71
+ font-weight: 500;
72
+ font-family: inherit;
73
+ background-color: #1a1a1a;
74
+ cursor: pointer;
75
+ transition: border-color 0.25s;
76
+ }
77
+ button:hover {
78
+ border-color: #646cff;
79
+ }
80
+ button:focus,
81
+ button:focus-visible {
82
+ outline: 4px auto -webkit-focus-ring-color;
83
+ }
84
+
85
+ @media (prefers-color-scheme: light) {
86
+ :root {
87
+ color: #213547;
88
+ background-color: #ffffff;
89
+ }
90
+ a:hover {
91
+ color: #747bff;
92
+ }
93
+ button {
94
+ background-color: #f9f9f9;
95
+ }
96
+ }