Hugging Face's logo

cokai
/
forundersokningsprotokoll

deepsite
Model card Files
xet
Community
1
cokai commited on
Commit
d1078fe
·
verified ·
1 Parent(s): 0ab0cc7

Upload 5 files

Browse files
Files changed (5) hide show
  1. README.md +12 -0
  2. gitattributes +35 -0
  3. index.html +997 -0
  4. prompts.txt +8 -0
  5. style.css +28 -0
README.md ADDED
@@ -0,0 +1,12 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ---
2
+ title: f-runders-kningsprotokoll
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: yellow
6
+ sdk: static
7
+ pinned: false
8
+ tags:
9
+ - deepsite
10
+ ---
11
+
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
gitattributes ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ *.7z filter=lfs diff=lfs merge=lfs -text
2
+ *.arrow filter=lfs diff=lfs merge=lfs -text
3
+ *.bin filter=lfs diff=lfs merge=lfs -text
4
+ *.bz2 filter=lfs diff=lfs merge=lfs -text
5
+ *.ckpt filter=lfs diff=lfs merge=lfs -text
6
+ *.ftz filter=lfs diff=lfs merge=lfs -text
7
+ *.gz filter=lfs diff=lfs merge=lfs -text
8
+ *.h5 filter=lfs diff=lfs merge=lfs -text
9
+ *.joblib filter=lfs diff=lfs merge=lfs -text
10
+ *.lfs.* filter=lfs diff=lfs merge=lfs -text
11
+ *.mlmodel filter=lfs diff=lfs merge=lfs -text
12
+ *.model filter=lfs diff=lfs merge=lfs -text
13
+ *.msgpack filter=lfs diff=lfs merge=lfs -text
14
+ *.npy filter=lfs diff=lfs merge=lfs -text
15
+ *.npz filter=lfs diff=lfs merge=lfs -text
16
+ *.onnx filter=lfs diff=lfs merge=lfs -text
17
+ *.ot filter=lfs diff=lfs merge=lfs -text
18
+ *.parquet filter=lfs diff=lfs merge=lfs -text
19
+ *.pb filter=lfs diff=lfs merge=lfs -text
20
+ *.pickle filter=lfs diff=lfs merge=lfs -text
21
+ *.pkl filter=lfs diff=lfs merge=lfs -text
22
+ *.pt filter=lfs diff=lfs merge=lfs -text
23
+ *.pth filter=lfs diff=lfs merge=lfs -text
24
+ *.rar filter=lfs diff=lfs merge=lfs -text
25
+ *.safetensors filter=lfs diff=lfs merge=lfs -text
26
+ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
27
+ *.tar.* filter=lfs diff=lfs merge=lfs -text
28
+ *.tar filter=lfs diff=lfs merge=lfs -text
29
+ *.tflite filter=lfs diff=lfs merge=lfs -text
30
+ *.tgz filter=lfs diff=lfs merge=lfs -text
31
+ *.wasm filter=lfs diff=lfs merge=lfs -text
32
+ *.xz filter=lfs diff=lfs merge=lfs -text
33
+ *.zip filter=lfs diff=lfs merge=lfs -text
34
+ *.zst filter=lfs diff=lfs merge=lfs -text
35
+ *tfevents* filter=lfs diff=lfs merge=lfs -text
index.html ADDED
@@ -0,0 +1,997 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="sv">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Förundersökningsprotokoll</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
10
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
11
+ <style>
12
+ body {
13
+ font-family: 'Roboto', sans-serif;
14
+ }
15
+ .section-container {
16
+ transition: all 0.3s ease;
17
+ cursor: move;
18
+ }
19
+ .section-container:hover {
20
+ transform: translateY(-2px);
21
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
22
+ }
23
+ .section-container.dragging {
24
+ opacity: 0.5;
25
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
26
+ }
27
+
28
+ /* Skadekarta Body CSS */
29
+ .skadekarta-body {
30
+ position: relative;
31
+ width: 200px;
32
+ height: 400px;
33
+ margin: 0 auto;
34
+ cursor: crosshair;
35
+ }
36
+ .skadekarta-front, .skadekarta-back {
37
+ position: absolute;
38
+ width: 100%;
39
+ height: 100%;
40
+ background-size: contain;
41
+ background-repeat: no-repeat;
42
+ background-position: center;
43
+ }
44
+ .skadekarta-front {
45
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200"><path d="M50,10 C60,10 65,15 65,25 L65,35 C65,45 70,50 60,50 L40,50 C30,50 35,45 35,35 L35,25 C35,15 40,10 50,10 Z M30,55 L70,55 L65,75 L70,95 L65,115 L70,135 L65,155 L70,175 L35,175 L40,155 L35,135 L40,115 L35,95 L40,75 L35,55 Z M30,55 L20,65 M70,55 L80,65" fill="none" stroke="black" stroke-width="1"/><circle cx="40" cy="30" r="3" fill="black"/><circle cx="60" cy="30" r="3" fill="black"/><path d="M45,40 Q50,45 55,40" fill="none" stroke="black" stroke-width="1"/></svg>');
46
+ }
47
+ .skadekarta-back {
48
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200"><path d="M50,10 C60,10 65,15 65,25 L65,35 C65,45 70,50 60,50 L40,50 C30,50 35,45 35,35 L35,25 C35,15 40,10 50,10 Z M30,55 L70,55 L65,75 L70,95 L65,115 L70,135 L65,155 L70,175 L35,175 L40,155 L35,135 L40,115 L35,95 L40,75 L35,55 Z M30,55 L20,65 M70,55 L80,65" fill="none" stroke="black" stroke-width="1"/></svg>');
49
+ display: none;
50
+ }
51
+ .skada-circle {
52
+ position: absolute;
53
+ width: 20px;
54
+ height: 20px;
55
+ border: 2px solid red;
56
+ border-radius: 50%;
57
+ transform: translate(-50%, -50%);
58
+ z-index: 2;
59
+ }
60
+ .skada-line {
61
+ position: absolute;
62
+ background-color: red;
63
+ height: 2px;
64
+ transform-origin: left center;
65
+ z-index: 1;
66
+ }
67
+ .skada-number {
68
+ position: absolute;
69
+ color: black;
70
+ font-weight: bold;
71
+ font-size: 12px;
72
+ top: 50%;
73
+ left: 50%;
74
+ transform: translate(-50%, -50%);
75
+ z-index: 3;
76
+ }
77
+ </style>
78
+ </head>
79
+ <body class="bg-gray-50 min-h-screen">
80
+ <div class="container mx-auto px-4 py-8 max-w-4xl">
81
+ <header class="mb-8 text-center">
82
+ <h1 class="text-3xl font-bold text-blue-800 mb-2">Förundersökningsprotokoll</h1>
83
+ <p class="text-gray-600">Fyll i formuläret nedan för att skapa ett komplett förundersökningsprotokoll</p>
84
+ </header>
85
+
86
+ <div class="bg-white rounded-lg shadow-md p-6 mb-8">
87
+ <h2 class="text-xl font-semibold text-blue-700 mb-4 border-b pb-2">Grundinformation</h2>
88
+
89
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
90
+ <div>
91
+ <label class="block text-gray-700 font-medium mb-2" for="investigator">Ledande utredare</label>
92
+ <input type="text" id="investigator" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
93
+ </div>
94
+
95
+ <div>
96
+ <label class="block text-gray-700 font-medium mb-2" for="victim">Målsägande</label>
97
+ <input type="text" id="victim" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
98
+ </div>
99
+
100
+ <div>
101
+ <label class="block text-gray-700 font-medium mb-2" for="date">Datum</label>
102
+ <input type="date" id="date" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
103
+ </div>
104
+
105
+ <div>
106
+ <label class="block text-gray-700 font-medium mb-2" for="caseNumber">Diarienummer</label>
107
+ <input type="text" id="caseNumber" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
108
+ </div>
109
+
110
+ <div class="md:col-span-2">
111
+ <label class="block text-gray-700 font-medium mb-2" for="crimeType">Brottsrubricering</label>
112
+ <input type="text" id="crimeType" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
113
+ </div>
114
+
115
+ <div class="md:col-span-2">
116
+ <label class="block text-gray-700 font-medium mb-2" for="suspect">Misstänkt (namn och personuppgifter)</label>
117
+ <textarea id="suspect" rows="2" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
118
+ </div>
119
+ </div>
120
+ </div>
121
+
122
+ <div id="dynamic-sections" class="space-y-6">
123
+ <!-- Dynamic sections will be added here -->
124
+ </div>
125
+
126
+ <div class="mt-6 flex flex-wrap gap-3">
127
+ <button onclick="addSection('witness')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
128
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
129
+ <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
130
+ </svg>
131
+ Lägg till vittnesmål
132
+ </button>
133
+ <button onclick="addSection('police-report')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
134
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
135
+ <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
136
+ <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd" />
137
+ </svg>
138
+ Lägg till polisrapport
139
+ </button>
140
+ <button onclick="addSection('crime-scene')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
141
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
142
+ <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
143
+ </svg>
144
+ Lägg till brottsplatsundersökning
145
+ </button>
146
+ <button onclick="addSection('evidence')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
147
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
148
+ <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9z" clip-rule="evenodd" />
149
+ </svg>
150
+ Lägg till bevismaterial
151
+ </button>
152
+ <button onclick="addSection('skadekarta')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
153
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
154
+ <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
155
+ </svg>
156
+ Lägg till skadekarta
157
+ </button>
158
+ <button onclick="addSection('timeline')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
159
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
160
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
161
+ </svg>
162
+ Lägg till händelseförlopp
163
+ </button>
164
+ <button onclick="addSection('persons')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
165
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
166
+ <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v1h8v-1zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-1a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v1h-3zM4.75 12.094A5.973 5.973 0 004 15v1H1v-1a3 3 0 013.75-2.906z" />
167
+ </svg>
168
+ Lägg till personer inblandade
169
+ </button>
170
+ <button onclick="addSection('police')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
171
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
172
+ <path d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z" />
173
+ </svg>
174
+ Lägg till polismän inblandade
175
+ </button>
176
+ <button onclick="addSection('contact-persons')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
177
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
178
+ <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
179
+ <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
180
+ </svg>
181
+ Lägg till kontaktpersoner
182
+ </button>
183
+ <button onclick="addSection('seized-items')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
184
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
185
+ <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd" />
186
+ </svg>
187
+ Lägg till beslagtagna föremål
188
+ </button>
189
+ <button onclick="addSection('other')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
190
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
191
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
192
+ </svg>
193
+ Lägg till övrig dokumentation
194
+ </button>
195
+ </div>
196
+
197
+ <div class="mt-10 text-center">
198
+ <button onclick="generatePDF()" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium text-lg flex items-center mx-auto">
199
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
200
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
201
+ </svg>
202
+ Generera PDF-protokoll
203
+ </button>
204
+ </div>
205
+ </div>
206
+
207
+ <script>
208
+ // Global variables
209
+ let skadaCounter = 0;
210
+ let sectionCounter = 0;
211
+ let currentView = 'front';
212
+ let draggedSection = null;
213
+
214
+ // Initialize drag and drop functionality
215
+ function initDragAndDrop() {
216
+ const container = document.getElementById('dynamic-sections');
217
+
218
+ container.addEventListener('dragstart', function(e) {
219
+ if (e.target.classList.contains('section-container')) {
220
+ draggedSection = e.target;
221
+ e.target.classList.add('dragging');
222
+ e.dataTransfer.setData('text/plain', e.target.id);
223
+ e.dataTransfer.effectAllowed = 'move';
224
+ }
225
+ });
226
+
227
+ container.addEventListener('dragend', function(e) {
228
+ if (e.target.classList.contains('section-container')) {
229
+ e.target.classList.remove('dragging');
230
+ }
231
+ });
232
+
233
+ container.addEventListener('dragover', function(e) {
234
+ e.preventDefault();
235
+ e.dataTransfer.dropEffect = 'move';
236
+
237
+ const afterElement = getDragAfterElement(container, e.clientY);
238
+ if (afterElement == null) {
239
+ container.appendChild(draggedSection);
240
+ } else {
241
+ container.insertBefore(draggedSection, afterElement);
242
+ }
243
+ });
244
+ }
245
+
246
+ function getDragAfterElement(container, y) {
247
+ const draggableElements = [...container.querySelectorAll('.section-container:not(.dragging)')];
248
+
249
+ return draggableElements.reduce((closest, child) => {
250
+ const box = child.getBoundingClientRect();
251
+ const offset = y - box.top - box.height / 2;
252
+
253
+ if (offset < 0 && offset > closest.offset) {
254
+ return { offset: offset, element: child };
255
+ } else {
256
+ return closest;
257
+ }
258
+ }, { offset: Number.NEGATIVE_INFINITY }).element;
259
+ }
260
+
261
+ // Add section based on type
262
+ function addSection(type) {
263
+ const container = document.getElementById('dynamic-sections');
264
+ const sectionId = `section-${sectionCounter++}`;
265
+
266
+ let sectionHTML = '';
267
+ let sectionTitle = '';
268
+
269
+ switch(type) {
270
+ case 'witness':
271
+ sectionTitle = 'Vittnesmål';
272
+ sectionHTML = `
273
+ <div class="mb-4">
274
+ <label class="block text-gray-700 font-medium mb-2" for="${sectionId}-witness-name">Vittnes namn</label>
275
+ <input type="text" id="${sectionId}-witness-name" class="w-full px-4 py-2 border rounded-lg">
276
+ </div>
277
+ <div class="mb-4">
278
+ <label class="block text-gray-700 font-medium mb-2" for="${sectionId}-witness-contact">Kontaktuppgifter</label>
279
+ <input type="text" id="${sectionId}-witness-contact" class="w-full px-4 py-2 border rounded-lg">
280
+ </div>
281
+ <div class="mb-4">
282
+ <label class="block text-gray-700 font-medium mb-2" for="${sectionId}-witness-location">Plats för förhör</label>
283
+ <input type="text" id="${sectionId}-witness-location" class="w-full px-4 py-2 border rounded-lg" placeholder="Var utfördes förhöret">
284
+ </div>
285
+ <div class="mb-4">
286
+ <label class="block text-gray-700 font-medium mb-2" for="${sectionId}-witness-time">Tidpunkt för förhör</label>
287
+ <input type="datetime-local" id="${sectionId}-witness-time" class="w-full px-4 py-2 border rounded-lg">
288
+ </div>
289
+ <div>
290
+ <label class="block text-gray-700 font-medium mb-2" for="${sectionId}-witness-statement">Vittnesutsaga</label>
291
+ <textarea id="${sectionId}-witness-statement" rows="4" class="w-full px-4 py-2 border rounded-lg"></textarea>
292
+ </div>
293
+ `;
294
+ break;
295
+
296
+ case 'police-report':
297
+ sectionTitle = 'Polisrapport';
298
+ sectionHTML = `
299
+ <div class="mb-4">
300
+ <label class="block text-gray-700 font-medium mb-2" for="${sectionId}-report-author">Rapportförfattare</label>
301
+ <input type="text" id="${sectionId}-report-author" class="w-full px-4 py-2 border rounded-lg">
302
+ </div>
303
+ <div class="mb-4">
304
+ <label class="block text-gray-700 font-medium mb-2" for="${sectionId}-report-rank">Rang</label>
305
+ <select id="${sectionId}-report-rank" class="w-full px-4 py-2 border rounded-lg">
306
+ <option value="aspirant">Aspirant</option>
307
+ <option value="assistent">Assistent</option>
308
+ <option value="inspektor">Inspektör</option>
309
+ <option value="kommissarie">Kommissarie</option>
310
+ <option value="sekreterare">Sekreterare</option>
311
+ <option value="intendent">Intendent</option>
312
+ <option value="polismästare">Polismästare</option>
313
+ <option value="bitr-direktör">Bitr. Direktör</option>
314
+ <option value="direktör">Direktör</option>
315
+ </select>
316
+ </div>
317
+ <div class="mb-4">
318
+ <label class="block text-gray-700 font-medium mb-2" for="${sectionId}-report-date">Datum för rapport</label>
319
+ <input type="date" id="${sectionId}-report-date" class="w-full px-4 py-2 border rounded-lg">
320
+ </div>
321
+ <div>
322
+ <label class="block text-gray-700 font-medium mb-2" for="${sectionId}-report-content">Rapportens innehåll</label>
323
+ <textarea id="${sectionId}-report-content" rows="4" class="w-full px-4 py-2 border rounded-lg"></textarea>
324
+ </div>
325
+ `;
326
+ break;
327
+
328
+ case 'crime-scene':
329
+ sectionTitle = 'Brottsplatsundersökning';
330
+ sectionHTML = `
331
+ <div class="mb-4">
332
+ <label class="block text-gray-700 font-medium mb-2" for="${sectionId}-scene-location">Plats</label>
333
+ <input type="text" id="${sectionId}-scene-location" class="w-full px-4 py-2 border rounded-lg">
334
+ </div>
335
+ <div class="mb-4">
336
+ <label class="block text-gray-700 font-medium mb-2" for="${sectionId}-scene-date">Datum för undersökning</label>
337
+ <input type="date" id="${sectionId}-scene-date" class="w-full px-4 py-2 border rounded-lg">
338
+ </div>
339
+ <div class="mb-4">
340
+ <label class="block text-gray-700 font-medium mb-2">Kriminaltekniker</label>
341
+ <div id="${sectionId}-technicians" class="space-y-4">
342
+ <!-- Technician items will be added here -->
343
+ </div>
344
+ <button onclick="addTechnicianItem('${sectionId}')" class="mt-2 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
345
+ Lägg till kriminaltekniker
346
+ </button>
347
+ </div>
348
+ <div>
349
+ <label class="block text-gray-700 font-medium mb-2" for="${sectionId}-scene-findings">Anteckningar</label>
350
+ <textarea id="${sectionId}-scene-findings" rows="4" class="w-full px-4 py-2 border rounded-lg"></textarea>
351
+ </div>
352
+ `;
353
+ break;
354
+
355
+ case 'evidence':
356
+ sectionTitle = 'Bevismaterial';
357
+ sectionHTML = `
358
+ <div class="mb-4">
359
+ <label class="block text-gray-700 font-medium mb-2" for="${sectionId}-evidence-type">Typ av bevismaterial</label>
360
+ <select id="${sectionId}-evidence-type" class="w-full px-4 py-2 border rounded-lg">
361
+ <option value="dna">DNA-prov</option>
362
+ <option value="fingerprint">Fingeravtryck</option>
363
+ <option value="photo">Fotografier</option>
364
+ <option value="video">Videoinspelning</option>
365
+ <option value="object">Föremål</option>
366
+ <option value="other">Övrigt</option>
367
+ </select>
368
+ </div>
369
+ <div class="mb-4">
370
+ <label class="block text-gray-700 font-medium mb-2" for="${sectionId}-evidence-id">ID-nummer</label>
371
+ <input type="text" id="${sectionId}-evidence-id" class="w-full px-4 py-2 border rounded-lg">
372
+ </div>
373
+ <div class="mb-4">
374
+ <label class="block text-gray-700 font-medium mb-2" for="${sectionId}-evidence-collected">Insamlat datum och tid</label>
375
+ <input type="datetime-local" id="${sectionId}-evidence-collected" class="w-full px-4 py-2 border rounded-lg">
376
+ </div>
377
+ <div>
378
+ <label class="block text-gray-700 font-medium mb-2" for="${sectionId}-evidence-notes">Anteckningar</label>
379
+ <textarea id="${sectionId}-evidence-notes" rows="3" class="w-full px-4 py-2 border rounded-lg"></textarea>
380
+ </div>
381
+ `;
382
+ break;
383
+
384
+ case 'skadekarta':
385
+ sectionTitle = 'Skadekarta';
386
+ sectionHTML = `
387
+ <div class="mb-6">
388
+ <div class="flex justify-center mb-4">
389
+ <button onclick="toggleBodyView('${sectionId}')" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
390
+ Växla till ${currentView === 'front' ? 'baksida' : 'framsida'}
391
+ </button>
392
+ </div>
393
+ <div class="skadekarta-body" id="${sectionId}-body-map" onclick="addSkada(event, '${sectionId}')">
394
+ <div class="skadekarta-front" id="${sectionId}-body-front"></div>
395
+ <div class="skadekarta-back" id="${sectionId}-body-back"></div>
396
+ </div>
397
+ <div id="${sectionId}-skada-list" class="mt-6 space-y-2">
398
+ <!-- Skador will be listed here -->
399
+ </div>
400
+ </div>
401
+ <div>
402
+ <label class="block text-gray-700 font-medium mb-2" for="${sectionId}-skada-doctor">Ansvarig</label>
403
+ <input type="text" id="${sectionId}-skada-doctor" class="w-full px-4 py-2 border rounded-lg mb-4">
404
+
405
+ <label class="block text-gray-700 font-medium mb-2" for="${sectionId}-skada-date">Datum</label>
406
+ <input type="date" id="${sectionId}-skada-date" class="w-full px-4 py-2 border rounded-lg mb-4">
407
+
408
+ <label class="block text-gray-700 font-medium mb-2" for="${sectionId}-skada-findings">Beskrivning av skador</label>
409
+ <textarea id="${sectionId}-skada-findings" rows="4" class="w-full px-4 py-2 border rounded-lg"></textarea>
410
+ </div>
411
+ `;
412
+ break;
413
+
414
+ case 'timeline':
415
+ sectionTitle = 'Händelseförlopp';
416
+ sectionHTML = `
417
+ <div id="${sectionId}-timeline-items" class="space-y-4">
418
+ <!-- Timeline items will be added here -->
419
+ </div>
420
+ <button onclick="addTimelineItem('${sectionId}')" class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
421
+ Lägg till händelse
422
+ </button>
423
+ `;
424
+ break;
425
+
426
+ case 'persons':
427
+ sectionTitle = 'Personer inblandade';
428
+ sectionHTML = `
429
+ <div id="${sectionId}-person-items" class="space-y-4">
430
+ <!-- Person items will be added here -->
431
+ </div>
432
+ <button onclick="addPersonItem('${sectionId}')" class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
433
+ Lägg till person
434
+ </button>
435
+ `;
436
+ break;
437
+
438
+ case 'police':
439
+ sectionTitle = 'Polismän inblandade';
440
+ sectionHTML = `
441
+ <div id="${sectionId}-police-items" class="space-y-4">
442
+ <!-- Police items will be added here -->
443
+ </div>
444
+ <button onclick="addPoliceItem('${sectionId}')" class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
445
+ Lägg till polisman
446
+ </button>
447
+ `;
448
+ break;
449
+
450
+ case 'contact-persons':
451
+ sectionTitle = 'Kontaktpersoner';
452
+ sectionHTML = `
453
+ <div id="${sectionId}-contact-items" class="space-y-4">
454
+ <!-- Contact items will be added here -->
455
+ </div>
456
+ <button onclick="addContactItem('${sectionId}')" class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
457
+ Lägg till kontaktperson
458
+ </button>
459
+ `;
460
+ break;
461
+
462
+ case 'seized-items':
463
+ sectionTitle = 'Beslagtagna föremål';
464
+ sectionHTML = `
465
+ <div id="${sectionId}-seized-items" class="space-y-4">
466
+ <!-- Seized items will be added here -->
467
+ </div>
468
+ <button onclick="addSeizedItem('${sectionId}')" class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
469
+ Lägg till beslagtagen föremål
470
+ </button>
471
+ `;
472
+ break;
473
+
474
+ case 'other':
475
+ sectionTitle = 'Övrig dokumentation';
476
+ sectionHTML = `
477
+ <div>
478
+ <label class="block text-gray-700 font-medium mb-2" for="${sectionId}-other-title">Titel</label>
479
+ <input type="text" id="${sectionId}-other-title" class="w-full px-4 py-2 border rounded-lg mb-4">
480
+
481
+ <label class="block text-gray-700 font-medium mb-2" for="${sectionId}-other-content">Innehåll</label>
482
+ <textarea id="${sectionId}-other-content" rows="4" class="w-full px-4 py-2 border rounded-lg"></textarea>
483
+ </div>
484
+ `;
485
+ break;
486
+ }
487
+
488
+ const sectionElement = document.createElement('div');
489
+ sectionElement.id = sectionId;
490
+ sectionElement.className = 'section-container bg-white rounded-lg shadow-md p-6';
491
+ sectionElement.draggable = true;
492
+
493
+ sectionElement.innerHTML = `
494
+ <div class="flex justify-between items-center mb-4 border-b pb-2">
495
+ <h3 class="text-lg font-semibold text-blue-700">${sectionTitle}</h3>
496
+ <button onclick="removeSection('${sectionId}')" class="text-red-500 hover:text-red-700">
497
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
498
+ <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
499
+ </svg>
500
+ </button>
501
+ </div>
502
+ ${sectionHTML}
503
+ `;
504
+
505
+ container.appendChild(sectionElement);
506
+
507
+ // Initialize specific section functionality
508
+ if (type === 'skadekarta') {
509
+ initSkadekarta(sectionId);
510
+ }
511
+ }
512
+
513
+ // Remove section
514
+ function removeSection(sectionId) {
515
+ const section = document.getElementById(sectionId);
516
+ if (section) {
517
+ section.remove();
518
+ }
519
+ }
520
+
521
+ // Toggle body view between front and back
522
+ function toggleBodyView(sectionId) {
523
+ const front = document.getElementById(`${sectionId}-body-front`);
524
+ const back = document.getElementById(`${sectionId}-body-back`);
525
+
526
+ if (currentView === 'front') {
527
+ front.style.display = 'none';
528
+ back.style.display = 'block';
529
+ currentView = 'back';
530
+ document.querySelector(`button[onclick="toggleBodyView('${sectionId}')"]`).textContent = 'Växla till framsida';
531
+ } else {
532
+ front.style.display = 'block';
533
+ back.style.display = 'none';
534
+ currentView = 'front';
535
+ document.querySelector(`button[onclick="toggleBodyView('${sectionId}')"]`).textContent = 'Växla till baksida';
536
+ }
537
+ }
538
+
539
+ // Initialize skadekarta
540
+ function initSkadekarta(sectionId) {
541
+ const skadekarta = document.getElementById(`${sectionId}-body-map`);
542
+ skadekarta.addEventListener('click', function(e) {
543
+ addSkada(e, sectionId);
544
+ });
545
+ }
546
+
547
+ // Add skada to skadekarta
548
+ function addSkada(event, sectionId) {
549
+ const skadekarta = document.getElementById(`${sectionId}-body-map`);
550
+ const rect = skadekarta.getBoundingClientRect();
551
+
552
+ // Calculate position relative to the skadekarta
553
+ const x = event.clientX - rect.left;
554
+ const y = event.clientY - rect.top;
555
+
556
+ // Create skada marker
557
+ const skadaId = `skada-${skadaCounter++}`;
558
+
559
+ // Create circle
560
+ const circle = document.createElement('div');
561
+ circle.className = 'skada-circle';
562
+ circle.style.left = `${x}px`;
563
+ circle.style.top = `${y}px`;
564
+ circle.id = `${skadaId}-circle`;
565
+
566
+ // Create number
567
+ const number = document.createElement('div');
568
+ number.className = 'skada-number';
569
+ number.textContent = skadaCounter;
570
+ number.id = `${skadaId}-number`;
571
+
572
+ // Create line (direction depends on click position)
573
+ const line = document.createElement('div');
574
+ line.className = 'skada-line';
575
+ line.style.left = `${x}px`;
576
+ line.style.top = `${y}px`;
577
+ line.style.width = '50px';
578
+ line.id = `${skadaId}-line`;
579
+
580
+ // Position line to left or right
581
+ if (x > rect.width / 2) {
582
+ line.style.transform = 'rotate(180deg)';
583
+ line.style.left = `${x - 50}px`;
584
+ }
585
+
586
+ // Add elements to skadekarta
587
+ skadekarta.appendChild(line);
588
+ skadekarta.appendChild(circle);
589
+ skadekarta.appendChild(number);
590
+
591
+ // Add skada to list
592
+ addSkadaToList(sectionId, skadaId, skadaCounter, x, y);
593
+ }
594
+
595
+ // Add skada to the list below skadekarta
596
+ function addSkadaToList(sectionId, skadaId, number, x, y) {
597
+ const list = document.getElementById(`${sectionId}-skada-list`);
598
+
599
+ const item = document.createElement('div');
600
+ item.className = 'flex items-center justify-between bg-gray-100 p-2 rounded';
601
+ item.id = `${skadaId}-list-item`;
602
+
603
+ item.innerHTML = `
604
+ <div class="flex items-center">
605
+ <span class="inline-block w-6 h-6 rounded-full bg-red-500 text-white text-center mr-2">${number}</span>
606
+ <input type="text" placeholder="Beskrivning av skada" class="px-2 py-1 border rounded">
607
+ </div>
608
+ <button onclick="removeSkada('${sectionId}', '${skadaId}')" class="text-red-500 hover:text-red-700">
609
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
610
+ <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
611
+ </svg>
612
+ </button>
613
+ `;
614
+
615
+ list.appendChild(item);
616
+ }
617
+
618
+ // Remove skada from skadekarta and list
619
+ function removeSkada(sectionId, skadaId) {
620
+ // Remove from skadekarta
621
+ const circle = document.getElementById(`${skadaId}-circle`);
622
+ const line = document.getElementById(`${skadaId}-line`);
623
+ const number = document.getElementById(`${skadaId}-number`);
624
+
625
+ if (circle) circle.remove();
626
+ if (line) line.remove();
627
+ if (number) number.remove();
628
+
629
+ // Remove from list
630
+ const listItem = document.getElementById(`${skadaId}-list-item`);
631
+ if (listItem) listItem.remove();
632
+ }
633
+
634
+ // Add technician item to crime scene section
635
+ function addTechnicianItem(sectionId) {
636
+ const container = document.getElementById(`${sectionId}-technicians`);
637
+ const itemId = `technician-${Date.now()}`;
638
+
639
+ const item = document.createElement('div');
640
+ item.className = 'grid grid-cols-1 md:grid-cols-3 gap-4 items-end';
641
+ item.id = itemId;
642
+
643
+ item.innerHTML = `
644
+ <div>
645
+ <label class="block text-gray-700 font-medium mb-2" for="${itemId}-name">Namn</label>
646
+ <input type="text" id="${itemId}-name" class="w-full px-4 py-2 border rounded-lg">
647
+ </div>
648
+ <div>
649
+ <label class="block text-gray-700 font-medium mb-2" for="${itemId}-rank">Rang</label>
650
+ <select id="${itemId}-rank" class="w-full px-4 py-2 border rounded-lg">
651
+ <option value="aspirant">Aspirant</option>
652
+ <option value="assistent">Assistent</option>
653
+ <option value="inspektor">Inspektör</option>
654
+ <option value="kommissarie">Kommissarie</option>
655
+ <option value="sekreterare">Sekreterare</option>
656
+ <option value="intendent">Intendent</option>
657
+ <option value="polismästare">Polismästare</option>
658
+ <option value="bitr-direktör">Bitr. Direktör</option>
659
+ <option value="direktör">Direktör</option>
660
+ </select>
661
+ </div>
662
+ <div class="flex items-end">
663
+ <div class="flex-grow">
664
+ <label class="block text-gray-700 font-medium mb-2" for="${itemId}-role">Roll</label>
665
+ <input type="text" id="${itemId}-role" class="w-full px-4 py-2 border rounded-lg">
666
+ </div>
667
+ <button onclick="removeTechnicianItem('${sectionId}', '${itemId}')" class="ml-2 text-red-500 hover:text-red-700">
668
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
669
+ <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
670
+ </svg>
671
+ </button>
672
+ </div>
673
+ `;
674
+
675
+ container.appendChild(item);
676
+ }
677
+
678
+ // Remove technician item
679
+ function removeTechnicianItem(sectionId, itemId) {
680
+ const item = document.getElementById(itemId);
681
+ if (item) {
682
+ item.remove();
683
+ }
684
+ }
685
+
686
+ // Add timeline item
687
+ function addTimelineItem(sectionId) {
688
+ const container = document.getElementById(`${sectionId}-timeline-items`);
689
+ const itemId = `timeline-${Date.now()}`;
690
+
691
+ const item = document.createElement('div');
692
+ item.className = 'grid grid-cols-1 md:grid-cols-3 gap-4 items-end';
693
+ item.id = itemId;
694
+
695
+ item.innerHTML = `
696
+ <div>
697
+ <label class="block text-gray-700 font-medium mb-2" for="${itemId}-time">Tidpunkt</label>
698
+ <input type="datetime-local" id="${itemId}-time" class="w-full px-4 py-2 border rounded-lg">
699
+ </div>
700
+ <div class="md:col-span-2">
701
+ <div class="flex">
702
+ <div class="flex-grow">
703
+ <label class="block text-gray-700 font-medium mb-2" for="${itemId}-description">Händelse</label>
704
+ <input type="text" id="${itemId}-description" class="w-full px-4 py-2 border rounded-lg">
705
+ </div>
706
+ <button onclick="removeTimelineItem('${sectionId}', '${itemId}')" class="ml-2 text-red-500 hover:text-red-700">
707
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
708
+ <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
709
+ </svg>
710
+ </button>
711
+ </div>
712
+ </div>
713
+ </div>
714
+ `;
715
+
716
+ container.appendChild(item);
717
+ }
718
+
719
+ // Remove timeline item
720
+ function removeTimelineItem(sectionId, itemId) {
721
+ const item = document.getElementById(itemId);
722
+ if (item) {
723
+ item.remove();
724
+ }
725
+ }
726
+
727
+ // Add person item
728
+ function addPersonItem(sectionId) {
729
+ const container = document.getElementById(`${sectionId}-person-items`);
730
+ const itemId = `person-${Date.now()}`;
731
+
732
+ const item = document.createElement('div');
733
+ item.className = 'grid grid-cols-1 md:grid-cols-3 gap-4 items-end';
734
+ item.id = itemId;
735
+
736
+ item.innerHTML = `
737
+ <div>
738
+ <label class="block text-gray-700 font-medium mb-2" for="${itemId}-name">Namn</label>
739
+ <input type="text" id="${itemId}-name" class="w-full px-4 py-2 border rounded-lg">
740
+ </div>
741
+ <div>
742
+ <label class="block text-gray-700 font-medium mb-2" for="${itemId}-role">Roll</label>
743
+ <input type="text" id="${itemId}-role" class="w-full px-4 py-2 border rounded-lg">
744
+ </div>
745
+ <div class="flex">
746
+ <div class="flex-grow">
747
+ <label class="block text-gray-700 font-medium mb-2" for="${itemId}-contact">Kontaktuppgifter</label>
748
+ <input type="text" id="${itemId}-contact" class="w-full px-4 py-2 border rounded-lg">
749
+ </div>
750
+ <button onclick="removePersonItem('${sectionId}', '${itemId}')" class="ml-2 text-red-500 hover:text-red-700">
751
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
752
+ <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
753
+ </svg>
754
+ </button>
755
+ </div>
756
+ `;
757
+
758
+ container.appendChild(item);
759
+ }
760
+
761
+ // Remove person item
762
+ function removePersonItem(sectionId, itemId) {
763
+ const item = document.getElementById(itemId);
764
+ if (item) {
765
+ item.remove();
766
+ }
767
+ }
768
+
769
+ // Add police item
770
+ function addPoliceItem(sectionId) {
771
+ const container = document.getElementById(`${sectionId}-police-items`);
772
+ const itemId = `police-${Date.now()}`;
773
+
774
+ const item = document.createElement('div');
775
+ item.className = 'grid grid-cols-1 md:grid-cols-3 gap-4 items-end';
776
+ item.id = itemId;
777
+
778
+ item.innerHTML = `
779
+ <div>
780
+ <label class="block text-gray-700 font-medium mb-2" for="${itemId}-name">Namn</label>
781
+ <input type="text" id="${itemId}-name" class="w-full px-4 py-2 border rounded-lg">
782
+ </div>
783
+ <div>
784
+ <label class="block text-gray-700 font-medium mb-2" for="${itemId}-rank">Rang</label>
785
+ <select id="${itemId}-rank" class="w-full px-4 py-2 border rounded-lg">
786
+ <option value="aspirant">Aspirant</option>
787
+ <option value="assistent">Assistent</option>
788
+ <option value="inspektor">Inspektör</option>
789
+ <option value="kommissarie">Kommissarie</option>
790
+ <option value="sekreterare">Sekreterare</option>
791
+ <option value="intendent">Intendent</option>
792
+ <option value="polismästare">Polismästare</option>
793
+ <option value="bitr-direktör">Bitr. Direktör</option>
794
+ <option value="direktör">Direktör</option>
795
+ </select>
796
+ </div>
797
+ <div class="flex">
798
+ <div class="flex-grow">
799
+ <label class="block text-gray-700 font-medium mb-2" for="${itemId}-role">Roll</label>
800
+ <input type="text" id="${itemId}-role" class="w-full px-4 py-2 border rounded-lg">
801
+ </div>
802
+ <button onclick="removePoliceItem('${sectionId}', '${itemId}')" class="ml-2 text-red-500 hover:text-red-700">
803
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
804
+ <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
805
+ </svg>
806
+ </button>
807
+ </div>
808
+ `;
809
+
810
+ container.appendChild(item);
811
+ }
812
+
813
+ // Remove police item
814
+ function removePoliceItem(sectionId, itemId) {
815
+ const item = document.getElementById(itemId);
816
+ if (item) {
817
+ item.remove();
818
+ }
819
+ }
820
+
821
+ // Add contact item
822
+ function addContactItem(sectionId) {
823
+ const container = document.getElementById(`${sectionId}-contact-items`);
824
+ const itemId = `contact-${Date.now()}`;
825
+
826
+ const item = document.createElement('div');
827
+ item.className = 'grid grid-cols-1 md:grid-cols-3 gap-4 items-end';
828
+ item.id = itemId;
829
+
830
+ item.innerHTML = `
831
+ <div>
832
+ <label class="block text-gray-700 font-medium mb-2" for="${itemId}-name">Namn</label>
833
+ <input type="text" id="${itemId}-name" class="w-full px-4 py-2 border rounded-lg">
834
+ </div>
835
+ <div>
836
+ <label class="block text-gray-700 font-medium mb-2" for="${itemId}-info">Kontaktuppgifter</label>
837
+ <input type="text" id="${itemId}-info" class="w-full px-4 py-2 border rounded-lg">
838
+ </div>
839
+ <div class="flex">
840
+ <div class="flex-grow">
841
+ <label class="block text-gray-700 font-medium mb-2" for="${itemId}-connection">Koppling till ärendet</label>
842
+ <input type="text" id="${itemId}-connection" class="w-full px-4 py-2 border rounded-lg">
843
+ </div>
844
+ <button onclick="removeContactItem('${sectionId}', '${itemId}')" class="ml-2 text-red-500 hover:text-red-700">
845
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
846
+ <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
847
+ </svg>
848
+ </button>
849
+ </div>
850
+ `;
851
+
852
+ container.appendChild(item);
853
+ }
854
+
855
+ // Remove contact item
856
+ function removeContactItem(sectionId, itemId) {
857
+ const item = document.getElementById(itemId);
858
+ if (item) {
859
+ item.remove();
860
+ }
861
+ }
862
+
863
+ // Add seized item
864
+ function addSeizedItem(sectionId) {
865
+ const container = document.getElementById(`${sectionId}-seized-items`);
866
+ const itemId = `seized-${Date.now()}`;
867
+
868
+ const item = document.createElement('div');
869
+ item.className = 'grid grid-cols-1 md:grid-cols-2 gap-4';
870
+ item.id = itemId;
871
+
872
+ item.innerHTML = `
873
+ <div>
874
+ <label class="block text-gray-700 font-medium mb-2" for="${itemId}-item">Beslagtaget föremål</label>
875
+ <input type="text" id="${itemId}-item" class="w-full px-4 py-2 border rounded-lg">
876
+ </div>
877
+ <div>
878
+ <label class="block text-gray-700 font-medium mb-2" for="${itemId}-location">Plats</label>
879
+ <input type="text" id="${itemId}-location" class="w-full px-4 py-2 border rounded-lg">
880
+ </div>
881
+ <div>
882
+ <label class="block text-gray-700 font-medium mb-2" for="${itemId}-from">Från vem</label>
883
+ <input type="text" id="${itemId}-from" class="w-full px-4 py-2 border rounded-lg">
884
+ </div>
885
+ <div>
886
+ <label class="block text-gray-700 font-medium mb-2" for="${itemId}-date">Datum och tid</label>
887
+ <input type="datetime-local" id="${itemId}-date" class="w-full px-4 py-2 border rounded-lg">
888
+ </div>
889
+ <div class="md:col-span-2">
890
+ <label class="block text-gray-700 font-medium mb-2" for="${itemId}-reason">Anledning till beslag</label>
891
+ <input type="text" id="${itemId}-reason" class="w-full px-4 py-2 border rounded-lg">
892
+ </div>
893
+ <div class="md:col-span-2">
894
+ <label class="block text-gray-700 font-medium mb-2" for="${itemId}-notes">Anteckningar</label>
895
+ <textarea id="${itemId}-notes" rows="2" class="w-full px-4 py-2 border rounded-lg"></textarea>
896
+ </div>
897
+ <div class="md:col-span-2">
898
+ <label class="block text-gray-700 font-medium mb-2" for="${itemId}-officer">Beslag utfört av</label>
899
+ <input type="text" id="${itemId}-officer" class="w-full px-4 py-2 border rounded-lg">
900
+ </div>
901
+ <div class="md:col-span-2 flex justify-end">
902
+ <button onclick="removeSeizedItem('${sectionId}', '${itemId}')" class="text-red-500 hover:text-red-700">
903
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
904
+ <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
905
+ </svg>
906
+ </button>
907
+ </div>
908
+ `;
909
+
910
+ container.appendChild(item);
911
+ }
912
+
913
+ // Remove seized item
914
+ function removeSeizedItem(sectionId, itemId) {
915
+ const item = document.getElementById(itemId);
916
+ if (item) {
917
+ item.remove();
918
+ }
919
+ }
920
+
921
+ // Generate PDF
922
+ function generatePDF() {
923
+ const { jsPDF } = window.jspdf;
924
+ const doc = new jsPDF();
925
+
926
+ // Add title
927
+ doc.setFontSize(20);
928
+ doc.text('Förundersökningsprotokoll', 105, 15, { align: 'center' });
929
+
930
+ // Add basic information
931
+ doc.setFontSize(12);
932
+ doc.text('Grundinformation', 14, 25);
933
+
934
+ const investigator = document.getElementById('investigator').value;
935
+ const victim = document.getElementById('victim').value;
936
+ const date = document.getElementById('date').value;
937
+ const caseNumber = document.getElementById('caseNumber').value;
938
+ const crimeType = document.getElementById('crimeType').value;
939
+ const suspect = document.getElementById('suspect').value;
940
+
941
+ doc.text(`Ledande utredare: ${investigator}`, 14, 35);
942
+ doc.text(`Målsägande: ${victim}`, 14, 40);
943
+ doc.text(`Datum: ${date}`, 14, 45);
944
+ doc.text(`Diarienummer: ${caseNumber}`, 14, 50);
945
+ doc.text(`Brottsrubricering: ${crimeType}`, 14, 55);
946
+ doc.text(`Misstänkt: ${suspect}`, 14, 60);
947
+
948
+ // Add sections
949
+ const sections = document.getElementById('dynamic-sections').children;
950
+ let yPosition = 70;
951
+
952
+ for (let i = 0; i < sections.length; i++) {
953
+ const section = sections[i];
954
+ const title = section.querySelector('h3').textContent;
955
+
956
+ // Add new page if needed
957
+ if (yPosition > 250) {
958
+ doc.addPage();
959
+ yPosition = 20;
960
+ }
961
+
962
+ doc.setFontSize(14);
963
+ doc.text(title, 14, yPosition);
964
+ yPosition += 10;
965
+
966
+ // Add section content (simplified for this example)
967
+ doc.setFontSize(10);
968
+ const inputs = section.querySelectorAll('input, textarea, select');
969
+
970
+ for (let j = 0; j < inputs.length; j++) {
971
+ const input = inputs[j];
972
+ const label = input.previousElementSibling.textContent;
973
+ const value = input.value;
974
+
975
+ if (yPosition > 280) {
976
+ doc.addPage();
977
+ yPosition = 20;
978
+ }
979
+
980
+ doc.text(`${label}: ${value}`, 20, yPosition);
981
+ yPosition += 7;
982
+ }
983
+
984
+ yPosition += 10;
985
+ }
986
+
987
+ // Save the PDF
988
+ doc.save('forundersokningsprotokoll.pdf');
989
+ }
990
+
991
+ // Initialize drag and drop when page loads
992
+ document.addEventListener('DOMContentLoaded', function() {
993
+ initDragAndDrop();
994
+ });
995
+ </script>
996
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=cokai/f-runders-kningsprotokoll" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
997
+ </html>
prompts.txt ADDED
@@ -0,0 +1,8 @@
 
 
 
 
 
 
 
 
 
