now ready

app.py

@@ -0,0 +1,31 @@
+from flask import Flask,render_template,request
+import pickle
+
+app = Flask(__name__, template_folder='templates', static_folder='static', static_url_path='/')
+
+with open('model/homedf.pkl', 'rb') as file:
+    homedf = pickle.load(file)
+with open('model/Maindf.pkl', 'rb') as file:
+    Maindf = pickle.load(file)
+
+@app.route('/')
+def home():
+    return render_template("home.html",
+                           title = list(homedf["title"].values),
+                           image = list(homedf["thumbnail"].values),
+                           short_description = list(homedf["short_description"].values),
+                           game_url = list(homedf["game_url"].values),
+                           genre = list(homedf["genre"].values),
+                           platform = list(homedf["platform"].values),
+                           publisher = list(homedf["publisher"].values),
+                           developer = list(homedf["developer"].values),
+                           release_date = list(homedf["release_date"].values),
+                           freetogame_profile_url = list(homedf["freetogame_profile_url"].values),
+                           )
+
+@app.route('/genre')
+def genre():
+    pass
+
+if __name__ == "__main__":
+    app.run(host='0.0.0.0', debug=True)

dockerfile

@@ -6,8 +6,12 @@ WORKDIR /Game-recommender
 
 # Copy necessary files into the container
 COPY requirements.txt requirements.txt
+COPY app.py app.py
 COPY model model
-COPY Webapp Webapp
+COPY Dataset Dataset
+COPY templates templates
+COPY static static
+COPY Utility Utility
 
 # Install dependencies
 RUN pip install --no-cache-dir -r requirements.txt
@@ -16,4 +20,4 @@ RUN pip install --no-cache-dir -r requirements.txt
 EXPOSE 5000
 
 # Set the default command to run the Flask app
-CMD ["python", "Webapp/app.py"]
+CMD ["python", "app.py"]

static/home.css

