Can Rollup (used through Vite) be used with 2 simple html pages that "reference" each other ? How to configure it?

Question

I'm making a simple app that I want to run in browsers. I am using a bundler because apparently there is no other way of integrating the physics engine that I use in my app. And even though it is advertised that bundlers make developing easier I'm stuck on trying get my app to work with 2 simple html pages.

The first html is an introduction screen with a "start" button that sends you to the second page where the main app is.

On the second html there is a "restart" button that sends you back to the first html.

Both files are in the same folder.

Someone told me it was possible to configure Rollup to do this but I don't know how exactly

I tried configuring the Rollup input, here is my vite.config.js:

import { defineConfig } from 'vite';
import wasm from "vite-plugin-wasm";
import topLevelAwait from "vite-plugin-top-level-await";

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    hmr: false, // Disable hot reload on save
  },
  plugins: [
    topLevelAwait(),
    wasm()
  ],
  base: './',
    build: { 
      emptyOutDir: true,
      rollupOptions: {
        treeshake: false,
        input: {
          page1: '/Screen1.html',
          page2: '/Screen2.html'
        }
      }
    }
  }
);

Edit: I am running vite (and rollup) with the command "npm run dev" in windows' command prompt, which then diplays this :

  VITE v5.4.7  ready in 191 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

And when I connect to the local host in a browser I get a blank page