1
+ Skapa ett digitalt verktyg som fungerar som ett interaktivt formulär för att fylla i ett förundersökningsprotokoll, med inspiration från Google Forms och svensk polisens dokumentmallar. Grundfunktion: Formuläret ska börja med en grundläggande informationsdel där användaren fyller i: Ledande utredare (namn och befattning) Datum Brottsrubricering (fritext) Diarienummer Misstänkt (namn och personuppgifter, om kända) Dynamiska block: Användaren ska sedan kunna lägga till och ta bort följande sektioner/block dynamiskt, likt Google Forms: Vittnesmål Polisrapporter Brottsplatsundersökning Bevismaterial (användaren ska kunna välja typ: DNA, fingeravtryck, bilder, film, föremål etc.) Övrig dokumentation Obduktion/skadebild: Visa en enkel kroppsskiss (fram- och baksida) där man kan klicka på en punkt för att markera en skada. Vid klick ska en pil med ett nummer visas vid den platsen. Under skissen ska det automatiskt skapas en motsvarande rad där användaren kan skriva vad det är för skada kopplat till numret. Händelseförlopp Personer inblandade Polismän inblandade (med roll: ex. ingripande polis, först på plats, kriminaltekniker etc.) Stil & Design: Designen ska vara ren, strukturerad och professionell – inspirerad av Google Forms men anpassad för juridiska dokument. Använd blåa nyanser, sans-serif-typsnitt (typ Arial eller Roboto), tydlig sektionering, och gärna rutor/boxar med svag skugga och rundade hörn. Se till att formuläret är responsivt och tydligt att fylla i, även på surfplatta. Exportfunktion: När användaren är klar ska de kunna klicka på en knapp för att generera en sammanställd PDF-fil med alla delar. PDF-filen ska innehålla all information i rätt ordning, med tydliga rubriker och eventuell klickad skadebild med pilar inkluderad.
2
+ gör så att man kan dra de olika blocken för att kunna sortera, gör även så att gubben på Obduktion/Skadebild är en gubbe med armar och ben samt ändra där det står obucent till rättsläkare och sedan där det står obuktionsfynd till andra antäckningar
3
+ lägg till i grundinformation målsägande istället för befattning, lägg till ett block med beslagtagna föremål. lägg till ett block som handlar om kontaktpersoner. I vittnesmål blocket ska du lägga till plats för förhör. i brottsplats undersökning ska du lägga till så att där det står kriminaltekniker ska det inte vara vanlig text utan det ska vara liknande när man lägger in en "inblandad polis" i det blocket. byt alltså den rutan under kriminaltekniker i brottsplattsundersökningen till en ruta där man lägger till kriminaltekniker deras namn, rang och roll under brottsplats undersökningen. på obduktion/skadebild ska gubben vara MYCKET lik en vanlig kropp så att man verkligen kan sätta ut vart exakt skadan är, där man klickar ska de också vara en röd linje dit man klickar sedan en svart ruta med vitt innuti där det står 1, 2, 3 osv. i händelseförlopp ska du göra så man inte behlver skriva tiden och datum, det ska vara som det är i grund informationen att man klickar i en kalender se dock till att man får med både tid och datum. i polismän inblandade ska det vara namn, rang istället för bricka och sedan på roll ska du lägga till fler roller som du tycker passar
4
+ På vittnesmål ska du ta bort "Förhör" och lägga till ett ställe där man kan skriva när det utfördes samt vart det utfördes. På brottsplatsundersöknings blocket ska du i Rang delen lägga till alla ranker sverige använder sig av idag från aspirant till polisdirektör, alltså 19 ranker och i roll ska det stå fotograf, ballistiker, brottsplatsundersökare, mordutredare, fingeravtrycksanalytiker, it forensiker, Forensiker, Befäl, ändra även så det står antäckningar istället för Befattningar på brottsplatsundersökningen. på bevismaterial ska du lägga till så man kan lägga till exakt tid också inte bara datum. på obduktion/skadebild så tar du bort den gubben du gjort och gör en helt ny som ser ut som en människa som gör t pose. gör även så man kan vända på han igen alltså växla fram å bak sida och gör så att man kan sätta ut där man vill igen, de röda strecken ska inte gå från mitten utan där man klickar, där man klickar ska det även va en rund röd ring som går ihop med den röda linjen som går antingen ut till höger eller vänster om gubben beroende vart det finns platts och hur man sätter ut skadorna. på polismän inblandade ska du också lägga till alla ranker mellan aspirant och polisdirektör, lägg även till mer roller du tycker passar. på beslagtagna föremål ta bort plats för beslag under beslagtagsdatum, det ska man skriva när man "lägger till" föremål.
5
+ gör så det funkar igen, med allt jag sagt
6
+ På alla ställen man kan sätta ut rang på någon ska det vara dehär rangerna (aspirant, assistent, inspektör, kommissarie, sekriterare, intendent, polismästare, Bitr. Direktör, dirketör). i vittnesmål ska du ändra "plats för vittnesmål" till "Plats för förhör". på obuktion skadebild ska du ändra helt så det heter skadekarta, du ska sedan göra en kroppsskiss som man kan klicka och sätta ut skador för att sedan kunna skriva om de. på personer inblandade ska du lägga till kontaktinformation igen. på brottsplattsundersökning ska du göra så att man skriver "roll" istället för att välja. på kontaktpersoner ska du ha en till ruta där det står "koppling till ärendet". på beslagtagna föremål ska du ta bort allt och göra så man lägger till föremål, sedan ska det vara rutorna beslagtaget föremål, plats, från vem, datum och tid, varför det blev beslagtaget samt valfri antäckning och vem det var som tog föremålet.
7
+ gör om skadekartan helt. gör så man kan lägga till bilder i brottsplatsundersökningen. gör så att man lägger till bevis i bevismatrial blocket så man slipper ha många bevismaterial block.
8
+ gör om skadekartan helt. gör så man kan lägga till bilder i brottsplatsundersökningen. gör så att man lägger till bevis i bevismatrial blocket så man slipper ha många bevismaterial block.
style.css ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ padding: 2rem;
3
+ font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
+ }
5
+
6
+ h1 {
7
+ font-size: 16px;
8
+ margin-top: 0;
9
+ }
10
+
11
+ p {
12
+ color: rgb(107, 114, 128);
13
+ font-size: 15px;
14
+ margin-bottom: 10px;
15
+ margin-top: 5px;
16
+ }
17
+
18
+ .card {
19
+ max-width: 620px;
20
+ margin: 0 auto;
21
+ padding: 16px;
22
+ border: 1px solid lightgray;
23
+ border-radius: 16px;
24
+ }
25
+
26
+ .card p:last-child {
27
+ margin-bottom: 0;
28
+ }