Skip to content

Commit a2de559

Browse files
drehelisdrehelis
authored
Design overhaul (#69)
1 parent 9955c48 commit a2de559

File tree

13 files changed

+3407
-481
lines changed

13 files changed

+3407
-481
lines changed

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,10 @@ Join the notification #channel on [Telegram](https://t.me/sammy_ofer_notificatio
1818

1919
## Web-UI
2020

21-
![Web-UI screenshot](screen.png)
21+
<img src="img/screenshot.png">
22+
<p align="center">
23+
<img src="img/screenshot_mobile.png" width="400" height="888"/>
24+
</p>
2225

2326
## Static landing page ([link](https://drehelis.github.io/sammy_ofer/static.html))
2427

‎html_templates/action.html‎

Lines changed: 569 additions & 161 deletions
Large diffs are not rendered by default.

‎html_templates/base.html‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<html dir="rtl" lang="he">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6+
<meta name="theme-color" content="#1a73e8">
7+
<title>{% block title %}אצטדיון סמי עופר{% endblock %}</title>
8+
9+
<!-- jQuery -->
10+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
11+
12+
<!-- Font Awesome for icons -->
13+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
14+
15+
<!-- Main Styles -->
16+
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
17+
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='action.css') }}?v=2">
18+
19+
{% block extra_css %}{% endblock %}
20+
</head>
21+
<body>
22+
<!-- Top App Bar -->
23+
<header class="app-bar">
24+
<div class="app-bar-content">
25+
<h1 class="app-title">
26+
<i class="fas fa-futbol"></i>
27+
אצטדיון סמי עופר
28+
</h1>
29+
</div>
30+
</header>
31+
32+
<!-- Main Content -->
33+
<main class="main-content">
34+
{% block content %}{% endblock %}
35+
</main>
36+
37+
<!-- Floating Action Button (Desktop) / Bottom Navigation Bar (Mobile) -->
38+
<div class="fab-container">
39+
<button class="fab" id="fab-add" title="הוסף משחק">
40+
<i class="fas fa-plus"></i>
41+
</button>
42+
<div class="fab-menu" id="fab-menu">
43+
<a href="/next" class="fab-menu-item" data-page="next">
44+
<i class="fas fa-home"></i>
45+
<span>בית</span>
46+
</a>
47+
<a href="/scheduler" class="fab-menu-item" data-page="scheduler">
48+
<i class="fas fa-clock"></i>
49+
<span>תיזמונים</span>
50+
</a>
51+
<a href="https://yeshmishak.top/static.html" class="fab-menu-item" data-page="static" target="_blank">
52+
<i class="fas fa-tv"></i>
53+
<span>תצוגה</span>
54+
</a>
55+
<a href="https://yeshmishak.top/cal.html" class="fab-menu-item" data-page="cal" target="_blank">
56+
<i class="fas fa-calendar"></i>
57+
<span>יומן</span>
58+
</a>
59+
<button class="fab-menu-item" id="fab-add-mobile">
60+
<i class="fas fa-plus"></i>
61+
<span>הוסף משחק</span>
62+
</button>
63+
</div>
64+
</div>
65+
66+
<!-- Toast Notification -->
67+
<div class="toast" id="toast"></div>
68+
69+
<script>
70+
// Set active menu item based on current page
71+
$(document).ready(function() {
72+
const currentPath = window.location.pathname;
73+
74+
// Determine which page we're on
75+
let activePage = '';
76+
if (currentPath === '/next' || currentPath === '/') {
77+
activePage = 'next';
78+
} else if (currentPath === '/scheduler') {
79+
activePage = 'scheduler';
80+
}
81+
82+
// Add active class to the matching menu item
83+
if (activePage) {
84+
$('.fab-menu-item[data-page="' + activePage + '"]').addClass('active');
85+
}
86+
});
87+
</script>
88+
89+
{% block extra_js %}{% endblock %}
90+
</body>
91+
</html>

‎html_templates/info_modal.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<style>
2+
.info-modal-wrapper {
3+
padding: 24px;
4+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
5+
}
6+
7+
.info-modal-header {
8+
display: flex;
9+
align-items: center;
10+
gap: 16px;
11+
padding: 24px;
12+
background: linear-gradient(135deg, #1a73e8, #1557b0);
13+
color: white;
14+
border-radius: 12px;
15+
margin-bottom: 24px;
16+
}
17+
18+
.info-modal-header i {
19+
font-size: 2rem;
20+
}
21+
22+
.info-modal-header h2 {
23+
font-size: 1.5rem;
24+
font-weight: 600;
25+
margin: 0;
26+
}
27+
28+
.info-modal-content {
29+
display: flex;
30+
flex-direction: column;
31+
align-items: center;
32+
gap: 24px;
33+
padding: 32px;
34+
background: #e3f2fd;
35+
border: 2px solid #1a73e8;
36+
border-radius: 12px;
37+
text-align: center;
38+
}
39+
40+
.info-modal-content i {
41+
font-size: 3rem;
42+
color: #1a73e8;
43+
}
44+
45+
.info-modal-content p {
46+
font-size: 1.125rem;
47+
font-weight: 500;
48+
color: #212121;
49+
margin: 0;
50+
line-height: 1.6;
51+
}
52+
</style>
53+
54+
<div class="info-modal-wrapper">
55+
<div class="info-modal-header">
56+
<i class="fas {{ icon }}"></i>
57+
<h2>{{ title }}</h2>
58+
</div>
59+
60+
<div class="info-modal-content">
61+
<i class="fas {{ icon }}"></i>
62+
<p>{{ message }}</p>
63+
</div>
64+
</div>

0 commit comments

Comments
 (0)