javascript - How to implement a html file into a python tkinter window?

so i wanted to implement my html webpage project into a python tkinter window, using tkinter html view.

but when i attempted to do exactly that, i get this (python tkinter window) what im geting

but this is how i originally made it to look like (in browser, the colors are messed up because of my client side settings) supposed to look like

so here is my python code in “app.py”:

import tkinter as tk
from tkhtmlview import HTMLText, RenderHTML

root = tk.Tk()
root.title("Youtube")
root.geometry("1200x600")
html_label = HTMLText(root, html=RenderHTML('OpenMe.html'))
html_label.pack(fill="both", expand=True)
html_label.fit_height()
root.mainloop()

and here is my html “OpenMe.html” code:


<html lang="en">
  <head>
      
      <!--
            page version number 16.10
        -->
      
    <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>HTML GIZMO!</title>
      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
      <style>
        
          
          .buttn {
            transition: 0.2s;
            height: 100px;
            width: 200px;
            color: white;
            border-color: black;
            border-radius: 15px;
            background-color: transparent;
            border-width: 3px;
            click: pointer;
        }
        
        button {
            transition: 0.2s;
            height:100px;
            width:200px;
            color: white;
            border-color: white;
            border-radius: 15px;
            background-color: transparent;
            border-width: 2px;
        }
        
        button:hover {
            transition: 0.2s;
            height:150px;
            width:300px;
            color: black;
            border-color: white;
            border-radius: 15px;
            background-color: white;
            border-width: 2px;
        }
        
        .buttn:hover {
            transition: 0.2s;
            height:150px;
            width:250px;
            color: white;
            border-color: white;
            border-radius: 15px;
            background-color: transparent;
            border-width: 2px;
        }
          
          
          
        body {
          margin: 0;
          padding: 0;
          font-family: 'Roboto', sans-serif;
        }
          
          hr {
        width: 15%;
        margin-left: auto;
        margin-right: auto;
      }
          
         .title { font-size: 80px; }

                .navi {
            transition: 0.2s;
            height:50px;
            width:100px;
            color: white;
            border-color: white;
            border-radius: 15px;
            background-color: transparent;
            border-width: 2px;
        }
        
        .navi:hover {
            transition: 0.2s;
            height:75px;
            width:150px;
            color: black;
            border-color: white;
            border-radius: 15px;
            background-color: white;
            border-width: 2px;
        }
          
          </style>
    <script>

        function hm(){
            location.href="./OpenMe.html"
        }
        function game(){
            location.href="./games/games.html"
        }
        function tools(){
            location.href="./tools/tools.html"  
        }
        function sett(){
            location.href="./settings.html" 
        }
        function cre(){
            location.href="./info/credits.html" 
        }
        
function Startup(){
    //Time//
    const date = new Date();
    const hour = date.getHours();
    const mins = date.getMinutes();
    document.getElementById("CConsole").innerHTML = hour+":"+mins;  
}
        
    </script>
  </head>
   <body bgcolor="#050505" onload="Startup();">
       <center><nav><font color = "white">
           <br>
            <button class="navi" style="background-color:white;color:black;" onclick="hme();">Home</button>   <button class="navi" onclick="game();">Games</button> <button class="navi" onclick="tools();">Tools</button> <button class="navi" onclick="cre();"> Updates </button>
           
       </nav></center>
      <center><p class="title"><font color="lime"> H<font color="blue">T<font color="purple">M<font color="red">L<font color="orange"> G<font color="orange">I<font color="lime">Z<font color="red">M<font color="orange">O<font color="yellow">!<font color="white"></p>
          <h1>What's New:</h1>
          -Made UI Changes<br>
          -Added a New Game<br>
          -Fixed Bugs
          <font color="grey"><h4><center>Version 0.1.10.00.000</center></h4></center>
  </body>
</html>

can someone with this pleasae? i am pretty new to python and especially tkinter it would really help alot!

Source link