loftschool · VitaValeeva · Apr 17, 2023 · Mar 2, 2024 · Mar 2, 2024 · Apr 7, 2024
diff --git a/projects/loft-photo/commentsTemplate.html.hbs b/projects/loft-photo/commentsTemplate.html.hbs
@@ -0,0 +1,9 @@
+{{#each list}}
+  <div class="component-comment">
+    <div class="component-comment-photo" style="background-image: url('{{photo}}')"></div>
+    <div class="component-comment-content">
+      <div class="component-comment-name">{{name}}</div>
+      <div class="component-comment-text">{{text}}</div>
+    </div>
+  </div>
+{{/each}}
diff --git a/projects/loft-photo/images/arrow-left.svg b/projects/loft-photo/images/arrow-left.svg
diff --git a/projects/loft-photo/images/button.svg b/projects/loft-photo/images/button.svg
diff --git a/projects/loft-photo/images/chat.svg b/projects/loft-photo/images/chat.svg
diff --git a/projects/loft-photo/images/exit.svg b/projects/loft-photo/images/exit.svg
diff --git a/projects/loft-photo/images/heart-red.svg b/projects/loft-photo/images/heart-red.svg
diff --git a/projects/loft-photo/images/heart.svg b/projects/loft-photo/images/heart.svg
diff --git a/projects/loft-photo/images/logo.svg b/projects/loft-photo/images/logo.svg
diff --git a/projects/loft-photo/images/send.svg b/projects/loft-photo/images/send.svg
diff --git a/projects/loft-photo/images/vert1.svg b/projects/loft-photo/images/vert1.svg
diff --git a/projects/loft-photo/images/vert2.svg b/projects/loft-photo/images/vert2.svg
diff --git a/projects/loft-photo/images/vert3.svg b/projects/loft-photo/images/vert3.svg
diff --git a/projects/loft-photo/index.js b/projects/loft-photo/index.js
@@ -0,0 +1,9 @@
+import pages from './pages';
+import mainPage from './mainPage';
+import loginPage from './loginPage';
+// import profilePage from './profilePage'; 
+import('./styles.css');
+
+pages.openPage('login');
+loginPage.handleEvents();
+mainPage.handleEvents();
diff --git a/projects/loft-photo/layout.html b/projects/loft-photo/layout.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=360,user-scalable=false" />
+    <title>Loft Photo</title>
+    <script src="http://vk.com/js/api/openapi.js"></script>   
+</head>
+
+<body>
+<div id="app">
+    <div class="page page-login hidden">
+        <div class="page-login-vert1"></div>
+        <div class="page-login-vert2"></div>
+        <div class="page-login-vert3"></div>
+        <div class="page-login-logo">
+            <div class="page-login-image"></div>
+            <div class="page-login-text">Не пропустите лучшие моменты из жизни ваших друзей!</div>
+        </div>
+        <button class="page-login-button"></button>
+    </div>
+    <div class="page page-main hidden">
+        <div class="component-photo"></div>
+        <div class="component-header">
+            <a class="component-header-profile-link" href="#">
+                <div class="component-header-photo"></div>
+                <div class="component-header-name"></div>
+            </a>
+        </div>
+        <div class="component-footer">
+            <div class="component-footer-container">
+                <a href="#" class="component-footer-container-social-comments">
+                    0
+                </a>
+                <a href="#" class="component-footer-container-social-likes">
+                    0
+                </a>
+                <a class="component-footer-container-profile-link" href="#">
+                    <div class="component-footer-photo"></div>
+                </a>
+                <div class="component-comments hidden">
+                    <div class="component-comments-container">
+                        <div class="component-comments-container-title">Комментарии</div>
+                        <div class="component-comments-container-list"></div>
+                        <div class="component-comments-container-form">
+                            <input type="text" class="component-comments-container-form-input" placeholder="Введите текст"/>
+                            <div class="component-comments-container-form-send"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="page page-profile hidden">
+        <a href="#" class="page-profile-back"></a>
+        <a href="#" class="page-profile-exit"></a>
+        <div class="component-user-info">
+            <div class="component-user-info-photo"></div>
+            <div class="component-user-info-name"></div>
+        </div>
+        <div class="component-user-photos"></div>
+    </div>
+
+</div>
+</body>
+</html>
diff --git a/projects/loft-photo/loginPage.js b/projects/loft-photo/loginPage.js
@@ -0,0 +1,15 @@
+import model from './model';
+import pages from './pages';
+import mainPage from './mainPage';
+
+export default {
+  handleEvents() {
+    document.querySelector('.page-login-button').addEventListener('click', async () => {
+      await model.login();
+      await model.init();
+
+      pages.openPage('main');
+      await mainPage.getNextPhoto();
+    });
+  },
+};