Add docs folder

antorqs · Oct 2, 2024 · 7d186c7 · 7d186c7
1 parent 6af8959
commit 7d186c7
Show file tree

Hide file tree

Showing 10 changed files with 328 additions and 4 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Better Teams - Retro Vanilla Software</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <!-- Top Title Bar -->
+    <header class="title-bar">
+        <div class="title-container">
+            <h1>Better Teams</h1>
+        </div>
+    </header>
+
+    <!-- Main Container -->
+    <div class="container">
+        <!-- Logo Section -->
+        <div class="logo-section">
+            <img src="../images/better_teams_icon.png" alt="Retro Vanilla Logo" class="retro-logo">
+            <h1>Better Teams</h1>
+        </div>
+
+        <!-- Tagline Section -->
+        <div class="tagline">
+            <h2>Supercharge your Microsoft Teams experience</h2>
+            <p>Enhance media sharing and reactions for smoother team collaboration</p>
+        </div>
+
+        <!-- Button Section -->
+        <div class="button-container">
+            <a href="#features" class="btn see-features">See Features</a>
+            <a href="#install" class="btn install">Install Now</a>
+        </div>
+    </div>
+
+    <!-- Features Section -->
+    <section id="features" class="features">
+        <h2>Features</h2>
+        <div class="features-container">
+            <!-- Carousel Section (Left) -->
+            <div class="carousel">
+                <div class="carousel-images">
+                    <img src="../images/reactions.png" alt="Reaction Buttons" class="carousel-item active">
+                    <img src="../images/spotify_list.png" alt="Spotify List" class="carousel-item">
+                    <img src="../images/spotify_song.png" alt="Spotify Song" class="carousel-item">
+                    <img src="../images/twitter_image.png" alt="Twitter Image" class="carousel-item">
+                    <img src="../images/twitter_video.png" alt="Twitter Video" class="carousel-item">
+                    <img src="../images/youtube_short.png" alt="Youtube Short" class="carousel-item">
+                    <img src="../images/youtube_video.png" alt="Youtube Video" class="carousel-item">
+                    <img src="../images/instagram_post.png" alt="Instagram Post" class="carousel-item">
+                </div>
+                <div class="carousel-controls">
+                    <button class="prev-btn">←</button>
+                    <button class="next-btn">→</button>
+                </div>
+            </div>
+
+            <!-- Description Section (Right) -->
+            <div class="description">
+                <h3><img src="../images/reactions_icon.png" alt="Reactions icon" class="feature-icon" /> Easy Access Call Reactions</h3>
+                <p>Reaction buttons now live out of the popup menu and onto the call action bar to avoid mistakenly raising your hand when you just want to react!</p>
+                <br />
+                <h3><img src="../images/notifications_icon.png" alt="Notifications icon" class="feature-icon"/> Notifications relocated</h3>
+                <p>New message notification no longer cover your message box. You can keep typing without the need of waiting for the notification to go away or clicking on it.</p>
+                <br />
+                <h3><img src="../images/spotify_icon.png" alt="Spotify icon" class="feature-icon"/> Spotify player</h3>
+                <p>Spotify links to songs, albums or artists can be played directly in the Teams window.</p>
+                <br />
+                <h3><img src="../images/twitter_icon.png" alt="Twitter icon" class="feature-icon"/> X/Twitter integration</h3>
+                <p>Received a tweet? You can see it directly in your window without the need of clicking on it.</p>
+                <br />
+                <h3><img src="../images/youtube_icon.png" alt="Youtube icon" class="feature-icon"/> Youtube player</h3>
+                <p>Somebory sent a link youtube video? You can play it right there without the need of leaving to Youtube anymore.</p>
+                <br />
+                <h3><img src="../images/instagram_icon.png" alt="Instagram icon" class="feature-icon"/> Instagram integration</h3>
+                <p>You can see that post directly in your chat without having to leave anywhere else.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer Section -->
+    <footer class="footer">
+        <p>&copy; 2024 Retro Vanilla Software. All rights reserved.</p>
+    </footer>
+
+    <script>
+        const prevBtn = document.querySelector('.prev-btn');
+        const nextBtn = document.querySelector('.next-btn');
+        const carouselItems = document.querySelectorAll('.carousel-item');
+
+        let currentIndex = 0;
+        const slideIntervalTime = 3000; // 5 seconds interval
+
+        function showSlide(index) {
+            carouselItems.forEach((item, i) => {
+                item.classList.remove('active');
+                if (i === index) {
+                    item.classList.add('active');
+                }
+            });
+        }
+
+        prevBtn.addEventListener('click', () => {
+            currentIndex = (currentIndex === 0) ? carouselItems.length - 1 : currentIndex - 1;
+            showSlide(currentIndex);
+        });
+
+        nextBtn.addEventListener('click', () => {
+            currentIndex = (currentIndex === carouselItems.length - 1) ? 0 : currentIndex + 1;
+            showSlide(currentIndex);
+        });
+
+        // Automatically change slides every 5 seconds
+        const autoSlide = setInterval(() => {
+            currentIndex = (currentIndex === carouselItems.length - 1) ? 0 : currentIndex + 1;
+            showSlide(currentIndex);
+        }, slideIntervalTime);
+
+        // Initial display of the first image
+        showSlide(currentIndex);
+    </script>
+
+</body>
+</html>
diff --git a/docs/styles.css b/docs/styles.css
@@ -0,0 +1,201 @@
+/* Reset default styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Arial', sans-serif;
+}
+
+/* Container for main section */
+.container {
+    background: rgb(54,48,120);
+    background: linear-gradient(180deg, rgba(54,48,120,1) 0%, rgba(140,158,230,1) 35%, rgba(140,158,230,1) 100%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    color: black;
+    text-align: center;
+}
+
+/* Logo Section */
+.logo-section {
+    font-size: 2.5em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.retro-logo {
+    width: 200px;
+    height: auto;
+    margin-bottom: 15px;
+}
+
+/* Title Bar */
+.title-bar {
+    background-color: black;
+    color: white;
+    width: 100%;
+    padding: 10px 0;
+    text-align: left;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+}
+
+.title-bar h1 {
+    font-size: 1.5em;
+    margin-left: 20px;
+}
+
+
+/* Tagline Section */
+.tagline h2 {
+    font-size: 1.5em;
+    margin-bottom: 10px;
+}
+
+.tagline p {
+    font-size: 1.2em;
+    margin-bottom: 30px;
+}
+
+/* Button Section */
+.button-container {
+    display: flex;
+    gap: 20px;
+}
+
+.btn {
+    padding: 15px 40px;
+    font-size: 1.2em;
+    font-weight: bold;
+    border-radius: 50px;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    color: white;
+}
+
+.see-features {
+    background-color: #000000; /* Yellow button */
+    color: #ffffff;
+}
+
+.see-features:hover {
+    background-color: #ffffff;
+    color: #000000;
+}
+
+.install {
+    background-color: lightgreen; /* Blue button */
+    color: black;
+}
+
+.install:hover {
+    background-color: white;
+    color: green;
+}
+
+/* Features Section */
+.features {
+    padding: 60px 20px;
+    background-color: white;
+    color: #333;
+    text-align: center;
+}
+
+.features h2 {
+    font-size: 2.5em;
+    color: #229C9F;
+    margin-bottom: 40px;
+}
+
+/* Two-column layout for the features container */
+.features-container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 40px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.feature-icon {
+    width: 50px;
+    height: 50%;
+}
+
+/* Carousel Section (Left) */
+.carousel {
+    flex: 1;
+    position: relative;
+    max-width: 600px;
+}
+
+.carousel-images {
+    display: flex;
+    overflow: hidden;
+}
+
+.carousel-item {
+    min-width: 100%;
+    transition: transform 0.5s ease;
+    opacity: 0;
+    display: none;
+}
+
+.carousel-item.active {
+    display: block;
+    opacity: 1;
+}
+
+.carousel-controls {
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    transform: translateY(-50%);
+}
+
+.prev-btn, .next-btn {
+    background-color: #229C9F;
+    color: white;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+    font-size: 1.2em;
+}
+
+.prev-btn:hover, .next-btn:hover {
+    background-color: #196e6d;
+}
+
+/* Description Section (Right) */
+.description {
+    flex: 1;
+    text-align: left;
+}
+
+.description h3 {
+    font-size: 2em;
+    color: #229C9F;
+    margin-bottom: 20px;
+}
+
+.description p {
+    font-size: 1.2em;
+    line-height: 1.6;
+}
+
+/* Footer Section */
+.footer {
+    background-color: #229C9F;
+    color: white;
+    text-align: center;
+    padding: 20px;
+}
diff --git a/images/better_teams_icon.png b/images/better_teams_icon.png
diff --git a/images/instagram_icon.png b/images/instagram_icon.png
diff --git a/images/notifications_icon.png b/images/notifications_icon.png
diff --git a/images/reactions_icon.png b/images/reactions_icon.png
diff --git a/images/spotify_icon.png b/images/spotify_icon.png
diff --git a/images/twitter_icon.png b/images/twitter_icon.png
diff --git a/images/youtube_icon.png b/images/youtube_icon.png
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
   {
     "name": "Better Teams",
     "short_name": "BetterTeams",
-    "version": "0.1.0",
+    "version": "1.0.0",
     "description": "Better Teams. Improved MS Teams Experience.",
     "manifest_version": 3,
     "icons": {
@@ -21,8 +21,5 @@
             ],
             "run_at": "document_idle"
         }
-    ],
-    "host_permissions": [
-        "https://noembed.com/*"
     ]
   }