redesign index.html: 2-column layout (photo left, fields right), responsive

public/index.html

@@ -7,10 +7,27 @@
 <style>
 *{margin:0;padding:0;box-sizing:border-box}
 :root{--bg:#f5f5f5;--card:#fff;--border:#e5e5e5;--accent:#2563eb;--text:#171717;--muted:#737373;--radius:12px}
-body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:24px 16px}
+body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;padding:24px 16px}
-h1{font-size:1.5rem;font-weight:600;margin-bottom:8px;letter-spacing:-.02em}
+h1{font-size:1.5rem;font-weight:600;margin-bottom:8px;letter-spacing:-.02em;text-align:center}
-.sub{color:var(--muted);font-size:.85rem;margin-bottom:32px}
+.sub{color:var(--muted);font-size:.85rem;margin-bottom:32px;text-align:center}
-.form{width:100%;max-width:480px;display:flex;flex-direction:column;gap:20px}
+
+.form{width:100%;max-width:900px;margin:0 auto;display:grid;grid-template-columns:320px 1fr;gap:32px;align-items:start}
+@media(max-width:760px){.form{grid-template-columns:1fr;max-width:480px}}
+
+.photo-col{display:flex;flex-direction:column;gap:16px}
+.photo-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:16px;align-items:center}
+.photo-btns{display:flex;flex-direction:column;gap:12px;width:100%}
+.photo-btns button{width:100%;border-radius:var(--radius);padding:14px 16px;font-size:.95rem;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--card);color:var(--text);transition:border .15s,background .15s}
+.photo-btns button:hover{border-color:var(--accent)}
+.photo-btns .cam{background:var(--accent);color:#fff;border-color:var(--accent)}
+.photo-btns .cam:hover{opacity:.85}
+.preview-wrap{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
+.preview{max-width:100%;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);background:var(--bg);display:none}
+.preview.show{display:block}
+.remove-photo{background:none;border:none;color:#ef4444;font-size:.85rem;cursor:pointer;padding:4px;display:none}
+.remove-photo.show{display:block}
+
+.fields-col{display:flex;flex-direction:column;gap:20px}
 .field{display:flex;flex-direction:column;gap:6px}
 label{font-size:.8rem;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
 input,select,textarea{background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:14px 16px;font-size:.95rem;outline:none;transition:border .15s}
@@ -18,21 +35,14 @@ input:focus,select:focus,textarea:focus{border-color:var(--accent)}
 .fixed-name{background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:14px 16px;font-size:.95rem;font-weight:600;text-align:center}
 textarea{resize:vertical;min-height:160px;font-family:inherit;line-height:1.5}
 
-.photo-btns{display:flex;gap:8px}
+.btn{width:100%;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);padding:16px;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .15s;margin-top:8px}
-.photo-btns button{flex:1;border-radius:var(--radius);padding:12px;font-size:.85rem;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--card);color:var(--text);transition:border .15s}
-.photo-btns button:hover{border-color:var(--accent)}
-.photo-btns .cam{background:var(--accent);color:#fff;border-color:var(--accent)}
-.photo-btns .cam:hover{opacity:.85}
-
-.preview{max-width:200px;border-radius:var(--radius);margin-top:8px;display:none}
-.remove-photo{background:none;border:none;color:#ef4444;font-size:.8rem;cursor:pointer;margin-top:4px;display:none}
-
-.btn{background:var(--accent);color:#fff;border:none;border-radius:var(--radius);padding:16px;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .15s}
 .btn:hover{opacity:.85}
 .btn:disabled{opacity:.4;cursor:not-allowed}
+
 .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#16a34a;color:#fff;padding:12px 24px;border-radius:var(--radius);font-size:.9rem;opacity:0;transition:opacity .3s;pointer-events:none;z-index:200}
 .toast.show{opacity:1}
 .toast.error{background:#dc2626}
+
 nav{position:fixed;top:16px;right:16px;display:flex;gap:8px}
 nav a{color:var(--muted);text-decoration:none;font-size:.8rem;padding:6px 12px;border-radius:8px;transition:color .15s}
 nav a:hover{color:var(--text)}
@@ -57,34 +67,39 @@ nav a:hover{color:var(--text)}
 <p class="sub">Отметь, что ты делал(а) на занятии</p>
 
 <form class="form" id="form">
-  <div class="field">
+  <div class="photo-col">
-    <label>Фото</label>
+    <div class="photo-card">
-    <div class="photo-btns">
+      <div class="photo-btns">
-      <button type="button" class="cam" onclick="openCam()">Камера</button>
+        <button type="button" class="cam" onclick="openCam()">Камера</button>
+      </div>
+      <div class="preview-wrap">
+        <img class="preview" id="preview">
+        <button type="button" class="remove-photo" id="removePhotoBtn" onclick="removePhoto()">Убрать фото</button>
+      </div>
     </div>
-    <img class="preview" id="preview">
-    <button type="button" class="remove-photo" id="removePhotoBtn" onclick="removePhoto()">Убрать фото</button>
   </div>
 
-  <div class="field" id="nameField">
+  <div class="fields-col">
-    <label>Фамилия и имя</label>
+    <div class="field" id="nameField">
-    <input type="text" id="nameInput" list="studentList" placeholder="Например, Иванов Иван" required>
+      <label>Фамилия и имя</label>
-  </div>
+      <input type="text" id="nameInput" list="studentList" placeholder="Например, Иванов Иван" required>
-  <datalist id="studentList"></datalist>
+    </div>
+    <datalist id="studentList"></datalist>
 
-  <div class="field">
+    <div class="field">
-    <label>Группа</label>
+      <label>Группа</label>
-    <select id="groupInput" required>
+      <select id="groupInput" required>
-      <option value="" disabled selected>Выбери группу</option>
+        <option value="" disabled selected>Выбери группу</option>
-    </select>
+      </select>
-  </div>
+    </div>
 
-  <div class="field">
+    <div class="field">
-    <label>Что сделал</label>
+      <label>Что сделал</label>
-    <textarea id="descInput" placeholder="Опиши, что проходил, что делал на занятии..." required></textarea>
+      <textarea id="descInput" placeholder="Опиши, что проходил, что делал на занятии..." required></textarea>
-  </div>
+    </div>
 
-  <button class="btn" type="submit" id="submitBtn">Отправить</button>
+    <button class="btn" type="submit" id="submitBtn">Отправить</button>
+  </div>
 </form>
 
 <div class="modal" id="camModal">
@@ -154,13 +169,13 @@ if (params.get('nameInput')) {
 
 function showPreview(src) {
   preview.src = src;
-  preview.style.display = 'block';
+  preview.classList.add('show');
-  removePhotoBtn.style.display = 'block';
+  removePhotoBtn.classList.add('show');
 }
 
 function removePhoto() {
-  preview.style.display = 'none';
+  preview.classList.remove('show');
-  removePhotoBtn.style.display = 'none';
+  removePhotoBtn.classList.remove('show');
   capturedBlob = null;
 }
 
@@ -227,4 +242,4 @@ form.addEventListener('submit', async (e) => {
 });
 </script>
 </body>
-</html>
+</html>