@@ -0,0 +1,170 @@
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    background-color: rgb(36, 41, 46);
+    margin: 0;
+}
+
+a:link {
+    color: white;
+    /* Unvisited link */
+}
+
+a:visited {
+    color: white;
+    /* Visited link */
+}
+
+a:hover {
+    color: white;
+    /* On mouse hover */
+}
+
+a:active {
+    color: white;
+    /* Active (clicked) link */
+}
+
+div.container1 {
+    padding: 20px 23px 0px 23px;
+}
+
+header.navBar {
+    display: flex;
+    justify-content: space-between;
+}
+
+a.logo {
+    font-size: 2.2em;
+    display: flex;
+    gap: 8px;
+    text-decoration: none;
+    align-items: center;
+}
+
+span.greyColor {
+    color: gray;
+}
+
+a span.logoName {
+    font-family: "Bonheur Royale", serif;
+    font-weight: 900;
+    font-size: 2.5rem;
+    font-style: normal;
+    color: #ffd000;
+}
+
+ul.menu {
+    display: flex;
+    gap: 20px;
+    list-style-type: none;
+    font-family: "Jaro", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+
+}
+.hed{
+    font-family: "Jaro", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+    margin: 70px 70px;
+    text-align: center;
+    font-size: 3rem;
+}
+
+ul.menu li a:hover {
+    color: #20ff00;
+    transform: translateY(-3px);
+    transition: all .3s ease 0s;
+
+}
+
+.decoration {
+    text-decoration: none;
+}
+
+div.container2 h3{
+    font-family: "Jaro", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+}
+div.container2 {
+    display: flex;
+    flex-direction: row;
+    margin: 70px 70px;
+justify-content: center;
+    font-style: normal;
+    flex-wrap: wrap;
+}
+
+div.card {
+    width: 15vw;
+    margin: 5px 5px 5px 5px;
+    padding: 30px 30px 30px 30px;
+    border: 1px solid gray;
+    border-radius: 12px;
+    box-sizing: border-box;
+    height: 50vh;
+}
+
+div.card img {
+    width: 232px;
+    border-radius: 12px;
+    /* margin-left: 25px; */
+    height: 140px;
+  }
+
+.long-text {
+    overflow-wrap: break-word; /* Wrap long words */
+    white-space: normal;
+  }
+.dot{
+    overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+  
+
+.containerContactMe7{
+    display: flex;
+    /* justify-content:baseline ; */
+    margin: 60px 60px 60px 250px;
+    
+    
+}
+.name{
+    display: flex;
+    align-items: center;
+}
+
+
+i{
+    margin: 12px;
+    font-size: 40px;
+}
+.AboutMain{
+    font-family: "Jaro", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+}
+.rel{
+    font-size: .9rem;
+}
+
+div.btn{
+    display: flex;
+    gap: 20px;
+    margin-top: 30px;
+}
+.pad{
+    padding: 2px 12px 4px 12px;
+    border: none;
+    border-radius: 5px;
+    background-color: #4f0;
+
+}

templates/home.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Bonheur+Royale&display=swap" rel="stylesheet">
+
+    <link href="https://fonts.googleapis.com/css2?family=Lacquer&display=swap" rel="stylesheet">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Jaro:opsz@6..72&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='MainStyle.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='home.css') }}">
+    <title>Game_Recommender</title>
+</head>
+
+<body>
+    <div class="container1">
+        <header class="navBar">
+            <a href="/" class="logo">
+                <span class="greyColor">
+
+                    <span class="logoName">Game_Recommender</span>
+
+
+            </a>
+            <ul class="menu">
+                <li><a href="{{ url_for('home') }}" class="decoration">Home</a></li>
+                <li><a href="" class="decoration">Blank</a></li>
+                <li><a href="#Contact" class="decoration">Contact me</a></li>
+            </ul>
+        </header>
+    </div>
+    <h1 class="hed">Some Top Free Games </h1>
+    <hr style="width: 70%;">
+    <div class="container2">
+        
+        {% for i in range(title|length) %}
+        <div class="card">
+            <img src="{{ image[i] }}" alt="">
+            <h3 class="long-text" >{{ title[i] }}</h3>
+            <p class="dot , rel">Developer : {{ developer[i] }}</p>
+            <p class="long-text , rel">Genre : {{ genre[i] }}</p>
+            <p class="long-text ,rel">Platform : {{ platform[i] }}</p>
+            <p class="long-text , rel">Release date : {{ release_date[i] }}</p>
+            <div class="btn">
+                <button class="pad"><a href="{{ game_url[i] }}" target="_blank" style="text-decoration: none; color: rgb(91, 31, 148);">Game</a></button>
+                <button class="pad"><a href="{{ freetogame_profile_url[i] }}" target="_blank" style="text-decoration: none; color: rgb(91, 31, 148)">Profile</a></button>
+            </div>
+        </div>
+        {% endfor %}
+
+        
+
+    </div>
+    <div class="containerContactMe7">
+        <div class="greetDivision">
+        <div class="left">
+            <div class="name">
+                <h1 style="font-size: 3rem;" id="Contact">Contact Me</h1> 
+                <img alt="☎️" draggable="false" src="https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/72x72/260e.png" style="height: 4em; width: 4em; margin: 0px 0.05em 0px 3.1em; vertical-align: -0.1em;">
+            </div>
+            <h3 class="AboutMain">Discuss a project or just want to say hi? My Inbox is open for all.</h3>
+            <h1 style="font-size: 2rem;">Ayushaiml14@gmail.com</h1>
+            <div class="ContactsContainer1">
+                <a href="https://github.com/AyushAI14" target="_blank"><i
+                        class="fa-brands fa-square-github"></i></a>
+                <a href="https://www.linkedin.com/in/ayush-vishwakarma-a2450a28b/" target="_blank"><i
+                        class="fa-brands fa-linkedin"></i></a>
+                <a href="mailto:ayushaiml14@gmail.com" target="_blank"><i class="fa-solid fa-envelope"></i></a>
+            </div>
+        </div>
+        
+    </div>
+    <script src="https://kit.fontawesome.com/73c3b1fe1f.js" crossorigin="anonymous"></script>
+
+</body>
+
+</html>