Socialify

Folder ..

Viewing index.html
135 lines (135 loc) • 5.1 KB

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Nineties Computing</title>
    <link rel="stylesheet" href="css/globals.css" />
    <link rel="stylesheet" href="css/fonts.css" />
    <link rel="stylesheet" href="css/colors.css" />
    <link rel="stylesheet" href="css/layouts.css" />
    <link rel="stylesheet" href="css/texttypes.css" />
  </head>
  <body>
    <!-- Welcome Section for Logging in -->
    <section id="welcome" class="fullscreen bg-skyblue">
      <div class="fullscreen_centered mediumbox bg-white padding_25">
        <div class="bordered_4px height_100-55 padding_25">
          <marquee class="welcome_heading" scrollamount="10"
            >Hello user! Looks like you don't have an account yet!</marquee
          >
          <h3 class="chicago center_text">
            Don't worry. We will help you with that!
          </h3>
          <p class="chicago justify_text">
            In order to create your account, you need to provide some
            information. All of this information is stored on your local
            computer is not transmitted anywhere. Please fill in all of the
            following fields mentioned below and then click the 'Create My
            Account' button. We are waiting for you to finish. :)
          </p>
          <input
            type="file"
            id="avatar-file-input"
            accept="image/x-png,image/gif,image/jpeg"
            style="display: none"
          />
          <div id="avatar-image-element" class="image_block"></div>
          <span id="avatar-text-element" class="image_block_description chicago"
            >Select your avatar...</span
          >
          <div class="form_elements chicago">
            <label for="fullname">Full Name</label>
            <input
              autocomplete="off"
              type="text"
              name="fullname"
              id="fullname"
              placeholder="Enter your full name"
            />
            <label for="password">Password</label>
            <input
              autocomplete="off"
              type="password"
              name="password"
              id="password"
              placeholder="Enter a new password"
            />
            <label for="confirmPassword">Confirm Password</label>
            <input
              autocomplete="off"
              type="password"
              name="confirmPassword"
              id="confirmPassword"
              placeholder="Confirm Password"
            />
            <p id="error" class="chicago text-red"></p>
            <button
              id="createNewAccount"
              class="btn bg-purple chicago text-white"
            >
              Create My Account
            </button>
          </div>
        </div>
      </div>
    </section>
    <section id="loginSelector" class="fullscreen bg-skyblue">
      <div class="fullscreen_centered mediumbox bg-white padding_25">
        <div class="bordered_4px height_100-55 padding_25">
          <h1 class="welcome_heading">Login to your account</h1>
          <div class="form_elements chicago">
            <label for="loginFullName">Full Name</label>
            <input
              autocomplete="off"
              type="text"
              name="loginFullName"
              id="loginFullName"
              placeholder="Enter your full name"
            />
            <label for="loginPassword">Password</label>
            <input
              autocomplete="off"
              type="password"
              name="loginPassword"
              id="loginPassword"
              placeholder="Enter a new password"
            />
            <p id="loginError" class="chicago text-red"></p>
            <button id="loginButton" class="btn bg-purple chicago text-white">
              Login
            </button>
          </div>
        </div>
      </div>
    </section>
    <section id="loadingDesktopExperience" class="fullscreen bg-skyblue">
      <div class="fullscreen_centered mediumbox bg-white padding_25">
        <div class="bordered_4px height_100-55 padding_25 chicago">
          <h1 style="margin-top: 0">Loading your desktop experience</h1>
          <div class="meter animate">
            <span id="meter-loader" style="width: 0%"><span></span></span>
          </div>
        </div>
      </div>
    </section>
    <section id="desktop" class="fullscreen bg-skyblue wallpaper">
      <div class="window non-resizable draggable">
        <header>
          <span class="title">Preferences</span>
          <div class="buttons">
            <span class="close" id="closePreferences">&times;</span>
          </div>
        </header>
        <div class="windowContents">
          <p>This window is draggrable within this tab. Try grabbing it from the header and dragging it anywhere you want.</p>
        </div>
      </div>
    </section>
    <!-- Scripts -->
    <script src="js/createAccount.js"></script>
    <script src="js/acountLogin.js"></script>
    <script src="js/draggability.js"></script>
    <script src="js/desktop.js"></script>
  </body>
</html>