Skip to content

Commit 5e8cdf7

Browse files
maelgruand1maelgruand1
authored
Add files via upload
1 parent f61eea2 commit 5e8cdf7

File tree

1 file changed

+159
-0
lines changed

1 file changed

+159
-0
lines changed

‎notes.html‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Create a Window Using Tkinter</title>
7+
<style>
8+
body {
9+
font-family: 'Arial', sans-serif;
10+
line-height: 1.6;
11+
margin: 0;
12+
padding: 0;
13+
background-color: #f4f4f9;
14+
}
15+
16+
header {
17+
background: #333;
18+
color: #fff;
19+
text-align: center;
20+
padding: 1.5rem;
21+
font-size: 1.5rem;
22+
}
23+
24+
.explain {
25+
padding: 20px;
26+
margin: 20px auto;
27+
width: 80%;
28+
background-color: #fff;
29+
border-radius: 10px;
30+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
31+
text-align: center;
32+
}
33+
34+
button {
35+
display: block;
36+
width: 200px;
37+
margin: 20px auto;
38+
padding: 12px;
39+
background-color: #007BFF;
40+
color: white;
41+
border: none;
42+
border-radius: 5px;
43+
font-size: 1rem;
44+
cursor: pointer;
45+
transition: background 0.3s;
46+
text-align: center;
47+
}
48+
49+
button:hover {
50+
background-color: #0056b3;
51+
}
52+
53+
#code {
54+
display: none;
55+
background-color: #272822;
56+
color: white;
57+
padding: 20px;
58+
border-radius: 8px;
59+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
60+
margin: 20px auto;
61+
width: 80%;
62+
transition: all 0.3s ease-in-out;
63+
}
64+
65+
code {
66+
display: block;
67+
white-space: pre-wrap;
68+
word-wrap: break-word;
69+
background-color: #333;
70+
padding: 10px;
71+
border-radius: 8px;
72+
color: #fff;
73+
font-size: 1rem;
74+
}
75+
76+
.bash, .python {
77+
font-weight: bold;
78+
font-size: 1rem;
79+
}
80+
</style>
81+
</head>
82+
<body>
83+
84+
<header>
85+
Create a Window Using Tkinter
86+
</header>
87+
88+
<section class="explain">
89+
<p>This page explains how to create a window in Python using the Tkinter module.<br>
90+
Tkinter is a Python module that allows you to create GUI applications.</p>
91+
</section>
92+
93+
<button id="showCode">📜 Show Code</button>
94+
95+
<section id="code">
96+
<p><strong>Setting Up the Environment</strong></p>
97+
<code class="bash">
98+
mkdir PythonTuto
99+
cd PythonTuto
100+
# For Linux (module venv of Python)
101+
python3 -m venv env
102+
# For Windows
103+
python -m venv env
104+
105+
# Activate the virtual environment
106+
# For Linux
107+
source env/bin/activate
108+
# For Windows
109+
env/Scripts/activate
110+
111+
# Install Tkinter
112+
pip install tkinter
113+
# Or for Linux
114+
sudo apt install python3-tk
115+
</code>
116+
117+
<p><strong>Python Code</strong></p>
118+
<code class="python">
119+
import tkinter as tk
120+
121+
# Traditional form
122+
root = tk.Tk()
123+
root.geometry("500x500")
124+
root.title("Tkinter Tutorial")
125+
root.mainloop()
126+
127+
# Custom function
128+
129+
def createWindow(title, size):
130+
window = tk.Tk()
131+
window.geometry(size)
132+
window.title(title)
133+
return window
134+
135+
#In main file
136+
import window as win
137+
138+
root = win.createWindow("A Tk Window", "500x500")
139+
root.mainloop()
140+
</code>
141+
</section>
142+
143+
<script>
144+
const showCodeButton = document.getElementById('showCode');
145+
const codeSection = document.getElementById('code');
146+
147+
showCodeButton.addEventListener('click', function() {
148+
if (codeSection.style.display === 'none' || codeSection.style.display === '') {
149+
codeSection.style.display = 'block';
150+
showCodeButton.textContent = '📜 Hide Code';
151+
} else {
152+
codeSection.style.display = 'none';
153+
showCodeButton.textContent = '📜 Show Code';
154+
}
155+
});
156+
</script>
157+
158+
</body>
159+
</html>

0 commit comments

Comments
 (0)