add local server

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+.vibe42-run.log
+.vibe42-run.pid

package.json

@@ -0,0 +1,8 @@
+{
+  "name": "vacation-planner",
+  "private": true,
+  "type": "commonjs",
+  "scripts": {
+    "start": "node server.js"
+  }
+}

server.js

@@ -0,0 +1,19 @@
+const http = require("http");
+const fs = require("fs");
+const path = require("path");
+
+const PORT = process.env.PORT || 3000;
+
+http.createServer((req, res) => {
+  let file = req.url === "/" ? "/index.html" : req.url.split("?")[0];
+  const full = path.join(__dirname, file);
+  
+  if (full.startsWith(__dirname) && fs.existsSync(full) && fs.statSync(full).isFile()) {
+    const ext = path.extname(full);
+    const type = ext === ".css" ? "text/css" : ext === ".js" ? "application/javascript" : "text/html";
+    res.writeHead(200, { "Content-Type": type + "; charset=utf-8" });
+    return res.end(fs.readFileSync(full));
+  }
+  
+  res.writeHead(404); res.end("Not found");
+}).listen(PORT, () => console.log("Планировщик отпуска на порту " + PORT));

style.css

@@ -133,6 +133,9 @@ body {
   font-family: inherit;
   transition: all 0.2s;
   background: #fafafa;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
 }
 
 .form-group input:focus {
@@ -412,20 +415,226 @@ body {
   }
 }
 
-@media (max-width: 640px) {
+@media (max-width: 768px) {
-  .hero-content h1 {
+  .hero {
-    font-size: 1.8rem;
+    padding: 40px 15px;
   }
   
-  .form-row-2 {
+  .hero-content h1 {
-    grid-template-columns: 1fr;
+    font-size: 1.6rem;
+  }
+  
+  .hero-content p {
+    font-size: 1rem;
+  }
+  
+  .container {
+    padding: 15px;
+  }
+  
+  .grid {
+    gap: 15px;
+  }
+  
+  .card-header {
+    padding: 15px 18px;
+  }
+  
+  .vacation-form {
+    padding: 18px;
+    gap: 14px;
+  }
+  
+  .form-group input {
+    padding: 11px 12px;
+    font-size: 16px;
+  }
+  
+  .btn-primary {
+    padding: 13px 20px;
+    font-size: 1rem;
+  }
+  
+  .stats-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+    padding: 18px;
+  }
+  
+  .stat-value {
+    font-size: 1.5rem;
   }
   
   .cards-grid {
     grid-template-columns: 1fr;
+    padding: 18px;
+    gap: 15px;
+  }
+  
+  .main-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .btn-export {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero {
+    padding: 30px 12px;
+  }
+  
+  .hero-content h1 {
+    font-size: 1.4rem;
+  }
+  
+  .hero-content p {
+    font-size: 0.9rem;
+  }
+  
+  .container {
+    padding: 10px;
+  }
+  
+  .card {
+    border-radius: 12px;
+  }
+  
+  .card-header {
+    padding: 14px 15px;
+  }
+  
+  .card-header h2 {
+    font-size: 1rem;
+  }
+  
+  .vacation-form {
+    padding: 15px;
+    gap: 12px;
+  }
+  
+  .form-group {
+    gap: 6px;
+  }
+  
+  .form-group label {
+    font-size: 0.8rem;
+  }
+  
+  .form-group input {
+    padding: 10px 11px;
+    font-size: 16px;
+    border-radius: 8px;
+  }
+  
+  .form-row-2 {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+  
+  .btn-primary {
+    padding: 12px 18px;
+    font-size: 0.95rem;
+    border-radius: 8px;
   }
   
   .stats-grid {
     grid-template-columns: 1fr;
+    gap: 10px;
+    padding: 15px;
+  }
+  
+  .stat-item {
+    padding: 12px;
+  }
+  
+  .stat-value {
+    font-size: 1.3rem;
+  }
+  
+  .stat-label {
+    font-size: 0.75rem;
+  }
+  
+  .cards-grid {
+    padding: 15px;
+    gap: 12px;
+  }
+  
+  .vacation-card {
+    padding: 16px;
+    border-radius: 10px;
+  }
+  
+  .vacation-card::before {
+    height: 3px;
+  }
+  
+  .flag-icon {
+    width: 45px;
+    height: 45px;
+    font-size: 1.6rem;
+  }
+  
+  .location-info h3 {
+    font-size: 1rem;
+  }
+  
+  .location-info p {
+    font-size: 0.85rem;
+  }
+  
+  .card-details {
+    gap: 8px;
+  }
+  
+  .detail-row {
+    font-size: 0.85rem;
+  }
+  
+  .detail-row .d-icon {
+    font-size: 1rem;
+  }
+  
+  .card-budget {
+    padding: 10px 12px;
+    border-radius: 8px;
+  }
+  
+  .budget-label {
+    font-size: 0.8rem;
+  }
+  
+  .budget-value {
+    font-size: 1.2rem;
+  }
+  
+  .card-actions {
+    gap: 6px;
+  }
+  
+  .btn-delete {
+    padding: 9px 14px;
+    font-size: 0.85rem;
+    border-radius: 7px;
+  }
+  
+  .empty-state {
+    padding: 50px 15px;
+  }
+  
+  .empty-icon {
+    font-size: 3rem;
+  }
+  
+  .empty-state h3 {
+    font-size: 1.1rem;
+  }
+  
+  .empty-state p {
+    font-size: 0.9rem;
   }
 }