Skip to content

needed fix: the broken sign in issue #5

@UserArham

Description

@UserArham

fix requiry: edit the code for some type of error or mostly I'd say sign-in

🟢 63% works like Google could function
🔴 37% causes error

Main cause: Sign In is needed to do extra features.

For more info, scroll to the second

The cause

Somehow when I manually enter the code without crumbs, on the try for the 2018 version (Sep 29, 2018), I somehow left some crumbs. The cause is that I cannot sign in to my account in my Google.

The proof

Image

The attempts I tried to sign in:

I tried 17 tries just to work of signing in but there is the cause: ChatGPT to edit my code since everyone is sleeping.

My code

Use with caution.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google</title>
<link href="/favicon.ico" rel="icon" type="image/x-icon">
<!-- Google Fonts: Roboto Light -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">

<style>
:root{
  --bg:#fff;--text:#222;--topbar-bg:#222;--topbar-text:#ccc;
  --border:#d9d9d9;--button-bg:#f5f5f5;--button-border:#dcdcdc;
  --footer-text:#666;--link:#6666cc;--modal-bg:#fff;--divider:#dadce0;
}
.dark{
  --bg:#0f0f0f;--text:#e8eaed;--topbar-bg:#1a1a1a;--topbar-text:#bdbdbd;
  --border:#3c4043;--button-bg:#2a2a2a;--button-border:#3c4043;
  --footer-text:#9aa0a6;--link:#8ab4f8;--modal-bg:#1c1c1c;--divider:#3c4043;
}

/* Apply Roboto Light font everywhere */
body{
  margin:0;font-family:'Roboto', sans-serif; /* Apply font globally */
  background:var(--bg);color:var(--text);text-align:center;
}

/* Top bar */
.topbar{
  background:var(--topbar-bg);color:var(--topbar-text);
  font-size:13px;padding:7px 15px 6px;
  display:flex;justify-content:space-between;align-items:center;
  position:fixed;top:0;width:100%;z-index:100;
}
.topbar-left a{
  color:var(--topbar-text);text-decoration:none;
  margin-right:12px;cursor:pointer;
}
.topbar-left a.active{font-weight:bold;color:white}

/* TOGGLE */
.theme-toggle{
  width:42px;height:22px;border-radius:20px;
  background:#555;cursor:pointer;position:relative;
}
.theme-toggle::before{
  content:"☀️";position:absolute;left:2px;top:2px;
  width:18px;height:18px;background:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:.35s;
}
.dark .theme-toggle{background:#1e3a8a}
.dark .theme-toggle::before{
  content:"🌙";transform:translateX(20px) rotate(360deg)
}

/* MAIN */
.container{margin-top:150px}
.logo-line{display:flex;justify-content:center;align-items:center;gap:18px;margin-bottom:24px}
.logo-line img{
  width: 190px; /* Increased logo width */
  max-width: 100%; /* Ensure logos scale appropriately */
  height: auto; /* Keep aspect ratio */
}

.logo-divider{width:2px;height:60px;background:var(--divider)}

.search-box{
  width:520px;height:26px;padding:0 8px;font-size:16px;
  border:1px solid var(--border);background:var(--bg);color:var(--text);
  font-family:'Roboto', sans-serif; /* Apply Roboto Light to the search box */
}
.search-box:focus{
  outline:none;border-color:#4d90fe;
  box-shadow:0 0 6px #4d90fe
}
.buttons{margin-top:20px}
button{
  font-size:13px;padding:6px 12px;margin:0 4px;
  border:1px solid var(--button-border);
  background:var(--button-bg);cursor:pointer;color:var(--text);
  font-family:'Roboto', sans-serif; /* Apply Roboto Light to the buttons */
}

/* VIDEO */
.video-container{
  margin-top:40px;display:flex;justify-content:center
}
.video-container video{
  width:560px;max-width:90%;border-radius:4px
}

/* FOOTER */
footer{
  margin-top:100px;font-size:12px;color:var(--footer-text);
  font-family:'Roboto', sans-serif; /* Apply Roboto Light to footer */
}
footer a{color:var(--link);text-decoration:none;margin:0 10px}

/* MODAL */
.modal{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.6);z-index:1000
}
.modal-content{
  display:none;background:var(--modal-bg);color:var(--text);
  margin:100px auto;padding:30px;width:360px;
  border-radius:2px
}
.modal-content.active{display:block}
.modal-content input{
  width:90%;padding:8px;margin:10px 0;
  background:var(--bg);color:var(--text);
  border:1px solid var(--border);
  font-family:'Roboto', sans-serif; /* Apply Roboto Light to modal inputs */
}

