VideoEditor.htmlの内容がelectronに反映されない。

実現したいこと

(久しぶりのテラテイルでの質問なので情報が足りなかったらすみません。)
とりあえず解決してほしいことはVideoEditor.htmlのタブの内容をelectronというわかりやすく言ったらタブに反映させたいです。まず全体としてはVideoEditorというフォルダがありその中にもう１つ
my-electron-appというフォルダがあります。
そのフォルダの中は
VideoEditor.html
videoConverter.js
video_editor_functions.js
styles.css
script.js
package.json
package-lock.json
node_modules
myenv
main.js
index.html
a1_functions.js
というものがあり(いらないだろうなと思うものは飛ばします。たとえばmyenvとか)上から順に　script.jsの内容は
document.addEventListener('DOMContentLoaded', function() {
var tabContainer = document.querySelector('.tab-container');
tabContainer.addEventListener('click', function() {
this.classList.toggle('open');
});
});
です。
package.jsonの内容は
{
"name": "my-electron-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"dependencies": {
"electron": "^15.0.0"
}
です。
main.jsの内容は
const { app, BrowserWindow } = require('electron');

function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});

mainWindow.loadFile('index.html'); // ここで表示するファイルを指定

// その他の設定や処理

// ウィンドウが閉じられた際の処理
mainWindow.on('closed', () => {
app.quit();
});
}

app.on('ready', createWindow);

// その他のイベントハンドラや設定
です。
index.htmlの内容は

My Electron AppWelcome to Automatic Video Editing AI Your content here... です。 VideoEditor.htmlの内容は Video editor .tab-container { /* A1の枠 */ width: 700px; /* 幅 */ height: calc(700px * 9 / 16); /* 16:9の比率に合わせて高さを計算 */ border: 1px solid #ccc; /* 枠線を追加 */ padding: 20px; /* タブと内部の余白を追加 */ display: flex; /* flexbox を使ってレイアウトを調整 */ position: relative; /* 相対位置指定 */ right: -230px; justify-content: center; /* 水平方向中央揃え */ align-items: center; /* 垂直方向中央揃え */ }

.sidebar { width: 200px; /* サイドバーの幅 */ border: 1px solid #ccc; /* サイドバーの枠線 */ padding: 20px; /* サイドバーの余白 */ height: calc(700px * 9 / 16); /* メインコンテンツと同じ高さ */ position: absolute; /* 絶対位置指定 */ right: -255px; /* A1の枠の外に配置する */ top: 0; /* 上端に配置 */ margin-top: 8px; } .file-input { margin-bottom: 20px; /* ファイル選択欄の下に余白を追加 */ } /* C1の枠 */ .edit-container { width: 740px; /* 幅 */ height: 280px; /* 高さ */ border: 1px solid #ccc; /* 枠線を追加 */ margin-left: 230px; margin-top: 10px; /* 上の余白 */ } /* H1の枠 */ .extra-container { width: 240px; /* 幅 */ height: 280px; /* 高さ */ border: 1px solid #ccc; /* 枠線を追加 */ margin-top: -282px; /* 上の余白 */ margin-left: 980px; position: absolute; /* 絶対位置指定 */ top: calc(700px * 9 / 16) + 40px; /* サイドバーの下に配置 */ } /* G1の枠 */ .new-container { width: 208px; /* A1 + sidebar + margin */ height: 435px; /* A1と同じ高さ */ border: 1px solid #ccc; /* 枠線を追加 */ position: absolute; /* 絶対位置指定 */ left: 25px; /* A1の真左に配置 */ top: 0; /* 上端に配置 */ margin-left: -10px; /* 左の余白 */ margin-top: 8px; } /* F1の枠 */ .f-container { width: 210px; /* 幅 */ height: 280px; /* 高さ */ border: 1px solid #ccc; /* 枠線を追加 */ position: absolute; /* 絶対位置指定 */ top: 453px; /* G1の真下に配置 */ left: 13px; /* C1の真左に配置 */ } </style>

ビデオを選択する document.addEventListener('DOMContentLoaded', function() { var tabContainer = document.querySelector('.tab-container'); tabContainer.addEventListener('click', function() { this.classList.toggle('open'); }); });

<link rel="stylesheet" type="text/css" href="app.css"> <script src="video_editor_functions.js"></script>

でターミナルは現在こうなっています。　
(myenv) PWDnoMacBook-Air:my-electron-app $ rm -rf node_modules
(myenv) PWDnoMacBook-Air:my-electron-app $ npm install

added 75 packages, and audited 76 packages in 3s

21 packages are looking for funding
run npm fund for details

found 0 vulnerabilities
(myenv)PWDnoMacBook-Air:my-electron-app $ npm -v
10.8.0
(myenv) PWDnoMacBook-Air:my-electron-app $ npm install -g npm@latest

changed 13 packages in 3s

24 packages are looking for funding
run npm fund for details
(myenv) PWDnoMacBook-Air:my-electron-app $ npm install electron --save-dev

up to date, audited 76 packages in 829ms

21 packages are looking for funding
run npm fund for details

found 0 vulnerabilities
(myenv) PWDnoMacBook-Air:my-electron-app $ npm start
npm error Missing script: "start"
npm error
npm error Did you mean one of these?
npm error npm star # Mark your favorite packages
npm error npm stars # View packages marked as favorites
npm error
npm error To see a list of scripts, run:
npm error npm run
npm error A complete log of this run can be found in: /Users/PWD/.npm/_logs/2024-05-20T03_42_30_519Z-debug-0.log
でですね。現状このままelectron main.jsと実行するとelectron自体は出てきますが反映されず大きい文字でHello Electronという文字だけ出てきます。

前提

実現したいことにほぼほぼ書きました。

発生している問題・エラーメッセージ

npm error Missing script: "start" npm error npm error Did you mean one of these? npm error npm star # Mark your favorite packages npm error npm stars # View packages marked as favorites npm error npm error To see a list of scripts, run: npm error npm run npm error A complete log of this run can be found in: /Users/PWD/.npm/_logs/2024-05-20T03_42_30_519Z-debug-0.log

該当のソースコード

多分JavaScript

試したこと

典型的な物でnpmを消す。再度入れる。最新のバージョンにするなど

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。