Skip to content

Commit 7c60c04

Browse files
codeIntrovertcodeIntrovert
committed
view port Ui completed, added
1 parent c9fb285 commit 7c60c04

File tree

9 files changed

+122
-55
lines changed

9 files changed

+122
-55
lines changed

‎app.py‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
from routes.browse_routes import browse_blueprint
44
from routes.error_routes import error_blueprint
55
from routes.login_routes import login_blueprint
6-
import data, menuData
6+
from routes.view_routes import view_blueprint
7+
78

89
app = Flask(__name__)
910

@@ -12,6 +13,7 @@
1213
app.register_blueprint(browse_blueprint)
1314
app.register_blueprint(error_blueprint)
1415
app.register_blueprint(login_blueprint)
16+
app.register_blueprint(view_blueprint)
1517

1618
if __name__ == '__main__':
1719
app.run()

‎routes/view_routes.py‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
from flask import Blueprint, render_template, request
2+
3+
4+
view_blueprint = Blueprint('view', __name__)
5+
6+
@view_blueprint.route('/view')
7+
def login():
8+
theme_preference = request.cookies.get('theme', 'light') # Default to 'light' if cookie not found
9+
theme_css = theme_preference + "_theme" # Assuming your CSS files are named "light_theme.css" and "dark_theme.css
10+
11+
return render_template('view.html', theme_css=theme_css)

‎static/assets/images/play.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎static/assets/js/custom.js‎

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -29,24 +29,7 @@
2929
var header = $('header').height();
3030
});
3131

32-
$('.filters ul li').click(function(){
33-
$('.filters ul li').removeClass('active');
34-
$(this).addClass('active');
35-
36-
var data = $(this).attr('data-filter');
37-
$grid.isotope({
38-
filter: data
39-
})
40-
});
41-
42-
var $grid = $(".grid").isotope({
43-
itemSelector: ".all",
44-
percentPosition: true,
45-
masonry: {
46-
columnWidth: ".all"
47-
}
48-
})
49-
32+
5033
var width = $(window).width();
5134
$(window).resize(function() {
5235
if (width > 992 && $(window).width() < 992) {

‎static/assets/js/isotope.js‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎static/assets/js/isotope.min.js‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎static/assets/js/popup.js‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎templates/layout.html‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -128,11 +128,8 @@
128128
<!-- Bootstrap core JavaScript -->
129129
<script src="{{ url_for('static', filename='vendor/jquery/jquery.min.js') }}"></script>
130130
<script src="{{ url_for('static', filename='vendor/bootstrap/js/bootstrap.min.js') }}"></script>
131-
132-
<script src="{{ url_for('static', filename='assets/js/isotope.min.js') }}"></script>
133-
<script src="{{ url_for('static', filename='assets/js/owl-carousel.js') }}"></script>
134131
<script src="{{ url_for('static', filename='assets/js/tabs.js') }}"></script>
135-
<script src="{{ url_for('static', filename='assets/js/popup.js') }}"></script>
132+
136133
<script src="{{ url_for('static', filename='assets/js/custom.js') }}"></script>
137134
<!-- Include jQuery library if not already included in your project -->
138135
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

‎templates/view.html‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
{% extends 'layout.html' %}
2+
{% block content %}
3+
<style>
4+
.thumb {
5+
position: relative;
6+
display: inline-block;
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
}
11+
12+
#customPlayer{
13+
border-radius: 22px;
14+
}
15+
16+
.thumb .play-button {
17+
position: absolute;
18+
top: 50%;
19+
left: 50%;
20+
transform: translate(-50%, -50%);
21+
width: 64px;
22+
height: 64px;
23+
background-image: url('static/assets/images/play.svg');
24+
background-repeat: no-repeat;
25+
background-size: contain;
26+
cursor: pointer;
27+
z-index: 999;
28+
}
29+
30+
31+
</style>
32+
<!-- ***** Featured Start ***** -->
33+
<div class="row">
34+
<div class="col-lg-12">
35+
<div class="feature-banner header-text">
36+
<div class="row">
37+
<div class="col-lg-10 mx-auto">
38+
<div class="thumb">
39+
<img id="customPlayer" src="http://img.youtube.com/vi/2fAv4kWLp8w/maxresdefault.jpg" alt="Video Thumbnail">
40+
<div class="play-button"></div>
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
48+
<script>
49+
const thumbContainer = document.querySelector('.thumb');
50+
const playButton = thumbContainer.querySelector('.play-button');
51+
52+
playButton.addEventListener('click', () => {
53+
thumbContainer.innerHTML = `<iframe id="customPlayer" width="800" height="450" src="https://www.youtube.com/embed/2fAv4kWLp8w?si=877EEZaHF5J0NjmT&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`;
54+
});
55+
</script>
56+
<!-- ***** Featured End ***** -->
57+
58+
<!-- ***** Details Start ***** -->
59+
<div class="game-details">
60+
<div class="row">
61+
<div class="col-lg-12">
62+
<h2>Fortnite Details</h2>
63+
</div>
64+
<div class="col-lg-12">
65+
<div class="content">
66+
<div class="row">
67+
<div class="col-lg-6">
68+
<div class="left-info">
69+
<div class="left">
70+
<h4>Fortnite</h4>
71+
<span>Sandbox</span>
72+
</div>
73+
<ul>
74+
<li><i class="fa fa-star"></i> 4.8</li>
75+
<li><i class="fa fa-download"></i> 2.3M</li>
76+
</ul>
77+
</div>
78+
</div>
79+
<div class="col-lg-6">
80+
<div class="right-info">
81+
<ul>
82+
<li><i class="fa fa-star"></i> 4.8</li>
83+
<li><i class="fa fa-download"></i> 2.3M</li>
84+
<li><i class="fa fa-server"></i> 36GB</li>
85+
<li><i class="fa fa-gamepad"></i> Action</li>
86+
</ul>
87+
</div>
88+
</div>
89+
<div class="col-lg-12">
90+
<p>Cyborg Gaming is free HTML CSS website template provided by TemplateMo. This is Bootstrap v5.2.0 layout. You can make a <a href="https://paypal.me/templatemo" target="_blank">small contribution via PayPal</a> to info [at] templatemo.com and thank you for supporting. If you want to get the PSD source files, please contact us. Lorem ipsum dolor sit consectetur es dispic dipiscingei elit, sed doers eiusmod lisum hored tempor.</p>
91+
</div>
92+
<div class="col-lg-12">
93+
<div class="main-border-button">
94+
<a href="#">Download Fortnite Now!</a>
95+
</div>
96+
</div>
97+
</div>
98+
</div>
99+
</div>
100+
</div>
101+
</div>
102+
<!-- ***** Details End ***** -->
103+
104+
105+
{% endblock %}

0 commit comments

Comments
 (0)