Add star.vote overlay

Equal-Vote · Jan 20, 2024 · 888ecf4 · 888ecf4
1 parent 06bb24b
commit 888ecf4
Show file tree

Hide file tree

Showing 15 changed files with 2,861 additions and 1 deletion.
diff --git a/frontend/public/classic_star_vote.html b/frontend/public/classic_star_vote.html
diff --git a/frontend/public/classic_star_vote_files/analytics.js(1).download b/frontend/public/classic_star_vote_files/analytics.js(1).download
diff --git a/frontend/public/classic_star_vote_files/analytics.js.download b/frontend/public/classic_star_vote_files/analytics.js.download
diff --git a/frontend/public/classic_star_vote_files/jquery-2.1.4.min.js.download b/frontend/public/classic_star_vote_files/jquery-2.1.4.min.js.download
diff --git a/frontend/public/classic_star_vote_files/jquery.mobile-1.4.5.min.css b/frontend/public/classic_star_vote_files/jquery.mobile-1.4.5.min.css
diff --git a/frontend/public/classic_star_vote_files/jquery.mobile-1.4.5.min.js.download b/frontend/public/classic_star_vote_files/jquery.mobile-1.4.5.min.js.download
diff --git a/frontend/public/classic_star_vote_files/js b/frontend/public/classic_star_vote_files/js
diff --git a/frontend/public/classic_star_vote_files/js(1) b/frontend/public/classic_star_vote_files/js(1)
diff --git a/frontend/public/classic_star_vote_files/js(2) b/frontend/public/classic_star_vote_files/js(2)
diff --git a/frontend/public/classic_star_vote_files/starvote_logo.png b/frontend/public/classic_star_vote_files/starvote_logo.png
diff --git a/frontend/public/classic_star_vote_files/starvoting_us_logo.png b/frontend/public/classic_star_vote_files/starvoting_us_logo.png
diff --git a/frontend/public/classic_star_vote_files/style.css b/frontend/public/classic_star_vote_files/style.css
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -57,7 +57,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root" style="width: 100%; height: 100%"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/frontend/src/components/ClassicPrompt.tsx b/frontend/src/components/ClassicPrompt.tsx
@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from 'react';
+import { useLocalStorage } from '../hooks/useLocalStorage'
+import { useNavigate } from 'react-router'
+
+const ClassicPrompt = () => {
+    const navigate = useNavigate()
+
+    const [prevClassicPrompt, setPrevClassicPrompt] = useLocalStorage('prev_classic_prompt', '')
+    const [rememberPrompt, setRememberPrompt] = useState(false)
+
+    function goToOriginal(){
+        if(rememberPrompt) setPrevClassicPrompt('classic')
+
+        window.location.href = 'https://www.star.vote';
+    }
+
+    function goToNewVersion(){
+
+        // navigate({ pathname: '/Landing'});
+
+        window.location.href = 'Landing';
+
+        if(rememberPrompt) setPrevClassicPrompt('new_version')
+    }
+
+    function handleCheckbox(event){
+       setRememberPrompt(event.target.checked) 
+    }
+
+    useEffect(() => {
+        if(prevClassicPrompt == 'classic'){
+            goToOriginal()
+        }
+
+        if(prevClassicPrompt == 'new_version'){
+            goToNewVersion()
+        }
+    });
+
+    if(prevClassicPrompt != '') return <></> // save on rendering time so the redirect is faster
+
+    return (
+        <>
+            <div className="classicPageWrapper">
+                <iframe src='classic_star_vote.html' style={{width: '100%', height: '100%'}} scrolling="no"></iframe>
+            </div>
+            <div className="classicPopupBkg">
+                <div className="classicPopupInner">
+                    We're working on a new and improved version of star.vote!
+                    <br/>
+                    Want to try it?
+                    <br/>
+                    <button onClick={goToOriginal}>Continue to Original</button>
+                    <button onClick={goToNewVersion}>Try New Verison</button>
+                    <br/>
+                    <input type="checkbox" onChange={handleCheckbox}/> Remember my selection
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default ClassicPrompt
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -384,4 +384,41 @@ code {
     0px 5px 5px -3px rgba(var(--brand-ltblue-comma), 0.4),
     0px 8px 10px 1px rgba(var(--brand-ltblue-comma), 0.28),
     0px 3px 14px 2px rgba(var(--brand-ltblue-comma), 0.24);
+}
+
+/* Classic Page*/
+
+.classicPageWrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  z-index:1300;
+}
+
+.classicPopupBkg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  z-index:1301;
+  background-color: rgba(0, 0, 0, .8);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.classicPopupInner {
+  position: relative;
+  padding: 32px;
+  width: 100%;
+  max-width: 640px;
+  background-color: #FFF;
+}
+
+.classicPopupInner button {
+  margin: 10px;
 }