Skip to content

Commit 71bfde1

Browse files
michal92299michal92299
authored
Update styles.css
1 parent 22088ab commit 71bfde1

File tree

1 file changed

+118
-173
lines changed

1 file changed

+118
-173
lines changed

‎desktop/styles.css‎

Lines changed: 118 additions & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -1,174 +1,119 @@
1-
import { TabWidget, LineEdit, Button, ListView, ComboBox } from "std-widgets.slint";
2-
3-
struct Device {
4-
name: string,
5-
ip: string,
6-
port: string,
7-
status: string,
8-
paired: bool,
9-
}
10-
11-
component PairedDeviceFile {
12-
in property <string> device_name;
13-
in property <int> index;
14-
callback send_file(string);
15-
16-
HorizontalLayout {
17-
Text { text: device_name; color: #333; }
18-
file_path := LineEdit { placeholder-text: "File path"; }
19-
Button {
20-
text: "Send File";
21-
clicked => { send_file(file_path.text); }
22-
}
23-
}
24-
}
25-
26-
component PairedDeviceClipboard {
27-
in property <string> device_name;
28-
in property <int> index;
29-
callback send_clipboard(string);
30-
31-
HorizontalLayout {
32-
Text { text: device_name; color: #333; }
33-
content := LineEdit { placeholder-text: "Clipboard content"; }
34-
Button {
35-
text: "Send Clipboard";
36-
clicked => { send_clipboard(content.text); }
37-
}
38-
}
39-
}
40-
41-
export component AppWindow inherits Window {
42-
in-out property <[Device]> devices: [];
43-
in-out property <[string]> device_names: [];
44-
in-out property <[string]> messages: [];
45-
in-out property <string> my_device_name: "My Device";
46-
in-out property <string> my_ip: "0.0.0.0";
47-
in-out property <string> status_message: "";
48-
49-
callback discover_devices();
50-
callback pair_device(int);
51-
callback disconnect_device(int);
52-
callback send_file(int, string);
53-
callback send_clipboard(int, string);
54-
callback send_message(int, string);
55-
56-
title: "Hackeros Connect";
57-
width: 800px;
58-
height: 600px;
59-
background: #f0f0f0;
60-
61-
VerticalLayout {
62-
spacing: 10px;
63-
padding: 10px;
64-
65-
Text { text: "My Device: " + root.my_device_name + " (" + root.my_ip + ")"; font-size: 16px; color: #333; }
66-
67-
TabWidget {
68-
Tab {
69-
title: "Devices";
70-
VerticalLayout {
71-
Button {
72-
text: "Discover Devices";
73-
clicked => { root.discover_devices(); }
74-
}
75-
76-
ListView {
77-
for model-data [model-row] in root.devices : Rectangle {
78-
background: model-data.paired ? #d4ffd4 : #ffffff;
79-
border-color: #ddd;
80-
border-width: 1px;
81-
HorizontalLayout {
82-
padding: 10px;
83-
Text { text: "📱 "; }
84-
Text { text: model-data.name + " (" + model-data.ip + ":" + model-data.port + ") - " + model-data.status; color: #333; }
85-
if !model-data.paired: Button {
86-
text: "Pair";
87-
clicked => { root.pair_device(model-row); }
88-
}
89-
if model-data.paired: Button {
90-
text: "Disconnect";
91-
clicked => { root.disconnect_device(model-row); }
92-
}
93-
}
94-
}
95-
}
96-
}
97-
}
98-
99-
Tab {
100-
title: "File Transfer";
101-
VerticalLayout {
102-
Text { text: "Select Device and File to Send"; color: #333; }
103-
104-
ListView {
105-
for model-data [model-row] in root.devices : Rectangle {
106-
if model-data.paired: PairedDeviceFile {
107-
device_name: model-data.name;
108-
index: model-row;
109-
send_file(path) => { root.send_file(self.index, path); }
110-
}
111-
}
112-
}
113-
}
114-
}
115-
116-
Tab {
117-
title: "Clipboard Share";
118-
VerticalLayout {
119-
Text { text: "Select Device and Content to Send"; color: #333; }
120-
121-
ListView {
122-
for model-data [model-row] in root.devices : Rectangle {
123-
if model-data.paired: PairedDeviceClipboard {
124-
device_name: model-data.name;
125-
index: model-row;
126-
send_clipboard(content) => { root.send_clipboard(self.index, content); }
127-
}
128-
}
129-
}
130-
}
131-
}
132-
133-
Tab {
134-
title: "Chat";
135-
VerticalLayout {
136-
Text { text: "Select Device and Send Message"; color: #333; }
137-
138-
device_combo := ComboBox {
139-
model: root.device_names;
140-
}
141-
142-
HorizontalLayout {
143-
chat_input := LineEdit { placeholder-text: "Type message"; width: parent.width - 100px; }
144-
Button {
145-
text: "Send";
146-
clicked => { root.send_message(device_combo.current-index, chat_input.text); chat_input.text = ""; }
147-
}
148-
}
149-
150-
ListView {
151-
for model-data in root.messages : Rectangle {
152-
background: #ffffff;
153-
border-color: #ddd;
154-
border-width: 1px;
155-
VerticalLayout {
156-
padding: 5px;
157-
Text { text: model-data; color: #333; }
158-
}
159-
}
160-
}
161-
}
162-
}
163-
164-
Tab {
165-
title: "Settings";
166-
VerticalLayout {
167-
Text { text: "Settings: Ports, etc. (Coming soon)"; color: #333; }
168-
}
169-
}
170-
}
171-
172-
Text { text: root.status_message; color: #007bff; }
173-
}
1+
body {
2+
font-family: 'Courier New', Courier, monospace;
3+
background-color: #000000;
4+
color: #00ff00;
5+
padding: 20px;
6+
margin: 0;
7+
overflow: hidden;
8+
}
9+
10+
#tsparticles {
11+
position: fixed;
12+
top: 0;
13+
left: 0;
14+
width: 100%;
15+
height: 100%;
16+
z-index: -1;
17+
}
18+
19+
header {
20+
text-align: center;
21+
border-bottom: 2px solid #00ff00;
22+
padding-bottom: 10px;
23+
margin-bottom: 20px;
24+
animation: glow 2s infinite alternate;
25+
}
26+
27+
@keyframes glow {
28+
from { text-shadow: 0 0 5px #00ff00; }
29+
to { text-shadow: 0 0 15px #00ff00; }
30+
}
31+
32+
h1, h2 {
33+
color: #00ff00;
34+
}
35+
36+
#status {
37+
font-size: 0.8em;
38+
color: #ff0000;
39+
}
40+
41+
main {
42+
display: flex;
43+
flex-direction: column;
44+
gap: 20px;
45+
position: relative;
46+
z-index: 1;
47+
}
48+
49+
section {
50+
background-color: rgba(17, 17, 17, 0.8);
51+
padding: 15px;
52+
border: 1px solid #00ff00;
53+
border-radius: 5px;
54+
box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
55+
transition: transform 0.3s ease;
56+
}
57+
58+
section:hover {
59+
transform: scale(1.02);
60+
}
61+
62+
ul {
63+
list-style-type: none;
64+
padding: 0;
65+
}
66+
67+
li {
68+
background: #222222;
69+
margin: 5px 0;
70+
padding: 10px;
71+
border: 1px solid #00ff00;
72+
border-radius: 4px;
73+
color: #ffffff;
74+
animation: fadeIn 0.5s;
75+
}
76+
77+
@keyframes fadeIn {
78+
from { opacity: 0; }
79+
to { opacity: 1; }
80+
}
81+
82+
input, select {
83+
background-color: #000000;
84+
color: #00ff00;
85+
border: 1px solid #00ff00;
86+
padding: 8px;
87+
margin: 5px;
88+
border-radius: 4px;
89+
font-family: inherit;
90+
transition: box-shadow 0.3s;
91+
}
92+
93+
input:focus, select:focus {
94+
box-shadow: 0 0 10px #00ff00;
95+
}
96+
97+
button {
98+
background-color: #00ff00;
99+
color: #000000;
100+
border: none;
101+
padding: 8px 12px;
102+
margin: 5px;
103+
cursor: pointer;
104+
border-radius: 4px;
105+
font-family: inherit;
106+
text-transform: uppercase;
107+
box-shadow: 0 0 5px #00ff00;
108+
transition: background-color 0.3s, box-shadow 0.3s, transform 0.2s;
109+
}
110+
111+
button:hover {
112+
background-color: #00cc00;
113+
box-shadow: 0 0 15px #00ff00;
114+
transform: translateY(-2px);
115+
}
116+
117+
button:active {
118+
transform: translateY(0);
174119
}

0 commit comments

Comments
 (0)