/* Notification Style for Chrome Download */
.notification {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #4285F4;
  color: white;
  padding: 15px 30px;
  border-radius: 5px;
  font-size: 16px;
  display: none;
  z-index: 1000;
  display: flex;
  align-items: center;
}

.notification img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.notification a {
  color: white;
  font-weight: bold;
  text-decoration: none;
  margin-left: 10px;
  text-decoration: underline;
}

.notification .close-btn {
  margin-left: 15px;
  font-size: 18px;
  cursor: pointer;
  color: white;
  font-weight: bold;
}

.notification.show {
  display: flex;
}

</style>
</head>

<body>

<!-- TOP BAR -->
<div class="topbar">
  <div class="topbar-left">
    <a class="active" href="https://www.google.com">Search</a> <!-- Redirect to actual Google -->
    <a href="https://www.google.com/imghp" target="_blank">Images</a>
    <a href="https://maps.google.com" target="_blank">Maps</a>
    <a href="https://play.google.com" target="_blank">Play</a>
    <a href="https://www.youtube.com" target="_blank">YouTube</a>
    <a href="https://news.google.com" target="_blank">News</a>
    <a href="https://photo.google.com/login" target="_blank">Photos</a>
    <a href="https://github.com/UserArham/Google-2015-Edition" target="_blank">Github Repo</a>
    <a href="https://google-plus-gone.vercel.app/" target="_blank">Google+</a>
    <a id="signinBtn">Sign In (sadly broken)</a>
  </div>
  <div id="themeToggle" class="theme-toggle"></div>
</div>

<!-- MAIN -->
<div class="container">

  <div class="logo-line">
    <img src="/google-logo.png">
    <div class="logo-divider"></div>
    <img src="/google-logo3.png">
    <div class="logo-divider"></div>
    <img src="/google-logo2.png">
    <div class="logo-divider"></div>
    <img src="/Google_logo_(1997-1999).jpg">
    <div class="logo-divider"></div>
    <img src="/Google-Logo-1997-1998.webp">
  </div>

  <!-- Updated form to redirect to Google search -->
  <form id="searchForm" action="https://www.google.com/search" method="get"> <!-- Redirect to actual Google search -->
    <input id="searchInput" class="search-box" placeholder="Search Google or type a URL" type="text" name="q">
  </form>

  <div class="buttons">
    <button id="searchBtn" onclick="document.getElementById('searchForm').submit();">Google Search</button> <!-- Submit the form to Google -->
    <button id="luckyBtn" onclick="document.getElementById('searchForm').submit();">I'm Feeling Lucky</button>
  </div>

  <div class="video-container">
    <video controls>
      <source src="/advertising.mp4" type="video/mp4">
    </video>
  </div>

</div>

<!-- FOOTER -->
<footer>
  <a href="https://ads.google.com" target="_blank">Advertising Programs</a>
  <a href="https://www.google.com/services/" target="_blank">Business Solutions</a>
  <a href="https://about.google/" target="_blank">About Google</a>
  <br>© 2018 Google, you are using Build 1117.
</footer>

<!-- Notification for Download Google Chrome -->
<div id="chromeNotification" class="notification">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Google_Chrome_icon_%28September_2014%29.svg/960px-Google_Chrome_icon_%28September_2014%29.svg.png" alt="Chrome logo">
  <span>Get a better browsing experience! <a href="https://www.google.com/chrome/" target="_blank">Download Google Chrome</a></span>
  
  <!-- SVG Close Button -->
  <svg id="closeBtn" xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="white" class="bi bi-x-circle close-btn" viewBox="0 0 16 16">
    <path d="M11.742 4.258a1 1 0 0 0-1.414 0L8 6.586 5.672 4.258a1 1 0 1 0-1.414 1.414L6.586 8 4.258 10.328a1 1 0 0 0 1.414 1.414L8 9.414l2.328 2.328a1 1 0 1 0 1.414-1.414L9.414 8l2.328-2.328a1 1 0 0 0 0-1.414z"/>
  </svg>
</div>

<script>
// Show notification after clicking search button or submitting the form
function showNotification() {
  document.getElementById('chromeNotification').classList.add('show');
  
  // Hide the notification after 10 seconds
  setTimeout(function() {
    document.getElementById('chromeNotification').classList.remove('show');
  }, 10000); // 10 seconds
}

// Attach event listener to close the notification when the close button is clicked
document.getElementById('closeBtn').addEventListener('click', function() {
  document.getElementById('chromeNotification').classList.remove('show');
});
</script>

</body>
</html>

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workinginvalidThis doesn't seem rightwontfixThis will not be worked on

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions