adding the frontend :)

Pratham-Jain-3903 · Oct 26, 2024 · e330a05 · e330a05
1 parent ab4c8fa
commit e330a05
Show file tree

Hide file tree

Showing 17 changed files with 536 additions and 0 deletions.
diff --git a/Frontend/App.css b/Frontend/App.css
@@ -0,0 +1,145 @@
+body {
+    font-family: 'Raleway', sans-serif;
+    background-color:  #3B3D3B;
+}
+.wrapper {
+    width: 800px;
+    height: 600px;
+    position: relative;
+    margin: 3% auto;
+    box-shadow: 2px 18px 70px 0px #9D9D9D;
+    overflow: hidden;
+}
+
+.login-text {
+    width: 800px;
+    height:450px;
+    background: linear-gradient(to left, #ab68ca, #de67a3); 
+    position: absolute;
+    top: -300px;
+    box-sizing: border-box;
+    padding: 6%;
+    transition: all 0.5s ease-in-out;
+    z-index: 11;
+}
+
+.text {
+    margin-left: 20px;
+    color: #fff;
+    display: none;
+    transition: all 0.5s ease-in-out;
+    transition-delay: 0.3s;
+
+    a, a:visited {
+        font-size: 36px;
+        color: #fff;
+        text-decoration: none;  
+        font-weight: bold;
+        display: block;
+    }
+
+    hr {
+        width: 10%;
+        float: left;
+        background-color: #fff;
+        font-size: 16px;
+    }
+
+    input {
+        margin-top: 30px;
+        height: 40px;
+        width: 300px;
+        border-radius: 2px;
+        border: none;
+        background-color: #444;
+        opacity: 0.6;
+        outline: none;
+        color: #fff;
+        padding-left: 10px;
+    }
+
+    input[type=text] {
+        margin-top: 60px;
+    }
+
+    button {
+        margin-top: 60px;
+        height: 40px;
+        width: 140px;
+        outline: none;
+    }
+
+    .login-btn {
+        background: #fff;
+        border: none;
+        border-radius: 2px;
+        color: #696a86;
+    }
+
+    .signup-btn {
+        background: transparent;
+        border: 2px solid #fff;;
+        border-radius: 2px;
+        color: #fff;
+        margin-left: 30px;
+    }
+}
+
+.cta {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: #696a86;
+    border: 2px solid #fff;
+    position: absolute;
+    bottom: -30px;
+    left: 370px;
+    color: #fff;
+    outline: none;
+    cursor: pointer;
+    z-index: 11;
+}
+
+.call-text {
+    background-color: #fff;
+    width: 800px;
+    height: 450px;
+    position: absolute;
+    bottom: 0;
+    padding: 10%;
+    box-sizing: border-box;
+    text-align: center;
+
+    h1 {
+        font-size: 42px;
+        margin-top: 10%;
+        color: #696a86;
+
+        span {
+            color: #333;
+            font-weight: bolder;
+
+        }
+    }
+
+    button {
+        height: 40px;
+        width: 180px;
+        border: none;
+        border-radius: 20px;
+        background: linear-gradient(to left, #ab68ca, #de67a3); 
+        color: #fff;
+        font-weight: bolder;
+        margin-top: 30px;
+        cursor: pointer;
+        outline: none;
+    }
+}
+
+.show-hide {
+    display: block;
+}
+
+.expand {
+    transform: translateY(300px);
+}
diff --git a/Frontend/App.jsx b/Frontend/App.jsx
@@ -0,0 +1,69 @@
+
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import './App.css'; // Your global styles
+
+const App = () => {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const navigate = useNavigate();
+  const [showLogin, setShowLogin] = useState(false); // Toggle Login Section
+  const [ctaIcon, setCtaIcon] = useState('fas fa-chevron-down'); // Initial icon state
+
+  const handleLogin = () => {
+    // Check credentials
+    if (username === 'luminous' && password === 'luminous') {
+      navigate('/home'); // Redirect to Home Page
+    } else {
+      alert('Invalid Username or Password'); // Simple Alert for Error
+    }
+  };
+
+  const handleToggle = () => {
+    setShowLogin((prev) => !prev);
+    // Change icon based on the current state
+    setCtaIcon((prev) => (prev === 'fas fa-chevron-down' ? 'fas fa-chevron-up' : 'fas fa-chevron-down'));
+  };
+
+  return (
+    <div className="wrapper">
+      <div className={`login-text ${showLogin ? 'expand' : ''}`}>
+        <button className="cta" onClick={handleToggle}>
+          <i className={ctaIcon}>^</i>
+        </button>
+        {/* Show the login form based on the showLogin state */}
+        <div className={`text ${showLogin ? 'show-hide' : ''}`}>
+          <a href="#">Login</a>
+          <hr />
+          <br />
+          <input
+            type="text"
+            placeholder="Username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+          />
+          <br />
+          <input
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+          <br />
+          <button className="login-btn" onClick={handleLogin}>
+            Log In
+          </button>
+        </div>
+      </div>
+
+      <div className="call-text">
+        <h1>
+          LUMINOUS <span> MEANS </span> SAVING'S
+        </h1>
+
+      </div>
+    </div>
+  );
+};
+
+export default App;
diff --git a/Frontend/Home.jsx b/Frontend/Home.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+const Home = () => {
+  return (
+    <div style={{ textAlign: 'center', marginTop: '50px', height: '90vh' }}> {/* Use a viewport height for the main container */}
+      {/* First Part: 25-35-40 Ratio */}
+      <div style={{ display: 'flex', width: '100%', height: '45%' }}>
+        <div style={{ flex: '50%', border: '1px solid #ccc', padding: '10px' }}>
+          <iframe src="http://localhost:3000/d-solo/ae1ylquoka5tsf/consumption?from=1719804999786&to=1720197364335&timezone=browser&refresh=5s&orgId=1&panelId=6&__feature.dashboardSceneSolo" width="700" height="350" frameborder="0"></iframe>
+        </div>
+        <div style={{ flex: '35%', border: '1px solid #ccc', padding: '10px' }}>
+          <iframe src="http://localhost:3000/d-solo/ae1ylquoka5tsf/consumption?from=1719804999786&to=1720197364335&timezone=browser&refresh=5s&orgId=1&panelId=2&__feature.dashboardSceneSolo" width="450" height="350" frameborder="0"></iframe>
+        </div>
+        <div style={{ flex: '15%', border: '1px solid #ccc', padding: '10px' }}>
+          <iframe src="http://localhost:3000/d-solo/ae1ylquoka5tsf/consumption?from=1719804999786&to=1720197364335&timezone=browser&refresh=5s&orgId=1&panelId=3&__feature.dashboardSceneSolo" width="450" height="350" frameborder="0"></iframe>
+        </div>
+      </div>
+
+      {/* Second Part: 35-65 Ratio */}
+      <div style={{ display: 'flex', width: '100%', marginTop: '20px', height: '45%' }}>
+        <div style={{ flex: '15%', border: '1px solid #ccc', padding: '10px' }}>
+          <iframe src="http://localhost:3000/d-solo/ae1ylquoka5tsf/consumption?from=1719804999786&to=1720197364335&timezone=browser&refresh=5s&orgId=1&panelId=5&__feature.dashboardSceneSolo" width="450" height="350" frameborder="0"></iframe>
+        </div>
+        <div style={{ flex: '35%', border: '1px solid #ccc', padding: '10px' }}>
+          <iframe src="http://localhost:3000/d-solo/ae1ylquoka5tsf/consumption?from=1719804999786&to=1720197364335&timezone=browser&refresh=5s&orgId=1&panelId=4&__feature.dashboardSceneSolo" width="500" height="350" frameborder="0"></iframe>
+        </div>
+        <div style={{ flex: '50%', border: '1px solid #ccc', padding: '10px' }}>
+          <iframe src="http://localhost:3000/d-solo/ae1ylquoka5tsf/consumption?from=1719804999786&to=1720197364335&timezone=browser&refresh=5s&orgId=1&panelId=1&__feature.dashboardSceneSolo" width="680" height="350" frameborder="0"></iframe>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Home;
diff --git a/Frontend/assets/font/FoundersGrotesk-Semibold.ttf b/Frontend/assets/font/FoundersGrotesk-Semibold.ttf
diff --git a/Frontend/assets/font/NeueMontreal-Regular.ttf b/Frontend/assets/font/NeueMontreal-Regular.ttf
diff --git a/Frontend/assets/react.svg b/Frontend/assets/react.svg
diff --git a/Frontend/components/About.jsx b/Frontend/components/About.jsx
@@ -0,0 +1,17 @@
+import React from 'react'
+
+function About() {
+  return (
+    <div className='w-full rounded-tl-2xl rounded-tr-2xl bg-[#CDEA68] text-black text-6xl p-1 ' >
+       <div className='mt-20 pl-20 mr-20 mb-20'>
+       Ochi is a strategic presentation agency for forward-thinking businesses that need to raise funds, sell products, explain complex ideas, and hire great people.
+       </div>
+       <div className="border-t-2 border-zinc-800 flex "> </div>
+       <div className=''>
+        <h1>kri</h1>
+       </div>
+    </div>
+  )
+}
+
+export default About
diff --git a/Frontend/components/GrafanaDashboards.jsx b/Frontend/components/GrafanaDashboards.jsx
@@ -0,0 +1,39 @@
+// src/components/GrafanaDashboard.js
+import React, { useEffect, useState } from 'react';
+import { getDashboard } from '../services/grafanaService';
+
+const GrafanaDashboard = ({ dashboardId }) => {
+  const [dashboard, setDashboard] = useState(null);
+
+  useEffect(() => {
+    const fetchDashboard = async () => {
+      try {
+        const data = await getDashboard(dashboardId);
+        setDashboard(data);
+      } catch (error) {
+        console.error('Failed to fetch dashboard:', error);
+      }
+    };
+
+    fetchDashboard();
+  }, [dashboardId]);
+
+  if (!dashboard) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <h1>{dashboard.dashboard.title}</h1>
+      <iframe
+        src={`http://your-grafana-url/d/${dashboardId}`}
+        width="100%"
+        height="600"
+        frameBorder="0"
+        title={dashboard.dashboard.title}
+      ></iframe>
+    </div>
+  );
+};
+
+export default GrafanaDashboard;
diff --git a/Frontend/components/Huffer.jsx b/Frontend/components/Huffer.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+function Huffer() {
+  return (
+    <div className='rounded-tl-3xl rounded-tr-3xl w-full h-[50vh] py-10 bg-green-900 pt-20'>
+      <div className='text border-t-2 border-b-2 text-[10vw] overflow-hidden border-zinc-500 flex whitespace-nowrap font-bold gap-8 uppercase pt-5'>
+        <motion.h1
+          initial={{ x: "0" }}
+          animate={{ x: "-100%" }}
+          transition={{ duration: 10, repeat: Infinity, ease: "linear" }} // Adjust duration for speed
+          className=''
+        >
+          WE ARE OCHI
+        </motion.h1>
+        <motion.h1
+          initial={{ x: "100%" }} // Start from the right
+          animate={{ x: "0" }} // Move to the left
+          transition={{ duration: 10, repeat: Infinity, ease: "linear" }} // Same duration for continuous effect
+          className=''
+        >
+          WE ARE OCHI WE ARE OCHI
+        </motion.h1>
+        <motion.h1
+          initial={{ x: "100%" }} // Start from the right
+          animate={{ x: "0" }} // Move to the left
+          transition={{ duration: 10, repeat: Infinity, ease: "linear" }} // Same duration for continuous effect
+          className=''
+        >
+          WE ARE OCHI WE ARE OCHI
+        </motion.h1>
+      </div>
+    </div>
+  );
+}
+
+export default Huffer;